fix: Fixed workspace overflows not working and refined new HSL picker, b=no-bug, c=tabs, common, compact-mode, workspaces

src/zen/workspaces/ZenGradientGenerator.mjs

@@ -1110,9 +1110,7 @@
 
       const rotation = -45; // TODO: Detect rotation based on the accent color
       if (themedColors.length === 0) {
-        return forToolbar
-          ? this.getToolbarModifiedBase()
-          : 'var(--zen-themed-toolbar-bg-transparent)';
+        return forToolbar ? this.getToolbarModifiedBase() : 'transparent';
       } else if (themedColors.length === 1) {
         return this.getSingleRGBColor(themedColors[0], forToolbar);
       } else if (themedColors.length === 2) {
@@ -1282,13 +1280,16 @@
 
     getMostDominantColor(allColors) {
       const dominantColor = this.getPrimaryColor(allColors);
+      if (!dominantColor) {
+        return this.hexToRgb(this.getNativeAccentColor());
+      }
       const result = this.pSBC(
         this.isDarkMode ? 0.2 : -0.5,
         `rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})`
       );
       const color = result?.match(/\d+/g)?.map(Number);
       if (!color || color.length !== 3) {
-        return this.getNativeAccentColor();
+        return this.hexToRgb(this.getNativeAccentColor());
       }
       return color;
     }
@@ -1492,7 +1493,7 @@
               : `rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})`
           );
           let isDarkMode = this.isDarkMode;
-          if (dominantColor !== this.hexToRgb(this.getNativeAccentColor())) {
+          if (dominantColor.toString() !== this.hexToRgb(this.getNativeAccentColor()).toString()) {
             isDarkMode = browser.gZenThemePicker.shouldBeDarkMode(dominantColor);
             browser.document.documentElement.setAttribute('zen-should-be-dark-mode', isDarkMode);
           } else {
@@ -1558,7 +1559,7 @@
         return primaryColor.c;
       }
       if (colors.length === 0) {
-        return this.hexToRgb(this.getNativeAccentColor());
+        return undefined;
       }
       // Get the middle color
       return colors[Math.floor(colors.length / 2)].c;

src/zen/workspaces/ZenWorkspaceCreation.mjs

@@ -119,7 +119,7 @@
         }
       }
 
-      for (const element of ZenWorkspaceCreation.elementsToDisable) {
+      for (const element of nsZenWorkspaceCreation.elementsToDisable) {
         const el = document.getElementById(element);
         if (el) {
           el.setAttribute('disabled', 'true');

src/zen/workspaces/ZenWorkspaces.mjs

@@ -2840,4 +2840,19 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
       }
     }
   }
+
+  updateOverflowingTabs() {
+    if (!this._hasInitializedTabsStrip) {
+      return;
+    }
+    const currentWorkspaceStrip = this.workspaceElement(this.activeWorkspace);
+    if (!currentWorkspaceStrip) {
+      return;
+    }
+    if (currentWorkspaceStrip.overflows) {
+      gBrowser.tabContainer.setAttribute('overflow', 'true');
+    } else {
+      gBrowser.tabContainer.removeAttribute('overflow');
+    }
+  }
 })();

src/zen/workspaces/zen-gradient-generator.css

@@ -210,6 +210,7 @@
     overflow: visible;
     min-width: calc(100% + 2rem);
     scale: 1.2;
+    margin-left: 4px;
   }
 }
 
@@ -298,6 +299,7 @@
   transform: translate(-50%, -50%);
   white-space: nowrap;
   pointer-events: none;
+  font-size: small;
 
   &[hidden] {
     display: none;
@@ -437,3 +439,13 @@
   max-height: 28px;
   margin: 0 !important;
 }
+
+:root:not([zen-should-be-dark-mode]) {
+  #PanelUI-zen-gradient-generator-opacity {
+    display: none !important;
+  }
+
+  #PanelUI-zen-gradient-slider-wave svg path {
+    stroke: dimgray !important;
+  }
+}

src/zen/workspaces/zen-workspaces.css

@@ -34,7 +34,8 @@
 
   & toolbarbutton {
     margin: 0;
-    width: 25px;
+    width: 28px;
+    height: 28px;
     display: flex;
     justify-content: center;
     padding: 0 !important;