1928151 - Investigate whether the titlebar for vertical tabs can be styled like the nav bar

Status: RESOLVED FIXED

(Firefox :: Sidebar, task)

Description

[Sarah Clements [:sclements]]

Filing this to capture the request from Ania and Yulia in this bug to investigate/discuss whether we can make changes to the title bar theme variables so as to ensure the sidebar and titlebar match the spec in vertical tabs mode.

Both Emilio and Gijs, have mentioned several of the reason why the nav bar was moved into the title bar in bug 1899598.

Recapping Emilio's latest comment here:

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).

An alternative would be to change the sidebar styling to work around this limitation.

Comment 1

[Yulia Popova]

I wanted to add some thoughts here for clarity. The main source of confusion seems to have been that I initially thought we would move the window controls down to the toolbar. However, instead of that toolbar elements were moved up to the title bar, which totally make sense after reading comments and reasoning in another bug.

In the current vertical tabs mode, the new title bar/toolbar has inherited certain characteristics from the title bar, such as color and spacing. Since the title bar color is darker than the toolbar color, the address bar is now difficult to see.

Our goal is for the title bar/toolbar to match the sidebar color, creating a unified surface. I'd appreciate your opinions on the best way to achieve this. Could we change the title bar color to match the sidebar (for example, making it lighter in the light and dark theme)? Looking at Edge, they seem to take a similar approach.

Alternatively, we could apply the title bar color to the sidebar so both match. In this case, we’d still need to adjust the title bar color slightly in light and dark themes to ensure the address bar remains visible.

If we consider other themes, this approach would only work for themes with a solid color assigned to the title bar. For more complex themes, we could implement a fallback solution.

What do you think would be the best and simplest way to achieve this without causing any issues? I understand that making this work for all themes could be complex and isn’t a priority right now. For now, it’s most important to ensure that in light and dark themes, the title bar and sidebar colors are consistent, and that the address bar remains clearly visible.

Comment 2

[Yulia Popova]

Attachment: EdgeHorizontalTabs-Light.png

Comment 3

[Yulia Popova]

Attachment: EdgeVerticalTabs-Light.png

Comment 4

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1928151 - With vertical tabs, make the sidebar and toolbars match the toolbox. r=#theme!

As per discussion with UX, we might want the toolbox background to be
different in (some of) our default themes in this case, but that seems
orthogonal, and this seems somewhat straight-forward.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1928151 - Improve alpenglow dark frame background. r=#theme

With the previous patch, this color is used more directly (it's already
used in light mode, but in dark mode toolbar_background is almost opaque
which papers over it).

Make it the bottom of the gradient background, to improve the behavior
with the previous patch.

Comment 6

[Sarah Clements [:sclements]]

These are some nice improvements (especially for Alphenglow light), however I'm surprised to see a patch already when this bug was meant to document a discussion... where did this conversation with UX happen per your comment 4?

Comment 7

[Emilio Cobos Álvarez (:emilio)]

Yulia pinged me on slack about this.

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/98b2b793622a
Improve alpenglow dark frame background. r=desktop-theme-reviewers,sclements,dao

Comment 9

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/98b2b793622a

Comment 10

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

Attachment: color-report.html.pdf

The proposed patch sets up a the new CSS variable to use for the toolbars and sidebar area --toolbox-bgcolor: var(--lwt-accent-color) which gets populated from the theme's frame color. There was a concern in code review that some themes might define this as some random color as its often obscured by a opaque background image. I got a rough report out of a dump of the top several hundred themes to assess this - is it common? Or even a thing at all. The report doesn't inline the background image so its not ideal but scanning down it, it looks to me like the majority of the frame colors seem to be intentional and in a matching color palette.

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/3c299d4f6ce0
With vertical tabs, make the sidebar and toolbars match the toolbox. r=sidebar-reviewers,sfoster,desktop-theme-reviewers,sclements

Comment 12

[agoloman]

https://hg.mozilla.org/mozilla-central/rev/3c299d4f6ce0