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

src/browser/base/content/zen-panels/gradient-generator.inc

@@ -57,8 +57,8 @@
                       style="stroke-width: 8px;"/>
                 <defs>
                   <linearGradient id="PanelUI-zen-gradient-generator-slider-wave-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
-                    <stop offset="0%" stop-color="light-dark(rgb(77, 77, 77), rgb(161, 161, 161))"/>
-                    <stop offset="0%" stop-color="light-dark(rgba(77, 77, 77), rgba(161, 161, 161))"/>
+                    <stop offset="0%" stop-color="light-dark(rgb(90, 90, 90), rgb(161, 161, 161))"/>
+                    <stop offset="0%" stop-color="light-dark(rgb(90, 90, 90), rgba(161, 161, 161))"/>
                     <stop offset="100%" stop-color="light-dark(rgba(77, 77, 77, 0.5), rgba(161, 161, 161, 0.5))"/>
                   </linearGradient>
                 </defs>

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

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
-index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113c072241f 100644
+index 67bba60cfc21b940f263e1eb26b8b5429355660f..9f73966429d8e82bb9ef0af73a996c8cff230eab 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -83,7 +83,7 @@
@@ -144,7 +144,15 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
      }
  
      get verticalMode() {
-@@ -1625,29 +1655,54 @@
+@@ -1617,6 +1647,7 @@
+     }
+ 
+     get overflowing() {
++      gZenWorkspaces.updateOverflowingTabs();
+       return this.hasAttribute("overflow");
+     }
+ 
+@@ -1625,29 +1656,54 @@
        if (this.#allTabs) {
          return this.#allTabs;
        }
@@ -207,7 +215,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
      }
  
      /**
-@@ -1702,23 +1757,18 @@
+@@ -1702,23 +1758,18 @@
        }
  
        let elementIndex = 0;
@@ -235,7 +243,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
              let visibleTabsInGroup = child.tabs.filter(tab => tab.visible);
              visibleTabsInGroup.forEach(tab => {
                tab.elementIndex = elementIndex++;
-@@ -1728,10 +1778,7 @@
+@@ -1728,10 +1779,7 @@
          }
        }
  
@@ -247,7 +255,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
  
        return this.#focusableItems;
      }
-@@ -1739,6 +1786,7 @@
+@@ -1739,6 +1787,7 @@
      _invalidateCachedTabs() {
        this.#allTabs = null;
        this._invalidateCachedVisibleTabs();
@@ -255,7 +263,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
      }
  
      _invalidateCachedVisibleTabs() {
-@@ -1753,8 +1801,8 @@
+@@ -1753,8 +1802,8 @@
      #isContainerVerticalPinnedGrid(tab) {
        return (
          this.verticalMode &&
@@ -266,7 +274,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
          !this.expandOnHover
        );
      }
-@@ -1770,7 +1818,7 @@
+@@ -1770,7 +1819,7 @@
  
        if (node == null) {
          // We have a container for non-tab elements at the end of the scrollbox.
@@ -275,7 +283,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
        }
  
        node.before(tab);
-@@ -1865,7 +1913,7 @@
+@@ -1865,7 +1914,7 @@
            // There are separate "new tab" buttons for horizontal tabs toolbar, vertical tabs and
            // for when the tab strip is overflowed (which is shared by vertical and horizontal tabs);
            // Attach the long click popup to all of them.
@@ -284,7 +292,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
            const newTab2 = this.newTabButton;
            const newTabVertical = document.getElementById(
              "vertical-tabs-newtab-button"
-@@ -1960,10 +2008,12 @@
+@@ -1960,10 +2009,12 @@
  
      _handleTabSelect(aInstant) {
        let selectedTab = this.selectedItem;
@@ -297,7 +305,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
        selectedTab._notselectedsinceload = false;
      }
  
-@@ -2136,6 +2186,7 @@
+@@ -2136,6 +2187,7 @@
      }
  
      _positionPinnedTabs() {
@@ -305,7 +313,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
        let tabs = this.visibleTabs;
        let numPinned = gBrowser.pinnedTabCount;
        let absPositionHorizontalTabs =
-@@ -2210,7 +2261,7 @@
+@@ -2210,7 +2262,7 @@
          return;
        }
  
@@ -314,7 +322,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
  
        let directionX = screenX > dragData.animLastScreenX;
        let directionY = screenY > dragData.animLastScreenY;
-@@ -2219,6 +2270,8 @@
+@@ -2219,6 +2271,8 @@
  
        let { width: tabWidth, height: tabHeight } =
          draggedTab.getBoundingClientRect();
@@ -323,7 +331,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
        let shiftSizeX = tabWidth * movingTabs.length;
        let shiftSizeY = tabHeight;
        dragData.tabWidth = tabWidth;
-@@ -2248,7 +2301,7 @@
+@@ -2248,7 +2302,7 @@
        let translateX = screenX - dragData.screenX;
        let translateY = screenY - dragData.screenY;
        translateY +=
@@ -332,7 +340,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
        let firstBoundX = firstTabInRow.screenX - firstMovingTabScreenX;
        let firstBoundY = firstTabInRow.screenY - firstMovingTabScreenY;
        let lastBoundX =
-@@ -2394,12 +2447,16 @@
+@@ -2394,12 +2448,16 @@
  
        this.#clearDragOverCreateGroupTimer();
  
@@ -353,7 +361,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
  
        if (this.#rtlMode) {
          tabs.reverse();
-@@ -2413,7 +2470,7 @@
+@@ -2413,7 +2471,7 @@
        let size = this.verticalMode ? "height" : "width";
        let translateAxis = this.verticalMode ? "translateY" : "translateX";
        let scrollDirection = this.verticalMode ? "scrollTop" : "scrollLeft";
@@ -362,7 +370,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
        let translateX = event.screenX - dragData.screenX;
        let translateY = event.screenY - dragData.screenY;
  
-@@ -2427,12 +2484,21 @@
+@@ -2427,12 +2485,21 @@
        let lastTab = tabs.at(-1);
        let lastMovingTab = movingTabs.at(-1);
        let firstMovingTab = movingTabs[0];
@@ -385,7 +393,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
          translate +=
            this.arrowScrollbox.scrollbox[scrollDirection] - dragData.scrollPos;
        } else if (isPinned && this.verticalMode) {
-@@ -2451,6 +2517,9 @@
+@@ -2451,6 +2518,9 @@
            // Shift the `.tab-group-label-container` to shift the label element.
            item = item.parentElement;
          }
@@ -395,7 +403,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
          item.style.transform = `${translateAxis}(${translate}px)`;
        }
  
-@@ -2588,6 +2657,9 @@
+@@ -2588,6 +2658,9 @@
              break;
            }
            let element = tabs[mid];
@@ -405,7 +413,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
            let elementForSize = isTabGroupLabel(element)
              ? element.parentElement
              : element;
-@@ -2664,7 +2736,7 @@
+@@ -2664,7 +2737,7 @@
        let shouldCreateGroupOnDrop;
        let dropBefore;
        if (dropElement) {
@@ -414,7 +422,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
            ? dropElement.parentElement
            : dropElement;
  
-@@ -2726,12 +2798,12 @@
+@@ -2726,12 +2799,12 @@
          }
        }
  
@@ -429,7 +437,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
            isTab(dropElement) &&
            !dropElement?.group &&
            overlapPercent > dragOverGroupingThreshold;
-@@ -2773,7 +2845,7 @@
+@@ -2773,7 +2846,7 @@
                // Dropping right before the tab group.
                dropElement = dropElementGroup;
                colorCode = undefined;
@@ -438,7 +446,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
                // Dropping right after the collapsed tab group.
                dropElement = dropElementGroup;
                colorCode = undefined;
-@@ -2803,7 +2875,7 @@
+@@ -2803,7 +2876,7 @@
        // Shift background tabs to leave a gap where the dragged tab
        // would currently be dropped.
        for (let item of tabs) {
@@ -447,7 +455,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
            continue;
          }
  
-@@ -2812,6 +2884,9 @@
+@@ -2812,6 +2885,9 @@
          if (isTabGroupLabel(item)) {
            // Shift the `.tab-group-label-container` to shift the label element.
            item = item.parentElement;
@@ -457,7 +465,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
          }
          item.style.transform = transform;
        }
-@@ -2864,8 +2939,9 @@
+@@ -2864,8 +2940,9 @@
        );
      }
  
@@ -469,7 +477,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
          return;
        }
  
-@@ -2877,6 +2953,12 @@
+@@ -2877,6 +2954,12 @@
            item = item.parentElement;
          }
          item.style.transform = "";
@@ -482,7 +490,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
          item.removeAttribute("dragover-createGroup");
        }
        this.removeAttribute("movingtab-createGroup");
-@@ -2923,7 +3005,7 @@
+@@ -2923,7 +3006,7 @@
          let postTransitionCleanup = () => {
            movingTab._moveTogetherSelectedTabsData.animate = false;
          };
@@ -491,7 +499,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
            postTransitionCleanup();
          } else {
            let onTransitionEnd = transitionendEvent => {
-@@ -3096,7 +3178,7 @@
+@@ -3096,7 +3179,7 @@
      }
  
      _notifyBackgroundTab(aTab) {
@@ -500,7 +508,7 @@ index 67bba60cfc21b940f263e1eb26b8b5429355660f..0d493a544d20e75e6e847d93fad1e113
          return;
        }
  
-@@ -3222,6 +3304,9 @@
+@@ -3222,6 +3305,9 @@
            return null;
          }
        }

src/widget/cocoa/nsCocoaWindow-mm.patch

@@ -1,5 +1,5 @@
 diff --git a/widget/cocoa/nsCocoaWindow.mm b/widget/cocoa/nsCocoaWindow.mm
-index c4627621344d35081f11a7b0e03d02eca2097609..d2e5fe429aaac8b701a03380a67f4ea978d566b3 100644
+index c4627621344d35081f11a7b0e03d02eca2097609..709a0dbfe46daa4148a423242c63598ba6904fde 100644
 --- a/widget/cocoa/nsCocoaWindow.mm
 +++ b/widget/cocoa/nsCocoaWindow.mm
 @@ -7376,7 +7376,7 @@ - (id)initWithContentRect:(NSRect)aContentRect
@@ -7,7 +7,7 @@ index c4627621344d35081f11a7b0e03d02eca2097609..d2e5fe429aaac8b701a03380a67f4ea9
  // Returns an autoreleased NSImage.
  static NSImage* GetMenuMaskImage() {
 -  const CGFloat radius = 6.0f;
-+  const CGFloat radius = 14.0f;
++  const CGFloat radius = 11.0f;
    const NSSize maskSize = {radius * 3.0f, radius * 3.0f};
    NSImage* maskImage = [NSImage imageWithSize:maskSize
                                        flipped:FALSE

src/zen/common/styles/zen-browser-ui.css

@@ -46,7 +46,10 @@
   pointer-events: none;
 
   isolation: isolate;
-  background: var(--zen-themed-toolbar-bg-transparent);
+
+  :root[zen-should-be-dark-mode] {
+    background: var(--zen-themed-toolbar-bg-transparent);
+  }
 
   &::after,
   &::before {

src/zen/common/styles/zen-panel-ui.css

@@ -64,7 +64,7 @@ panel[type='arrow'] {
     --panel-border-radius: 6px;
 
     &::part(content) {
-      background-color: light-dark(rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.2)) !important;
+      background-color: transparent !important;
     }
   }
 }

src/zen/compact-mode/ZenCompactMode.mjs

@@ -155,13 +155,13 @@ var gZenCompactModeManager = {
   },
 
   updateCompactModeContext(isSingleToolbar) {
-    const IDs = [
-      'zen-context-menu-compact-mode-hide-sidebar',
-      'zen-context-menu-compact-mode-hide-toolbar',
-      'zen-context-menu-compact-mode-hide-both',
-    ];
-    for (let id of IDs) {
-      document.getElementById(id).disabled = isSingleToolbar;
+    const menuitem = document.getElementById('zen-context-menu-compact-mode-toggle');
+    const menu = document.getElementById('zen-context-menu-compact-mode');
+    menu.setAttribute('hidden', isSingleToolbar);
+    if (isSingleToolbar) {
+      menu.before(menuitem);
+    } else {
+      menu.querySelector('menupopup').prepend(menuitem);
     }
   },
 

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;