Refactor zen-theme.css to improve toolbar background transparency handling

src/browser/base/content/zen-styles/zen-theme.css

@@ -161,15 +161,10 @@
 
   @media (-moz-windows-mica) or (-moz-platform: macos) {
     background: transparent;
-    --zen-themed-toolbar-bg-transparency: 0;
+    --zen-themed-toolbar-bg-transparent: transparent;
     @media (-moz-bool-pref: 'zen.widget.windows.acrylic') {
-      --zen-themed-toolbar-bg-transparency: 15%;
+      --zen-themed-toolbar-bg-transparent: color-mix(in srgb, var(--zen-themed-toolbar-bg) 85%, transparent 15%);
     }
-    --zen-themed-toolbar-bg-transparent: color-mix(
-      in srgb,
-      var(--zen-themed-toolbar-bg) calc(100% - var(--zen-themed-toolbar-bg-transparency)),
-      transparent var(--zen-themed-toolbar-bg-transparency)
-    );
   }
 
   --toolbar-field-background-color: var(--zen-colors-input-bg) !important;

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

@@ -615,68 +615,70 @@
       document.getElementById('context_zen-pinned-tab-separator').hidden = !isVisible;
     }
 
-    moveToAnotherTabContainerIfNecessary(event, draggedTab) {
+    moveToAnotherTabContainerIfNecessary(event, movingTabs) {
       const pinnedTabsTarget =
         event.target.closest('#vertical-pinned-tabs-container') || event.target.closest('.zen-current-workspace-indicator');
       const essentialTabsTarget = event.target.closest('#zen-essentials-container');
       const tabsTarget = event.target.closest('#tabbrowser-arrowscrollbox');
 
-      let moved = false;
       let isVertical = this.expandedSidebarMode;
-      let isRegularTabs = false;
+      let moved = false;
-      // Check for pinned tabs container
+      for (const draggedTab of movingTabs) {
-      if (pinnedTabsTarget) {
+        let isRegularTabs = false;
-        if (!draggedTab.pinned) {
+        // Check for pinned tabs container
-          gBrowser.pinTab(draggedTab);
+        if (pinnedTabsTarget) {
-          moved = true;
+          if (!draggedTab.pinned) {
-        } else if (draggedTab.hasAttribute('zen-essential')) {
+            gBrowser.pinTab(draggedTab);
-          this.removeEssentials(draggedTab);
+            moved = true;
-          gBrowser.pinTab(draggedTab);
+          } else if (draggedTab.hasAttribute('zen-essential')) {
-          moved = true;
+            this.removeEssentials(draggedTab);
-        }
+            gBrowser.pinTab(draggedTab);
-      }
+            moved = true;
-      // Check for essentials container
+          }
-      else if (essentialTabsTarget) {
+        }
-        if (!draggedTab.hasAttribute('zen-essential')) {
+        // Check for essentials container
-          this.addToEssentials(draggedTab);
+        else if (essentialTabsTarget) {
-          moved = true;
+          if (!draggedTab.hasAttribute('zen-essential')) {
-          isVertical = false;
+            this.addToEssentials(draggedTab);
-        }
+            moved = true;
-      }
+            isVertical = false;
-      // Check for normal tabs container
+          }
-      else if (tabsTarget || event.target.id === 'zen-tabs-wrapper') {
+        }
-        if (draggedTab.pinned && !draggedTab.hasAttribute('zen-essential')) {
+        // Check for normal tabs container
-          gBrowser.unpinTab(draggedTab);
+        else if (tabsTarget || event.target.id === 'zen-tabs-wrapper') {
-          moved = true;
+          if (draggedTab.pinned && !draggedTab.hasAttribute('zen-essential')) {
-          isRegularTabs = true;
+            gBrowser.unpinTab(draggedTab);
-        } else if (draggedTab.hasAttribute('zen-essential')) {
+            moved = true;
-          this.removeEssentials(draggedTab);
+            isRegularTabs = true;
-          moved = true;
+          } else if (draggedTab.hasAttribute('zen-essential')) {
-          isRegularTabs = true;
+            this.removeEssentials(draggedTab);
-        }
+            moved = true;
-      }
+            isRegularTabs = true;
-
+          }
-      // If the tab was moved, adjust its position relative to the target tab
+        }
-      if (moved) {
+
-        const targetTab = event.target.closest('.tabbrowser-tab');
+        // If the tab was moved, adjust its position relative to the target tab
-        if (targetTab) {
+        if (moved) {
-          const rect = targetTab.getBoundingClientRect();
+          const targetTab = event.target.closest('.tabbrowser-tab');
-          let newIndex = targetTab._tPos;
+          if (targetTab) {
-
+            const rect = targetTab.getBoundingClientRect();
-          if (isVertical) {
+            let newIndex = targetTab._tPos;
-            const middleY = targetTab.screenY + rect.height / 2;
+
-            if (!isRegularTabs && event.screenY > middleY) {
+            if (isVertical) {
-              newIndex++;
+              const middleY = targetTab.screenY + rect.height / 2;
-            } else if (isRegularTabs && event.screenY < middleY) {
+              if (!isRegularTabs && event.screenY > middleY) {
-              newIndex--;
+                newIndex++;
-            }
+              } else if (isRegularTabs && event.screenY < middleY) {
-          } else {
+                newIndex--;
-            const middleX = targetTab.screenX + rect.width / 2;
+              }
-            if (event.screenX > middleX) {
+            } else {
-              newIndex++;
+              const middleX = targetTab.screenX + rect.width / 2;
-            }
+              if (event.screenX > middleX) {
+                newIndex++;
+              }
+            }
+            gBrowser.moveTabTo(draggedTab, newIndex);
           }
-          gBrowser.moveTabTo(draggedTab, newIndex);
         }
       }
 

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 8aeb244ffca9f48661805f5b7d860b5896055562..3d323615040dcb5e379519878fb7874d5b28de81 100644
+index 8aeb244ffca9f48661805f5b7d860b5896055562..393458caa425e0a980223cd3800ea0ef33542c84 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -94,7 +94,7 @@
@@ -52,7 +52,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..3d323615040dcb5e379519878fb7874d
        this._tabDropIndicator.hidden = true;
        event.stopPropagation();
 +      if (draggedTab && dropEffect == "move") {
-+        let moved = gZenPinnedTabManager.moveToAnotherTabContainerIfNecessary(event, draggedTab);
++        let moved = gZenPinnedTabManager.moveToAnotherTabContainerIfNecessary(event, movingTabs);
 +
 +        if (moved) {
 +          this._finishMoveTogetherSelectedTabs(draggedTab);