1915805 - Revamped sidebar doesn't deal well with sem-transparent toolbar backgrounds (eg Alpenglow)

Status: VERIFIED FIXED

(Firefox :: Sidebar, defect, P2)

Description

[Kestrel]

Attachment: Transparent sidebar with Alpenglow theme on Ubuntu

STR:

1. Start with sidebar.verticalTabs = true and sidebar.revamp = true on Ubuntu 24.04.
2. Enable the "Firefox Alpenglow" theme.
3. Expand the sidebar.

Sidebar panel is transparent, showing through to the desktop behind it.

Does not happen on Windows 11.

Regression window:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=73d37e644eb977c4205e20c6a349453f39e09ec4&tochange=f81bc4882ecc99d79404676fdcf3dd5b4355800f

Regressed by Bug 1899336.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1899336

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

For more information, please visit BugBot documentation.

Comment 2

[Sarah Clements [:sclements]]

I don't see this on mac but I suspect the issue is because the .wrapper was changed to use --toolbar-bgcolor which may not be defined for this theme. I think we need to use --moz-sidebar as a fallback although I'm wondering if that is sufficient for linux. Nikki, can you confirm this is the strategy we're using for other parts of the sidebar that need a fallback?

Comment 3

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1899336

Comment 4

[Emilio Cobos Álvarez (:emilio)]

Themes like https://addons.mozilla.org/en-US/firefox/addon/orchidestra/ are also affected.

Comment 5

[Nikki Sharpley (:nikkis) (she/her)]

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

I don't see this on mac but I suspect the issue is because the .wrapper was changed to use --toolbar-bgcolor which may not be defined for this theme. I think we need to use --moz-sidebar as a fallback although I'm wondering if that is sufficient for linux. Nikki, can you confirm this is the strategy we're using for other parts of the sidebar that need a fallback?

--toolbar-bgcolor is defined for this theme. On Mac, this appears as an overlay over either a dark/light system background. On Linux, this doesn't have a background behind it, which is why we're seeing content behind the sidebar. I am wondering if there's a way to set a background behind the sidebar for those cases where --toolbar-bgcolor has a transparency on Linux? Its interesting that Mac does this automatically.

Comment 6

[Emilio Cobos Álvarez (:emilio)]

The fact that the macOS window is not transparent is the weird case, not the other way around.

I am wondering if there's a way to set a background behind the sidebar for those cases where --toolbar-bgcolor has a transparency on Linux?

You can potentially move the --tabpanel-background-color to the #browser instead, so that it also covers the sidebar. But I think there's a deeper issue that is that the semi-transparent toolbar bgcolor is intended to go over the toolbox background, not over the content background, so that might cause contrast issues if they don't match or are close...

Ideally we'd "extend" the toolbox background to cover the sidebar as well? Though that might also be non-trivial (specially for images and so).

Comment 7

[Stuart Colville [:muffinresearch]]

Quick note: that the issue with alpenglow on Linux only shows up when using it with a light system theme not when the system is set to a dark theme.

Comment 8

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

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

You can potentially move the --tabpanel-background-color to the #browser instead, so that it also covers the sidebar. But I think there's a deeper issue that is that the semi-transparent toolbar bgcolor is intended to go over the toolbox background, not over the content background, so that might cause contrast issues if they don't match or are close...

Ideally we'd "extend" the toolbox background to cover the sidebar as well? Though that might also be non-trivial (specially for images and so).

We did look into this and you're right its an issue. I dug around in the AMO theme manifests a while back and found that somewhere around 10% of themes combine a background-image and semi-transparent toolbar color. Our hands are a bit tied with mitigating this issue - we have to be careful about moving the goalposts on the existing published themes in terms of how and where those get applied. We can try to ensure there are good fallbacks and I think a opaque backing color on the sidebar unless the users has opted-in for a transparent sidebar would help. We can pick a default or we can take one of the theme's toolbar or sidebar colors and make it opaque.

Comment 9

[Stuart Colville [:muffinresearch]]

Since this is specific to Linux and since it sounds like potential fixes (e.g. along the lines of what's described in comment 6) will be non-trivial we're moving this out of being part of the MVP. However, if there's a quick fix that's low-risk we may re-consider that.

I think what we ideally want to aim for is making the situation consistent for all platforms, so that Linux behaves the same way Windows and Mac do since they are currently working as expected.

Comment 10

[Emilio Cobos Álvarez (:emilio)]

Windows has a default background, but it doesn't behave correctly either. I suspect in dark mode you might still get a wrong background or what not.

Comment 11

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1915805 - Make sure revamped sidebar is opaque. r=#theme!,#sidebar-reviewers!

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/fb3f20098be7
Make sure revamped sidebar is opaque. r=desktop-theme-reviewers,sidebar-reviewers,dao,nsharpley

Comment 13

[Cristina Horotan [:chorotan]]

https://hg.mozilla.org/mozilla-central/rev/fb3f20098be7

Comment 14

[Alexandru Trif, Desktop Test Engineering [:atrif]]

Reproduced the issue with Firefox 131.0a1 (2024-08-30) on Ubuntu 24.04. Using the Alpenglow theme or the theme from comment 4 with Sidebar vertical tabs and then residing the browser will make the sidebar transparent.
The issue is verified fixed with Firefox 132.0b5 on Windows 10x64, macOS 12, and Ubuntu 24.04. The sidebar no longer becomes transparent after using the Alpenglow theme or the theme from comment 4 and then resizing the browser while vertical tabs are active.