1721359 - System colors under a dark GTK system theme seem to be from a light theme instead since Firefox 90 (regression)

Status: VERIFIED FIXED

(Core :: Widget: Gtk, defect)

Description

[Erwan Ameil]

Attachment: System colors on sidebar after regression

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:90.0) Gecko/20100101 Firefox/90.0

Steps to reproduce:

On Linux, set a dark GTK theme like Adwaita-dark (my window manager is Sway but I'm assuming it happens under Gnome as well).
Firefox should be set to System theme, and with the value widget.content.allow-gtk-dark-theme to true (which was necessary to have dark system colors a few versions ago IIRC).

I'm using the Vertigo Tabs sidebar addon (I'm the developer https://addons.mozilla.org/en-GB/firefox/addon/vertigo-tabs/) which uses the Menu (for background) and MenuText (for foreground) CSS keyword color, so that the system theme colors are pulled through and usable on the sidebar (so that on dark themes, a dark background and light text is displayed to match the system theme).

I've also created the System Colors sidebar extension (https://github.com/idlewan/system-colors) to help see which system colors are available for WebExtensions.

I've narrowed it down using mozregression to this changeset https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=365bfc91ddd5d9be1a5d5bee72377c025b099321&tochange=a57a18bd5034b718955a35fecea22727d556e35f
which I'm assuming is a regression unfortunately introduced with https://bugzilla.mozilla.org/show_bug.cgi?id=1707957

Actual results:

After changeset 365bfc91ddd5d9be1a5d5bee72377c025b099321, many system colors are not the same as before (as shown on the sidebar with the System Colors extension), and have switched from a dark color to a light one (for example, Background, Menu, Window...). Highlight is also lighter.

Expected results:

Before changeset 365bfc91ddd5d9be1a5d5bee72377c025b099321, under a dark GTK theme, you would have a dark Background, Menu etc... keyword colors to use as background in your WebExtension to match the system theme.

Comment 1

[Erwan Ameil]

Attachment: System colors on sidebar before regression (Adwaita-dark)

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Does it work as you expect on nightly?

Comment 3

[Erwan Ameil]

Unfortunately it's still the same behavior (light Background, Menu, Window CSS colors instead of dark on dark theme) on nightly 2021-07-20.

Comment 4

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

The Bugbug bot thinks this bug should belong to the 'WebExtensions::Untriaged' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Ah, I see. So allow-gtk-dark-theme right now is used to configure the gtk widget in content processes, but due to the logic here and the extension content not being a chrome doc, it defaults to light system colors.

It's not clear to me what the best behavior is here. Ideally we should implement dark form controls and then allow websites to use them (and use dark system colors as well). We could check allow-gtk-dark-theme to return dark in here but that seems a bit off-place to me...

Maybe moz-extension pages should follow the Firefox theme (so we should change the check here to deal with extension docs...

Comment 6

[Erwan Ameil]

Just like Bookmarks, History, Synced Tabs on the sidebar use the dark system theme, I'd myself expect extensions using the sidebar to follow a dark theme as well by default (extensions to me feel more 'browser chrome` than web content).

The problem currently is I have no way to get to the dark theme's colors (the light version's dark grey used for text is different, as is the Highlight, so inverting Menu`MenuTextcolors under aprefers-color-scheme` media query doesn't work because it's not matching the dark theme's colors anymore).

Comment 7

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

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

Comment 8

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1721359 - With allow-gtk-dark-theme, keep content pages using system color scheme. r=stransky

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/446c195dac10
With allow-gtk-dark-theme, keep content pages using system color scheme. r=stransky

Comment 10

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/446c195dac10

Comment 11

[Timea Zsoldos [:zstimi/tzsoldos], Desktop QA]

Attachment: system colors.7z

It's not clear to me what the correct behavior is here.
Tried to reproduced the issue on nightly Firefox build from 2012-07-20 having dark system color on Ubuntu 20, set widget.content.allow-gtk-dark-theme to true, set a Adwaita/Gnome dark theme and using the Vertigo Tabs sidebar addon: Vertigo Tabs background and foreground menus, Firefox Window Bookmarks menu, Hamburger menu are all light grey, see attached screenshot 2021-07-20.png.
On 2021-08-16 beta Firefox build 92.0b4 observe the following with the same settings: Vertigo Tabs background menu is light and foreground menu is light gray, Firefox Window Bookmarks menu, Hamburger menu are all light grey, see attached screenshot 2021-08-16.png.
Erwan Ameil please see if I understood correctly, and see if it's ok now.

Comment 12

[Ryan VanderMeulen [:RyanVM]]

Is this something we should consider taking on ESR91?

Comment 13

[Emilio Cobos Álvarez (:emilio)]

I don't think so.

Comment 14

[Erwan Ameil]

(In reply to Timea Zsoldos [:zstimi/tzsoldos], Desktop Release QA from comment #11)

Created attachment 9236456 [details]
system colors.7z

It's not clear to me what the correct behavior is here.
Tried to reproduced the issue on nightly Firefox build from 2012-07-20 having dark system color on Ubuntu 20, set widget.content.allow-gtk-dark-theme to true, set a Adwaita/Gnome dark theme and using the Vertigo Tabs sidebar addon: Vertigo Tabs background and foreground menus, Firefox Window Bookmarks menu, Hamburger menu are all light grey, see attached screenshot 2021-07-20.png.
On 2021-08-16 beta Firefox build 92.0b4 observe the following with the same settings: Vertigo Tabs background menu is light and foreground menu is light gray, Firefox Window Bookmarks menu, Hamburger menu are all light grey, see attached screenshot 2021-08-16.png.
Erwan Ameil please see if I understood correctly, and see if it's ok now.

Hi, sorry about the late answer (I was away on holidays).

I had a workaround added to Vertigo tabs end of July to temporarily invert the colors (even though they weren't the same / switching background and foreground colors of a light theme doesn't end up being the same colors as colors from a dark theme), it was still better for dark-theme users like me to have this while using Firefox 90 and 91.

Best way to test if dark theme colors were pulled through was thus to use the sidebar addon I created for this purpose (https://github.com/idlewan/system-colors).

I can however confirm that the patch submitted by Emilio does fix the issue (which ended up released in Firefox 92 I think).
I've now disabled the workaround used in Vertigo tabs for Firefox 92+ (and kept it active for 90 and 91).
Thank you for resolving this! :)

Comment 15

[Timea Zsoldos [:zstimi/tzsoldos], Desktop QA]

Based on comment 14, tested again on Fx 98.0 see the attachment Fx-98.0.png, seems that the issue was fixed from Firefox 92+.