1703679 - Automatic determination of accent color is undesirable

Status: NEW

(Firefox :: Theme, defect)

Description

[Jacob Kauffmann]

Attachment: firefox-accent.png

This revision making the tab bar and URL bar accents use the darker of the highlight/highlighttext colors has resulted in illegible accent colors, particularly for dark themes.

The Pop theme in Pop!_OS uses a light blue background and black foreground for highlighted text. In Firefox 86 and below, this resulted in a light blue accent against the dark toolbar. In Firefox 87 and above, black is now being selected as the accent color (because it's darker than light blue), resulting in a black accent that cannot be seen against the dark toolbar in Firefox and the top panel in GNOME. (Screenshots attached.)

Since the intention of the revision was to ensure the accent color is visible, this seems like a bug (with the revision not considering all reasonable color schemes for highlighted text, toolbars, and accents.) A way to override the accent color via the GTK theme would at least provide a workaround for this situation.

Comment 1

[Robert.K (please NI? :tbabos, I am no longer following bugs)]

Hi Jacob,

Unfortunately I was not able to reproduce this issue on Ubuntu 20 using Firefox 87.0.
However this defect has already been addressed in the latest Nightly update.

1. Are you currently using any addons? If so can you please list them.

2. Can you try reproducing this issue with a fresh profile?
   https://support.mozilla.org/en-US/kb/profile-manager-create-remove-switch-firefox-profiles

3. Could you please try it out using the latest version?
   https://www.mozilla.org/en-US/firefox/channel/desktop/

Thanks!

Comment 2

[Jacob Kauffmann]

Unfortunately I was not able to reproduce this issue on Ubuntu 20 using Firefox 87.0.

That's because the Ubuntu theme uses a nearly-white color for highlighted text (1, 2). As shown in the revision that I linked, Firefox is reading $selected_fg_color for the highlighted text color and $selected_bg_color for the highlighted text background color, from the GTK theme. Firefox is then comparing which color is darker, and using the darker of the two for its accent color. This works in Ubuntu because the foreground color is white, so the background color (which is Ubuntu's orange) is darker. This does not work in the Pop theme, because the foreground color is black, meaning it will always be darker than the background color (which is Pop's blue.)

If you'd like to reproduce the issue, using the Pop GTK theme will work, or any other GTK theme where $selected_fg_color is black.

Are you currently using any addons? If so can you please list them.

I am not using any addons.

Can you try reproducing this issue with a fresh profile?

Yes, this issue exists with a brand new profile. The issue is in the browser-wide theme parsing code that I linked earlier.

Could you please try it out using the latest version?

Firefox Nightly 89.0a1 is still affected by this issue, although it is partially mitigated by the new tab bar design. The outline of the URL bar is still solid black, where it should be light blue:

https://www.dropbox.com/s/4l57jqo2w8mb6s0/Screenshot%20from%202021-04-13%2012-14-38.png?dl=0

https://www.dropbox.com/s/61a5j1jy73a8v8s/Screenshot%20from%202021-04-13%2012-14-41.png?dl=0

If I disable Proton, I can see that the incorrect color is still being chosen for the tab highlight as well (which makes sense, because the URL bar border and tab lines use the same -moz-accent-color variable.)

https://www.dropbox.com/s/suboxeux5pcuouo/Screenshot%20from%202021-04-13%2012-20-38.png?dl=0

Two possible solutions to this issue would be always using $selected_bg_color for the accent color (not comparing it against $selected_fg_color at all), or reading in some other CSS class from the GTK theme so themers can specify the accent color manually if the default "which is darker" selection doesn't make sense. Please let me know if I can provide any further information to help get this in the right place.

Comment 3

[James T. Lee]

This affects me in a similar way to the OP's screenshot, though on a different distro with a different, custom dark theme. I don't have anything to add except for others who come across this and need a quick workaround. In userChrome.css:

:root {
  --toolbar-field-focus-border-color: highlight !important;
}

#tabbrowser-tabs {
  --tab-line-color: highlight !important;
}

does the trick.

Comment 4

[Robert.K (please NI? :tbabos, I am no longer following bugs)]

Hi Jacob,

After investigating this further we managed to reproduce the outline of the POP!_OS theme not appearing when focused on the search bar on Nigthly 90.0a1 Release 88.0.1 and Beta 89.0b12. We observed that this issue is happening when switching to a dark Linux Dark Theme.
In my case, the outline color of the search bar is improper while using a POP!_OS and also a dark theme on Linux.
On the Release version, the outline color appears orange while having a POP!_OS theme applied (I tried several themes) and the Dark theme on Linux.
Also on the Beta version, the outline color of the search bar is not properly displayed when Linux theme is turned to Dark.
Marking this issue as NEW in order to get the attention of our developers onto this issue and setting up the proper flags.