1923306 - Unfocused address bar no longer has contrasting background color since becoming part of the titlebar with vertical tabs

Status: VERIFIED FIXED

(Firefox :: Sidebar, defect, P2)

Description

[Kestrel]

Attachment: Address bar without contrast in titlebar

STR:

1. Start with sidebar.verticalTabs = true and sidebar.revamp = true.
2. Enable the Light theme.
3. Unfocus the address bar.

Expected:
Address bar has a different background color to the titlebar when unfocused.

Actual:
Address bar blends into titlebar.

Affects Windows 11 System/Light/Dark themes and Ubuntu 24.04 Light/Dark themes but not System theme.

Regression window:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=b17f4d3142eeb0488513b984c8f5113e80101b96&tochange=82dacb5e3821fc0081deed13bd932839d65867e0

Regressed by Bug 1899598.

Comment 1

[Emilio Cobos Álvarez [:emilio]]

Yeah, I did raise this in https://phabricator.services.mozilla.com/D222059#7654354 fwiw. Thanks for filing it!

Comment 2

[BugBot [:suhaib / :marco]]

:sfoster, since you are the author of the regressor, bug 1899598, could you take a look? Also, could you set the severity field?

For more information, please visit BugBot documentation.

Comment 3

[Sam Foster [:sfoster] (he/him)]

Thanks for spotting and filing this. I'm triaging as P2/S3 as this is not ideal but workable and behind a default-off pref for now, but we will want to get it fixed before we roll out vertical tabs as enabled without the feature flag.

Comment 4

[Ania]

Sam, as we're adressing this bug, perhaps we can adjust the logic of how colors are inherited here, as the current one results both in the address bar issue and the lack of continuity between the sidebar and the vertical-tabs-title-bar color.

To keep the continuity between the elements, the spec suggests:

1. Identical color for the toolbar and the sidebar in horizontal tab mode,
2. Identical color for the title bar and the sidebar in the vertical tab mode.

The first case works well right now.

The second one has a quirk when switching to vertical tabs:

• the "new" title bar in the vertical mode inherits the color from the horizontal tabs title bar (rather than toolbar), making the two elements (sidebar and vertical mode) have two distinct colors, while they should have one.
• the address bar regression is a side effect of that, as if the "new" title bar color still had the toolbar color, there would have been enough contrast to display the unfocused address bar correctly.

Comment 5

[Emilio Cobos Álvarez [:emilio]]

Part of the issue is that if you don't use the titlebar color, then there's other things that don't work:

• The titlebar no longer communicates window activeness (this is relevant to all themes).
• The native window controls might not have enough contrast, depending on the theme (this is relevant to Linux and HCM).
• The titlebar no longer matches the environment (applies to all native themes, windows with the accent-color-in-titlebar, etc).

So I'm not sure I agree with the expectation, see bug 1899598 comment 1 and following discussion...

Comment 6

[Sarah Clements [:sclements]]

As discussed in our leads call, Ania's request in comment 4 is not something we should tackle with this bug and needs more discussion. I'm going to split that out into a separate bug 1928151.

Comment 7

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 1923306 - Make toolbars fields of default themes work better when on top of the toolbox. r=#theme!

This is still not perfect specially for dark mode (as per UX discussion,
we might want to tweak that to use transparent white rather than
transparent black), but it's an improvement.

Comment 8

[Sarah Clements [:sclements]]

Thanks Emilio! This wasn't something we were trying to get into 133 btw. Btw... are you sure you don't want to just join our team? :D

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2835daf4d4a5
Make toolbars fields of default themes work better when on top of the toolbox. r=desktop-theme-reviewers,dao

Comment 10

[amarc]

https://hg.mozilla.org/mozilla-central/rev/2835daf4d4a5

Comment 11

[BugBot [:suhaib / :marco]]

The patch landed in nightly and beta is affected.
:emilio, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
• If no, please set status-firefox133 to wontfix.

For more information, please visit BugBot documentation.

Comment 12

[Emilio Cobos Álvarez [:emilio]]

Probably not worth uplifting if it only affects vertical tabs, but happy to uplift if people feel differently, it's trivial-ish.

Comment 13

[Sarah Clements [:sclements]]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #12)

Probably not worth uplifting if it only affects vertical tabs, but happy to uplift if people feel differently, it's trivial-ish.

Yulia would like it uplifted as long as you can confirm that this looks fine on windows and linux. (It looked fine on mac to me.) Since this is only a change for light and dark manifests it does seem pretty low risk.

Comment 14

[Emilio Cobos Álvarez [:emilio]]

Comment on attachment 9434513 [details]
Bug 1923306 - Make toolbars fields of default themes work better when on top of the toolbox. r=#theme!

Beta/Release Uplift Approval Request

• User impact if declined/Reason for urgency: trivial fix for vertical tabs.
• Is this code covered by automated tests?: Yes
• Has the fix been verified in Nightly?: Yes
• Needs manual test from QE?: Yes
• If yes, steps to reproduce: comment 0
• List of other uplifts needed: none
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Simple CSS fix that makes our default themes and system theme more consistent.
• String changes made/needed: none
• Is Android affected?: No

Comment 15

[Donal Meehan [:dmeehan]]

Comment on attachment 9434513 [details]
Bug 1923306 - Make toolbars fields of default themes work better when on top of the toolbox. r=#theme!

Approved for 133.0b5

Comment 16

[Pulsebot]

https://hg.mozilla.org/releases/mozilla-beta/rev/afd4d01ab521

Comment 17

[Daniel Bodea [:danibodea]]

I can confirm this issue in Windows 10 and 11, using Beta v133.0b4 and Nightly v134.0a1 from 2024-10-31; this issue occurs with Light, Dark or System themes, but not in Alpenglow or custom themes:

• When the Fx window is focused, but the addressbar is not focused, the URL bar blends into the top bar/menu.
• When neither the Fx window or its addressbar are focused, the URL bar shows a very small difference of color (almost blends into the top menu/bar).

I can confirm this issue in MacOS 11 and Ubuntu 22, using Beta v133.0b4 and Nightly v134.0a1 from 2024-10-31; this issue occurs with Light, Dark themes and it does not occur for Alpenglow or System themes:

• When the Fx window is focused, but the addressbar is not focused, the URL bar blends into the top bar/menu.
• When neither the Fx window or its addressbar are focused, the URL bar shows a very small difference of color (almost blends into the top menu/bar).

I can verify this fix in Windows 10 and 11, MacOS 11 and Ubuntu 22 with the latest Nightly v134.0a1 from 2024-11-04 in all themes:

• When the Fx window is focused, but the addressbar is not focused, the URL bar shows a clear distinction from the rest of the top bar.
• When neither the Fx window or its addressbar are focused, the URL bar shows a clear distinction from the rest of the top bar.

The fix will be verified in Beta v133.0b5 when it is available.

Comment 18

[Daniel Bodea [:danibodea]]

I can also confirm this fix in Beta v133.0b5 in Windows 10, MacOS 11 and Ubuntu 22.