1916762 - Change `-moz-sidebar` values for mac to reflect new sidebar styling

Status: NEW

(Firefox :: Theme, task)

Description

[Sarah Clements [:sclements]]

Attachment: system theme.png

As part of the sidebar revamp work, we've changed the sidebar values for the light and dark theme manifests but we'd like to have -moz-sidebars values on mac updated to match what we have for light and dark themes, which Emilio said is a matter of updating these values.

However, if we do that then we lose contrast between the card (containing the history items in the screenshot) and the sidebar panel background, as for the card we're using the toolbar-bgcolor. Out of curiousity, is there a reason these values are different for light/dark themes vs system theme? If this can't be changed, then I'm wondering if there is a way to hardcode a different value just for system theme?

Comment 1

[Sarah Clements [:sclements]]

Attachment: light theme.png

This would be the ideal state for system theme (light setting)

Comment 2

[Sarah Clements [:sclements]]

Emilio, I know you have a lot going on but would you be able to look into this sometime in the next week or so?

Comment 3

[Emilio Cobos Álvarez (:emilio)]

These values can be played with without a build btw, via prefs, so you can e.g. create a ui.-moz-sidebar pref with the value "white".

The system theme is detectable by CSS (via the lack of lwtheme attribute), so we can set --sidebar-background-color and co to whatever we want...

So I looked into it a bit, and I'm happy to change these to white and another grey tone for dark mode, but I don't think something like comment 1 works, specially for the default configuration of horizontal tabs. At least not without also changing the toolbar background too (which is specified here).

Bug 1917557 makes it work as you want for the windows system theme, and the macOS system theme with browser.theme.macos.native-theme=false (the default in release). So that should be some progress, but it seems the main "issue" is that for the macOS system theme the toolbar is white (since the native tab-bar is the native tab bar color).

For "vertical tabs with no titlebar", where we presumably make everything use the native sidebar effect, then we could use white for the sidebar box (since we probably want to use the native macOS effect for the sidebar + toolbar). But with horizontal tabs it's hard to guarantee contrast with something non-white for the toolbar... Do you have any suggestion for a different toolbar color that isn't white?

Comment 4

[Sarah Clements [:sclements]]

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

These values can be played with without a build btw, via prefs, so you can e.g. create a ui.-moz-sidebar pref with the value "white".

The system theme is detectable by CSS (via the lack of lwtheme attribute), so we can set --sidebar-background-color and co to whatever we want...

Ok thanks, I had forgotten about that. I guess the question is why do you have the --moz-sidebar token then? Just a value set for mac for when it isn't set in a style sheet?

So I looked into it a bit, and I'm happy to change these to white and another grey tone for dark mode, but I don't think something like comment 1 works, specially for the default configuration of horizontal tabs. At least not without also changing the toolbar background too (which is specified here).

Bug 1917557 makes it work as you want for the windows system theme, and the macOS system theme with browser.theme.macos.native-theme=false (the default in release). So that should be some progress, but it seems the main "issue" is that for the macOS system theme the toolbar is white (since the native tab-bar is the native tab bar color).

For "vertical tabs with no titlebar", where we presumably make everything use the native sidebar effect, then we could use white for the sidebar box (since we probably want to use the native macOS effect for the sidebar + toolbar). But with horizontal tabs it's hard to guarantee contrast with something non-white for the toolbar... Do you have any suggestion for a different toolbar color that isn't white?

I'm confused by the question. I don't think the tabs are using different variables for vertical tabs mode vs horizontal (except for pinned tabs). Maybe a screenshot would help with what you're saying?

Thanks for looking into this btw. :)

Comment 5

[Emilio Cobos Álvarez (:emilio)]

(In reply to Sarah Clements [:sclements] from comment #4)

Ok thanks, I had forgotten about that. I guess the question is why do you have the --moz-sidebar token then? Just a value set for mac for when it isn't set in a style sheet?

Because on Linux the sidebar color depends on the system theme, so we need a system color anyways.

So I looked into it a bit, and I'm happy to change these to white and another grey tone for dark mode, but I don't think something like comment 1 works, specially for the default configuration of horizontal tabs. At least not without also changing the toolbar background too (which is specified here).

Bug 1917557 makes it work as you want for the windows system theme, and the macOS system theme with browser.theme.macos.native-theme=false (the default in release). So that should be some progress, but it seems the main "issue" is that for the macOS system theme the toolbar is white (since the native tab-bar is the native tab bar color).

For "vertical tabs with no titlebar", where we presumably make everything use the native sidebar effect, then we could use white for the sidebar box (since we probably want to use the native macOS effect for the sidebar + toolbar). But with horizontal tabs it's hard to guarantee contrast with something non-white for the toolbar... Do you have any suggestion for a different toolbar color that isn't white?

I'm confused by the question. I don't think the tabs are using different variables for vertical tabs mode vs horizontal (except for pinned tabs). Maybe a screenshot would help with what you're saying?

I agree they're not using different variables. With horizontal tabs mode, the tabs go on top of the system titlebar (which has a darker background). My understanding from your screenshot is that with vertical tabs, we'll hide the titlebar altogether (or style the toolbar+sidebar to match the titlebar, see bug 1899598 comment 5 and so).

My point is that, with horizontal tabs on light mode, we use white as the toolbar (and sidebar) color, to create contrast with the titlebar. Changing the toolbar color to match your screenshot is possible, but it looks a bit odd here (because macOS colors are neutral, not shifted towards blue like ours). But maybe we can do something like that?

Comment 6

[Sarah Clements [:sclements]]

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

I agree they're not using different variables. With horizontal tabs mode, the tabs go on top of the system titlebar (which has a darker background). My understanding from your screenshot is that with vertical tabs, we'll hide the titlebar altogether (or style the toolbar+sidebar to match the titlebar, see bug 1899598 comment 5 and so).

My point is that, with horizontal tabs on light mode, we use white as the toolbar (and sidebar) color, to create contrast with the titlebar. Changing the toolbar color to match your screenshot is possible, but it looks a bit odd here (because macOS colors are neutral, not shifted towards blue like ours). But maybe we can do something like that?

From talking to UX, the aim is to achieve consistency for light theme vs system light theme, so avoiding that inverse of colors we see between the two screenshots in the sidebar panel styling specifically. I don't think the exact shade of the toolbar color is important but Yulia does want the sidebar box/panel background to be white per the light theme and the spec.

That's a good point about bug 1899598 and what the plan is. Sam, perhaps you can speak to what the latest is with how you're approaching the styling for the navbar/title bar?

Comment 7

[Emilio Cobos Álvarez (:emilio)]

(In reply to Sarah Clements [:sclements] from comment #6)

From talking to UX, the aim is to achieve consistency for light theme vs system light theme

That's already the case in the non-native theme.

However there are a lot of cases where we expect the light vs system themes to be different. If I'm not missing anything they are:

• Linux (by default)
• Macos with native theme (browser.theme.macos.native-theme)
• Windows with High Contrast Mode (by default, with the OS setting)
• Windows with accent color in titlebar (browser.theme.windows.accent-color-in-tabs.enabled, plus the OS setting).

It's unclear we can get away with just making the toolbar color consistent with our built-in themes in those cases. Definitely a no-go on Linux / Windows HCM.

On macOS with native theme we might get away with it, but will not look good if we use the native titlebar colors and effects (which is kinda the point...).

Comment 8

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

(In reply to Sarah Clements [:sclements] from comment #6)

That's a good point about bug 1899598 and what the plan is. Sam, perhaps you can speak to what the latest is with how you're approaching the styling for the navbar/title bar?

Yeah. So normally the tabstrip is visually a part of the titlebar. It shares the same color as the menubar if that's visible, and when it and the titlebar are hidden (tabs-in-titlebar) it funtionally is the titlebar. For the vertical tabs case, this too will get hidden, so the nav-bar becomes the titlebar essntially. All the CSS rules and behavior that would have applied explicitly to the #TabsToolbar become "the first toolbar sibling to the menubar".

To do this, I'm proposing to move the #nav-bar element into the #titlebar element so it is a sibling of #TabsToolbar. It will have the same titlebar-items.inc.xhtml include as #TabsToolbar which will get un-hidden as necessary.

Does that answer your question? I can update my WIP if it helps.

Comment 9

[Emilio Cobos Álvarez (:emilio)]

We chatted about the native theme on macOS and we'd probably need to change the toolbar colors if we want to change the sidebar box colors... It's unclear whether we should spend time on that if that's not on by default in release.