Tab accent colors are solid black after updating to Firefox 87

[808-cowbell]

Describe the problem: After updating Firefox on my Pop installs a few days ago, the accent color that appears above active tabs seems to have broken; right now it's #000000, but I think it used to be #63b1bc. If I downgrade Firefox to a version prior to 87, the accent color appears to work correctly. The inactive highlight color also seems to have broken. I can reproduce this on both the dark and light variants, and I can reproduce this on multiple computers running 20.04 LTS. I cannot reproduce this on other GTK themes.

Steps to reproduce:

1. Upgrade to Firefox 87

Distribution:

Pop!_OS 20.04 LTS

Pop version:

5.2.0\~1599689740\~20.04\~11b9d22

[jacobgkau]

Running Firefox 86 to confirm, the previous accent colors were actually #48b9c7 on light mode and #94ebeb on dark mode:

These are $selected_bg_color in _colors.scss. For some reason, Firefox now appears to be using $selected_fg_color for these elements instead (if I change $selected_fg_color, the tab accent and focused URL bar border change.) Our foreground color is set the way we want it, and I haven't figured out how to override the tab color from the GTK theme yet. What I do know is:

• This issue is not occurring in Adwaita.
• If I change $selected_fg_color to #fff to match Adwaita, then it's ignored, and the correct accent color is used instead. I'm not sure why this is happening, and whether it's happening in Firefox/MozillaGtkWidget or somewhere else.

[jacobgkau]

I believe this revision was the cause of this regression: https://hg.mozilla.org/mozilla-central/rev/d548eba4ee80aab8ae8954fa135ec383402afffe

Make Linux tab bar use the darker of the highlight / highlighttext colors. r=dao

Some GTK themes use very soft colors for selection backgrounds, using
darker colors for the text. This makes the tab and focus outlines in the
tab bar not have sufficient contrast with usual backgrounds.

+    // Accent is the darker of the selection background / foreground.
+    mAccentColor = mTextSelectedBackground;
+    mAccentColorForeground = mTextSelectedText;
+    if (RelativeLuminanceUtils::Compute(mAccentColor) >
+        RelativeLuminanceUtils::Compute(mAccentColorForeground)) {
+      std::exchange(mAccentColor, mAccentColorForeground);
+    }

This explains why the value of $selected_fg_color determines whether $selected_fg_color or $selected_bg_color is used for the accents. The remaining question is how to override that decision.

I haven't found any way to set the accent color or the individual tab line and navbar border colors yet. I've opened an issue in Firefox's bug tracker about this regression, since the behavior seems contrary to what they were trying to accomplish: https://bugzilla.mozilla.org/show_bug.cgi?id=1703679

[808-cowbell]

For those viewing this thread because they're having the same problem, this userChrome tweak suggested in Firefox's bug tracker mostly mitigated the problem for me!

[isantop]

This should be fixed in both the latest version of the theme and Firefox, so we're closing it for now.