refactor: update workspace settings and improve CSS styles for better layout and responsiveness

src/browser/base/zen-components/ZenGradientGenerator.mjs

@@ -500,9 +500,8 @@
       const centerPosition = { x: rect.width / 2, y: rect.height / 2 };
 
       const harmonyAngles = getColorHarmonyType(dots.length + (action === 'add' ? 1 : action === 'remove' ? -1 : 0), this.dots);
-      if (!harmonyAngles || harmonyAngles.angles.length === 0) return dots;
-
       this.useAlgo = harmonyAngles.type;
+      if (!harmonyAngles || harmonyAngles.angles.length === 0) return dots;
 
       let primaryDot = dots.find((dot) => dot.ID === 0);
       if (!primaryDot) return [];
@@ -638,7 +637,7 @@
           }
         });
 
-        let colorPositions = this.calculateCompliments(this.dots, 'remove', this.useAlgo);
+        let colorPositions = this.calculateCompliments(this.dots, 'remove');
         this.handleColorPositions(colorPositions);
         this.updateCurrentWorkspace();
         return;
@@ -780,7 +779,7 @@
           }
         });
 
-        let colorPositions = this.calculateCompliments(this.dots, 'remove', this.useAlgo);
+        let colorPositions = this.calculateCompliments(this.dots, 'remove');
         this.handleColorPositions(colorPositions);
 
         this.updateCurrentWorkspace();

src/browser/base/zen-components/ZenMediaController.mjs

@@ -58,16 +58,8 @@ class ZenMediaController {
       }
     });
 
-    window.addEventListener('TabClose', (event) => {
-      const linkedBrowser = event.target.linkedBrowser;
-      if (!linkedBrowser?.browsingContext?.mediaController) return;
-      this.deinitMediaController(
-        linkedBrowser.browsingContext.mediaController,
-        true,
-        linkedBrowser.browserId === this._currentBrowser?.browserId,
-        true
-      );
-    });
+    const onTabDiscardedOrClosed = this.onTabDiscardedOrClosed.bind(this);
+    window.addEventListener('TabClose', onTabDiscardedOrClosed);
 
     window.addEventListener('DOMAudioPlaybackStarted', (event) => {
       setTimeout(() => {
@@ -89,6 +81,17 @@ class ZenMediaController {
     window.addEventListener('DOMAudioPlaybackStopped', () => this.updateMuteState());
   }
 
+  onTabDiscardedOrClosed(event) {
+    const linkedBrowser = event.target.linkedBrowser;
+    if (!linkedBrowser?.browsingContext?.mediaController) return;
+    this.deinitMediaController(
+      linkedBrowser.browsingContext.mediaController,
+      true,
+      linkedBrowser.browserId === this._currentBrowser?.browserId,
+      true
+    );
+  }
+
   async deinitMediaController(mediaController, shouldForget = true, shouldOverride = true, shouldHide = true) {
     if (!mediaController) return;
 

src/browser/base/zen-components/ZenTabUnloader.mjs

@@ -22,8 +22,6 @@
       'TabAttrModified',
       'TabPinned',
       'TabUnpinned',
-      'TabBrowserInserted',
-      'TabBrowserDiscarded',
       'TabShow',
       'TabHide',
       'TabOpen',
@@ -150,8 +148,6 @@
       switch (action) {
         case 'TabPinned':
         case 'TabUnpinned':
-        case 'TabBrowserInserted':
-        case 'TabBrowserDiscarded':
         case 'TabShow':
         case 'TabHide':
           break;
@@ -265,9 +261,9 @@
         tab.selected ||
         (tab.multiselected && !ignoreTimestamp) ||
         (tab.hasAttribute('busy') && !ignoreTimestamp) ||
-        tab.hasAttribute('pending') ||
         !tab.linkedPanel ||
         tab.splitView ||
+        tab.group?.hasAttribute('split-view-group') ||
         tab.attention ||
         tab.hasAttribute('glance-id') ||
         tab.linkedBrowser?.zenModeActive ||
@@ -293,8 +289,8 @@
 
     _tabPermitsUnload(tab, extraArgs) {
       return typeof extraArgs.permitUnload === 'undefined'
-        ? !tab.linkedBrowser?.permitUnload()?.permitUnload
-        : !extraArgs.permitUnload;
+        ? tab.linkedBrowser?.permitUnload()?.permitUnload
+        : extraArgs.permitUnload;
     }
   }
 

src/browser/base/zen-components/ZenWorkspaces.mjs

@@ -77,6 +77,8 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     );
     ChromeUtils.defineLazyGetter(this, 'tabContainer', () => document.getElementById('tabbrowser-tabs'));
     this._activeWorkspace = Services.prefs.getStringPref('zen.workspaces.active', '');
+
+    window.addEventListener('resize', this.onWindowResize.bind(this));
   }
 
   async afterLoadInit() {
@@ -599,6 +601,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
       } catch (e) {
         console.error('ZenWorkspaces: Error initializing theme picker', e);
       }
+      this.onWindowResize();
       await this._selectStartPage();
       this._fixTabPositions();
       this._resolveInitialized();
@@ -2368,4 +2371,21 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     const workspace = workspaces.workspaces.find((workspace) => workspace.uuid === activeWorkspace);
     return workspace.containerTabId;
   }
+
+  onWindowResize() {
+    // Check if workspace icons overflow the parent container
+    const parent = document.getElementById('zen-workspaces-button');
+    if (!parent) {
+      return;
+    }
+    // Once we are overflowing, we align the buttons to always stay inside the container,
+    // meaning we need to remove the overflow attribute to reset the width
+    parent.removeAttribute('overflow');
+    const overflow = parent.scrollWidth > parent.clientWidth;
+    parent.toggleAttribute('overflow', overflow);
+    // The maximum width a button has when it overflows based on the number of buttons
+    const numButtons = parent.children.length + 1; // +1 to exclude the active button
+    const maxWidth = 100 / numButtons;
+    parent.style.setProperty('--zen-overflowed-workspace-button-width', `${maxWidth}%`);
+  }
 })();