feat: Rename compact mode startup pref, b=closes #8606, c=compact-mode

prefs/compact-mode.yaml

@@ -36,6 +36,6 @@
   value: false
 
 # Do not edit manually
-- name: zen.view.compact.should-enable-at-startup
+- name: zen.view.compact.enable-at-startup
   hidden: true
   value: false

src/browser/components/tabbrowser/content/tabbrowser-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
-index d80a66a01002e78a9c65545d08fe786328ddf124..46b1e3075165e1e9e783db84861b0fea99420448 100644
+index d80a66a01002e78a9c65545d08fe786328ddf124..346ebe814381e8aa04140f43e98c328341c6e6eb 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
 @@ -422,15 +422,64 @@
@@ -395,10 +395,10 @@ index d80a66a01002e78a9c65545d08fe786328ddf124..46b1e3075165e1e9e783db84861b0fea
 +            gZenWorkspaces._initialTab._shouldRemove = true;
 +          }
 +        }
-       }
++      }
 +      else {
 +        gZenWorkspaces._tabToRemoveForEmpty = this.selectedTab;
-+      }
+       }
 +      this._hasAlreadyInitializedZenSessionStore = true;
  
        if (tabs.length > 1 || !tabs[0].selected) {
@@ -522,7 +522,17 @@ index d80a66a01002e78a9c65545d08fe786328ddf124..46b1e3075165e1e9e783db84861b0fea
        if (
          !this._beginRemoveTab(aTab, {
            closeWindowFastpath: true,
-@@ -4905,7 +5046,7 @@
+@@ -4771,7 +4912,9 @@
+         // We're not animating, so we can cancel the animation stopwatch.
+         Glean.browserTabclose.timeAnim.cancel(aTab._closeTimeAnimTimerId);
+         aTab._closeTimeAnimTimerId = null;
++        gZenVerticalTabsManager.animateTabClose(aTab, (animate && !gReduceMotion)).then(() => {
+         this._endRemoveTab(aTab);
++        });
+         return;
+       }
+ 
+@@ -4905,7 +5048,7 @@
            closeWindowWithLastTab != null
              ? closeWindowWithLastTab
              : !window.toolbar.visible ||
@@ -531,7 +541,7 @@ index d80a66a01002e78a9c65545d08fe786328ddf124..46b1e3075165e1e9e783db84861b0fea
  
          if (closeWindow) {
            // We've already called beforeunload on all the relevant tabs if we get here,
-@@ -4929,6 +5070,7 @@
+@@ -4929,6 +5072,7 @@
  
          newTab = true;
        }
@@ -539,7 +549,7 @@ index d80a66a01002e78a9c65545d08fe786328ddf124..46b1e3075165e1e9e783db84861b0fea
        aTab._endRemoveArgs = [closeWindow, newTab];
  
        // swapBrowsersAndCloseOther will take care of closing the window without animation.
-@@ -4969,13 +5111,7 @@
+@@ -4969,13 +5113,7 @@
        aTab._mouseleave();
  
        if (newTab) {
@@ -554,7 +564,7 @@ index d80a66a01002e78a9c65545d08fe786328ddf124..46b1e3075165e1e9e783db84861b0fea
        } else {
          TabBarVisibility.update();
        }
-@@ -5108,6 +5244,7 @@
+@@ -5108,6 +5246,7 @@
          this.tabs[i]._tPos = i;
        }
  
@@ -562,7 +572,7 @@ index d80a66a01002e78a9c65545d08fe786328ddf124..46b1e3075165e1e9e783db84861b0fea
        if (!this._windowIsClosing) {
          // update tab close buttons state
          this.tabContainer._updateCloseButtons();
-@@ -5320,6 +5457,7 @@
+@@ -5320,6 +5459,7 @@
        }
  
        let excludeTabs = new Set(aExcludeTabs);
@@ -570,7 +580,7 @@ index d80a66a01002e78a9c65545d08fe786328ddf124..46b1e3075165e1e9e783db84861b0fea
  
        // If this tab has a successor, it should be selectable, since
        // hiding or closing a tab removes that tab as a successor.
-@@ -5332,13 +5470,13 @@
+@@ -5332,13 +5472,13 @@
          !excludeTabs.has(aTab.owner) &&
          Services.prefs.getBoolPref("browser.tabs.selectOwnerOnClose")
        ) {
@@ -586,7 +596,7 @@ index d80a66a01002e78a9c65545d08fe786328ddf124..46b1e3075165e1e9e783db84861b0fea
        );
  
        let tab = this.tabContainer.findNextTab(aTab, {
-@@ -5354,7 +5492,7 @@
+@@ -5354,7 +5494,7 @@
        }
  
        if (tab) {
@@ -595,7 +605,7 @@ index d80a66a01002e78a9c65545d08fe786328ddf124..46b1e3075165e1e9e783db84861b0fea
        }
  
        // If no qualifying visible tab was found, see if there is a tab in
-@@ -5375,7 +5513,7 @@
+@@ -5375,7 +5515,7 @@
          });
        }
  
@@ -604,7 +614,7 @@ index d80a66a01002e78a9c65545d08fe786328ddf124..46b1e3075165e1e9e783db84861b0fea
      }
  
      _blurTab(aTab) {
-@@ -5777,10 +5915,10 @@
+@@ -5777,10 +5917,10 @@
        SessionStore.deleteCustomTabValue(aTab, "hiddenBy");
      }
  
@@ -617,7 +627,7 @@ index d80a66a01002e78a9c65545d08fe786328ddf124..46b1e3075165e1e9e783db84861b0fea
          aTab.selected ||
          aTab.closing ||
          // Tabs that are sharing the screen, microphone or camera cannot be hidden.
-@@ -5839,6 +5977,7 @@
+@@ -5839,6 +5979,7 @@
       * @param {MozTabbrowserTab|MozTabbrowserTabGroup|MozTabbrowserTabGroup.labelElement} aTab
       */
      replaceTabWithWindow(aTab, aOptions) {
@@ -625,7 +635,7 @@ index d80a66a01002e78a9c65545d08fe786328ddf124..46b1e3075165e1e9e783db84861b0fea
        if (this.tabs.length == 1) {
          return null;
        }
-@@ -5972,7 +6111,7 @@
+@@ -5972,7 +6113,7 @@
       *   `true` if element is a `<tab-group>`
       */
      isTabGroup(element) {
@@ -634,7 +644,7 @@ index d80a66a01002e78a9c65545d08fe786328ddf124..46b1e3075165e1e9e783db84861b0fea
      }
  
      /**
-@@ -6048,8 +6187,8 @@
+@@ -6048,8 +6189,8 @@
        }
  
        // Don't allow mixing pinned and unpinned tabs.
@@ -645,7 +655,7 @@ index d80a66a01002e78a9c65545d08fe786328ddf124..46b1e3075165e1e9e783db84861b0fea
        } else {
          tabIndex = Math.max(tabIndex, this.pinnedTabCount);
        }
-@@ -6075,10 +6214,16 @@
+@@ -6075,10 +6216,16 @@
        this.#handleTabMove(
          element,
          () => {
@@ -664,7 +674,7 @@ index d80a66a01002e78a9c65545d08fe786328ddf124..46b1e3075165e1e9e783db84861b0fea
            if (neighbor && this.isTab(element) && tabIndex > element._tPos) {
              neighbor.after(element);
            } else {
-@@ -6136,23 +6281,28 @@
+@@ -6136,23 +6283,28 @@
      #moveTabNextTo(element, targetElement, moveBefore = false, metricsContext) {
        if (this.isTabGroupLabel(targetElement)) {
          targetElement = targetElement.group;
@@ -699,7 +709,7 @@ index d80a66a01002e78a9c65545d08fe786328ddf124..46b1e3075165e1e9e783db84861b0fea
        } else if (!element.pinned && targetElement && targetElement.pinned) {
          // If the caller asks to move an unpinned element next to a pinned
          // tab, move the unpinned element to be the first unpinned element
-@@ -6165,14 +6315,34 @@
+@@ -6165,14 +6317,34 @@
          //    move the tab group right before the first unpinned tab.
          // 4. Moving a tab group and the first unpinned tab is grouped:
          //    move the tab group right before the first unpinned tab's tab group.
@@ -735,7 +745,7 @@ index d80a66a01002e78a9c65545d08fe786328ddf124..46b1e3075165e1e9e783db84861b0fea
          element.pinned
            ? this.tabContainer.pinnedTabsContainer
            : this.tabContainer;
-@@ -6181,7 +6351,7 @@
+@@ -6181,7 +6353,7 @@
          element,
          () => {
            if (moveBefore) {
@@ -744,7 +754,7 @@ index d80a66a01002e78a9c65545d08fe786328ddf124..46b1e3075165e1e9e783db84861b0fea
            } else if (targetElement) {
              targetElement.after(element);
            } else {
-@@ -6227,10 +6397,10 @@
+@@ -6227,10 +6399,10 @@
       * @param {TabMetricsContext} [metricsContext]
       */
      moveTabToGroup(aTab, aGroup, metricsContext) {
@@ -757,7 +767,7 @@ index d80a66a01002e78a9c65545d08fe786328ddf124..46b1e3075165e1e9e783db84861b0fea
          return;
        }
        if (aTab.group && aTab.group.id === aGroup.id) {
-@@ -6261,6 +6431,7 @@
+@@ -6261,6 +6433,7 @@
  
        let state = {
          tabIndex: tab._tPos,
@@ -765,7 +775,7 @@ index d80a66a01002e78a9c65545d08fe786328ddf124..46b1e3075165e1e9e783db84861b0fea
        };
        if (tab.visible) {
          state.elementIndex = tab.elementIndex;
-@@ -6287,7 +6458,7 @@
+@@ -6287,7 +6460,7 @@
        let changedTabGroup =
          previousTabState.tabGroupId != currentTabState.tabGroupId;
  
@@ -774,7 +784,7 @@ index d80a66a01002e78a9c65545d08fe786328ddf124..46b1e3075165e1e9e783db84861b0fea
          tab.dispatchEvent(
            new CustomEvent("TabMove", {
              bubbles: true,
-@@ -6324,6 +6495,10 @@
+@@ -6324,6 +6497,10 @@
  
        moveActionCallback();
  
@@ -785,7 +795,7 @@ index d80a66a01002e78a9c65545d08fe786328ddf124..46b1e3075165e1e9e783db84861b0fea
        // Clear tabs cache after moving nodes because the order of tabs may have
        // changed.
        this.tabContainer._invalidateCachedTabs();
-@@ -7221,7 +7396,7 @@
+@@ -7221,7 +7398,7 @@
              // preventDefault(). It will still raise the window if appropriate.
              break;
            }
@@ -794,7 +804,7 @@ index d80a66a01002e78a9c65545d08fe786328ddf124..46b1e3075165e1e9e783db84861b0fea
            window.focus();
            aEvent.preventDefault();
            break;
-@@ -8166,6 +8341,7 @@
+@@ -8166,6 +8343,7 @@
              aWebProgress.isTopLevel
            ) {
              this.mTab.setAttribute("busy", "true");
@@ -802,7 +812,7 @@ index d80a66a01002e78a9c65545d08fe786328ddf124..46b1e3075165e1e9e783db84861b0fea
              gBrowser._tabAttrModified(this.mTab, ["busy"]);
              this.mTab._notselectedsinceload = !this.mTab.selected;
            }
-@@ -9157,7 +9333,7 @@ var TabContextMenu = {
+@@ -9157,7 +9335,7 @@ var TabContextMenu = {
      );
      contextUnpinSelectedTabs.hidden =
        !this.contextTab.pinned || !this.multiselected;
@@ -811,7 +821,7 @@ index d80a66a01002e78a9c65545d08fe786328ddf124..46b1e3075165e1e9e783db84861b0fea
      // Build Ask Chat items
      TabContextMenu.GenAI.buildTabMenu(
        document.getElementById("context_askChat"),
-@@ -9476,6 +9652,7 @@ var TabContextMenu = {
+@@ -9476,6 +9654,7 @@ var TabContextMenu = {
          )
        );
      } else {

src/zen/common/ZenUIManager.mjs

@@ -646,7 +646,7 @@ var gZenVerticalTabsManager = {
             marginBottom: isLastItem() ? [] : [transform, '0px'],
           },
           {
-            duration: 0.12,
+            duration: 0.11,
             easing: 'ease-out',
           }
         )
@@ -668,7 +668,7 @@ var gZenVerticalTabsManager = {
             filter: ['blur(1px)', 'blur(0px)'],
           },
           {
-            duration: 0.12,
+            duration: 0.11,
             easing: 'ease-out',
           }
         )
@@ -684,6 +684,27 @@ var gZenVerticalTabsManager = {
     }
   },
 
+  animateTabClose(aTab, animate) {
+    if (!animate) {
+      return new Promise((resolve) => {
+        resolve();
+      });
+    }
+    const height = aTab.getBoundingClientRect().height;
+    return gZenUIManager.motion.animate(
+      aTab,
+      {
+        opacity: [1, 0],
+        transform: ['scale(1)', 'scale(0.95)'],
+        marginBottom: [`0px`, `-${height}px`],
+      },
+      {
+        duration: 0.075,
+        easing: 'ease-out',
+      }
+    );
+  },
+
   get actualWindowButtons() {
     // we have multiple ".titlebar-buttonbox-container" in the DOM, because of the titlebar
     if (!this.__actualWindowButtons) {

src/zen/common/styles/zen-popup.css

@@ -374,7 +374,7 @@ menuseparator {
       color-mix(in srgb, var(--zen-primary-color) 85%, #0f0f0f 15%)
     );
     box-shadow: 0 0 14px 3px rgba(0, 0, 0, 0.05);
-    border: 1px solid light-dark(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2));
+    border: 1px solid rgba(0, 0, 0, 0.2);
     display: flex;
     font-weight: 600;
     align-items: center;

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

@@ -235,6 +235,10 @@ body > #confetti {
   mask-composite: exclude;
 }
 
+#TabsToolbar {
+  -moz-window-dragging: unset;
+}
+
 /* Status panel */
 
 @media (-moz-pref('zen.theme.styled-status-panel')) {

src/zen/compact-mode/ZenCompactMode.mjs

@@ -48,8 +48,7 @@ var gZenCompactModeManager = {
       xulStoreValue = false;
     }
     this._wasInCompactMode =
-      xulStoreValue ||
-      Services.prefs.getBoolPref('zen.view.compact.should-enable-at-startup', false);
+      xulStoreValue || Services.prefs.getBoolPref('zen.view.compact.enable-at-startup', false);
     lazyCompactMode.mainAppWrapper.removeAttribute('zen-compact-mode');
 
     this._canDebugLog = Services.prefs.getBoolPref('zen.view.compact.debug', false);
@@ -136,7 +135,7 @@ var gZenCompactModeManager = {
     document.documentElement.setAttribute('zen-compact-mode', value);
     Services.xulStore.persist(lazyCompactMode.mainAppWrapper, 'zen-compact-mode');
     if (typeof this._wasInCompactMode === 'undefined') {
-      Services.prefs.setBoolPref('zen.view.compact.should-enable-at-startup', value);
+      Services.prefs.setBoolPref('zen.view.compact.enable-at-startup', value);
     }
     this._updateEvent();
   },

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

@@ -148,7 +148,7 @@
           right: 0;
           bottom: 0;
           background: var(--zen-dialog-background);
-          outline: 1px solid var(--zen-colors-border);
+          outline: 1px solid rgba(255,255,255,.15);
           outline-offset: -1px;
           box-shadow: var(--zen-big-shadow);
           pointer-events: none;

src/zen/folders/ZenFolders.mjs

@@ -873,9 +873,13 @@
       // note: We set if the folder is collapsed some time after creation.
       //   we do this to ensure marginBottom is set correctly in the case
       //   that we want it to initially be collapsed.
-      requestAnimationFrame(() => {
-        folder.collapsed = !!options.collapsed;
-      });
+      setTimeout(
+        (folder) => {
+          folder.collapsed = !!options.collapsed;
+        },
+        0,
+        folder
+      );
       return folder;
     }
 

src/zen/folders/zen-folders.css

@@ -41,7 +41,7 @@ tab-group[split-view-group] {
     outline-offset: var(--tab-outline-offset);
     outline-color: var(--tab-selected-outline-color);
     transition: scale 0.1s ease;
-    margin-inline-start: 0 !important;
+    margin-inline: 0 !important;
 
     :root:not([zen-sidebar-expanded='true']) & {
       padding: 0;

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

@@ -156,25 +156,25 @@
    Pinned Tabs Separator
    ========================================================================== */
 .pinned-tabs-container-separator {
-  background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
+  background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
   margin: 8px auto;
   border: none;
   height: 1px;
   max-height: 1px;
   width: 98%; /* Slightly less than full width */
   transition:
-    margin 0.2s ease-in-out,
-    background 0.2s ease-in-out,
-    max-height 0.2s ease-in-out;
+    margin 0.1s ease-in-out,
+    background 0.1s ease-in-out,
+    max-height 0.1s ease-in-out;
   overflow: hidden;
   position: relative;
   opacity: 1;
 
   #tabbrowser-tabs[movingtab] & {
     transition:
-      margin 0.2s ease-in-out,
-      background 0.2s ease-in-out,
-      max-height 0.2s ease-in-out,
+      margin 0.1s ease-in-out,
+      background 0.1s ease-in-out,
+      max-height 0.1s ease-in-out,
       transform 0.1s ease-in-out;
   }
 

src/zen/workspaces/ZenWorkspace.mjs

@@ -27,6 +27,7 @@
             </hbox>
           </vbox>
         </arrowscrollbox>
+        <vbox class="zen-workspace-empty-space" flex="1" />
       `;
     }
 

src/zen/workspaces/ZenWorkspaces.mjs

@@ -926,6 +926,7 @@ var gZenWorkspaces = new (class extends nsZenMultiWindowFeature {
     await this.initializeTabsStripSections();
     this._initializeEmptyTab();
     await gZenPinnedTabManager.refreshPinnedTabs({ init: true });
+    this._invalidateBookmarkContainers();
     await this.changeWorkspace(activeWorkspace, { onInit: true });
     this.#fixTabPositions();
     this.onWindowResize();

src/zen/workspaces/zen-workspaces.css

@@ -317,14 +317,13 @@ zen-workspace {
         opacity: 1;
       }
     }
-
-    &,
-    & .zen-workspace-normal-tabs-section {
-      height: 100%;
-    }
   }
 }
 
+.zen-workspace-empty-space {
+  -moz-window-dragging: drag;
+}
+
 /** Customiable UI, this is an auto generated ID */
 #wrapper-zen-workspaces-button {
   width: 100%;

surfer.json

@@ -19,7 +19,7 @@
       "brandShortName": "Zen",
       "brandFullName": "Zen Browser",
       "release": {
-        "displayVersion": "1.15.3b",
+        "displayVersion": "1.15.4b",
         "github": {
           "repo": "zen-browser/desktop"
         },