Closed Bug 1402311 Opened 2 years ago Closed 2 years ago

Overflow panel button icon is barely visible in customize mode when the dark theme is enabled

Categories

(Firefox :: Theme, defect, P1)

defect

Tracking

()

VERIFIED FIXED
Firefox 58
Tracking Status
firefox-esr52 --- unaffected
firefox55 --- unaffected
firefox56 --- unaffected
firefox57 --- verified
firefox58 --- verified

People

(Reporter: nhnt11, Assigned: Gijs)

References

(Blocks 1 open bug)

Details

(Keywords: regression, Whiteboard: [reserve-photon-structure])

Attachments

(2 files)

Attached image Screenshot
No description provided.
It looks like the button is both active and disabled?
Whiteboard: [photon-visual][triage] → [photon-structure][photon-visual][triage]
I suspect this is a regression from bug 1388180.
Blocks: 1388180
Duplicate of this bug: 1402984
In fact, why is the colour of the icon not white? That would make this work...
Flags: needinfo?(nhnt11)
Agree with Gijs. It should look very similar, if not exactly like, the Back button.
(In reply to :Gijs from comment #2)
> I suspect this is a regression from bug 1388180.

Yep, that patch added this:

/* The overflow button icon _looks_ disabled, but is also shown as [open]. */
#nav-bar[customizing] > .overflow-button {
  /* This color is the hard-coded #4c4c4c at 40% opacity as found in toolbarbutton-icons.inc.css */
  fill: hsla(0,0%,30%,.4);
}
Whiteboard: [photon-structure][photon-visual][triage] → [photon-structure][triage]
Assignee: nobody → gijskruitbosch+bugs
Blocks: 1387512
Status: NEW → ASSIGNED
Flags: qe-verify+
Keywords: regression
Priority: -- → P1
QA Contact: gwimberly
Whiteboard: [photon-structure][triage] → [reserve-photon-structure]
Flags: needinfo?(nhnt11)
Comment on attachment 8912233 [details]
Bug 1402311 - use fill-opacity instead of hardcoded fill colour for disabled overflow button in customize mode,

https://reviewboard.mozilla.org/r/183604/#review188778

::: browser/themes/shared/customizableui/customizeMode.inc.css:452
(Diff revision 1)
> -}
> -
>  #nav-bar[customizing] > .overflow-button > .toolbarbutton-icon {
>    background-color: var(--toolbarbutton-active-background);
>    opacity: 1;
> +  fill-opacity: 0.4;

FWIW, to me this looks darker ("more enabled") than the previous colour in the default theme on OS X, but making it lighter ("more disabled"/ more grey / less opaque) quickly makes it invisible on e.g. space fantasy, the dark-ish lwtheme we ship. So I kept 0.4.
Comment on attachment 8912233 [details]
Bug 1402311 - use fill-opacity instead of hardcoded fill colour for disabled overflow button in customize mode,

https://reviewboard.mozilla.org/r/183604/#review189116

::: browser/themes/shared/customizableui/customizeMode.inc.css
(Diff revision 1)
>    position: relative;
>    height: 10px;
>    margin-bottom: -1px;
>  }
>  
> -/* The overflow button icon _looks_ disabled, but is also shown as [open]. */

Can you keep this comment or some variation of it?
Comment on attachment 8912233 [details]
Bug 1402311 - use fill-opacity instead of hardcoded fill colour for disabled overflow button in customize mode,

https://reviewboard.mozilla.org/r/183604/#review189124
Attachment #8912233 - Flags: review+
Pushed by gijskruitbosch@gmail.com:
https://hg.mozilla.org/integration/autoland/rev/69dfc35d912d
use fill-opacity instead of hardcoded fill colour for disabled overflow button in customize mode, r=dao
Attachment #8912233 - Flags: review?(mdeboer)
https://hg.mozilla.org/mozilla-central/rev/69dfc35d912d
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 58
Comment on attachment 8912233 [details]
Bug 1402311 - use fill-opacity instead of hardcoded fill colour for disabled overflow button in customize mode,

Approval Request Comment
[Feature/Bug causing the regression]: bug 1388180
[User impact if declined]: confusing unreadable button in customize mode
[Is this code covered by automated tests?]: nope, styling only
[Has the fix been verified in Nightly?]: not yet
[Needs manual test from QE? If yes, steps to reproduce]: trivial:
1. open customize mode
2. select dark theme
3. look at overflow button. Should be able to see the ">>" icon on the button.
[List of other uplifts needed for the feature/fix]: n/a
[Is the change risky?]: no
[Why is the change risky/not risky?]: tiny style change
[String changes made/needed]: nope
Attachment #8912233 - Flags: approval-mozilla-beta?
Comment on attachment 8912233 [details]
Bug 1402311 - use fill-opacity instead of hardcoded fill colour for disabled overflow button in customize mode,

Fix a recent regression, taking it.
Should be in 57b4
Attachment #8912233 - Flags: approval-mozilla-beta? → approval-mozilla-beta+
Verified with Windows 10 64bit, Mac OS X 10.11, Ubuntu 16.04 64bit using Nightly 58.0a1 (2017-10-03) (64-bit)
I have reproduced the issue mentioned in comment 14 using an affected Firefox 58.0a1 build (BuildId:20170922220129).

I have verified that the issue is not reproducible using Firefox 57.0b7 (Build Id:20171009192146) on Windows 10 64bit, macOS 10.11.6 and Ubuntu 16.04 64bit.
Status: RESOLVED → VERIFIED
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.