Enhance ZenUIManager and ZenPinnedTabManager for improved tab drag-and-drop behavior and URL bar handling

src/browser/base/content/ZenUIManager.mjs

@@ -144,11 +144,11 @@ var gZenUIManager = {
   },
 
   _prevUrlbarLabel: null,
-  _lastSearch: "",
+  _lastSearch: '',
 
   handleNewTab(werePassedURL, searchClipboard, where) {
-    const shouldOpenURLBar = Services.prefs.getBoolPref('zen.urlbar.replace-newtab')
-      && !werePassedURL && !searchClipboard && where === 'tab';
+    const shouldOpenURLBar =
+      Services.prefs.getBoolPref('zen.urlbar.replace-newtab') && !werePassedURL && !searchClipboard && where === 'tab';
     if (shouldOpenURLBar) {
       this._prevUrlbarLabel = gURLBar._untrimmedValue;
       gURLBar._zenHandleUrlbarClose = this.handleUrlbarClose.bind(this);
@@ -164,7 +164,7 @@ var gZenUIManager = {
     gURLBar._zenHandleUrlbarClose = null;
     if (onSwitch) {
       this._prevUrlbarLabel = null;
-      this._lastSearch = "";
+      this._lastSearch = '';
     } else {
       this._lastSearch = gURLBar._untrimmedValue;
     }

src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css

@@ -995,7 +995,7 @@
   }
 
   &:hover .tab-background {
-    background: var(--tab-selected-bgcolor);
+    background: color-mix(in srgb, var(--zen-toolbar-element-bg) 50%, var(--tab-selected-bgcolor) 50%);
   }
 
   @media (-moz-bool-pref: 'zen.theme.essentials-favicon-bg') {
@@ -1091,28 +1091,47 @@
 #zen-drag-indicator {
   --zen-drag-indicator-height: 2px;
   --zen-drag-indicator-bg: color-mix(in srgb, var(--zen-primary-color) 50%, light-dark(rgba(0, 0, 0, .85), rgba(255, 255, 255, .95)) 50%);
-  width: calc(var(--indicator-width) - 2 * var(--zen-drag-indicator-height) - 4px);
-  height: var(--zen-drag-indicator-height);
   position: fixed;
   z-index: 1000;
   background: var(--zen-drag-indicator-bg);
-  transition: top 0.1s ease-out;
   pointer-events: none;
-  left: calc(var(--indicator-left) + 2 * var(--zen-drag-indicator-height) + 4px);
   border-radius: 5px;
 
   &::before {
     content: "";
     position: absolute;
-    left: calc(-2 * var(--zen-drag-indicator-height));
-    top: 50%;
     height: calc(2 * var(--zen-drag-indicator-height));
     width: calc(2 * var(--zen-drag-indicator-height));
     border: var(--zen-drag-indicator-height) solid var(--zen-drag-indicator-bg);
     border-radius: 50%;
-    transform: translate(calc(-1 * var(--zen-drag-indicator-height)), -50%);
     background: transparent;
   }
+
+  &[orientation='horizontal'] {
+    left: calc(var(--indicator-left) + 2 * var(--zen-drag-indicator-height) + 4px);
+    width: calc(var(--indicator-width) - 2 * var(--zen-drag-indicator-height) - 4px);
+    height: var(--zen-drag-indicator-height);
+    transition: top 0.1s ease-out, left 0.1s ease-out, width 0.1s ease-out;
+
+    &::before {
+      left: calc(-2 * var(--zen-drag-indicator-height));
+      top: 50%;
+      transform: translate(calc(-1 * var(--zen-drag-indicator-height)), -50%);
+    }
+  }
+
+  &[orientation='vertical'] {
+    top: calc(var(--indicator-top) + 2 * var(--zen-drag-indicator-height) + 4px);
+    height: calc(var(--indicator-height) - 2 * var(--zen-drag-indicator-height) - 4px);
+    width: var(--zen-drag-indicator-height);
+    transition: top 0.1s ease-out, left 0.1s ease-out, height 0.1s ease-out;
+
+    &::before {
+      top: calc(-2 * var(--zen-drag-indicator-height));
+      left: 50%;
+      transform: translate(-50%, calc(-1 * var(--zen-drag-indicator-height)));
+    }
+  }
 }
 
 /* Horizontal tabs reordering indicators */

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

@@ -649,7 +649,7 @@
       const tabsTarget = event.target.closest('#tabbrowser-arrowscrollbox');
 
       let moved = false;
-      let isVertical = true;
+      let isVertical = this.expandedSidebarMode;
       let isRegularTabs = false;
       // Check for pinned tabs container
       if (pinnedTabsTarget) {
@@ -724,6 +724,10 @@
       return this._dragIndicator;
     }
 
+    get expandedSidebarMode() {
+      return document.documentElement.getAttribute('zen-sidebar-expanded') === 'true';
+    }
+
     applyDragoverClass(event, draggedTab) {
       const pinnedTabsTarget = event.target.closest('#vertical-pinned-tabs-container');
       const essentialTabsTarget = event.target.closest('#zen-essentials-container');
@@ -736,7 +740,7 @@
       }
 
       let shouldAddDragOverElement = false;
-      let isVertical = true;
+      let isVertical = this.expandedSidebarMode;
 
       // Decide whether we should show a dragover class for the given target
       if (pinnedTabsTarget) {
@@ -755,6 +759,7 @@
       }
 
       if (!shouldAddDragOverElement) {
+        this.removeTabContainersDragoverClass();
         return;
       }
 
@@ -771,11 +776,26 @@
         } else {
           top = rect.top + 'px';
         }
+        indicator.setAttribute('orientation', 'horizontal');
         indicator.style.setProperty('--indicator-left', rect.left + separation / 2 + 'px');
         indicator.style.setProperty('--indicator-width', rect.width - separation + 'px');
         indicator.style.top = top;
+        indicator.style.removeProperty('left');
       } else {
-        // SUPPORT FOR ESSENTIALS
+        const separation = 8;
+        const middleX = targetTab.screenX + rect.width / 2;
+        const indicator = this.dragIndicator;
+        let left = 0;
+        if (event.screenX > middleX) {
+          left = rect.left + rect.width + 1 + 'px';
+        } else {
+          left = rect.left - 2 + 'px';
+        }
+        indicator.setAttribute('orientation', 'vertical');
+        indicator.style.setProperty('--indicator-top', rect.top + separation / 2 + 'px');
+        indicator.style.setProperty('--indicator-height', rect.height - separation + 'px');
+        indicator.style.left = left;
+        indicator.style.removeProperty('top');
       }
     }
   }

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

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tab.js b/browser/components/tabbrowser/content/tab.js
-index d41c486c02a6f09dcff5741a59ad8b617294c481..44535569b609d9bcd09f10e46e3161ce0a331c30 100644
+index d41c486c02a6f09dcff5741a59ad8b617294c481..544ca38934d9b0fe0722082c71ee58f148c2cc90 100644
 --- a/browser/components/tabbrowser/content/tab.js
 +++ b/browser/components/tabbrowser/content/tab.js
 @@ -37,6 +37,7 @@
@@ -27,7 +27,15 @@ index d41c486c02a6f09dcff5741a59ad8b617294c481..44535569b609d9bcd09f10e46e3161ce
          event.target.classList.contains("tab-icon-overlay")
        ) {
          eventMaySelectTab = false;
-@@ -553,6 +555,11 @@
+@@ -544,6 +546,7 @@
+         if (this.multiselected) {
+           gBrowser.removeMultiSelectedTabs();
+         } else {
++          gZenPinnedTabManager._removePinnedAttributes(this.contextTab, true);
+           gBrowser.removeTab(this, {
+             animate: true,
+             triggeringEvent: event,
+@@ -553,6 +556,11 @@
          // (see tabbrowser-tabs 'click' handler).
          gBrowser.tabContainer._blockDblClick = true;
        }