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');

src/zen/compact-mode/sidebar.inc.css

@@ -66,7 +66,7 @@
       }
       :root:not([zen-single-toolbar='true']) & {
         bottom: calc(var(--zen-compact-float) / 2);
-        height: calc(100% - var(--zen-toolbar-height));
+        height: calc(100% - var(--zen-toolbar-height-with-bookmarks)); 
         @media -moz-pref('zen.view.compact.hide-toolbar') {
           height: 100%;
         }
@@ -86,12 +86,12 @@
   }
 
   /* When we have multiple toolbars and the top-toolbar is NOT being hidden,
-       * we need to adjust the top-padding of the toolbox to account for the
-       * extra toolbar height. */
+   * we need to adjust the top-padding of the toolbox to account for the
+   * extra toolbar height. */
   @media not -moz-pref('zen.view.compact.hide-toolbar') {
     &:not([zen-single-toolbar='true']) {
       #navigator-toolbox:not([animate='true']) {
-        margin-top: var(--zen-toolbar-height) !important;
+        margin-top: var(--zen-toolbar-height-with-bookmarks) !important;
       }
     }
   }

src/zen/compact-mode/toolbar.inc.css

@@ -9,8 +9,10 @@
     --zen-toolbox-top-align: var(--zen-element-separation);
   }
 
-  & #titlebar {
-    margin-top: var(--zen-element-separation) !important;
+  @media -moz-pref('zen.view.compact.hide-tabbar') {
+    & #titlebar {
+      margin-top: var(--zen-element-separation) !important;
+    }
   }
 
   & #zen-appcontent-wrapper {
@@ -21,15 +23,15 @@
     & .zen-toolbar-background {
       display: flex;
     }
-    transition: height 0.15s ease-in-out;
+    transition: height 0.1s ease;
 
-    height: calc(var(--zen-element-separation) + 0.1px);
+    height: var(--zen-element-separation);
     overflow: clip;
 
     & #urlbar:not([breakout-extend='true']) {
       opacity: 0;
       pointer-events: none;
-      transition: opacity 0.15s ease;
+      transition: opacity 0.1s ease;
     }
 
     & .titlebar-buttonbox-container {
@@ -37,12 +39,12 @@
       /* We need to hide them since on Windows the native
        * panels when hovering over them can interfere with the
        * web content */
-      transition: visibility 0.15s ease;
+      transition: visibility 0.1s ease;
     }
 
     & #zen-appcontent-navbar-container {
       opacity: 0;
-      transition: opacity 0.15s ease;
+      transition: opacity 0.1s ease;
     }
   }
 

src/zen/glance/ZenGlanceManager.mjs

@@ -26,7 +26,7 @@
 
     // Arc animation configuration
     #ARC_CONFIG = Object.freeze({
-      ARC_STEPS: 60, // Increased for smoother bounce
+      ARC_STEPS: 70, // Increased for smoother bounce
       MAX_ARC_HEIGHT: 30,
       ARC_HEIGHT_RATIO: 0.2, // Arc height = distance * ratio (capped at MAX_ARC_HEIGHT)
     });

src/zen/tabs/zen-tabs/vertical-tabs-topbar.inc.css

@@ -12,7 +12,7 @@ z-index: 1;
 }
 
 @media -moz-pref('zen.view.hide-window-controls') {
-  transition: height 0.15s ease-in-out, opacity 0.15s ease-in-out;
+  transition: height 0.1s ease, opacity 0.1s ease;
   will-change: height, opacity;
   transition-delay: 0.2s;
   overflow: clip;
@@ -20,8 +20,7 @@ z-index: 1;
   &:not([zen-has-hover='true']):not([has-popup-menu]):not(:focus-within):not(
       :has(*:is([panelopen='true'], [open='true']))
     ) {
-    /* In order to still use it on fullscreen, even if it's 0px, add .1px (almost invisible) */
-    height: calc(var(--zen-element-separation) + 0.1px);
+    height: var(--zen-element-separation);
     opacity: 0;
     & #zen-appcontent-navbar-container {
       pointer-events: none;

src/zen/tabs/zen-tabs/vertical-tabs-topbuttons-fix.css

@@ -6,7 +6,10 @@
 
 &:not([zen-compact-animating])
   #zen-sidebar-top-buttons:not(
-    :has(#zen-sidebar-top-buttons-customization-target > *:not(#zen-sidebar-top-buttons-separator))
+    :has(
+      #zen-sidebar-top-buttons-customization-target > *:not(#zen-sidebar-top-buttons-separator),
+      .titlebar-buttonbox-container
+    )
   ) {
   max-height: 0 !important;
   min-height: 0 !important;

src/zen/tabs/zen-tabs/vertical-tabs.css

@@ -117,7 +117,7 @@
   }
 
   & #zen-sidebar-top-buttons {
-    margin: var(--zen-toolbox-padding) 0 calc(var(--zen-toolbox-padding) / 2) 0;
+    margin: var(--zen-toolbox-padding) 0;
   }
 
   & #PanelUI-menu-button {

src/zen/urlbar/ZenSiteDataPanel.sys.mjs

@@ -14,6 +14,7 @@ export class nsZenSiteDataPanel {
   #iconMap = {
     install: 'extension',
     'site-protection': 'shield',
+    '3rdPartyStorage': 'cookie',
   };
 
   constructor(window) {
@@ -299,7 +300,11 @@ export class nsZenSiteDataPanel {
       });
     }
 
+    const separator = this.document.createXULElement('toolbarseparator');
     list.innerHTML = '';
+    list.appendChild(separator);
+    const settingElements = [];
+    const crossSiteCookieElements = [];
     for (let permission of permissions) {
       let [id, key] = permission.id.split(SitePermissions.PERM_KEY_DELIMITER);
 
@@ -314,12 +319,24 @@ export class nsZenSiteDataPanel {
         continue;
       }
 
-      let item = this.#createPermissionItem(id, key, permission);
+      let [item, isCrossSiteCookie] = this.#createPermissionItem(id, key, permission);
       if (item) {
-        list.appendChild(item);
+        if (isCrossSiteCookie) {
+          crossSiteCookieElements.push(item);
+        } else {
+          settingElements.push(item);
+        }
       }
     }
 
+    for (let elem of settingElements) {
+      separator.before(elem);
+    }
+    for (let elem of crossSiteCookieElements) {
+      separator.after(elem);
+    }
+
+    separator.hidden = !settingElements.length || !crossSiteCookieElements.length;
     section.hidden = list.childElementCount == 0;
   }
 
@@ -339,6 +356,7 @@ export class nsZenSiteDataPanel {
 
   #createPermissionItem(id, key, permission) {
     const { SitePermissions } = this.window;
+    const isCrossSiteCookie = id === '3rdPartyStorage';
 
     // Create a permission item for the site data panel.
     let container = this.document.createXULElement('hbox');
@@ -368,23 +386,32 @@ export class nsZenSiteDataPanel {
     let nameLabel = this.document.createXULElement('label');
     nameLabel.setAttribute('flex', '1');
     nameLabel.setAttribute('class', 'permission-popup-permission-label');
-    let label = SitePermissions.getPermissionLabel(permission.id);
-    if (label) {
-      nameLabel.textContent = label;
+    if (isCrossSiteCookie) {
+      this.document.l10n.setAttributes(nameLabel, 'zen-site-data-setting-cross-site');
     } else {
-      this.document.l10n.setAttributes(nameLabel, 'zen-site-data-setting-' + idNoSuffix);
+      let label = SitePermissions.getPermissionLabel(permission.id);
+      if (label) {
+        nameLabel.textContent = label;
+      } else {
+        this.document.l10n.setAttributes(nameLabel, 'zen-site-data-setting-' + idNoSuffix);
+      }
     }
     labelContainer.appendChild(nameLabel);
 
     let stateLabel = this.document.createXULElement('label');
     stateLabel.setAttribute('class', 'zen-permission-popup-permission-state-label');
-    stateLabel.setAttribute('data-l10n-id', this.#getPermissionStateLabelId(permission));
+    if (isCrossSiteCookie) {
+      // The key should be the site for cross-site cookies.
+      stateLabel.textContent = key;
+    } else {
+      stateLabel.setAttribute('data-l10n-id', this.#getPermissionStateLabelId(permission));
+    }
     labelContainer.appendChild(stateLabel);
 
     container.appendChild(img);
     container.appendChild(labelContainer);
 
-    return container;
+    return [container, isCrossSiteCookie];
   }
 
   #openGetAddons() {
@@ -473,10 +500,13 @@ export class nsZenSiteDataPanel {
       SitePermissions.setForPrincipal(gBrowser.contentPrincipal, permission.id, newState);
     }
 
+    const isCrossSiteCookie = permission.id.startsWith('3rdPartyStorage');
     label.parentNode.setAttribute('state', newState == SitePermissions.ALLOW ? 'allow' : 'block');
-    label
-      .querySelector('.zen-permission-popup-permission-state-label')
-      .setAttribute('data-l10n-id', this.#getPermissionStateLabelId({ state: newState }));
+    if (!isCrossSiteCookie) {
+      label
+        .querySelector('.zen-permission-popup-permission-state-label')
+        .setAttribute('data-l10n-id', this.#getPermissionStateLabelId({ state: newState }));
+    }
     label._permission.state = newState;
   }
 

src/zen/workspaces/ZenWorkspaces.mjs

@@ -2481,9 +2481,7 @@ var gZenWorkspaces = new (class extends nsZenMultiWindowFeature {
       pinnedContainer.children.length === 1 ||
       Array.from(arrowScrollbox.children).filter(
         (child) =>
-          !child.hasAttribute('hidden') &&
-          !child.hasAttribute('bursting') &&
-          !child.hasAttribute('zen-empty-tab')
+          !child.hasAttribute('hidden') && !child.closing && !child.hasAttribute('zen-empty-tab')
       ).length <= 1;
     if (shouldHideSeparator) {
       pinnedContainer.setAttribute('hide-separator', 'true');