feat: Added section for cross-site cookies, p=#10833, c=media, common, compact-mode, glance, tabs, workspaces

src/zen/common/ZenCustomizableUI.sys.mjs

@@ -67,11 +67,12 @@ export var ZenCustomizableUI = new (class {
         addon-webext-overflowtarget="overflowed-extensions-list"
         mode="icons">
         <hbox id="zen-sidebar-top-buttons-customization-target" class="customization-target" flex="1">
-          <toolbarbutton id="zen-toggle-compact-mode"
-            class="toolbarbutton-1"
-            command="cmd_toggleCompactModeIgnoreHover"
-            data-l10n-id="zen-toggle-compact-mode-button"
-            removable="true" />
+          <toolbaritem id="zen-toggle-compact-mode" removable="true">
+            <toolbarbutton
+              class="toolbarbutton-1"
+              command="cmd_toggleCompactModeIgnoreHover"
+              data-l10n-id="zen-toggle-compact-mode-button" />
+          </toolbaritem>
           <html:div id="zen-sidebar-top-buttons-separator" skipintoolbarset="true" overflows="false"></html:div>
         </hbox>
       </toolbar>

src/zen/common/ZenUIManager.mjs

@@ -915,17 +915,19 @@ var gZenVerticalTabsManager = {
 
   recalculateURLBarHeight() {
     requestAnimationFrame(() => {
-      document.getElementById('urlbar').removeAttribute('--urlbar-height');
-      let height;
-      if (!this._hasSetSingleToolbar) {
-        height = 32;
-      } else if (gURLBar.getAttribute('breakout-extend') !== 'true') {
-        height = 40;
-      }
-      if (typeof height !== 'undefined') {
-        document.getElementById('urlbar').style.setProperty('--urlbar-height', `${height}px`);
-      }
-      gURLBar.zenFormatURLValue();
+      requestAnimationFrame(() => {
+        gURLBar.textbox.removeAttribute('--urlbar-height');
+        let height;
+        if (!this._hasSetSingleToolbar) {
+          height = 32;
+        } else if (gURLBar.getAttribute('breakout-extend') !== 'true') {
+          height = 40;
+        }
+        if (typeof height !== 'undefined') {
+          gURLBar.textbox.style.setProperty('--urlbar-height', `${height}px`);
+        }
+        gURLBar.zenFormatURLValue();
+      });
     });
   },
 
@@ -1140,7 +1142,6 @@ var gZenVerticalTabsManager = {
       }
 
       gZenCompactModeManager.updateCompactModeContext(isSingleToolbar);
-      this.recalculateURLBarHeight();
 
       // Always move the splitter next to the sidebar
       const splitter = document.getElementById('zen-sidebar-splitter');

src/zen/common/styles/zen-browser-container.css

@@ -45,7 +45,7 @@
 
   @media not ((-moz-pref('zen.view.experimental-no-window-controls') or (not -moz-pref('zen.view.hide-window-controls'))) and -moz-pref('zen.view.use-single-toolbar')) {
     .browserSidebarContainer:is(.deck-selected, [zen-split='true']) .browserContainer {
-      transition: margin 0.15s ease-in-out;
+      transition: margin 0.1s ease;
 
       :root[zen-single-toolbar='true'] & {
         transition-delay: 0.2s;

src/zen/common/styles/zen-single-components.css

@@ -546,6 +546,10 @@ body > #confetti {
   }
 }
 
+#zen-site-data-settings-list toolbarseparator {
+  margin: 6px 0;
+}
+
 /* Overflow panel */
 #widget-overflow-mainView {
   --menu-panel-width-wide: 200px;

src/zen/common/zenThemeModifier.js

@@ -92,6 +92,7 @@ var ZenThemeModifier = {
   },
 
   updateElementSeparation() {
+    const kMinElementSeparation = 0.1; // in px
     let separation = this.elementSeparation;
     if (
       window.fullScreen &&
@@ -101,8 +102,10 @@ var ZenThemeModifier = {
     ) {
       separation = 0;
     }
+    // In order to still use it on fullscreen, even if it's 0px, add .1px (almost invisible)
+    separation = Math.max(kMinElementSeparation, separation);
     document.documentElement.style.setProperty('--zen-element-separation', separation + 'px');
-    if (separation == 0) {
+    if (separation == kMinElementSeparation) {
       document.documentElement.setAttribute('zen-no-padding', true);
     } else {
       document.documentElement.removeAttribute('zen-no-padding');