Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prevent tooltip popover flicker upon mouseover #3211

Merged
merged 1 commit into from
Nov 12, 2019

Conversation

stejbac
Copy link
Contributor

@stejbac stejbac commented Sep 5, 2019

Provide a wrapper for PopOver components used as tooltips, to debounce
the 'MouseEntered' and 'MouseExited' events used to show/hide it, in
order to prevent it flickering open/closed in a loop.

This is intended to fix #3016.

NOTE: I have tested the change on Windows 10, athough I couldn't fully reproduce the issue there, namely the latter-mentioned eye-icon popover flicker (so it's possible other platforms would behave differently). I haven't tested the fix on other platforms.

@battleofwizards
Copy link
Contributor

battleofwizards commented Sep 5, 2019

Thanks a lot for attempting to fix this!

Debouncing sounds more like a last resort hack if we fail to find better solution.

Have you managed to identify the root cause?

One plausible root cause was provided by @fresheneesz:

Most times when I've seen behavior like this, its because the opening of the dialog changes the state that causes the dialog to close, which changes the state causing the dialog to open again. For example, if you have a dialog open under where the mouse is, the mouse may not be recognized as hovering over the "i" element anymore, causing the dialog to close, which causes the mouse to be recognized as hovering over the "i" element again, causing the dialog to open... etc etc.

@stejbac
Copy link
Contributor Author

stejbac commented Sep 6, 2019

It's definitely not a simple case of the popover appearing underneath the mouse, as exactly the same oscillation occurs if the popover is moved well out of the way of the mouse, e.g. changing the line:

        popover.show(currentIcon, -17);

to
popover.show(currentIcon, -170);

On the other hand, commenting out just the lines showing/hiding the popover does suppress the oscillation (of the MOUSE_ENTERED, MOUSE_EXITED events), indicating that it is the display of the popover itself and not e.g. the greying out of the 'i' icon which triggers a MOUSE_EXITED event.

If the mouse entry & exit events are logged, a rapid succession of repeating lines like the following occurs:

MOUSE ENTERED: MouseEvent [source = Label@7bc7e148[styleClass=label awesome icon info]'?', target = Label@7bc7e148[styleClass=label awesome icon info]'?', eventType = MOUSE_ENTERED, consumed = false, x = 13.0, y = 11.0, z = 0.0, button = NONE, pickResult = PickResult [node = Text[text="?", x=0.0, y=0.0, alignment=LEFT, origin=BASELINE, boundsType=LOGICAL_VERTICAL_CENTER, font=Font[name=FontAwesome Regular, family=FontAwesome, style=Regular, size=16.0], fontSmoothingType=LCD, fill=0x25b135ff], point = Point3D [x = 13.0, y = -5.0, z = 0.0], distance = 1324.8780366869516]
MOUSE EXITED: MouseEvent [source = Label@7bc7e148[styleClass=label awesome icon info]'?', target = Label@7bc7e148[styleClass=label awesome icon info]'?', eventType = MOUSE_EXITED, consumed = false, x = 13.0, y = 11.0, z = 0.0, button = NONE, pickResult = PickResult [node = Text[text="?", x=0.0, y=0.0, alignment=LEFT, origin=BASELINE, boundsType=LOGICAL_VERTICAL_CENTER, font=Font[name=FontAwesome Regular, family=FontAwesome, style=Regular, size=16.0], fontSmoothingType=LCD, fill=0x25b135ff], point = Point3D [x = 13.0, y = -5.0, z = 0.0], distance = 1324.8780366869516]

Even when there is no movement of the mouse, the oscillation can still occur, although it seems to stop by itself after a few seconds.

I believe what is happening is that the initial display of the popover sometimes causes a brief flicker of the mouse cursor (at least on Windows), as it changes from a hand to an arrow (the wrong shape) and then sometimes back to a hand again. This causes a pair of MOUSE_EXITED and MOUSE_ENTERED events to trigger in rapid succession (even though the mouse hasn't moved). I'm not yet sure why calling PopOver.show(..) would have this effect on the mouse - perhaps it's a problem with the underlying library.

@ripcurlx
Copy link
Contributor

ripcurlx commented Sep 9, 2019

@stejbac I'll review this PR soon. Just have to focus on the upcoming release right now.

@ripcurlx
Copy link
Contributor

@stejbac Could you please resolve the conflicts with the master branch and I'm happy to review your PR now.

@stejbac
Copy link
Contributor Author

stejbac commented Sep 20, 2019

I won't have access to a PC for a week, but will rebase the changes as soon as I do.

@stejbac stejbac force-pushed the fix-info-pane-flicker branch from a2c1244 to 6b0a515 Compare September 29, 2019 03:43
@stejbac
Copy link
Contributor Author

stejbac commented Sep 29, 2019

I've rebased onto master. (The conflicts were due to the change in the package of PopOver after embedding it into the project from the removed controlsfx dependency.)

Provide a wrapper for PopOver components used as tooltips, to debounce
the 'MouseEntered' and 'MouseExited' events used to show/hide it, in
order to prevent it flickering open/closed in a loop. This fixes bisq-network#3016.

To this end, use a ..->HIDDEN->SHOWING->SHOWN->HIDING->.. state field,
together with a target visibility boolean field, where the transition
between HIDDEN and SHOWN incurs a small fixed delay.
@stejbac stejbac force-pushed the fix-info-pane-flicker branch from 6b0a515 to dd56b3a Compare November 9, 2019 16:59
@stejbac
Copy link
Contributor Author

stejbac commented Nov 9, 2019

I've rebased again onto master to resolve conflicts (and amended the commit to include a GPG signature).

@ripcurlx
Copy link
Contributor

@stejbac Just a heads up that I'll start now with my review.

Copy link
Contributor

@ripcurlx ripcurlx left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ACK - @stejbac I wasn't able to reproduce this on macOS before or after the fix. As it is adding an additional layer of security to prevent this kind of flickering on some OSes I'm fine with the changes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

"Funds needed" info button freaks out
3 participants