fix: Fixed compact mode animation not resolving on double toolbar, b=no-bug, c=compact-mode

Co-authored-by: mr. m <91018726+mr-cheffy@users.noreply.github.com>

locales/en-US/browser/browser/zen-workspaces.ftl

@@ -23,6 +23,9 @@ zen-workspaces-panel-change-icon =
 zen-workspaces-panel-context-default-profile =
     .label = Set Profile
 
+zen-workspaces-panel-unload =
+    .label = Unload Space
+
 zen-workspaces-how-to-reorder-title = How to reorder spaces
 zen-workspaces-how-to-reorder-desc = Drag the space icons at the bottom of the sidebar to reorder them
 

prefs/view.yaml

@@ -51,3 +51,6 @@
 
 - name: zen.view.context-menu.refresh
   value: false
+
+- name: zen.view.borderless-fullscreen
+  value: true

prefs/zen.yaml

@@ -11,6 +11,9 @@
 - name: zen.tabs.rename-tabs
   value: true
 
+- name: zen.tabs.essentials.max
+  value: 12
+
 - name: zen.tabs.show-newtab-vertical
   value: true
 

src/browser/base/content/zen-commands.inc.xhtml

@@ -42,6 +42,7 @@
   <command id="cmd_contextZenRemoveFromEssentials" />
 
   <command id="cmd_zenCtxDeleteWorkspace" />
+  <command id="cmd_zenUnloadWorkspace" />
   <command id="cmd_zenChangeWorkspaceName" />
   <command id="cmd_zenChangeWorkspaceIcon" />
   <command id="cmd_zenReorderWorkspaces" />

src/browser/base/content/zen-panels/popups.inc

@@ -25,6 +25,7 @@
     hide-if-usercontext-disabled="true">
     <menupopup />
   </menu>
+  <menuitem id="context_zenUnloadWorkspace" data-l10n-id="zen-workspaces-panel-unload" command="cmd_zenUnloadWorkspace"/>
   <menuseparator id="context_zenWorkspacesSeparator"/>
   <menuseparator/>
   <menuitem id="context_zenReorderWorkspaces" data-l10n-id="zen-workspaces-panel-context-reorder" command="cmd_zenReorderWorkspaces"/>

src/zen/common/ZenCustomizableUI.sys.mjs

@@ -106,12 +106,20 @@ export var ZenCustomizableUI = new (class {
 
   _initCreateNewButton(window) {
     const button = window.document.getElementById('zen-create-new-button');
-    button.addEventListener('command', () => {
+    button.addEventListener('command', (event) => {
       if (button.hasAttribute('open')) {
         return;
       }
       const popup = window.document.getElementById('zenCreateNewPopup');
-      popup.openPopup(button, 'before_start');
+      popup.openPopup(
+        button,
+        'before_start',
+        0,
+        0,
+        true /* isContextMenu */,
+        false /* attributesOverride */,
+        event
+      );
     });
   }
 

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

@@ -109,6 +109,10 @@
   border-radius: 0px !important;
 }
 
+#urlbar:not([breakout-extend='true']) .urlbar-input-box {
+  font-weight: 500;
+}
+
 :root[zen-single-toolbar='true'] #urlbar:not([breakout-extend='true']) {
   & #urlbar-input {
     cursor: default;

src/zen/common/zen-sets.js

@@ -131,6 +131,10 @@ document.addEventListener(
             }
             break;
           }
+          case 'cmd_zenUnloadWorkspace': {
+            gZenWorkspaces.unloadWorkspace();
+            break;
+          }
           default:
             gZenGlanceManager.handleMainCommandSet(event);
             if (event.target.id.startsWith('cmd_zenWorkspaceSwitch')) {

src/zen/common/zenThemeModifier.js

@@ -96,7 +96,8 @@ var ZenThemeModifier = {
     if (
       window.fullScreen &&
       window.gZenCompactModeManager?.preference &&
-      !document.getElementById('tabbrowser-tabbox')?.hasAttribute('zen-split-view')
+      !document.getElementById('tabbrowser-tabbox')?.hasAttribute('zen-split-view') &&
+      Services.prefs.getBoolPref('zen.view.borderless-fullscreen', true)
     ) {
       separation = 0;
     }

src/zen/compact-mode/ZenCompactMode.mjs

@@ -418,6 +418,7 @@ var gZenCompactModeManager = {
         } else {
           this.sidebar.removeAttribute('animate'); // remove the attribute if we are not animating
           document.documentElement.removeAttribute('zen-compact-animating');
+          resolve();
         }
       });
     });
@@ -593,7 +594,7 @@ var gZenCompactModeManager = {
           }
 
           if (
-            event.explicitOriginalTarget.closest('#urlbar[zen-floating-urlbar]') ||
+            event.explicitOriginalTarget?.closest?.('#urlbar[zen-floating-urlbar]') ||
             (document.documentElement.getAttribute('supress-primary-adjustment') === 'true' &&
               gZenVerticalTabsManager._hasSetSingleToolbar) ||
             this._hasHoveredUrlbar

src/zen/folders/ZenFolders.mjs

@@ -1615,11 +1615,6 @@
           const parentWorkingData = tabFolderWorkingData.get(stateData.parentId);
           if (parentWorkingData && parentWorkingData.node) {
             switch (stateData?.prevSiblingInfo?.type) {
-              case 'group': {
-                const folder = document.getElementById(stateData.prevSiblingInfo.id);
-                folder.after(node);
-                break;
-              }
               case 'tab': {
                 const tab = parentWorkingData.node.querySelector(
                   `[zen-pin-id="${stateData.prevSiblingInfo.id}"]`
@@ -1627,6 +1622,18 @@
                 tab.after(node);
                 break;
               }
+              case 'group': {
+                const folder = document.getElementById(stateData.prevSiblingInfo.id);
+                if (folder) {
+                  folder.after(node);
+                  break;
+                }
+                // If we didn't find the group, we should debug it and continue to default case.
+                console.warn(
+                  `Zen Folders: Could not find previous sibling group with id ${stateData.prevSiblingInfo.id} while restoring session.`
+                );
+                // @eslint-disable-next-line no-fallthrough
+              }
               default: {
                 // Should insert after zen-empty-tab
                 const start =

src/zen/media/zen-media-controls.css

@@ -108,6 +108,10 @@
       transform: translateY(0) !important;
       pointer-events: auto;
     }
+
+    & #zen-media-info-vbox label[overflow] {
+      animation: zen-back-and-forth-text 10s infinite ease-in-out;
+    }
   }
 
   & #zen-media-focus-button::after {
@@ -255,10 +259,6 @@
     margin-left: 0;
     font-weight: 500;
     position: relative; /* For the animation */
-
-    &[overflow] {
-      animation: zen-back-and-forth-text 10s infinite ease-in-out;
-    }
   }
 }
 

src/zen/tabs/ZenPinnedTabManager.mjs

@@ -38,6 +38,12 @@
         'zen.pinned-tab-manager.close-shortcut-behavior',
         'switch'
       );
+      XPCOMUtils.defineLazyPreferenceGetter(
+        lazy,
+        'zenTabsEssentialsMax',
+        'zen.tabs.essentials.max',
+        12
+      );
       ChromeUtils.defineESModuleGetters(lazy, {
         E10SUtils: 'resource://gre/modules/E10SUtils.sys.mjs',
       });
@@ -68,8 +74,6 @@
   }
 
   class nsZenPinnedTabManager extends nsZenDOMOperatedFeature {
-    MAX_ESSENTIALS_TABS = 12;
-
     hasInitializedPins = false;
     promiseInitializedPinned = new Promise((resolve) => {
       this._resolvePinnedInitializedInternal = resolve;
@@ -140,6 +144,10 @@
       return !gZenWorkspaces.privateWindowOrDisabled;
     }
 
+    get maxEssentialTabs() {
+      return lazy.zenTabsEssentialsMax;
+    }
+
     async refreshPinnedTabs({ init = false } = {}) {
       if (!this.enabled) {
         return;
@@ -1055,7 +1063,7 @@
       const element = window.MozXULElement.parseXULToFragment(`
             <menuitem id="context_zen-add-essential"
                       data-l10n-id="tab-context-zen-add-essential"
-                      data-l10n-args='{"num": "0"}'
+                      data-l10n-args='{"num": "0", "max": "12"}'
                       hidden="true"
                       disabled="true"
                       command="cmd_contextZenAddToEssentials"/>
@@ -1081,6 +1089,7 @@
         contextTab.getAttribute('zen-essential') || !!contextTab.group;
       document.l10n.setArgs(document.getElementById('context_zen-add-essential'), {
         num: gBrowser._numZenEssentials,
+        max: this.maxEssentialTabs,
       });
       document
         .getElementById('cmd_contextZenAddToEssentials')
@@ -1404,7 +1413,7 @@
           (tab.getAttribute('usercontextid') || 0) !=
             gZenWorkspaces.getActiveWorkspaceFromCache().containerTabId &&
           gZenWorkspaces.containerSpecificEssentials
-        ) && gBrowser._numZenEssentials < this.MAX_ESSENTIALS_TABS
+        ) && gBrowser._numZenEssentials < this.maxEssentialTabs
       );
     }
 

src/zen/workspaces/ZenWorkspaces.mjs

@@ -1479,6 +1479,26 @@ var gZenWorkspaces = new (class extends nsZenMultiWindowFeature {
     });
   }
 
+  async unloadWorkspace() {
+    const workspaceId = this.#contextMenuData?.workspaceId || this.activeWorkspace;
+
+    const tabsToUnload = this.allStoredTabs.filter(
+      (tab) =>
+        tab.getAttribute('zen-workspace-id') === workspaceId &&
+        !tab.hasAttribute('zen-empty-tab') &&
+        !tab.hasAttribute('zen-essential') &&
+        !tab.hasAttribute('pending')
+    );
+
+    if (tabsToUnload.length === 0) {
+      return;
+    }
+
+    this.log('Unloading workspace', workspaceId);
+
+    await gBrowser.explicitUnloadTabs(tabsToUnload); // TODO: unit test this
+  }
+
   moveTabToWorkspace(tab, workspaceID) {
     return this.moveTabsToWorkspace([tab], workspaceID);
   }
@@ -2541,7 +2561,9 @@ var gZenWorkspaces = new (class extends nsZenMultiWindowFeature {
         this._lastSelectedWorkspaceTabs[workspaceID] = gZenGlanceManager.getTabOrGlanceParent(tab);
         tab.removeAttribute('change-workspace');
         const workspace = this.getWorkspaceFromId(workspaceID);
-        await this.changeWorkspace(workspace);
+        setTimeout(() => {
+          this.changeWorkspace(workspace);
+        }, 0);
       }
       return;
     }

surfer.json

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