1694526 - Update macOS default theme & Proton Dark theme titlebar colors

Status: RESOLVED FIXED

(Firefox :: Theme, task, P1)

Description

[Markus Stange [:mstange]]

This is a placeholder bug so that we don't forget about this once the Proton toolbar background colors are known.

At the moment, the tabs toolbar (titlebar) has the following background colors:

• With Firefox theme "Default":
  • When using macOS Light Mode: Dark, with behind-window vibrancy
  • When using macOS Dark Mode: Very dark gray, no vibrancy
• With Firefox theme "Light": Light, with behind-window vibrancy
• With Firefox theme "Dark": Very dark gray, no vibrancy

The Proton mock-ups I've seen all have a light gray tab bar, so I'm assuming that the "default to dark titlebar despite macOS Light Mode" behavior will go away.
It would also be nice to simplify the logic above to:

• "Default" Firefox theme + macOS Light Mode == "Light" Firefox theme: Light titlebar
• "Default" Firefox theme + macOS Dark Mode == "Dark" Firefox theme: Dark titlebar

I also think it may be a good idea to revisit the use of behind-window vibrancy, to align better with native macOS apps. On macOS, there are different things you can do with a rectangle in the window:

• Behind-window vibrancy: Native apps use this for sidebars and for menus and arrow panels. A blurred version of the content from behind the window is visible, with varying amounts of the desktop background image mixed in.
• Within-window vibrancy: Used by the toolbar in some macOS apps. Shows a blurred version of scrolled content from the content area in the same window. Sometimes noticeable as a flicker in the toolbar during scrolling.
• Desktop Tinting (new in macOS Big Sur): Not a transparency effect. Applied to toolbars and gray window backgrounds, and also to the vibrancy effects above. Tints the background color with colors from the desktop background image. Can be disabled in the macOS System Preferences.

I think we should use Desktop Tinting for the tabs toolbar on Big Sur. I don't have an opinion on what to use pre-Big Sur; Desktop Tinting is not available and within-window vibrancy would require more platform work that is out of scope for Proton. So we could either keep using behind-window vibrancy there or switch to a fully opaque solid color or gradient.

Comment 1

[Aaron Benson]

The logic changes re: the theming you're describing are spot on! I do question the need for the title bar at all going forward. What purpose is that serving and what would the risks be for getting rid of it. Certainly not in scope for 89, but it would be helpful for me to understand.

The trouble I have right now is applying vibrancy to the tab strip and not the toolbar. I'm a bit worried that creates too much of a muddy and disconnected feeling between the tab strip / toolbar. Unfortunately, I don't have tools to apply vibrancy to a test window and determine if we need to make adjustments to color/shadows/etc. Given the time available, I think we should align the tab strip / toolbar areas to the spec for 89 and consider a working session (post-89) to apply vibrancy and make sure it has the right values and there isn't fallout in the surrounding elements.

Comment 2

[Markus Stange [:mstange]]

I think it's a good idea to apply the same background to the titlebar and the toolbar.

When you say "align to spec", does that mean no vibrancy at all, on all versions of macOS? I'm fine with that for 89.

Comment 3

[Aaron Benson]

(In reply to Markus Stange [:mstange] from comment #2)

I think it's a good idea to apply the same background to the titlebar and the toolbar.

When you say "align to spec", does that mean no vibrancy at all, on all versions of macOS? I'm fine with that for 89.

Yep!

Comment 4

[Tim Nguyen :ntim]

Attachment: Bug 1694526 - Update macOS default theme & Proton Dark theme titlebar colors. r=harry

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/45f8084703df
Update macOS default theme & Proton Dark theme titlebar colors. r=harry

Comment 6

[Tim Nguyen :ntim]

Attachment: Bug 1694526 - Followup: fix inactive window titlebar background for non-proton themes.

Comment 7

[Phabricator Automation]

Comment on attachment 9207877 [details]
Bug 1694526 - Followup: fix inactive window titlebar background for non-proton themes.

Revision D107707 was moved to bug 1697277. Setting attachment 9207877 [details] to obsolete.

Comment 8

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/45f8084703df