bugzilla.mozilla.org has resumed normal operation. Attachments prior to 2014 will be unavailable for a few days. This is tracked in Bug 1475801.
Please report any other irregularities here.

Toolbar button hover feedback is barely visible on dark backgrounds

VERIFIED FIXED in Firefox 55

Status

()

Firefox
Theme
P1
normal
VERIFIED FIXED
a year ago
11 months ago

People

(Reporter: dao, Assigned: dao)

Tracking

Trunk
Firefox 55
Points:
---

Firefox Tracking Flags

(firefox55 fixed, firefox57 verified)

Details

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

MozReview Requests

()

Submitter Diff Changes Open Issues Last Updated
Loading...
Error loading review requests:

Attachments

(1 attachment)

(Assignee)

Description

a year 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

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

Comment 2

a year 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

a year 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

a year ago
Attachment #8873374 - Flags: review?(nhnt11) → review?(jhofmann)
Attachment #8873374 - Flags: review?(jhofmann)
Attachment #8873374 - Flags: review?(nhnt11)

Comment 6

a year 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

a year 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

a year ago
Attachment #8873374 - Flags: review+

Comment 8

a year 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

a year ago
bugherder
https://hg.mozilla.org/mozilla-central/rev/38edb8755b92
Status: ASSIGNED → RESOLVED
Last Resolved: a year ago
status-firefox55: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 55
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

11 months ago
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
status-firefox57: --- → verified

Updated

11 months ago
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.