1367047 - Toolbar button hover feedback is barely visible on dark backgrounds

Status: VERIFIED FIXED

(Firefox :: Theme, defect, P1)

Description

[Dão Gottwald [:dao]]

I see this on Ubuntu where the tab bar is dark. Affects lightweight themes too. This needs adjustments for toolbar[brighttext].

Comment 1

[Dão Gottwald [:dao]]

Attachment: Bug 1367047 - Make toolbar button backgrounds more visible on dark toolbars.

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

Comment 2

[(inactive) Nihanth Subramanya [:nhnt11]]

Comment on attachment 8873374 [details]
Bug 1367047 - Make toolbar button backgrounds more visible on dark toolbars.

https://reviewboard.mozilla.org/r/144814/#review148880

The back button styling seems off in the dark compact theme (at least on macOS). The background-{origin,clip} rules are getting overridden because the hover styling is setting `background: bla;` instead of background-color.

Also, seems like the spec has a lighter background on hover and even lighter on active for the back button. (https://people-mozilla.org/~shorlander/projects/photon/Mockups/macOS.html)

Additionally, active state feedback for the other toolbar buttons is too similar to the hover state, want to fix that in this bug as well?

::: browser/themes/windows/browser.css:67
(Diff revision 1)
>    :root {
>      --panel-separator-color: hsla(210,4%,10%,.14);
>    }
>  }
>  
> +%ifdef MOZ_PHOTON_THEME

Aren't these old styles? Did you mean to %ifndef?

Comment 3

[Dão Gottwald [:dao]]

Comment on attachment 8873374 [details]
Bug 1367047 - Make toolbar button backgrounds more visible on dark toolbars.

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

Comment 4

[Dão Gottwald [:dao]]

(In reply to Nihanth Subramanya [:nhnt11] from comment #2)
> Additionally, active state feedback for the other toolbar buttons is too
> similar to the hover state, want to fix that in this bug as well?

Not sure what you mean here. I've tweaked the colors a bit, is it better now? FWIW, I'm using more opacity than in the "Dark" mockup since the background colors used there are too subtle to be visible enough on noisy lightweight theme backgrounds.

Comment 5

[Dão Gottwald [:dao]]

Comment on attachment 8873374 [details]
Bug 1367047 - Make toolbar button backgrounds more visible on dark toolbars.

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

Comment 6

[(inactive) Nihanth Subramanya [:nhnt11]]

Comment on attachment 8873374 [details]
Bug 1367047 - Make toolbar button backgrounds more visible on dark toolbars.

https://reviewboard.mozilla.org/r/144814/#review151796

Looks good, thanks!

Comment 7

[Dão Gottwald [:dao]]

Comment on attachment 8873374 [details]
Bug 1367047 - Make toolbar button backgrounds more visible on dark toolbars.

https://reviewboard.mozilla.org/r/144814/#review151798

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/38edb8755b92
Make toolbar button backgrounds more visible on dark toolbars. r=nhnt11

Comment 9

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/38edb8755b92

Comment 10

[Johann Hofmann [:johannh]]

It's probably interesting to take a look at before and after on all platforms in mozscreenshots:

https://screenshots.mattn.ca/compare/?oldProject=mozilla-central&oldRev=2d20b365eee19434657f6b365d310e8b70904d2b&newProject=mozilla-central&newRev=d0e38542a05b17dd87586281b5d324112d38f6ca

Unfortunately OSX screenshots is still blocked on bug 1369425.

Comment 11

[ovidiu boca[:Ovidiu]]

I tested this issue on Ubuntu 16.04 x64, Windows 10 x64, Windows 7 x32 and Windows 8 x64 with FF Nightly 57.0a1(2017-08-07) and everything works as expected. 

Note: On Windows 7 the back button has a square shape and on all other OSes the back button has a round shape.