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

Status: VERIFIED FIXED

(Firefox :: Theme, defect, P1)

Description

[(inactive) Nihanth Subramanya [:nhnt11]]

Attachment: Screenshot

Comment 1

[Dão Gottwald [:dao]]

It looks like the button is both active and disabled?

Comment 2

[:Gijs (he/him)]

I suspect this is a regression from bug 1388180.

Comment 4

[:Gijs (he/him)]

In fact, why is the colour of the icon not white? That would make this work...

Comment 5

[Aaron Benson]

Agree with Gijs. It should look very similar, if not exactly like, the Back button.

Comment 6

[Dão Gottwald [:dao]]

(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);
}

Comment 7

[:Gijs (he/him)]

Attachment: Bug 1402311 - use fill-opacity instead of hardcoded fill colour for disabled overflow button in customize mode,

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

Comment 8

[:Gijs (he/him)]

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 9

[Dão Gottwald [:dao]]

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 10

[:Gijs (he/him)]

Comment on attachment 8912233 [details]
Bug 1402311 - use fill-opacity instead of hardcoded fill colour for disabled overflow button in customize mode,

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

Comment 11

[Dão Gottwald [:dao]]

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

Comment 12

[Pulsebot]

Pushed by [e-mail]:
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

Comment 13

[Phil Ringnalda (:philor)]

https://hg.mozilla.org/mozilla-central/rev/69dfc35d912d

Comment 14

[:Gijs (he/him)]

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

Comment 15

[Sylvestre Ledru [:Sylvestre]]

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

Comment 16

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-beta/rev/1c3b6791f943

Comment 17

[u554753]

Verified with Windows 10 64bit, Mac OS X 10.11, Ubuntu 16.04 64bit using Nightly 58.0a1 (2017-10-03) (64-bit)

Comment 18

[Emil Ghitta, QA [:emilghitta]]

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.