Bug 1974861 - Stop trying to read titlebar button spacing from the theme. r=stransky

We're getting the spacing from the wrong box (the headerbar, rather than
the button box container). Even with that, some themes would use
additional ways of creating spacing (paddings or margins). So in
practice the 6px between buttons is just incorrect.

Instead, just use the Adwaita spacing. We're using Adwaita styling
anyways, so this makes the headerbar match perfectly in Gnome.

With the Breeze theme (for KDE), this patch is closer than before
(even though personally I might take some time to get used to it).

We can also reduce it back to 6px between buttons in some DEs, if
somebody complains, which is what we're shipping, effectively.

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

Author: emilio

browser/themes/linux/browser.css

@@ -163,6 +163,13 @@
 .titlebar-buttonbox {
   z-index: 1;
   align-items: stretch;
+  /* The spacing on each side of the titlebar button. In libadwaita, that's
+   * 3px of gap + 5px * 2 of padding = 13px / 2, see:
+   * https://gitlab.gnome.org/GNOME/libadwaita/-/blob/fe21c3c823443a8f2333cf3cc09ba3d0fa753228/src/stylesheet/widgets/_header-bar.scss#L164
+   * We want a contiguous hit region so we use 6.5px of padding instead.
+   */
+  --titlebar-button-spacing: 6.5px;
+  --titlebar-button-end-spacing: 10px;
   --max-titlebar-button-position: max(
     env(-moz-gtk-csd-maximize-button-position),
     env(-moz-gtk-csd-minimize-button-position),
@@ -181,11 +188,10 @@
   color: inherit;
   align-items: center;
   padding: 0;
-  padding-inline: calc(env(-moz-gtk-csd-titlebar-button-spacing) / 2);
-  /* We want double the end spacing for the last button */
+  padding-inline: var(--titlebar-button-spacing);
   padding-inline-end: max(
-    env(-moz-gtk-csd-titlebar-button-spacing) / 2,
-    env(-moz-gtk-csd-titlebar-button-spacing) * (var(--titlebar-button-position) - var(--max-titlebar-button-position) + 1)
+    var(--titlebar-button-spacing),
+    var(--titlebar-button-end-spacing) * (var(--titlebar-button-position) - var(--max-titlebar-button-position) + 1)
   );
   order: var(--titlebar-button-position);
   /* In GTK applications, you can drag the window by titlebar buttons */

servo/components/style/custom_properties.rs

@@ -153,17 +153,12 @@ fn eval_gtk_csd_titlebar_radius(device: &Device, url_data: &UrlExtraData) -> Var
     VariableValue::pixels(int_pixels as f32 * unzoomed_scale, url_data)
 }
 
-static CHROME_ENVIRONMENT_VARIABLES: [EnvironmentVariable; 11] = [
+static CHROME_ENVIRONMENT_VARIABLES: [EnvironmentVariable; 10] = [
     lnf_int_variable!(
         atom!("-moz-mac-titlebar-height"),
         MacTitlebarHeight,
         int_pixels
     ),
-    lnf_int_variable!(
-        atom!("-moz-gtk-csd-titlebar-button-spacing"),
-        TitlebarButtonSpacing,
-        int_pixels
-    ),
     make_variable!(
         atom!("-moz-gtk-csd-titlebar-radius"),
         eval_gtk_csd_titlebar_radius

widget/LookAndFeel.h

@@ -302,9 +302,6 @@ class LookAndFeel {
     /** GTK titlebar radius */
     TitlebarRadius,
 
-    /** GTK button-to-button spacing in the inline axis */
-    TitlebarButtonSpacing,
-
     /** GTK tooltip radius */
     TooltipRadius,
 

widget/gtk/nsLookAndFeel.cpp

@@ -1144,11 +1144,6 @@ nsresult nsLookAndFeel::NativeGetInt(IntID aID, int32_t& aResult) {
       aResult = EffectiveTheme().mTitlebarRadius;
       break;
     }
-    case IntID::TitlebarButtonSpacing: {
-      EnsureInit();
-      aResult = EffectiveTheme().mTitlebarButtonSpacing;
-      break;
-    }
     case IntID::AllowOverlayScrollbarsOverlap: {
       aResult = 1;
       break;
@@ -2301,14 +2296,6 @@ void nsLookAndFeel::PerThemeData::Init() {
     mTitlebar = GetColorPair(style, GTK_STATE_FLAG_NORMAL);
     mTitlebarInactive = GetColorPair(style, GTK_STATE_FLAG_BACKDROP);
     mTitlebarRadius = GetBorderRadius(style);
-    mTitlebarButtonSpacing = [&] {
-      // Account for the spacing property in the header bar.
-      // Default to 6 pixels (gtk/gtkheaderbar.c)
-      gint spacing = 6;
-      g_object_get(GtkWidgets::Get(GtkWidgets::Type::HeaderBar), "spacing",
-                   &spacing, nullptr);
-      return spacing;
-    }();
   }
 
   // We special-case the header bar color in Adwaita, Yaru and Breeze to be the

widget/gtk/nsLookAndFeel.h

@@ -174,7 +174,6 @@ class nsLookAndFeel final : public nsXPLookAndFeel {
     float mCaretRatio = 0.0f;
     int32_t mTitlebarRadius = 0;
     int32_t mTooltipRadius = 0;
-    int32_t mTitlebarButtonSpacing = 0;
     char16_t mInvisibleCharacter = 0;
     bool mMenuSupportsDrag = false;
 

widget/nsXPLookAndFeel.cpp

@@ -157,7 +157,6 @@ static const char sIntPrefs[][45] = {
     "ui.systemScrollbarSize",
     "ui.touchDeviceSupportPresent",
     "ui.titlebarRadius",
-    "ui.titlebarButtonSpacing",
     "ui.tooltipRadius",
     "ui.dynamicRange",
     "ui.panelAnimations",