feat: Improved dragging normal tabs to the pinned section, b=no-bug, c=tabs, folders, workspaces

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

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
-index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db7946304382 100644
+index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..17e35b5d793064d099938c28d8f975e73cb55a4b 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
 @@ -422,15 +422,60 @@
@@ -199,7 +199,15 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
        } else {
          aTab.linkedBrowser.browsingContext.hasSiblings = this.tabs.length > 1;
        }
-@@ -2709,6 +2773,8 @@
+@@ -2629,7 +2693,6 @@
+             this.selectedTab = this.addTrustedTab(BROWSER_NEW_TAB_URL, {
+               tabIndex: tab._tPos + 1,
+               userContextId: tab.userContextId,
+-              tabGroup: tab.group,
+               focusUrlBar: true,
+             });
+             resolve(this.selectedBrowser);
+@@ -2709,6 +2772,8 @@
          schemelessInput,
          hasValidUserGestureActivation = false,
          textDirectiveUserActivation = false,
@@ -208,7 +216,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
        } = {}
      ) {
        // all callers of addTab that pass a params object need to pass
-@@ -2719,6 +2785,12 @@
+@@ -2719,6 +2784,12 @@
          );
        }
  
@@ -221,7 +229,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
        if (!UserInteraction.running("browser.tabs.opening", window)) {
          UserInteraction.start("browser.tabs.opening", "initting", window);
        }
-@@ -2782,6 +2854,19 @@
+@@ -2782,6 +2853,19 @@
            noInitialLabel,
            skipBackgroundNotify,
          });
@@ -241,7 +249,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
          if (insertTab) {
            // Insert the tab into the tab container in the correct position.
            this.#insertTabAtIndex(t, {
-@@ -2790,8 +2875,9 @@
+@@ -2790,8 +2874,9 @@
              ownerTab,
              openerTab,
              pinned,
@@ -252,7 +260,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
            });
          }
  
-@@ -2808,6 +2894,7 @@
+@@ -2808,6 +2893,7 @@
            openWindowInfo,
            skipLoad,
            triggeringRemoteType,
@@ -260,7 +268,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
          }));
  
          if (focusUrlBar) {
-@@ -2928,6 +3015,12 @@
+@@ -2928,6 +3014,12 @@
          }
        }
  
@@ -273,7 +281,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
        // Additionally send pinned tab events
        if (pinned) {
          this.#notifyPinnedStatus(t);
-@@ -3016,10 +3109,10 @@
+@@ -3016,10 +3108,10 @@
          isAdoptingGroup = false,
          isUserTriggered = false,
          telemetryUserCreateSource = "unknown",
@@ -285,7 +293,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
        }
  
        if (!color) {
-@@ -3040,7 +3133,12 @@
+@@ -3040,7 +3132,12 @@
          label,
          isAdoptingGroup
        );
@@ -299,7 +307,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
          group,
          insertBefore?.group ?? insertBefore
        );
-@@ -3163,7 +3261,7 @@
+@@ -3163,7 +3260,7 @@
        }
  
        this.#handleTabMove(tab, () =>
@@ -308,7 +316,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
        );
      }
  
-@@ -3357,6 +3455,7 @@
+@@ -3357,6 +3454,7 @@
          openWindowInfo,
          skipLoad,
          triggeringRemoteType,
@@ -316,7 +324,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
        }
      ) {
        // If we don't have a preferred remote type (or it is `NOT_REMOTE`), and
-@@ -3426,6 +3525,7 @@
+@@ -3426,6 +3524,7 @@
            openWindowInfo,
            name,
            skipLoad,
@@ -324,7 +332,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
          });
        }
  
-@@ -3613,7 +3713,7 @@
+@@ -3613,7 +3712,7 @@
          // Add a new tab if needed.
          if (!tab) {
            let createLazyBrowser =
@@ -333,7 +341,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
  
            let url = "about:blank";
            if (tabData.entries?.length) {
-@@ -3650,8 +3750,10 @@
+@@ -3650,8 +3749,10 @@
              insertTab: false,
              skipLoad: true,
              preferredRemoteType,
@@ -345,7 +353,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
            if (select) {
              tabToSelect = tab;
            }
-@@ -3663,7 +3765,8 @@
+@@ -3663,7 +3764,8 @@
            this.pinTab(tab);
            // Then ensure all the tab open/pinning information is sent.
            this._fireTabOpen(tab, {});
@@ -355,7 +363,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
            let { groupId } = tabData;
            const tabGroup = tabGroupWorkingData.get(groupId);
            // if a tab refers to a tab group we don't know, skip any group
-@@ -3677,7 +3780,10 @@
+@@ -3677,7 +3779,10 @@
                  tabGroup.stateData.id,
                  tabGroup.stateData.color,
                  tabGroup.stateData.collapsed,
@@ -367,7 +375,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
                );
                tabsFragment.appendChild(tabGroup.node);
              }
-@@ -3722,9 +3828,23 @@
+@@ -3722,9 +3827,23 @@
        // to remove the old selected tab.
        if (tabToSelect) {
          let leftoverTab = this.selectedTab;
@@ -391,7 +399,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
  
        if (tabs.length > 1 || !tabs[0].selected) {
          this._updateTabsAfterInsert();
-@@ -3919,7 +4039,7 @@
+@@ -3919,7 +4038,7 @@
        // Ensure we have an index if one was not provided.
        if (typeof elementIndex != "number" && typeof tabIndex != "number") {
          // Move the new tab after another tab if needed, to the end otherwise.
@@ -400,7 +408,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
          if (
            !bulkOrderedOpen &&
            ((openerTab &&
-@@ -3931,7 +4051,7 @@
+@@ -3931,7 +4050,7 @@
            let lastRelatedTab =
              openerTab && this._lastRelatedTabMap.get(openerTab);
            let previousTab = lastRelatedTab || openerTab || this.selectedTab;
@@ -409,7 +417,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
              tabGroup = previousTab.group;
            }
            if (
-@@ -3942,7 +4062,7 @@
+@@ -3942,7 +4061,7 @@
            ) {
              elementIndex = Infinity;
            } else if (previousTab.visible) {
@@ -418,7 +426,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
            } else if (previousTab == FirefoxViewHandler.tab) {
              elementIndex = 0;
            }
-@@ -3970,14 +4090,14 @@
+@@ -3970,14 +4089,14 @@
        }
        // Ensure index is within bounds.
        if (tab.pinned) {
@@ -437,7 +445,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
  
        // Prevent a flash of unstyled content by setting up the tab content
        // and inherited attributes before appending it (see Bug 1592054):
-@@ -3985,7 +4105,7 @@
+@@ -3985,7 +4104,7 @@
  
        this.tabContainer._invalidateCachedTabs();
  
@@ -446,7 +454,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
          if (this.isTab(itemAfter) && itemAfter.group == tabGroup) {
            // Place at the front of, or between tabs in, the same tab group
            this.tabContainer.insertBefore(tab, itemAfter);
-@@ -4018,6 +4138,7 @@
+@@ -4018,6 +4137,7 @@
        if (pinned) {
          this._updateTabBarForPinnedTabs();
        }
@@ -454,7 +462,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
  
        TabBarVisibility.update();
      }
-@@ -4307,6 +4428,9 @@
+@@ -4307,6 +4427,9 @@
          return;
        }
  
@@ -464,7 +472,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
        this.removeTabs(selectedTabs, { isUserTriggered, telemetrySource });
      }
  
-@@ -4568,6 +4692,7 @@
+@@ -4568,6 +4691,7 @@
          telemetrySource,
        } = {}
      ) {
@@ -472,7 +480,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
        // When 'closeWindowWithLastTab' pref is enabled, closing all tabs
        // can be considered equivalent to closing the window.
        if (
-@@ -4657,6 +4782,7 @@
+@@ -4657,6 +4781,7 @@
          if (lastToClose) {
            this.removeTab(lastToClose, aParams);
          }
@@ -480,7 +488,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
        } catch (e) {
          console.error(e);
        }
-@@ -4695,6 +4821,12 @@
+@@ -4695,6 +4820,12 @@
          aTab._closeTimeNoAnimTimerId = Glean.browserTabclose.timeNoAnim.start();
        }
  
@@ -493,7 +501,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
        // Handle requests for synchronously removing an already
        // asynchronously closing tab.
        if (!animate && aTab.closing) {
-@@ -4709,6 +4841,9 @@
+@@ -4709,6 +4840,9 @@
        // state).
        let tabWidth = window.windowUtils.getBoundsWithoutFlushing(aTab).width;
        let isLastTab = this.#isLastTabInWindow(aTab);
@@ -503,7 +511,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
        if (
          !this._beginRemoveTab(aTab, {
            closeWindowFastpath: true,
-@@ -4891,7 +5026,7 @@
+@@ -4891,7 +5025,7 @@
            closeWindowWithLastTab != null
              ? closeWindowWithLastTab
              : !window.toolbar.visible ||
@@ -512,7 +520,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
  
          if (closeWindow) {
            // We've already called beforeunload on all the relevant tabs if we get here,
-@@ -4915,6 +5050,7 @@
+@@ -4915,6 +5049,7 @@
  
          newTab = true;
        }
@@ -520,7 +528,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
        aTab._endRemoveArgs = [closeWindow, newTab];
  
        // swapBrowsersAndCloseOther will take care of closing the window without animation.
-@@ -4955,9 +5091,7 @@
+@@ -4955,9 +5090,7 @@
        aTab._mouseleave();
  
        if (newTab) {
@@ -531,7 +539,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
        } else {
          TabBarVisibility.update();
        }
-@@ -5090,6 +5224,7 @@
+@@ -5090,6 +5223,7 @@
          this.tabs[i]._tPos = i;
        }
  
@@ -539,7 +547,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
        if (!this._windowIsClosing) {
          // update tab close buttons state
          this.tabContainer._updateCloseButtons();
-@@ -5302,6 +5437,7 @@
+@@ -5302,6 +5436,7 @@
        }
  
        let excludeTabs = new Set(aExcludeTabs);
@@ -547,7 +555,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
  
        // If this tab has a successor, it should be selectable, since
        // hiding or closing a tab removes that tab as a successor.
-@@ -5314,13 +5450,13 @@
+@@ -5314,13 +5449,13 @@
          !excludeTabs.has(aTab.owner) &&
          Services.prefs.getBoolPref("browser.tabs.selectOwnerOnClose")
        ) {
@@ -563,7 +571,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
        );
  
        let tab = this.tabContainer.findNextTab(aTab, {
-@@ -5336,7 +5472,7 @@
+@@ -5336,7 +5471,7 @@
        }
  
        if (tab) {
@@ -572,7 +580,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
        }
  
        // If no qualifying visible tab was found, see if there is a tab in
-@@ -5357,7 +5493,7 @@
+@@ -5357,7 +5492,7 @@
          });
        }
  
@@ -581,7 +589,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
      }
  
      _blurTab(aTab) {
-@@ -5759,10 +5895,10 @@
+@@ -5759,10 +5894,10 @@
        SessionStore.deleteCustomTabValue(aTab, "hiddenBy");
      }
  
@@ -594,7 +602,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
          aTab.selected ||
          aTab.closing ||
          // Tabs that are sharing the screen, microphone or camera cannot be hidden.
-@@ -5952,7 +6088,7 @@
+@@ -5952,7 +6087,7 @@
       *   `true` if element is a `<tab-group>`
       */
      isTabGroup(element) {
@@ -603,7 +611,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
      }
  
      /**
-@@ -6029,7 +6165,7 @@
+@@ -6029,7 +6164,7 @@
  
        // Don't allow mixing pinned and unpinned tabs.
        if (this.isTab(element) && element.pinned) {
@@ -612,7 +620,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
        } else {
          tabIndex = Math.max(tabIndex, this.pinnedTabCount);
        }
-@@ -6055,10 +6191,16 @@
+@@ -6055,10 +6190,16 @@
        this.#handleTabMove(
          element,
          () => {
@@ -631,7 +639,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
            if (neighbor && this.isTab(element) && tabIndex > element._tPos) {
              neighbor.after(element);
            } else {
-@@ -6116,22 +6258,26 @@
+@@ -6116,22 +6257,26 @@
      #moveTabNextTo(element, targetElement, moveBefore = false, metricsContext) {
        if (this.isTabGroupLabel(targetElement)) {
          targetElement = targetElement.group;
@@ -651,10 +659,10 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
        }
  
        // Don't allow mixing pinned and unpinned tabs.
-+      if (targetElement.group?.hasAttribute("split-view-group")) {
++      targetElement = gZenGlanceManager.getTabOrGlanceParent(targetElement);
++      if (targetElement?.group?.hasAttribute("split-view-group")) {
 +        targetElement = targetElement.group;
 +      }
-+      targetElement = gZenGlanceManager.getTabOrGlanceParent(targetElement);
 +      if (element.hasAttribute('zen-essential') && !targetElement?.hasAttribute('zen-essential')) {
 +        targetElement = this.tabsWithoutGlance[this._numZenEssentials - 1];
 +      } else
@@ -664,7 +672,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
          moveBefore = false;
        } else if (!element.pinned && targetElement && targetElement.pinned) {
          // If the caller asks to move an unpinned element next to a pinned
-@@ -6145,7 +6291,7 @@
+@@ -6145,7 +6290,7 @@
          //    move the tab group right before the first unpinned tab.
          // 4. Moving a tab group and the first unpinned tab is grouped:
          //    move the tab group right before the first unpinned tab's tab group.
@@ -673,7 +681,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
          if (targetElement.group) {
            targetElement = targetElement.group;
          }
-@@ -6153,6 +6299,7 @@
+@@ -6153,6 +6298,7 @@
        }
  
        let getContainer = () =>
@@ -681,7 +689,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
          element.pinned
            ? this.tabContainer.pinnedTabsContainer
            : this.tabContainer;
-@@ -6161,7 +6308,7 @@
+@@ -6161,7 +6307,7 @@
          element,
          () => {
            if (moveBefore) {
@@ -690,7 +698,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
            } else if (targetElement) {
              targetElement.after(element);
            } else {
-@@ -6210,7 +6357,7 @@
+@@ -6210,7 +6356,7 @@
        if (!this.isTab(aTab)) {
          throw new Error("Can only move a tab into a tab group");
        }
@@ -699,7 +707,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
          return;
        }
        if (aTab.group && aTab.group.id === aGroup.id) {
-@@ -6304,6 +6451,10 @@
+@@ -6304,6 +6450,10 @@
  
        moveActionCallback();
  
@@ -710,7 +718,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
        // Clear tabs cache after moving nodes because the order of tabs may have
        // changed.
        this.tabContainer._invalidateCachedTabs();
-@@ -7198,7 +7349,7 @@
+@@ -7198,7 +7348,7 @@
              // preventDefault(). It will still raise the window if appropriate.
              break;
            }
@@ -719,7 +727,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
            window.focus();
            aEvent.preventDefault();
            break;
-@@ -8143,6 +8294,7 @@
+@@ -8143,6 +8293,7 @@
              aWebProgress.isTopLevel
            ) {
              this.mTab.setAttribute("busy", "true");
@@ -727,7 +735,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
              gBrowser._tabAttrModified(this.mTab, ["busy"]);
              this.mTab._notselectedsinceload = !this.mTab.selected;
            }
-@@ -9108,7 +9260,7 @@ var TabContextMenu = {
+@@ -9108,7 +9259,7 @@ var TabContextMenu = {
      );
      contextUnpinSelectedTabs.hidden =
        !this.contextTab.pinned || !this.multiselected;
@@ -736,7 +744,7 @@ index 96fd8acdc09cc4c9649d1ed7503c2a0bde536613..3918e7c17dd686bd99e1fdb49750db79
      // Move Tab items
      let contextMoveTabOptions = document.getElementById(
        "context_moveTabOptions"
-@@ -9384,6 +9536,7 @@ var TabContextMenu = {
+@@ -9384,6 +9535,7 @@ var TabContextMenu = {
          )
        );
      } else {

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 1fcebe3962..16f7783530 100644
+index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..f8e190aaae14b23bd1a50573f61114a0947aa55a 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -289,6 +289,7 @@
@@ -351,7 +351,7 @@ index 1fcebe3962..16f7783530 100644
        dragData.dropBefore = newIndex < tabs.length;
  
        // Shift background tabs to leave a gap where the dragged tab
-@@ -2327,12 +2389,16 @@
+@@ -2327,12 +2389,17 @@
  
        this.#clearDragOverCreateGroupTimer();
  
@@ -360,11 +360,12 @@ index 1fcebe3962..16f7783530 100644
 +      let isPinned = draggedTab?.group ? draggedTab.group.pinned : draggedTab.pinned;
 +      let numPinned = gBrowser._numVisiblePinTabsWithoutCollapsed;
 +      let essential = draggedTab.hasAttribute("zen-essential");
++      const isDraggingFolder = isTabGroupLabel(draggedTab) || draggedTab.group?.isZenFolder;
        let tabs = this.ariaFocusableItems.slice(
 -        isPinned ? 0 : numPinned,
 -        isPinned ? numPinned : undefined
-+        isPinned ? (essential ? 0 : gBrowser._numZenEssentials) : numPinned,
++        isPinned ? (essential ? 0 : gBrowser._numZenEssentials) : undefined,
-+        isPinned ? (essential ? gBrowser._numZenEssentials : numPinned) : undefined
++        isPinned ? (essential ? gBrowser._numZenEssentials : (isDraggingFolder ? numPinned : undefined)) : undefined
        );
 +      if (draggedTab.group?.hasAttribute("split-view-group")) {
 +        draggedTab = draggedTab.group.labelElement;
@@ -372,7 +373,7 @@ index 1fcebe3962..16f7783530 100644
  
        if (this.#rtlMode) {
          tabs.reverse();
-@@ -2346,7 +2412,7 @@
+@@ -2346,7 +2413,7 @@
        let size = this.verticalMode ? "height" : "width";
        let translateAxis = this.verticalMode ? "translateY" : "translateX";
        let scrollDirection = this.verticalMode ? "scrollTop" : "scrollLeft";
@@ -381,7 +382,7 @@ index 1fcebe3962..16f7783530 100644
        let translateX = event.screenX - dragData.screenX;
        let translateY = event.screenY - dragData.screenY;
  
-@@ -2360,12 +2426,18 @@
+@@ -2360,12 +2427,18 @@
        let lastTab = tabs.at(-1);
        let lastMovingTab = movingTabs.at(-1);
        let firstMovingTab = movingTabs[0];
@@ -401,19 +402,15 @@ index 1fcebe3962..16f7783530 100644
          translate +=
            this.arrowScrollbox.scrollbox[scrollDirection] - dragData.scrollPos;
        } else if (isPinned && this.verticalMode) {
-@@ -2377,6 +2449,11 @@
+@@ -2377,6 +2450,7 @@
        // - for unpinned tabs, between the first and last unpinned tab
        let firstBound = firstTab[screenAxis] - firstMovingTabScreen;
        let lastBound = endEdge(lastTab) - lastMovingTabScreen;
-+      // Hack if last tab is Folder with has-active
++      lastBound = gZenPinnedTabManager.getLastTabBound(lastBound, lastTab, isDraggingFolder);
-+      if (lastTab?.group?.hasAttribute("has-active")) {
-+        lastBound += 40;
-+      }
-+
        translate = Math.min(Math.max(translate, firstBound), lastBound);
  
        for (let item of movingTabs) {
-@@ -2384,6 +2461,9 @@
+@@ -2384,6 +2458,9 @@
            // Shift the `.tab-group-label-container` to shift the label element.
            item = item.parentElement;
          }
@@ -423,7 +420,7 @@ index 1fcebe3962..16f7783530 100644
          item.style.transform = `${translateAxis}(${translate}px)`;
        }
  
-@@ -2521,6 +2601,9 @@
+@@ -2521,6 +2598,9 @@
              break;
            }
            let element = tabs[mid];
@@ -433,7 +430,16 @@ index 1fcebe3962..16f7783530 100644
            let elementForSize = isTabGroupLabel(element)
              ? element.parentElement
              : element;
-@@ -2604,7 +2687,7 @@
+@@ -2540,6 +2620,8 @@
+       };
+ 
+       let dropElement = getOverlappedElement();
++      if (dropElement?.hasAttribute("split-view-group")) dropElement = dropElement.labelElement;
++      gZenPinnedTabManager.animateSeparatorMove(draggedTab, dropElement, isPinned);
+ 
+       let newDropElementIndex;
+       if (dropElement) {
+@@ -2604,7 +2686,7 @@
        let shouldCreateGroupOnDrop;
        let dropBefore;
        if (dropElement) {
@@ -442,7 +448,7 @@ index 1fcebe3962..16f7783530 100644
            ? dropElement.parentElement
            : dropElement;
  
-@@ -2624,7 +2707,7 @@
+@@ -2624,7 +2706,7 @@
            ? Services.prefs.getIntPref(
                "browser.tabs.dragDrop.moveOverThresholdPercent"
              ) / 100
@@ -451,7 +457,7 @@ index 1fcebe3962..16f7783530 100644
          moveOverThreshold = Math.min(1, Math.max(0, moveOverThreshold));
          let shouldMoveOver = overlapPercent > moveOverThreshold;
          if (logicalForward && shouldMoveOver) {
-@@ -2656,23 +2739,6 @@
+@@ -2656,23 +2738,6 @@
  
          // If dragging a group over another group, don't make it look like it is
          // possible to drop the dragged group inside the other group.
@@ -475,7 +481,7 @@ index 1fcebe3962..16f7783530 100644
  
          // Constrain drop direction at the boundary between pinned and
          // unpinned tabs so that they don't mix together.
-@@ -2686,14 +2752,13 @@
+@@ -2686,14 +2751,13 @@
          }
        }
  
@@ -495,7 +501,7 @@ index 1fcebe3962..16f7783530 100644
          // When dragging tab(s) over an ungrouped tab, signal to the user
          // that dropping the tab(s) will create a new tab group.
          shouldCreateGroupOnDrop =
-@@ -2703,12 +2768,12 @@
+@@ -2703,12 +2767,6 @@
            overlapPercent > dragOverGroupingThreshold;
  
          if (shouldCreateGroupOnDrop) {
@@ -505,16 +511,10 @@ index 1fcebe3962..16f7783530 100644
 -              "browser.tabs.dragDrop.createGroup.delayMS"
 -            )
 -          );
-+          // this.#dragOverCreateGroupTimer = setTimeout(
-+          //   () => this.#triggerDragOverCreateGroup(dragData, dropElement),
-+          //   Services.prefs.getIntPref(
-+          //     "browser.tabs.dragDrop.createGroup.delayMS"
-+          //   )
-+          // );
          } else {
            this.removeAttribute("movingtab-createGroup");
            document
-@@ -2735,19 +2800,14 @@
+@@ -2735,19 +2793,14 @@
              dropElement = dropElementGroup;
              colorCode = undefined;
            } else if (isTabGroupLabel(dropElement)) {
@@ -542,7 +542,7 @@ index 1fcebe3962..16f7783530 100644
            }
            this.#setDragOverGroupColor(colorCode);
            this.toggleAttribute("movingtab-ungroup", !colorCode);
-@@ -2769,15 +2829,24 @@
+@@ -2769,15 +2822,24 @@
        // Shift background tabs to leave a gap where the dragged tab
        // would currently be dropped.
        for (let item of tabs) {
@@ -568,14 +568,14 @@ index 1fcebe3962..16f7783530 100644
          }
          item.style.transform = transform;
        }
-@@ -2830,12 +2899,14 @@
+@@ -2830,12 +2892,14 @@
        );
      }
  
 -    finishAnimateTabMove() {
 -      if (!this.#isMovingTab()) {
 +    finishAnimateTabMove(always = false) {
-+      gZenPinnedTabManager.removeTabContainersDragoverClass();
++      gZenPinnedTabManager.onDragFinish();
 +      if (!this.#isMovingTab() && !always) {
          return;
        }
@@ -585,7 +585,7 @@ index 1fcebe3962..16f7783530 100644
  
        for (let item of this.ariaFocusableItems) {
          if (isTabGroupLabel(item)) {
-@@ -2843,6 +2914,18 @@
+@@ -2843,6 +2907,18 @@
            item = item.parentElement;
          }
          item.style.transform = "";
@@ -604,7 +604,7 @@ index 1fcebe3962..16f7783530 100644
          item.removeAttribute("dragover-createGroup");
        }
        this.removeAttribute("movingtab-createGroup");
-@@ -2889,7 +2972,7 @@
+@@ -2889,7 +2965,7 @@
          let postTransitionCleanup = () => {
            movingTab._moveTogetherSelectedTabsData.animate = false;
          };
@@ -613,7 +613,7 @@ index 1fcebe3962..16f7783530 100644
            postTransitionCleanup();
          } else {
            let onTransitionEnd = transitionendEvent => {
-@@ -3062,7 +3145,7 @@
+@@ -3062,7 +3138,7 @@
      }
  
      _notifyBackgroundTab(aTab) {
@@ -622,7 +622,7 @@ index 1fcebe3962..16f7783530 100644
          return;
        }
  
-@@ -3171,7 +3254,10 @@
+@@ -3171,7 +3247,10 @@
      #getDragTarget(event, { ignoreSides = false } = {}) {
        let { target } = event;
        while (target) {
@@ -634,7 +634,7 @@ index 1fcebe3962..16f7783530 100644
            break;
          }
          target = target.parentNode;
-@@ -3188,6 +3274,9 @@
+@@ -3188,6 +3267,9 @@
            return null;
          }
        }

src/zen/folders/ZenFolders.mjs

@@ -843,8 +843,9 @@
       }
     }
 
-    collapseVisibleTab(group) {
+    collapseVisibleTab(group, onlyIfActive = false) {
       if (!group?.isZenFolder) return;
+      if (onlyIfActive && !group.hasAttribute('has-active')) return;
 
       const groupStart = group.querySelector('.zen-tab-group-start');
       groupStart.setAttribute('old-margin', groupStart.style.marginTop);

src/zen/tabs/ZenPinnedTabManager.mjs

@@ -725,7 +725,7 @@
             if (selectedTab.hasAttribute('glance-id')) {
               break;
             }
-            await gZenFolders.collapseVisibleTab(selectedTab.group);
+            await gZenFolders.collapseVisibleTab(selectedTab.group, /* only if active */ true);
             await gBrowser.explicitUnloadTabs([selectedTab]);
             selectedTab.removeAttribute('discarded');
           }
@@ -974,7 +974,8 @@
       try {
         const pinnedTabsTarget =
           event.target.closest('.zen-workspace-pinned-tabs-section') ||
-          event.target.closest('.zen-current-workspace-indicator');
+          event.target.closest('.zen-current-workspace-indicator') ||
+          this._pinnedTabsContainer;
         const essentialTabsTarget = event.target.closest('.zen-essentials-container');
         const tabsTarget = event.target.closest('.zen-workspace-normal-tabs-section');
 
@@ -1134,6 +1135,61 @@
       }
     }
 
+    onDragFinish() {
+      for (const item of this.dragShiftableItems) {
+        item.style.transform = '';
+      }
+      this.removeTabContainersDragoverClass();
+    }
+
+    get dragShiftableItems() {
+      const separator = gZenWorkspaces.pinnedTabsContainer.querySelector(
+        '.pinned-tabs-container-separator'
+      );
+      // Make sure to always return the separator at the start of the array
+      return Services.prefs.getBoolPref('zen.view.show-newtab-button-top')
+        ? [separator, gZenWorkspaces.activeWorkspaceElement.newTabButton]
+        : [separator];
+    }
+
+    animateSeparatorMove(draggedTab, dropElement, isPinned) {
+      if (draggedTab?.group?.hasAttribute('split-view-group')) {
+        draggedTab = draggedTab.group;
+      }
+      const itemsToCheck = this.dragShiftableItems;
+      const separator = itemsToCheck[0];
+      const separatorRect = window.windowUtils.getBoundsWithoutFlushing(separator);
+      const tabRect = window.windowUtils.getBoundsWithoutFlushing(draggedTab);
+      const translate = tabRect.top - tabRect.height / 2 + separatorRect.height / 2;
+      const topToNormalTabs = separatorRect.top - separatorRect.height / 2;
+      const isGoingToPinnedTabs = translate < topToNormalTabs;
+      const multiplier = isGoingToPinnedTabs !== isPinned ? (isGoingToPinnedTabs ? 1 : -1) : 0;
+      const draggingTabHeight =
+        window.windowUtils.getBoundsWithoutFlushing(draggedTab).height * multiplier;
+      this._isGoingToPinnedTabs = isGoingToPinnedTabs;
+      if (!dropElement) {
+        itemsToCheck.forEach((item) => {
+          item.style.transform = `translateY(${draggingTabHeight}px)`;
+        });
+      }
+    }
+
+    getLastTabBound(lastBound, lastTab, isDraggingFolder = false) {
+      if (!gBrowser.isTab(lastTab) || !lastTab.pinned || isDraggingFolder) {
+        return lastBound;
+      }
+      const shiftedItems = this.dragShiftableItems;
+      let totalHeight = shiftedItems.reduce((acc, item) => {
+        return acc + window.windowUtils.getBoundsWithoutFlushing(item).height;
+      }, 0);
+      if (shiftedItems.length === 1) {
+        // Means the new tab button is not at the top or not visible
+        const lastTabRect = window.windowUtils.getBoundsWithoutFlushing(lastTab);
+        totalHeight += lastTabRect.height;
+      }
+      return lastBound + totalHeight + 6;
+    }
+
     get dragIndicator() {
       if (!this._dragIndicator) {
         this._dragIndicator = document.createElement('div');
@@ -1230,44 +1286,11 @@
       let isVertical = this.expandedSidebarMode;
 
       // Decide whether we should show a dragover class for the given target
-      if (folderTarget && (!draggedTab.pinned || draggedTab.hasAttribute('zen-essential'))) {
+      if (pinnedTabsTarget) {
-        shouldAddDragOverElement = true;
-        const isCollapsed = folderTarget.collapsed;
-        let groupElem = isCollapsed
-          ? [folderTarget]
-          : folderTarget.childGroupsAndTabs
-              .filter((tab) => !tab.hasAttribute('zen-empty-tab'))
-              .map((tab) => {
-                if (gBrowser.isTabGroupLabel(tab) || tab.group.hasAttribute('split-view-group')) {
-                  return tab.group;
-                }
-                return tab;
-              });
-
-        let newTarget = isCollapsed ? groupElem[0] : groupElem.at(-1);
-        for (const elem of groupElem) {
-          const rect = elem.getBoundingClientRect();
-          if (event.clientY < rect.top + rect.height / 2) {
-            newTarget = elem;
-            break;
-          }
-        }
-        targetTab = newTarget;
-      } else if (pinnedTabsTarget) {
         if (draggedTab.hasAttribute('zen-essential')) {
           shouldAddDragOverElement = true;
         } else if (!draggedTab.pinned) {
-          if (draggedTab._dragData?.screenY) {
+          Services.zen.playHapticFeedback();
-            draggedTab._dragData['screenY'] = event.screenY + 10;
-            const tabs = draggedTab._dragData.movingTabs || [draggedTab];
-            for (const tab of tabs) {
-              gBrowser.pinTab(tab);
-            }
-            gBrowser.tabContainer.finishAnimateTabMove(true);
-            Services.zen.playHapticFeedback();
-          } else {
-            shouldAddDragOverElement = true;
-          }
         }
       } else if (essentialTabsTarget) {
         if (!draggedTab.hasAttribute('zen-essential') && this.canEssentialBeAdded(draggedTab)) {
@@ -1278,21 +1301,11 @@
         if (draggedTab.hasAttribute('zen-essential')) {
           shouldAddDragOverElement = true;
         } else if (draggedTab.pinned) {
-          if (draggedTab._dragData?.screenY) {
+          Services.zen.playHapticFeedback();
-            draggedTab._dragData['screenY'] = event.screenY + 10;
-            const tabs = draggedTab._dragData.movingTabs || [draggedTab];
-            for (const tab of tabs) {
-              gBrowser.unpinTab(tab);
-            }
-            gBrowser.tabContainer.finishAnimateTabMove(true);
-            Services.zen.playHapticFeedback();
-          } else {
-            shouldAddDragOverElement = true;
-          }
         }
       }
 
-      if (!shouldAddDragOverElement || (!targetTab && !folderTarget)) {
+      if (!shouldAddDragOverElement || (!targetTab && !folderTarget) || !targetTab) {
         this.removeTabContainersDragoverClass(!isHoveringIndicator);
         return;
       }

src/zen/tabs/zen-tabs/vertical-tabs.css

@@ -156,16 +156,32 @@
    Pinned Tabs Separator
    ========================================================================== */
 .pinned-tabs-container-separator {
-  background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
+  margin: 0 auto; /* Center vertically */
-  margin: 8px auto; /* Center horizontally */
+  padding: 8px 0;
-  border: none;
   height: 1px;
   max-height: 1px;
   width: 98%; /* Slightly less than full width */
   transition:
-    margin 0.2s ease-in-out,
+    padding 0.2s ease-in-out,
-    background 0.2s ease-in-out,
     max-height 0.2s ease-in-out;
+  overflow: hidden;
+  position: relative;
+
+  #tabbrowser-tabs[movingtab] & {
+    transition: transform 0.1s ease-in-out;
+  }
+
+  &::before {
+    background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
+    content: '';
+    height: 1px;
+    width: 100%;
+    margin: 0 auto; /* Center the line */
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
 
   /* Hide separator when specified by parent container attribute */
   .zen-workspace-pinned-tabs-section[hide-separator] & {
@@ -431,10 +447,6 @@
   }
 }
 
-#newtab-button-container {
-  display: none !important;
-}
-
 /* ==========================================================================
    Tab Arrow Scrollbox Adjustments
    ========================================================================== */
@@ -1187,22 +1199,23 @@
 #tabs-newtab-button {
   display: none;
   font-weight: 500;
-  -moz-user-focus: ignore !important; /* Prevent focus */
+  -moz-user-focus: ignore !important;
 }
 
 /* Show and style the button if preference `zen.tabs.show-newtab-vertical` is enabled */
 @media -moz-pref('zen.tabs.show-newtab-vertical') {
   #tabs-newtab-button {
-    display: flex !important; /* Show the button */
+    display: flex !important;
-    transition: scale 0.1s ease; /* Add scale transition */
+    transition: scale 0.1s ease;
+    #tabbrowser-tabs[movingtab] & {
+      transition: transform 0.1s ease;
+    }
 
-    /* Style text within the button */
     & .toolbarbutton-text {
       align-items: center;
       padding-top: 0;
     }
 
-    /* Scale down slightly on press */
     &:active,
     &[open] {
       scale: 0.98;

src/zen/workspaces/ZenWorkspace.mjs

@@ -218,6 +218,10 @@
       popup.addEventListener('popuphidden', handlePopupHidden);
       popup.openPopup(event.target, 'after_start');
     }
+
+    get newTabButton() {
+      return this.querySelector('#tabs-newtab-button');
+    }
   }
 
   customElements.define('zen-workspace', nsZenWorkspace);

src/zen/workspaces/ZenWorkspaces.mjs

@@ -349,25 +349,22 @@ var gZenWorkspaces = new (class extends nsZenMultiWindowFeature {
     if (!this._hasInitializedTabsStrip) {
       return gBrowser.tabContainer.arrowScrollbox;
     }
-    return document.querySelector(`zen-workspace[active]`)?.tabsContainer;
+    return this.activeWorkspaceElement?.tabsContainer;
   }
 
   get pinnedTabsContainer() {
     if (!this.workspaceEnabled || !this._hasInitializedTabsStrip) {
       return document.getElementById('pinned-tabs-container');
     }
-    return document.querySelector(`zen-workspace[active]`)?.pinnedTabsContainer;
+    return this.activeWorkspaceElement?.pinnedTabsContainer;
   }
 
   get activeWorkspaceIndicator() {
-    return document.querySelector(`zen-workspace[active]`)?.indicator;
+    return this.activeWorkspaceElement?.indicator;
   }
 
   get activeScrollbox() {
-    return (
+    return this.activeWorkspaceElement?.scrollbox ?? gBrowser.tabContainer.arrowScrollbox;
-      document.querySelector(`zen-workspace[active]`)?.scrollbox ??
-      gBrowser.tabContainer.arrowScrollbox
-    );
   }
 
   get tabboxChildren() {
@@ -385,6 +382,10 @@ var gZenWorkspaces = new (class extends nsZenMultiWindowFeature {
     );
   }
 
+  get activeWorkspaceElement() {
+    return this.workspaceElement(this.activeWorkspace);
+  }
+
   workspaceElement(workspaceId) {
     if (typeof workspaceId !== 'string') {
       workspaceId = workspaceId?.uuid;