1451947 - Tweak dark theme popup styles

Status: RESOLVED FIXED

(Firefox :: Theme, defect)

Description

[Tim Nguyen :ntim]

This is common criticism about the themed panels: Plain black is not pleasant to the eye.

Comment 1

[Tim Nguyen :ntim]

Stephen, can we opt for a lighter black/gray? If so, which color should we use?

Note that we can also color the border if needed.

Comment 2

[Stephen Horlander [:shorlander]]

Yes! Besides being a little harsh, using a darker color for overlays breaks the visual z-ordering we created by going from lighter to darker  (e.g. URL Bar --> tabs / toolbars --> window)

Here is a spec that goes from light to dark:
https://mozilla.invisionapp.com/share/J6GQCZR2PZY#/289803032_Desktop_Common

Colors pulled from the Design System color palette:
https://design.firefox.com/photon/visuals/color.html#dark-theme

Comment 3

[Tim Nguyen :ntim]

Attachment: Bug 1451947 - Tweak dark theme popup styles.

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

Comment 4

[Code Review Bot [:reviewbot]]

Comment on attachment 8965883 [details]
Bug 1451947 - Tweak dark theme popup styles.

https://reviewboard.mozilla.org/r/234706/#review240376


Code analysis found 1 defect in this patch:
 - 1 defect found by mozlint

You can run this analysis locally with:
 - `./mach lint path/to/file` (JS/Python)


If you see a problem in this automated review, please report it here: http://bit.ly/2y9N9Vx


::: toolkit/components/extensions/parent/ext-theme.js:99
(Diff revision 1)
>          defaultTheme = this;
>        }
>        onUpdatedEmitter.emit("theme-updated", this.details, this.windowId);
>  
>        LightweightThemeManager.fallbackThemeData = this.lwtStyles;
> +      //LightweightThemeManager.currentTheme = null;

Error: Expected space or tab after '//' in comment. [eslint: spaced-comment]

Comment 5

[Tim Nguyen :ntim]

Comment on attachment 8965883 [details]
Bug 1451947 - Tweak dark theme popup styles.

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

Comment 6

[Jared Wein [:jaws] (please needinfo? me)]

Comment on attachment 8965883 [details]
Bug 1451947 - Tweak dark theme popup styles.

https://reviewboard.mozilla.org/r/234706/#review240392

Comment 7

[Jared Wein [:jaws] (please needinfo? me)]

Comment on attachment 8965883 [details]
Bug 1451947 - Tweak dark theme popup styles.

https://reviewboard.mozilla.org/r/234706/#review240394

The shortcuts aren't readable with these colors. -arrowpanel-dimmed-even-further looks best if we use it at https://searchfox.org/mozilla-central/rev/2ce99e8054b0ff6ed1adf484aeaacacf2fea084c/browser/themes/shared/customizableui/panelUI.inc.css#1015 instead of --arrowpanel-dimmed

Comment 8

[Jared Wein [:jaws] (please needinfo? me)]

(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #7)
> The shortcuts aren't readable with these colors _when hovered_*

Comment 9

[Tim Nguyen :ntim]

(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #7)
> Comment on attachment 8965883 [details]
> Bug 1451947 - Tweak dark theme popup styles.
> 
> https://reviewboard.mozilla.org/r/234706/#review240394
> 
> The shortcuts aren't readable with these colors.
> -arrowpanel-dimmed-even-further looks best if we use it at
> https://searchfox.org/mozilla-central/rev/
> 2ce99e8054b0ff6ed1adf484aeaacacf2fea084c/browser/themes/shared/
> customizableui/panelUI.inc.css#1015 instead of --arrowpanel-dimmed

That's bug 1451944.

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/93ad00eae574
Tweak dark theme popup styles. r=jaws

Comment 11

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/93ad00eae574