Bug 1869299 - More modern Linux theme colors and looks. r=dao,stransky,desktop-theme-reviewers,rmader

Override Adwaita / Yaru colors with colors from the libadwaita
documentation.

Do a couple minor tweaks to the urlbar too to match both our default
themes in other platforms and Adwaita.

Differential Revision: https://phabricator.services.mozilla.com/D196153

browser/themes/linux/browser.css

@@ -8,11 +8,39 @@
 @namespace html url("http://www.w3.org/1999/xhtml");
 
 /**
- * We intentionally do not include browser-custom-colors.css,
- * instead choosing to fall back to system colours and transparencies
- * in order to accomodate the wider variety of system themes on that
- * platform.
+ * We intentionally do not include browser-custom-colors.css, instead choosing to
+ * fall back to system colors and transparencies in order to accommodate the
+ * wider variety of GTK system themes.
+ *
+ * We still want to do some of the tweaks that browser-custom-colors does, like
+ * disabling the toolbar field border and backgrounds.
  */
+@media not (prefers-contrast) {
+  :root:not(:-moz-lwtheme) {
+    --toolbar-field-border-color: transparent;
+
+    /* These colors don't exactly match the default dark color that buttons and
+     * textfields have in Adwaita[1][2], which would end up computing to
+     * rgba(0, 0, 0, .8 * .1) and rgba(255, 255, 255, 1 * .1) for light and
+     * dark, respectively.
+     *
+     * Instead, for the light theme we use .05 alpha, to increase the contrast
+     * of the text. For the dark theme, we use a darker background, which works
+     * because the toolbar background applies some white unconditionally, and
+     * matches what our default themes do in other platforms too.
+     *
+     * [1]: https://gitlab.gnome.org/GNOME/libadwaita/-/blob/42c04e038f19b2123560da662692d65480a67931/src/stylesheet/widgets/_buttons.scss#L1
+     * [2]: https://gitlab.gnome.org/GNOME/libadwaita/-/blob/42c04e038f19b2123560da662692d65480a67931/src/stylesheet/widgets/_entries.scss#L9
+     */
+    --toolbar-field-background-color: light-dark(rgba(0, 0, 0, .05), rgba(0, 0, 0, .3));
+    --toolbar-field-color: inherit;
+
+    @media (-moz-gtk-theme-family) and (prefers-color-scheme: light) {
+      /* Use a slightly lighter box bgcolor for known themes */
+      --urlbar-box-bgcolor: #fafafa;
+    }
+  }
+}
 
 #menubar-items {
   flex-direction: column; /* for flex hack */
@@ -76,9 +104,12 @@
 }
 
 #nav-bar:not([tabs-hidden="true"]) {
-  box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--lwt-tabs-border-color, rgba(0,0,0,.3));
   /* This is needed for some toolbar button animations. Gross :( */
   position: relative;
+  box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 light-dark(rgba(0,0,0,.1), rgba(0,0,0,.3));
+  &:-moz-lwtheme {
+    box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--lwt-tabs-border-color, rgba(0,0,0,.3));
+  }
 }
 
 /* Bookmark menus */

modules/libpref/init/StaticPrefList.yaml

@@ -15521,6 +15521,12 @@
   value: true
   mirror: always
 
+# Whether libadwaita colors are used rather than the default ones.
+- name: widget.gtk.libadwaita-colors.enabled
+  type: bool
+  value: true
+  mirror: always
+
 # Whether we enable rounded bottom corners on GTK by default.
 #
 # The implementation is a bit hacky (see details in bug 1850827) so behind a

widget/gtk/nsLookAndFeel.cpp

@@ -530,14 +530,18 @@ nsresult nsLookAndFeel::PerThemeData::GetColor(ColorID aID,
     case ColorID::Background:    // desktop background
     case ColorID::Window:
     case ColorID::Windowframe:
-    case ColorID::MozDialog:
     case ColorID::MozCombobox:
       aColor = mWindow.mBg;
       break;
     case ColorID::Windowtext:
-    case ColorID::MozDialogtext:
       aColor = mWindow.mFg;
       break;
+    case ColorID::MozDialog:
+      aColor = mDialog.mBg;
+      break;
+    case ColorID::MozDialogtext:
+      aColor = mDialog.mFg;
+      break;
     case ColorID::IMESelectedRawTextBackground:
     case ColorID::IMESelectedConvertedTextBackground:
     case ColorID::Highlight:  // preference selected item,
@@ -692,14 +696,14 @@ nsresult nsLookAndFeel::PerThemeData::GetColor(ColorID aID,
       // 3-D highlighted edge color
     case ColorID::Threedhighlight:
       // 3-D highlighted outer edge color
-      aColor = mFrameOuterLightBorder;
+      aColor = mThreeDHighlight;
       break;
 
     case ColorID::Buttonshadow:
       // 3-D shadow edge color
     case ColorID::Threedshadow:
       // 3-D shadow inner edge color
-      aColor = mFrameInnerDarkBorder;
+      aColor = mThreeDShadow;
       break;
     case ColorID::Buttonborder:
       aColor = mButtonBorder;
@@ -1305,11 +1309,70 @@ bool nsLookAndFeel::ConfigureAltTheme() {
   return false;
 }
 
+// We override some adwaita colors from GTK3 to LibAdwaita, see:
+// https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/named-colors.html
+void nsLookAndFeel::MaybeApplyAdwaitaOverrides() {
+  auto& dark = mSystemTheme.mIsDark ? mSystemTheme : mAltTheme;
+  auto& light = mSystemTheme.mIsDark ? mAltTheme : mSystemTheme;
+
+  // Unconditional special case for Adwaita-dark: In GTK3 we don't have more
+  // proper accent colors, so we use the selected background colors. Those
+  // colors, however, don't have much contrast in dark mode (see bug 1741293).
+  if (dark.mFamily == ThemeFamily::Adwaita) {
+    dark.mAccent = {NS_RGB(0x35, 0x84, 0xe4), NS_RGB(0xff, 0xff, 0xff)};
+    dark.mSelectedText = dark.mAccent;
+  }
+
+  if (light.mFamily == ThemeFamily::Adwaita) {
+    light.mAccent = {NS_RGB(0x35, 0x84, 0xe4), NS_RGB(0xff, 0xff, 0xff)};
+    light.mSelectedText = light.mAccent;
+  }
+
+  if (!StaticPrefs::widget_gtk_libadwaita_colors_enabled()) {
+    return;
+  }
+
+  if (light.mFamily == ThemeFamily::Adwaita ||
+      light.mFamily == ThemeFamily::Yaru) {
+    // #323232 is rgba(0,0,0,.8) over #fafafa.
+    light.mWindow =
+        light.mDialog = {NS_RGB(0xfa, 0xfa, 0xfa), NS_RGB(0x32, 0x32, 0x32)};
+    light.mField = {NS_RGB(0xff, 0xff, 0xff), NS_RGB(0x32, 0x32, 0x32)};
+
+    // We use the sidebar colors for the headerbar in light mode background
+    // because it creates much better contrast. GTK headerbar colors are white,
+    // and meant to "blend" with the contents otherwise.
+    // #2f2f2f is rgba(0,0,0,.8) over #ebebeb.
+    light.mSidebar = light.mHeaderBar =
+        light.mTitlebar = {NS_RGB(0xeb, 0xeb, 0xeb), NS_RGB(0x2f, 0x2f, 0x2f)};
+    light.mHeaderBarInactive = light.mTitlebarInactive = {
+        NS_RGB(0xf2, 0xf2, 0xf2), NS_RGB(0x98, 0x98, 0x98)};
+    light.mThreeDShadow = NS_RGB(0xe0, 0xe0, 0xe0);
+    light.mSidebarBorder = NS_RGBA(0, 0, 0, 18);
+  }
+
+  if (dark.mFamily == ThemeFamily::Adwaita ||
+      dark.mFamily == ThemeFamily::Yaru) {
+    dark.mWindow = {NS_RGB(0x24, 0x24, 0x24), NS_RGB(0xff, 0xff, 0xff)};
+    dark.mDialog = {NS_RGB(0x38, 0x38, 0x38), NS_RGB(0xff, 0xff, 0xff)};
+    dark.mField = {NS_RGB(0x3a, 0x3a, 0x3a), NS_RGB(0xff, 0xff, 0xff)};
+    dark.mSidebar = dark.mHeaderBar =
+        dark.mTitlebar = {NS_RGB(0x30, 0x30, 0x30), NS_RGB(0xff, 0xff, 0xff)};
+    dark.mHeaderBarInactive = dark.mTitlebarInactive = {
+        NS_RGB(0x24, 0x24, 0x24), NS_RGB(0x92, 0x92, 0x92)};
+    // headerbar_shade_color
+    dark.mThreeDShadow = NS_RGB(0x1f, 0x1f, 0x1f);
+    dark.mSidebarBorder = NS_RGBA(0, 0, 0, 92);
+  }
+}
+
 void nsLookAndFeel::ConfigureAndInitializeAltTheme() {
   const bool fellBackToDefaultTheme = !ConfigureAltTheme();
 
   mAltTheme.Init();
 
+  MaybeApplyAdwaitaOverrides();
+
   // Some of the alt theme colors we can grab from the system theme, if we fell
   // back to the default light / dark themes.
   if (fellBackToDefaultTheme) {
@@ -1329,20 +1392,6 @@ void nsLookAndFeel::ConfigureAndInitializeAltTheme() {
     }
   }
 
-  // Special case for Adwaita: In GTK3 we don't have more proper accent colors,
-  // so we use the selected background colors. Those colors, however, don't have
-  // much contrast in dark mode (see bug 1741293). We know, however, that GTK4
-  // uses the light accent color for the dark theme, see:
-  //
-  //   https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/named-colors.html#accent-colors
-  //
-  // So we manually do that.
-  if (mSystemTheme.mFamily == ThemeFamily::Adwaita) {
-    auto& dark = mSystemTheme.mIsDark ? mSystemTheme : mAltTheme;
-    auto& light = mSystemTheme.mIsDark ? mAltTheme : mSystemTheme;
-    dark.mAccent = light.mAccent;
-  }
-
   // Right now we're using the opposite color-scheme theme, make sure to record
   // it.
   mSystemThemeOverridden = true;
@@ -1843,9 +1892,7 @@ void nsLookAndFeel::PerThemeData::Init() {
 
   // Window colors
   style = GetStyleContext(MOZ_GTK_WINDOW);
-
-  mWindow.mFg = GetTextColor(style);
-  mWindow.mBg = GetBackgroundColor(style, mWindow.mFg);
+  mWindow = mDialog = GetColorPair(style);
 
   gtk_style_context_get_border_color(style, GTK_STATE_FLAG_NORMAL, &color);
   mMozWindowActiveBorder = GDK_RGBA_TO_NS_RGBA(color);
@@ -2106,12 +2153,12 @@ void nsLookAndFeel::PerThemeData::Init() {
   // node.
   style = GetStyleContext(MOZ_GTK_FRAME_BORDER);
   bool themeUsesColors =
-      GetBorderColors(style, &mFrameOuterLightBorder, &mFrameInnerDarkBorder);
+      GetBorderColors(style, &mThreeDHighlight, &mThreeDShadow);
   if (!themeUsesColors) {
     style = GetStyleContext(MOZ_GTK_FRAME);
-    GetBorderColors(style, &mFrameOuterLightBorder, &mFrameInnerDarkBorder);
+    GetBorderColors(style, &mThreeDHighlight, &mThreeDShadow);
   }
-  mSidebarBorder = mFrameInnerDarkBorder;
+  mSidebarBorder = mThreeDShadow;
 
   // Some themes have a unified menu bar, and support window dragging on it
   gboolean supports_menubar_drag = FALSE;

widget/gtk/nsLookAndFeel.h

@@ -93,8 +93,8 @@ class nsLookAndFeel final : public nsXPLookAndFeel {
     ColorPair mButtonHover;
     ColorPair mButtonActive;
     nscolor mButtonBorder = kBlack;
-    nscolor mFrameOuterLightBorder = kBlack;
-    nscolor mFrameInnerDarkBorder = kBlack;
+    nscolor mThreeDHighlight = kBlack;
+    nscolor mThreeDShadow = kBlack;
     nscolor mOddCellBackground = kWhite;
     nscolor mNativeHyperLinkText = kBlack;
     nscolor mNativeVisitedHyperLinkText = kBlack;
@@ -104,6 +104,7 @@ class nsLookAndFeel final : public nsXPLookAndFeel {
     nscolor mComboBoxText = kBlack;
     ColorPair mField;
     ColorPair mWindow;
+    ColorPair mDialog;
     ColorPair mSidebar;
     nscolor mSidebarBorder = kBlack;
 
@@ -195,6 +196,7 @@ class nsLookAndFeel final : public nsXPLookAndFeel {
   bool ConfigureAltTheme();
   void ConfigureAndInitializeAltTheme();
   void ConfigureFinalEffectiveTheme();
+  void MaybeApplyAdwaitaOverrides();
 };
 
 #endif

widget/nsXPLookAndFeel.cpp

@@ -500,6 +500,8 @@ static constexpr struct {
     // Affects zoom settings which includes text and full zoom.
     {"browser.display.os-zoom-behavior"_ns,
      widget::ThemeChangeKind::StyleAndLayout},
+    // This affects system colors on Linux.
+    {"widget.gtk.libadwaita-colors.enabled"_ns, widget::ThemeChangeKind::Style},
     // This affects not only the media query, but also the native theme, so we
     // need to re-layout.
     {"browser.theme.toolbar-theme"_ns, widget::ThemeChangeKind::AllBits},