chore: Update zen theme content element separation

src/browser/app/profile/zen-browser.js

@@ -69,6 +69,7 @@ pref('zen.tabs.vertical', true);
 pref('zen.tabs.vertical.right-side', false);
 pref('zen.theme.accent-color', "#aac7ff");
 pref('zen.theme.border-radius', 10); // In pixels
+pref('zen.theme.content-element-separation', 10); // In pixels
 pref('zen.theme.toolbar-themed', true);
 pref('zen.theme.pill-button', false);
 pref('zen.view.compact', false);

src/browser/base/content/zen-styles/zen-browser-container.css

@@ -2,7 +2,6 @@
 :root:not([inDOMFullscreen="true"]):not([chromehidden~="location"]):not([chromehidden~="toolbar"]) {
   & #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
     width: -moz-available;
-    margin: 0 var(--zen-element-separation) var(--zen-element-separation) 0;
     box-shadow: 0 0 0 1px var(--zen-colors-border);
     clip-path: inset(-5px -5px -5px round var(--zen-webview-border-radius, var(--zen-border-radius)));
     border-radius: var(--zen-webview-border-radius, var(--zen-border-radius));

src/browser/base/content/zen-styles/zen-browser-ui.css

@@ -11,6 +11,11 @@
   --inactive-titlebar-opacity: 1;
 }
 
+#tabbrowser-tabpanels {
+  padding-right: var(--zen-element-separation);
+  padding-bottom: var(--zen-element-separation);
+}
+
 #browser {
   width: 100%;
 }

src/browser/base/content/zen-styles/zen-compact-mode.css

@@ -131,8 +131,8 @@
   #navigator-toolbox[inFullscreen] > #PersonalToolbar,
   #PersonalToolbar[collapsed="true"]{ display: none }
 
-  :root:not([inDOMFullscreen="true"]) #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
-    margin-left: var(--zen-element-separation) !important;
+  :root:not([inDOMFullscreen="true"]) #tabbrowser-tabbox #tabbrowser-tabpanels {
+    padding-left: var(--zen-element-separation) !important;
   }
 
   @media (-moz-bool-pref: "zen.view.compact.hide-toolbar") {
@@ -162,8 +162,8 @@
       opacity: 1;
     }
 
-    :root:not([inDOMFullscreen="true"]) #tabbrowser-tabbox #tabbrowser-tabpanels .browserSidebarContainer {
-      margin-top: var(--zen-element-separation) !important;
+    :root:not([inDOMFullscreen="true"]) #tabbrowser-tabpanels {
+      padding-top: var(--zen-element-separation) !important;
     }
 
     #titlebar {

src/browser/base/content/zen-styles/zen-decks.css

@@ -31,7 +31,8 @@
 
 #tabbrowser-tabpanels:has(> [zen-split="true"]) {
   display: grid;
-  grid-gap: 5px;
+  row-gap: var(--zen-element-separation);
+  column-gap: calc(var(--zen-element-separation) / 2);
 }
 
 #zen-split-views-box:not([hidden="true"]) {

src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css

@@ -460,6 +460,11 @@
       --zen-hover-animation: zen-sidebar-panel-animation-right !important;
     }
 
+    #tabbrowser-tabpanels {
+      padding-left: var(--zen-element-separation);
+      padding-right: 0 !important;
+    }
+
     :root:not([zen-sidebar-legacy="true"]) {
       padding: calc(var(--zen-tabbrowser-padding) * 1.5);
     }
@@ -469,8 +474,8 @@
     }
 
     #tabbrowser-tabpanels .browserSidebarContainer {
-      margin-left: var(--zen-element-separation) !important;
-      margin-right: 0 !important;
+      margin-left: 0 !important;
+      margin-right: 2px !important;
     }
   }
 

src/browser/base/content/zen-styles/zen-theme.css

@@ -80,9 +80,6 @@
   --toolbar-field-focus-background-color: var(--urlbar-box-bgcolor) !important;
   --zen-input-border-color: light-dark(rgb(204, 204, 204), rgb(66, 65, 77));
 
-  /* Constants */
-  --zen-element-separation: .6rem;
-
   /* XUL */
   --zen-main-browser-background: light-dark(rgb(235, 235, 235), #1b1b1b);
   --zen-browser-gradient-base: color-mix(in srgb, var(--zen-primary-color) 50%, white 50%);

src/browser/base/content/zenThemeModifier.js

@@ -11,8 +11,11 @@
  * FOR ANY WEBSITE THAT WOULD NEED TO USE THE ACCENT COLOR, ETC
  */
 
-const kZenThemeAccentColorPref = "zen.theme.accent-color";
-const kZenThemeBorderRadiusPref = "zen.theme.border-radius";
+const kZenThemePrefsList = [
+  "zen.theme.accent-color",
+  "zen.theme.border-radius",
+  "zen.theme.content-element-separation",
+];
 
 /**
 * ZenThemeModifier controls the application of theme data to the browser,
@@ -40,8 +43,17 @@ var ZenThemeModifier = {
   listenForEvents() {
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', this._onPrefersColorSchemeChange.bind(this));
 
-    Services.prefs.addObserver(kZenThemeAccentColorPref, this.handleEvent.bind(this));
-    Services.prefs.addObserver(kZenThemeBorderRadiusPref, this.handleEvent.bind(this));
+    var handleEvent = this.handleEvent.bind(this);
+    // Listen for changes in the accent color and border radius
+    for (let pref of kZenThemePrefsList) {
+      Services.prefs.addObserver(pref, handleEvent);
+    }
+
+    window.addEventListener("unload", () => {
+      for (let pref of kZenThemePrefsList) {
+        Services.prefs.removeObserver(pref, handleEvent);
+      }
+    });
   },
 
   handleEvent(event) {
@@ -52,21 +64,27 @@ var ZenThemeModifier = {
   /**
     * Update all theme basics, like the accent color.
     */
-  updateAllThemeBasics() {
+  async updateAllThemeBasics() {
     this.updateAccentColor();
     this.updateBorderRadius();
+    this.updateElementSeparation();
   },
 
   updateBorderRadius() {
-    const borderRadius = Services.prefs.getIntPref(kZenThemeBorderRadiusPref, 4);
+    const borderRadius = Services.prefs.getIntPref("zen.theme.border-radius");
     document.documentElement.style.setProperty("--zen-border-radius", borderRadius + "px");
   },
 
+  updateElementSeparation() {
+    const separation = Services.prefs.getIntPref("zen.theme.content-element-separation");
+    document.documentElement.style.setProperty("--zen-element-separation", separation + "px");
+  },
+
   /**
    * Update the accent color.
    */
   updateAccentColor() {
-    const accentColor = Services.prefs.getStringPref(kZenThemeAccentColorPref, "#0b57d0");
+    const accentColor = Services.prefs.getStringPref("zen.theme.accent-color");
     document.documentElement.style.setProperty("--zen-primary-color", accentColor);
     // Notify the page that the accent color has changed, only if a function
     // handler is defined.