Refactor tab drag-and-drop functionality and enhance drag indicator styling

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..aa672d49e5d3e8e0ce4747187becbc790e25a5f1 100644
+index 8aeb244ffca9f48661805f5b7d860b5896055562..35f5562d60d70ac4e117c7f098d96eccdd9bbbc4 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -94,7 +94,7 @@
@@ -39,15 +39,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
        if (
          (effects == "move" || effects == "copy") &&
          this == draggedTab.container &&
-@@ -955,6 +958,7 @@
- 
-     // eslint-disable-next-line complexity
-     on_drop(event) {
-+      gZenPinnedTabManager.removeTabContainersDragoverClass();
-       var dt = event.dataTransfer;
-       var dropEffect = dt.dropEffect;
-       var draggedTab;
-@@ -972,6 +976,14 @@
+@@ -972,6 +975,14 @@
  
        this._tabDropIndicator.hidden = true;
        event.stopPropagation();
@@ -62,7 +54,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
        if (draggedTab && dropEffect == "copy") {
          // copy the dropped tab (wherever it's from)
          let newIndex = this._getDropIndex(event);
-@@ -1010,7 +1022,7 @@
+@@ -1010,7 +1021,7 @@
            }
          } else {
            let pinned = draggedTab.pinned;
@@ -71,7 +63,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
            let tabs = this.visibleTabs.slice(
              pinned ? 0 : numPinned,
              pinned ? numPinned : undefined
-@@ -1090,7 +1102,7 @@
+@@ -1090,7 +1101,7 @@
                let postTransitionCleanup = () => {
                  tab.removeAttribute("tabdrop-samewindow");
  
@@ -80,7 +72,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
                  if (dropIndex !== false) {
                    gBrowser.moveTabTo(tab, dropIndex);
                    if (!directionForward) {
-@@ -1100,7 +1112,7 @@
+@@ -1100,7 +1111,7 @@
  
                  gBrowser.syncThrobberAnimations(tab);
                };
@@ -89,7 +81,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
                  postTransitionCleanup();
                } else {
                  let onTransitionEnd = transitionendEvent => {
-@@ -1263,7 +1275,8 @@
+@@ -1263,7 +1274,8 @@
        if (
          dt.mozUserCancelled ||
          dt.dropEffect != "none" ||
@@ -99,7 +91,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
        ) {
          delete draggedTab._dragData;
          return;
-@@ -1512,7 +1525,7 @@
+@@ -1512,7 +1524,7 @@
        }
  
        this.#allTabs = [
@@ -108,7 +100,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
          ...children,
        ];
        return this.#allTabs;
-@@ -1593,6 +1606,7 @@
+@@ -1593,6 +1605,7 @@
        }
  
        this.#focusableItems = [
@@ -116,7 +108,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
          ...verticalPinnedTabsContainer.children,
          ...focusableItems,
        ];
-@@ -1617,8 +1631,8 @@
+@@ -1617,8 +1630,8 @@
      #isContainerVerticalPinnedExpanded(tab) {
        return (
          this.verticalMode &&
@@ -127,7 +119,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
        );
      }
  
-@@ -1816,7 +1830,7 @@
+@@ -1816,7 +1829,7 @@
            let rect = ele => {
              return window.windowUtils.getBoundsWithoutFlushing(ele);
            };
@@ -136,7 +128,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
            if (tab && rect(tab).width <= this._tabClipWidth) {
              this.setAttribute("closebuttons", "activetab");
            } else {
-@@ -1832,6 +1846,7 @@
+@@ -1832,6 +1845,7 @@
          this.arrowScrollbox.ensureElementIsVisible(selectedTab, aInstant);
        }
  
@@ -144,7 +136,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
        selectedTab._notselectedsinceload = false;
      }
  
-@@ -1879,7 +1894,7 @@
+@@ -1879,7 +1893,7 @@
          if (isEndTab && !this._hasTabTempMaxWidth) {
            return;
          }
@@ -153,7 +145,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
          // Force tabs to stay the same width, unless we're closing the last tab,
          // which case we need to let them expand just enough so that the overall
          // tabbar width is the same.
-@@ -1894,7 +1909,7 @@
+@@ -1894,7 +1908,7 @@
          let tabsToReset = [];
          for (let i = numPinned; i < tabs.length; i++) {
            let tab = tabs[i];
@@ -162,7 +154,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
            if (!isEndTab) {
              // keep tabs the same width
              tab.style.transition = "none";
-@@ -1963,13 +1978,13 @@
+@@ -1963,13 +1977,13 @@
        let verticalTabsContainer = document.getElementById(
          "vertical-pinned-tabs-container"
        );
@@ -179,7 +171,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
          }
        }
  
-@@ -1993,7 +2008,7 @@
+@@ -1993,7 +2007,7 @@
  
      _positionPinnedTabs() {
        let tabs = this.visibleTabs;
@@ -188,7 +180,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
        let absPositionHorizontalTabs =
          this.overflowing && tabs.length > numPinned && numPinned > 0;
  
-@@ -2074,7 +2089,7 @@
+@@ -2074,7 +2088,7 @@
          return;
        }
  
@@ -197,7 +189,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
  
        let directionX = screenX > dragData.animLastScreenX;
        let directionY = screenY > dragData.animLastScreenY;
-@@ -2257,9 +2272,9 @@
+@@ -2257,9 +2271,9 @@
        }
  
        let pinned = draggedTab.pinned;
@@ -209,13 +201,14 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..aa672d49e5d3e8e0ce4747187becbc79
          pinned ? numPinned : undefined
        );
  
-@@ -2502,8 +2517,8 @@
+@@ -2502,8 +2516,9 @@
        );
      }
  
 -    _finishAnimateTabMove() {
 -      if (!this.hasAttribute("movingtab")) {
 +    _finishAnimateTabMove(always = false) {
++      gZenPinnedTabManager.removeTabContainersDragoverClass();
 +      if (!this.hasAttribute("movingtab") && !always) {
          return;
        }