1414693 - Find bar buttons lack hover feedback when using a dark lightweight theme

Status: VERIFIED FIXED

(Firefox :: Theme, defect, P2)

Description

[newheulf]

Attachment: Compare_Theme.png

User Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20171102181127

Steps to reproduce:

- Install or preview a personas theme. (https://addons.mozilla.org/en-US/firefox/addon/just-black/)
- Open find toolbar (Ctrl + F)
- Play with "Highlight All", "Match Case" and "Whole Words" buttons.


Actual results:

These three buttons are displayed as plain text.


Expected results:

Different styles should be used to display whether the button is hovered over or selected. (As with the default style and old versions of firefox)

Comment 1

[YF (Yang)]

https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=98e8ee4d55ddf9ffecc2e40b4ef7fe3a8220ab3a&tochange=40df319376b8b788ce75435c17117a0134a447f8

Comment 2

[quality+bugzilla]

It's not only hover animation that is not working.  The indication that any of those buttons ("Highlight All", "Match Case" and "Whole Words") are selected is too minimal to be perceivable.  This is an accessibility issue.

Comment 3

[Mike Taylor [:miketaylr]]

Hey Mike, is there a student project looking at bugs like this?

Comment 4

[Mike Conley (:mconley) (:⚙️)]

(In reply to Mike Taylor [:miketaylr] (58 Regression Engineering Owner) from comment #3)
> Hey Mike, is there a student project looking at bugs like this?

Yes, there is! jaws and I are mentoring them, and we've added this bug to the backlog.

Comment 5

[Mike Taylor [:miketaylr]]

Thanks!

Comment 6

[Bogdan Pozderca [:bogdan]]

Attachment: Bug 1414693 - Find bar buttons lack hover feedback when using a dark lightweight theme

Review commit: https://reviewboard.mozilla.org/r/227572/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/227572/

Comment 7

[Jared Wein [:jaws] (please needinfo? me)]

Comment on attachment 8958652 [details]
Bug 1414693 - Find bar buttons lack hover feedback when using a dark lightweight theme

https://reviewboard.mozilla.org/r/227572/#review233562

Comment 9

[LorenAmelang]

I just spent hours struggling with this, as logged in bug https://bugzilla.mozilla.org/show_bug.cgi?id=1447459. 

I was using a dark theme - Black by MaDonna - which avoids visual interference when I use Tranquility to reverse text to white-on-black. (My vision is lousy!) I've now returned to the Default theme for testing. My issue is not about hover feedback - there is no hovering feedback when I'm using my Surface Book via touch. I see that there is hover feedback when using a mouse or pen and the Default theme. 

My issue is about feedback that the options are selected or not. With the dark theme there is no change at all, ever. With the Default theme, the option background turns darker when first selected, but only _very slightly_ darker than the hover highlight. When then un-selected via touch, the hover highlight remains from the touch, making it almost impossible to tell if you succeeded in turning the option off. Surprisingly, touching somewhere else does NOT remove this stuck hover highlight! Only moving a mouse (or pen in hover range) will turn off the highlight. 

There is hover feedback when using the Surface Pen. But like with touch, hover feedback sticks on if the pen is lifted rather than being slid sideways within hover range. 

But all that is trivial aesthetics compared to my confusion when there was no indication of options on or off! Maybe "dark lightweight themes" should come with a warning? Is there any way to totally reverse the interface outside the content window, like Tranquility can reverse the content? I only resorted to themes because it seemed the only way to hide all that white. And even then they don't reverse the main scrollbar - it remains white. 

Is there some way to identify themes that do not defeat this highlighting? "NON-lightweight"?

Sorry to seem picky, but when your vision gets bad enough that white-on-black enlarged text on a screen is the only way you can comfortably read, such little things matter a lot!

Comment 10

[Dão Gottwald [:dao]]

Comment on attachment 8958652 [details]
Bug 1414693 - Find bar buttons lack hover feedback when using a dark lightweight theme

https://reviewboard.mozilla.org/r/227572/#review236708

::: browser/themes/shared/toolbarbuttons.inc.css:47
(Diff revision 1)
>  }
>  
>  :root:-moz-lwtheme-brighttext,
>  toolbar[brighttext] {
> -  --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, hsla(0,0%,100%,.2));
> -  --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, hsla(0,0%,100%,.3));
> +  --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, hsla(0,0%,70%,.4));
> +  --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, hsla(0,0%,70%,.5));

As far as I can tell, the alpha value should be .6 to match the previous hover/active ratio and match the --toolbarbutton-active-background default.

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/mozilla-inbound/rev/d91b03764f78
Fix findbar buttons hover feedback when using a dark lightweight theme. r=jaws, dao

Comment 12

[Eliza Balazs [:ebalazs_]]

https://hg.mozilla.org/mozilla-central/rev/d91b03764f78

Comment 13

[Ryan VanderMeulen [:RyanVM]]

Please nominate this for Beta approval when you get a chance.

Comment 14

[Bogdan Pozderca [:bogdan]]

Comment on attachment 8958652 [details]
Bug 1414693 - Find bar buttons lack hover feedback when using a dark lightweight theme

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/227572/diff/1-2/

Comment 15

[Mike Conley (:mconley) (:⚙️)]

Comment on attachment 8958652 [details]
Bug 1414693 - Find bar buttons lack hover feedback when using a dark lightweight theme

Approval Request Comment
[Feature/Bug causing the regression]:

Bug 1387762

[User impact if declined]:

Users with dark lightweight themes will not get visible feedback when hovering buttons in the Find bar

[Is this code covered by automated tests?]:

No.

[Has the fix been verified in Nightly?]:

No.

[Needs manual test from QE? If yes, steps to reproduce]: 

Yeah, it probably wouldn't hurt. STR are in comment 0.

[List of other uplifts needed for the feature/fix]:

None.

[Is the change risky?]:

No.

[Why is the change risky/not risky?]:

Theme tweak only.

[String changes made/needed]:

None.

Comment 16

[Julien Cristau [:jcristau]]

Comment on attachment 8958652 [details]
Bug 1414693 - Find bar buttons lack hover feedback when using a dark lightweight theme

css/theme fix, approved for 60.0b10

Comment 17

[Eliza Balazs [:ebalazs_]]

https://hg.mozilla.org/releases/mozilla-beta/rev/02c4132c8e08

Comment 18

[Anca Soncutean, Desktop QA]

I reproduced this issue, based on the steps from comment 0, on Firefox 57.0 (20171106194249) under Windows 10 x64.
The issue is fixed on Firefox 60.0b10 (20180404171943) and Firefox 61.0a1 (2018-04-04) under Windows 10 x64, Ubuntu 16.04 x32 and macOS 10.13.