Toolbar button hover feedback is barely visible on dark backgrounds

VERIFIED FIXED in Firefox 55

Status

()

defect
P1
normal
VERIFIED FIXED
2 years ago
2 years ago

People

(Reporter: dao, Assigned: dao)

Tracking

Trunk
Firefox 55
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox55 fixed, firefox57 verified)

Details

(Whiteboard: [photon-visual][p1][57])

Attachments

(1 attachment)

Assignee

Description

2 years ago
I see this on Ubuntu where the tab bar is dark. Affects lightweight themes too. This needs adjustments for toolbar[brighttext].
Flags: qe-verify?
Priority: -- → P2
Whiteboard: [photon-visual][p1][57][triage] → [photon-visual][p1][57]
Flags: qe-verify? → qe-verify+
QA Contact: brindusa.tot
Comment hidden (mozreview-request)
Assignee

Updated

2 years ago
Assignee: nobody → dao+bmo
Status: NEW → ASSIGNED
Iteration: --- → 55.7 - Jun 12
Priority: P2 → P1

Comment 2

2 years ago
mozreview-review
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?
Attachment #8873374 - Flags: review?(nhnt11)
Comment hidden (mozreview-request)
Assignee

Comment 4

2 years ago
(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 hidden (mozreview-request)
Assignee

Updated

2 years ago
Attachment #8873374 - Flags: review?(nhnt11) → review?(jhofmann)

Comment 6

2 years ago
mozreview-review
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!
Attachment #8873374 - Flags: review?(nhnt11) → review+
Assignee

Comment 7

2 years ago
mozreview-review
Comment on attachment 8873374 [details]
Bug 1367047 - Make toolbar button backgrounds more visible on dark toolbars.

https://reviewboard.mozilla.org/r/144814/#review151798
Attachment #8873374 - Flags: review+
Assignee

Updated

2 years ago
Attachment #8873374 - Flags: review+

Comment 8

2 years ago
Pushed by dgottwald@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/38edb8755b92
Make toolbar button backgrounds more visible on dark toolbars. r=nhnt11

Comment 9

2 years ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/38edb8755b92
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 55
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.
Status: RESOLVED → VERIFIED
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.