feat: Added support to switch space when holding on the side of the sidebar, b=no-bug, c=common, split-view, workspaces

2026-08-14 02:34:31 +00:00 · 2025-12-28 02:58:48 +01:00
parent 4e46907bdd
commit 2b69a3a3d2
7 changed files with 251 additions and 149 deletions
--- a/prefs/zen/zen.yaml
+++ b/prefs/zen/zen.yaml
@@ -26,6 +26,9 @@
 - name: zen.tabs.folder-dragover-threshold-percent
  value: 20 # Percentage of folder height to trigger dragover

+- name: zen.tabs.dnd-switch-space-delay
+  value: 1000 # milliseconds
+
 - name: zen.ctrlTab.show-pending-tabs
  value: false

--- a/src/browser/components/tabbrowser/content/tabbrowser-js.patch
+++ b/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 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca90aa52900 100644
+index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..4d7b037f53bbd4b42b3974dfabe600adaebe4178 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
@@ -386,6 +386,7 @@
@@ -87,7 +87,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       tab.linkedPanel = uniqueId;
       this._selectedTab = tab;
       this._selectedBrowser = browser;
-@@ -898,13 +951,17 @@
+@@ -898,13 +951,18 @@
       }
 
       this.showTab(aTab);
@@ -100,17 +100,21 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
         );
         // If periphery is null, append to end
 -        this.pinnedTabsContainer.insertBefore(aTab, periphery);
+        this.tabContainer.tabDragAndDrop.handle_drop_transition(this.tabs[this.pinnedTabCount - 1], aTab, [aTab], false);
 +        aTab.hasAttribute("zen-essential") ? gZenWorkspaces.getEssentialsSection(aTab).appendChild(aTab) : this.pinnedTabsContainer.insertBefore(aTab, this.pinnedTabsContainer.lastChild)
       });
 +      }
 
       aTab.setAttribute("pinned", "true");
       this._updateTabBarForPinnedTabs();
-@@ -917,11 +974,15 @@
+@@ -917,11 +975,18 @@
       }
 
       this.#handleTabMove(aTab, () => {
 +        const handled = gZenFolders.handleTabUnpin(aTab);
+        if (!handled) {
+          this.tabContainer.tabDragAndDrop.handle_drop_transition(this.tabs[this.pinnedTabCount + 1 /* empty + extra */], aTab, [aTab], true);
+        }
 +
         // we remove this attribute first, so that allTabs represents
         // the moving of a tab from the pinned tabs container
@@ -123,7 +127,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       });
 
       aTab.style.marginInlineStart = "";
-@@ -1098,6 +1159,11 @@
+@@ -1098,6 +1163,11 @@
 
       let LOCAL_PROTOCOLS = ["chrome:", "about:", "resource:", "data:"];
 
@@ -135,7 +139,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       if (
         aIconURL &&
         !LOCAL_PROTOCOLS.some(protocol => aIconURL.startsWith(protocol))
-@@ -1107,6 +1173,9 @@
+@@ -1107,6 +1177,9 @@
         );
         return;
       }
@@ -145,7 +149,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
 
       let browser = this.getBrowserForTab(aTab);
       browser.mIconURL = aIconURL;
-@@ -1379,7 +1448,6 @@
+@@ -1379,7 +1452,6 @@
 
       // Preview mode should not reset the owner
       if (!this._previewMode && !oldTab.selected) {
@@ -153,7 +157,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       }
 
       let lastRelatedTab = this._lastRelatedTabMap.get(oldTab);
-@@ -1470,6 +1538,7 @@
+@@ -1470,6 +1542,7 @@
       if (!this._previewMode) {
         newTab.recordTimeFromUnloadToReload();
         newTab.updateLastAccessed();
@@ -161,7 +165,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
         oldTab.updateLastAccessed();
         // if this is the foreground window, update the last-seen timestamps.
         if (this.ownerGlobal == BrowserWindowTracker.getTopWindow()) {
-@@ -1622,6 +1691,9 @@
+@@ -1622,6 +1695,9 @@
       }
 
       let activeEl = document.activeElement;
@@ -171,7 +175,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       // If focus is on the old tab, move it to the new tab.
       if (activeEl == oldTab) {
         newTab.focus();
-@@ -1945,6 +2017,11 @@
+@@ -1945,6 +2021,11 @@
     }
 
     _setTabLabel(aTab, aLabel, { beforeTabOpen, isContentTitle, isURL } = {}) {
@@ -183,7 +187,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       if (!aLabel || aLabel.includes("about:reader?")) {
         return false;
       }
-@@ -2053,7 +2130,7 @@
+@@ -2053,7 +2134,7 @@
         newIndex = this.selectedTab._tPos + 1;
       }
 
@@ -192,7 +196,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
         if (this.isTabGroupLabel(targetTab)) {
           throw new Error(
             "Replacing a tab group label with a tab is not supported"
-@@ -2328,6 +2405,7 @@
+@@ -2328,6 +2409,7 @@
       uriIsAboutBlank,
       userContextId,
       skipLoad,
@@ -200,7 +204,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
     } = {}) {
       let b = document.createXULElement("browser");
       // Use the JSM global to create the permanentKey, so that if the
-@@ -2401,8 +2479,7 @@
+@@ -2401,8 +2483,7 @@
         // we use a different attribute name for this?
         b.setAttribute("name", name);
       }
@@ -210,7 +214,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
         b.setAttribute("transparent", "true");
       }
 
-@@ -2567,7 +2644,7 @@
+@@ -2567,7 +2648,7 @@
 
       let panel = this.getPanel(browser);
       let uniqueId = this._generateUniquePanelID();
@@ -219,7 +223,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       aTab.linkedPanel = uniqueId;
 
       // Inject the <browser> into the DOM if necessary.
-@@ -2626,8 +2703,8 @@
+@@ -2626,8 +2707,8 @@
       // If we transitioned from one browser to two browsers, we need to set
       // hasSiblings=false on both the existing browser and the new browser.
       if (this.tabs.length == 2) {
@@ -230,7 +234,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       } else {
         aTab.linkedBrowser.browsingContext.hasSiblings = this.tabs.length > 1;
       }
-@@ -2814,7 +2891,6 @@
+@@ -2814,7 +2895,6 @@
             this.selectedTab = this.addTrustedTab(BROWSER_NEW_TAB_URL, {
               tabIndex: tab._tPos + 1,
               userContextId: tab.userContextId,
@@ -238,7 +242,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
               focusUrlBar: true,
             });
             resolve(this.selectedBrowser);
-@@ -2923,6 +2999,9 @@
+@@ -2923,6 +3003,9 @@
         schemelessInput,
         hasValidUserGestureActivation = false,
         textDirectiveUserActivation = false,
@@ -248,7 +252,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       } = {}
     ) {
       // all callers of addTab that pass a params object need to pass
-@@ -2933,10 +3012,17 @@
+@@ -2933,10 +3016,17 @@
         );
       }
 
@@ -266,7 +270,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       // If we're opening a foreground tab, set the owner by default.
       ownerTab ??= inBackground ? null : this.selectedTab;
 
-@@ -2944,6 +3030,7 @@
+@@ -2944,6 +3034,7 @@
       if (this.selectedTab.owner) {
         this.selectedTab.owner = null;
       }
@@ -274,7 +278,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
 
       // Find the tab that opened this one, if any. This is used for
       // determining positioning, and inherited attributes such as the
-@@ -2996,6 +3083,21 @@
+@@ -2996,6 +3087,21 @@
           noInitialLabel,
           skipBackgroundNotify,
         });
@@ -296,7 +300,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
         if (insertTab) {
           // Insert the tab into the tab container in the correct position.
           this.#insertTabAtIndex(t, {
-@@ -3004,6 +3106,7 @@
+@@ -3004,6 +3110,7 @@
             ownerTab,
             openerTab,
             pinned,
@@ -304,7 +308,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
             bulkOrderedOpen,
             tabGroup: tabGroup ?? openerTab?.group,
           });
-@@ -3022,6 +3125,7 @@
+@@ -3022,6 +3129,7 @@
           openWindowInfo,
           skipLoad,
           triggeringRemoteType,
@@ -312,7 +316,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
         }));
 
         if (focusUrlBar) {
-@@ -3146,6 +3250,12 @@
+@@ -3146,6 +3254,12 @@
         }
       }
 
@@ -325,7 +329,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       // Additionally send pinned tab events
       if (pinned) {
         this.#notifyPinnedStatus(t);
-@@ -3349,10 +3459,10 @@
+@@ -3349,10 +3463,10 @@
         isAdoptingGroup = false,
         isUserTriggered = false,
         telemetryUserCreateSource = "unknown",
@@ -337,7 +341,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       }
 
       if (!color) {
-@@ -3373,9 +3483,14 @@
+@@ -3373,9 +3487,14 @@
         label,
         isAdoptingGroup
       );
@@ -354,7 +358,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       );
       group.addTabs(tabs);
 
-@@ -3496,7 +3611,7 @@
+@@ -3496,7 +3615,7 @@
       }
 
       this.#handleTabMove(tab, () =>
@@ -363,7 +367,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       );
     }
 
-@@ -3698,6 +3813,7 @@
+@@ -3698,6 +3817,7 @@
         openWindowInfo,
         skipLoad,
         triggeringRemoteType,
@@ -371,7 +375,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       }
     ) {
       // If we don't have a preferred remote type (or it is `NOT_REMOTE`), and
-@@ -3767,6 +3883,7 @@
+@@ -3767,6 +3887,7 @@
           openWindowInfo,
           name,
           skipLoad,
@@ -379,7 +383,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
         });
       }
 
-@@ -3955,7 +4072,7 @@
+@@ -3955,7 +4076,7 @@
         // Add a new tab if needed.
         if (!tab) {
           let createLazyBrowser =
@@ -388,7 +392,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
 
           let url = "about:blank";
           if (tabData.entries?.length) {
-@@ -3992,8 +4109,10 @@
+@@ -3992,8 +4113,10 @@
             insertTab: false,
             skipLoad: true,
             preferredRemoteType,
@@ -400,7 +404,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
           if (select) {
             tabToSelect = tab;
           }
-@@ -4005,7 +4124,8 @@
+@@ -4005,7 +4128,8 @@
           this.pinTab(tab);
           // Then ensure all the tab open/pinning information is sent.
           this._fireTabOpen(tab, {});
@@ -410,7 +414,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
           let { groupId } = tabData;
           const tabGroup = tabGroupWorkingData.get(groupId);
           // if a tab refers to a tab group we don't know, skip any group
-@@ -4019,7 +4139,10 @@
+@@ -4019,7 +4143,10 @@
                 tabGroup.stateData.id,
                 tabGroup.stateData.color,
                 tabGroup.stateData.collapsed,
@@ -422,7 +426,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
               );
               tabsFragment.appendChild(tabGroup.node);
             }
-@@ -4064,9 +4187,23 @@
+@@ -4064,9 +4191,23 @@
       // to remove the old selected tab.
       if (tabToSelect) {
         let leftoverTab = this.selectedTab;
@@ -446,7 +450,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
 
       if (tabs.length > 1 || !tabs[0].selected) {
         this._updateTabsAfterInsert();
-@@ -4257,11 +4394,14 @@
+@@ -4257,11 +4398,14 @@
       if (ownerTab) {
         tab.owner = ownerTab;
       }
@@ -462,7 +466,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
         if (
           !bulkOrderedOpen &&
           ((openerTab &&
-@@ -4273,7 +4413,7 @@
+@@ -4273,7 +4417,7 @@
           let lastRelatedTab =
             openerTab && this._lastRelatedTabMap.get(openerTab);
           let previousTab = lastRelatedTab || openerTab || this.selectedTab;
@@ -471,7 +475,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
             tabGroup = previousTab.group;
           }
           if (
-@@ -4284,7 +4424,7 @@
+@@ -4284,7 +4428,7 @@
           ) {
             elementIndex = Infinity;
           } else if (previousTab.visible) {
@@ -480,7 +484,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
           } else if (previousTab == FirefoxViewHandler.tab) {
             elementIndex = 0;
           }
-@@ -4312,14 +4452,14 @@
+@@ -4312,14 +4456,14 @@
       }
       // Ensure index is within bounds.
       if (tab.pinned) {
@@ -499,7 +503,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
 
       if (pinned && !itemAfter?.pinned) {
         itemAfter = null;
-@@ -4330,7 +4470,7 @@
+@@ -4330,7 +4474,7 @@
 
       this.tabContainer._invalidateCachedTabs();
 
@@ -508,7 +512,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
         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);
-@@ -4358,7 +4498,11 @@
+@@ -4358,7 +4502,11 @@
         const tabContainer = pinned
           ? this.tabContainer.pinnedTabsContainer
           : this.tabContainer;
@@ -520,7 +524,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       }
 
       this._updateTabsAfterInsert();
-@@ -4366,6 +4510,7 @@
+@@ -4366,6 +4514,7 @@
       if (pinned) {
         this._updateTabBarForPinnedTabs();
       }
@@ -528,7 +532,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
 
       TabBarVisibility.update();
     }
-@@ -4916,6 +5061,7 @@
+@@ -4916,6 +5065,7 @@
         telemetrySource,
       } = {}
     ) {
@@ -536,7 +540,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       // When 'closeWindowWithLastTab' pref is enabled, closing all tabs
       // can be considered equivalent to closing the window.
       if (
-@@ -5005,6 +5151,7 @@
+@@ -5005,6 +5155,7 @@
         if (lastToClose) {
           this.removeTab(lastToClose, aParams);
         }
@@ -544,7 +548,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       } catch (e) {
         console.error(e);
       }
-@@ -5043,6 +5190,12 @@
+@@ -5043,6 +5194,12 @@
         aTab._closeTimeNoAnimTimerId = Glean.browserTabclose.timeNoAnim.start();
       }
 
@@ -557,7 +561,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       // Handle requests for synchronously removing an already
       // asynchronously closing tab.
       if (!animate && aTab.closing) {
-@@ -5057,6 +5210,9 @@
+@@ -5057,6 +5214,9 @@
       // state).
       let tabWidth = window.windowUtils.getBoundsWithoutFlushing(aTab).width;
       let isLastTab = this.#isLastTabInWindow(aTab);
@@ -567,7 +571,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       if (
         !this._beginRemoveTab(aTab, {
           closeWindowFastpath: true,
-@@ -5105,7 +5261,13 @@
+@@ -5105,7 +5265,13 @@
         // We're not animating, so we can cancel the animation stopwatch.
         Glean.browserTabclose.timeAnim.cancel(aTab._closeTimeAnimTimerId);
         aTab._closeTimeAnimTimerId = null;
@@ -582,7 +586,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
         return;
       }
 
-@@ -5239,7 +5401,7 @@
+@@ -5239,7 +5405,7 @@
           closeWindowWithLastTab != null
             ? closeWindowWithLastTab
             : !window.toolbar.visible ||
@@ -591,7 +595,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
 
         if (closeWindow) {
           // We've already called beforeunload on all the relevant tabs if we get here,
-@@ -5263,6 +5425,7 @@
+@@ -5263,6 +5429,7 @@
 
         newTab = true;
       }
@@ -599,7 +603,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       aTab._endRemoveArgs = [closeWindow, newTab];
 
       // swapBrowsersAndCloseOther will take care of closing the window without animation.
-@@ -5303,13 +5466,7 @@
+@@ -5303,13 +5470,7 @@
       aTab._mouseleave();
 
       if (newTab) {
@@ -614,7 +618,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       } else {
         TabBarVisibility.update();
       }
-@@ -5442,6 +5599,7 @@
+@@ -5442,6 +5603,7 @@
         this.tabs[i]._tPos = i;
       }
 
@@ -622,7 +626,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       if (!this._windowIsClosing) {
         // update tab close buttons state
         this.tabContainer._updateCloseButtons();
-@@ -5663,6 +5821,7 @@
+@@ -5663,6 +5825,7 @@
       }
 
       let excludeTabs = new Set(aExcludeTabs);
@@ -630,7 +634,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
 
       // If this tab has a successor, it should be selectable, since
       // hiding or closing a tab removes that tab as a successor.
-@@ -5675,13 +5834,13 @@
+@@ -5675,13 +5838,13 @@
         !excludeTabs.has(aTab.owner) &&
         Services.prefs.getBoolPref("browser.tabs.selectOwnerOnClose")
       ) {
@@ -646,7 +650,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       );
 
       let tab = this.tabContainer.findNextTab(aTab, {
-@@ -5697,7 +5856,7 @@
+@@ -5697,7 +5860,7 @@
       }
 
       if (tab) {
@@ -655,7 +659,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       }
 
       // If no qualifying visible tab was found, see if there is a tab in
-@@ -5718,7 +5877,7 @@
+@@ -5718,7 +5881,7 @@
         });
       }
 
@@ -664,7 +668,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
     }
 
     _blurTab(aTab) {
-@@ -5729,7 +5888,7 @@
+@@ -5729,7 +5892,7 @@
      * @returns {boolean}
      *   False if swapping isn't permitted, true otherwise.
      */
@@ -673,7 +677,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       // Do not allow transfering a private tab to a non-private window
       // and vice versa.
       if (
-@@ -5783,6 +5942,7 @@
+@@ -5783,6 +5946,7 @@
       // fire the beforeunload event in the process.  Close the other
       // window if this was its last tab.
       if (
@@ -681,7 +685,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
         !remoteBrowser._beginRemoveTab(aOtherTab, {
           adoptedByTab: aOurTab,
           closeWindowWithLastTab: true,
-@@ -5794,7 +5954,7 @@
+@@ -5794,7 +5958,7 @@
       // If this is the last tab of the window, hide the window
       // immediately without animation before the docshell swap, to avoid
       // about:blank being painted.
@@ -690,7 +694,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       if (closeWindow) {
         let win = aOtherTab.ownerGlobal;
         win.windowUtils.suppressAnimation(true);
-@@ -5918,11 +6078,13 @@
+@@ -5918,11 +6082,13 @@
       }
 
       // Finish tearing down the tab that's going away.
@@ -704,7 +708,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
 
       this.setTabTitle(aOurTab);
 
-@@ -6124,10 +6286,10 @@
+@@ -6124,10 +6290,10 @@
       SessionStore.deleteCustomTabValue(aTab, "hiddenBy");
     }
 
@@ -717,7 +721,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
         aTab.selected ||
         aTab.closing ||
         // Tabs that are sharing the screen, microphone or camera cannot be hidden.
-@@ -6185,7 +6347,8 @@
+@@ -6185,7 +6351,8 @@
      *
      * @param {MozTabbrowserTab|MozTabbrowserTabGroup|MozTabbrowserTabGroup.labelElement} aTab
      */
@@ -727,7 +731,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       if (this.tabs.length == 1) {
         return null;
       }
-@@ -6209,12 +6372,14 @@
+@@ -6209,12 +6376,14 @@
       }
 
       // tell a new window to take the "dropped" tab
@@ -743,7 +747,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
     }
 
     /**
-@@ -6319,7 +6484,7 @@
+@@ -6319,7 +6488,7 @@
      *   `true` if element is a `<tab-group>`
      */
     isTabGroup(element) {
@@ -752,7 +756,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
     }
 
     /**
-@@ -6404,8 +6569,8 @@
+@@ -6404,8 +6573,8 @@
       }
 
       // Don't allow mixing pinned and unpinned tabs.
@@ -763,7 +767,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       } else {
         tabIndex = Math.max(tabIndex, this.pinnedTabCount);
       }
-@@ -6431,10 +6596,16 @@
+@@ -6431,10 +6600,16 @@
       this.#handleTabMove(
         element,
         () => {
@@ -782,7 +786,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
           if (neighbor && this.isTab(element) && tabIndex > element._tPos) {
             neighbor.after(element);
           } else {
-@@ -6492,23 +6663,28 @@
+@@ -6492,23 +6667,28 @@
     #moveTabNextTo(element, targetElement, moveBefore = false, metricsContext) {
       if (this.isTabGroupLabel(targetElement)) {
         targetElement = targetElement.group;
@@ -817,7 +821,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       } else if (!element.pinned && targetElement && targetElement.pinned) {
         // If the caller asks to move an unpinned element next to a pinned
         // tab, move the unpinned element to be the first unpinned element
-@@ -6521,14 +6697,34 @@
+@@ -6521,14 +6701,34 @@
         //    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.
@@ -853,7 +857,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
         element.pinned
           ? this.tabContainer.pinnedTabsContainer
           : this.tabContainer;
-@@ -6537,7 +6733,7 @@
+@@ -6537,7 +6737,7 @@
         element,
         () => {
           if (moveBefore) {
@@ -862,7 +866,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
           } else if (targetElement) {
             targetElement.after(element);
           } else {
-@@ -6607,10 +6803,10 @@
+@@ -6607,10 +6807,10 @@
      * @param {TabMetricsContext} [metricsContext]
      */
     moveTabToGroup(aTab, aGroup, metricsContext) {
@@ -875,7 +879,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
         return;
       }
       if (aTab.group && aTab.group.id === aGroup.id) {
-@@ -6656,6 +6852,7 @@
+@@ -6656,6 +6856,7 @@
 
       let state = {
         tabIndex: tab._tPos,
@@ -883,7 +887,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       };
       if (tab.visible) {
         state.elementIndex = tab.elementIndex;
-@@ -6682,7 +6879,7 @@
+@@ -6682,7 +6883,7 @@
       let changedTabGroup =
         previousTabState.tabGroupId != currentTabState.tabGroupId;
 
@@ -892,7 +896,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
         tab.dispatchEvent(
           new CustomEvent("TabMove", {
             bubbles: true,
-@@ -6723,6 +6920,10 @@
+@@ -6723,6 +6924,10 @@
 
       moveActionCallback();
 
@@ -903,7 +907,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       // Clear tabs cache after moving nodes because the order of tabs may have
       // changed.
       this.tabContainer._invalidateCachedTabs();
-@@ -6815,6 +7016,8 @@
+@@ -6815,6 +7020,8 @@
         params.userContextId = aTab.getAttribute("usercontextid");
       }
       let newTab = this.addWebTab("about:blank", params);
@@ -912,7 +916,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
       let newBrowser = this.getBrowserForTab(newTab);
 
       aTab.container.tabDragAndDrop.finishAnimateTabMove();
-@@ -7623,7 +7826,7 @@
+@@ -7623,7 +7830,7 @@
             // preventDefault(). It will still raise the window if appropriate.
             break;
           }
@@ -921,7 +925,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
           window.focus();
           aEvent.preventDefault();
           break;
-@@ -7640,7 +7843,6 @@
+@@ -7640,7 +7847,6 @@
         }
         case "TabGroupCollapse":
           aEvent.target.tabs.forEach(tab => {
@@ -929,7 +933,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
           });
           break;
         case "TabGroupCreateByUser":
-@@ -8589,6 +8791,7 @@
+@@ -8589,6 +8795,7 @@
             aWebProgress.isTopLevel
           ) {
             this.mTab.setAttribute("busy", "true");
@@ -937,7 +941,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
             gBrowser._tabAttrModified(this.mTab, ["busy"]);
             this.mTab._notselectedsinceload = !this.mTab.selected;
           }
-@@ -8670,6 +8873,7 @@
+@@ -8670,6 +8877,7 @@
         // known defaults. Note we use the original URL since about:newtab
         // redirects to a prerendered page.
         const shouldRemoveFavicon =
@@ -945,7 +949,7 @@ index 42027bfa55eab8ea9298a7d425f2ded45188f7f3..a87bcaf4e9b92a9f63e025409efabca9
           !this.mBrowser.mIconURL &&
           !ignoreBlank &&
           !(originalLocation.spec in FAVICON_DEFAULTS);
-@@ -9623,7 +9827,7 @@ var TabContextMenu = {
+@@ -9623,7 +9831,7 @@ var TabContextMenu = {
     );
     contextUnpinSelectedTabs.hidden =
       !this.contextTab.pinned || !this.multiselected;
--- a/src/zen/common/modules/ZenUIManager.mjs
+++ b/src/zen/common/modules/ZenUIManager.mjs
@@ -1225,6 +1225,7 @@ window.gZenVerticalTabsManager = {

      // Always move the splitter next to the sidebar
      const splitter = document.getElementById('zen-sidebar-splitter');
+      splitter.addEventListener('dragover', gBrowser.tabContainer);
      this.navigatorToolbox.after(splitter);
      window.dispatchEvent(new Event('resize'));
      if (!isCompactMode) {
--- a/src/zen/drag-and-drop/ZenDragAndDrop.js
+++ b/src/zen/drag-and-drop/ZenDragAndDrop.js
@@ -53,6 +53,8 @@
    originalDragImageArgs = [];
    #isOutOfWindow = false;
    #maxTabsPerRow = 0;
+    #changeSpaceTimer = null;
+    #isAnimatingTabMove = false;

    constructor(tabbrowserTabs) {
      super(tabbrowserTabs);
@@ -63,14 +65,19 @@
        '@mozilla.org/zen/drag-and-drop;1',
        Ci.nsIZenDragAndDrop
      );
+
+      XPCOMUtils.defineLazyPreferenceGetter(
+        this,
+        '_dndSwitchSpaceDelay',
+        'zen.tabs.dnd-switch-space-delay',
+        1000
+      );
    }

    init() {
      super.init();
      this.handle_windowDragEnter = this.handle_windowDragEnter.bind(this);
      window.addEventListener('dragleave', this.handle_windowDragLeave.bind(this), true);
-      const dragOverBind = this.handle_dragover.bind(this);
-      gZenWorkspaces.workspaceIcons.addEventListener('dragover', dragOverBind);
    }

    startTabDrag(event, tab, ...args) {
@@ -548,6 +555,53 @@

    handle_dragover(event) {
      super.handle_dragover(event);
+      if (!gZenVerticalTabsManager._prefsSidebarExpanded) {
+        return;
+      }
+      this.#handle_sidebarDragOver(event);
+    }
+
+    #shouldSwitchSpace(event) {
+      const padding = 10;
+      // If we are hovering over the edges of the gNavToolbox or the splitter, we
+      // can change the workspace after a short delay.
+      const splitter = document.getElementById('zen-sidebar-splitter');
+      let rect = window.windowUtils.getBoundsWithoutFlushing(gNavToolbox);
+      if (!(gZenCompactModeManager.preference && gZenCompactModeManager.canHideSidebar)) {
+        rect.width += window.windowUtils.getBoundsWithoutFlushing(splitter).width;
+      }
+      const { clientX } = event;
+      const isNearLeftEdge = clientX >= rect.left - padding && clientX <= rect.left + padding;
+      const isNearRightEdge = clientX >= rect.right - padding && clientX <= rect.right + padding;
+      return { isNearLeftEdge, isNearRightEdge };
+    }
+
+    clearSpaceSwitchTimer() {
+      if (this.#changeSpaceTimer) {
+        clearTimeout(this.#changeSpaceTimer);
+        this.#changeSpaceTimer = null;
+      }
+    }
+
+    #handle_sidebarDragOver(event) {
+      const dt = event.dataTransfer;
+      const { isNearLeftEdge, isNearRightEdge } = this.#shouldSwitchSpace(event);
+      if (isNearLeftEdge || isNearRightEdge) {
+        if (!this.#changeSpaceTimer) {
+          this.#changeSpaceTimer = setTimeout(() => {
+            this.clearDragOverVisuals();
+            dt.updateDragImage(...this.originalDragImageArgs);
+            gZenWorkspaces.changeWorkspaceShortcut(
+              isNearLeftEdge ? -1 : 1,
+              false,
+              /* Disable wrapping */ true
+            );
+            this.#changeSpaceTimer = null;
+          }, this._dndSwitchSpaceDelay);
+        }
+      } else if (this.#changeSpaceTimer) {
+        this.clearSpaceSwitchTimer();
+      }
    }

    handle_windowDragEnter(event) {
@@ -568,6 +622,7 @@
      if (!isTab(draggedTab)) {
        return;
      }
+      this.clearSpaceSwitchTimer();
      const { clientX, clientY } = event;
      const { innerWidth, innerHeight } = window;
      const isOutOfWindow =
@@ -580,8 +635,8 @@
        let movingTabs = dragData.movingTabs;
        if (!this._browserDragImageWrapper) {
          const wrappingDiv = document.createXULElement('vbox');
-          wrappingDiv.style.borderRadius = canvas.style.borderRadius = '8px';
-          wrappingDiv.style.border = '2px solid white';
+          canvas.style.borderRadius = '8px';
+          canvas.style.border = '2px solid white';
          wrappingDiv.style.width = 200 + 'px';
          wrappingDiv.style.height = 130 + 'px';
          wrappingDiv.style.position = 'relative';
@@ -602,6 +657,23 @@
      }
    }

+    handle_drop(event) {
+      super.handle_drop(event);
+      const dt = event.dataTransfer;
+      let draggedTab = dt.mozGetDataAt(TAB_DROP_TYPE, 0);
+      if (
+        !draggedTab.hasAttribute('zen-essential') &&
+        draggedTab.getAttribute('zen-workspace-id') != gZenWorkspaces.activeWorkspace
+      ) {
+        const movingTabs = draggedTab._dragData.movingTabs;
+        for (let tab of movingTabs) {
+          tab.setAttribute('zen-workspace-id', gZenWorkspaces.activeWorkspace);
+        }
+        gBrowser.selectedTab = draggedTab;
+      }
+      gZenWorkspaces.updateTabsContainers();
+    }
+
    handle_drop_transition(dropElement, draggedTab, movingTabs, dropBefore) {
      if (isTabGroupLabel(dropElement)) {
        dropElement = dropElement.group;
@@ -609,73 +681,86 @@
      if (isTabGroupLabel(draggedTab)) {
        draggedTab = draggedTab.group;
      }
-      if (
-        !gZenStartup.isReady ||
-        gReduceMotion ||
-        !dropElement ||
-        dropElement.group !== draggedTab.group ||
-        dropElement.hasAttribute('zen-essential') ||
-        draggedTab.hasAttribute('zen-essential')
-      ) {
-        return;
-      }
-      const animateElement = (ele, translateY) => {
-        ele.style.transform = `translateY(${translateY}px)`;
-        setTimeout(() => {
+      let animations = [];
+      try {
+        if (
+          this.#isAnimatingTabMove ||
+          !gZenStartup.isReady ||
+          gReduceMotion ||
+          !dropElement ||
+          dropElement.group !== draggedTab.group ||
+          dropElement.hasAttribute('zen-essential') ||
+          draggedTab.hasAttribute('zen-essential') ||
+          draggedTab.getAttribute('zen-workspace-id') != gZenWorkspaces.activeWorkspace
+        ) {
+          return;
+        }
+        this.#isAnimatingTabMove = true;
+        const animateElement = (ele, translateY) => {
+          ele.style.transform = `translateY(${translateY}px)`;
          setTimeout(() => {
-            gZenUIManager.motion
-              .animate(
-                ele,
-                {
-                  y: [translateY, 0],
-                },
-                {
-                  duration: 0.1,
-                  bounce: 0,
-                }
-              )
-              .then(() => {
-                ele.style.transform = '';
-              });
+            setTimeout(() => {
+              animations.push(
+                gZenUIManager.motion
+                  .animate(
+                    ele,
+                    {
+                      y: [translateY, 0],
+                    },
+                    {
+                      duration: 0.1,
+                      bounce: 0,
+                    }
+                  )
+                  .then(() => {
+                    ele.style.transform = '';
+                  })
+              );
+            });
          });
-        });
-      };
-      const items = this._tabbrowserTabs.ariaFocusableItems;
-      let rect = window.windowUtils.getBoundsWithoutFlushing(draggedTab);
-      let tabsInBetween = [];
-      let startIndex = Math.min(draggedTab.elementIndex, dropElement.elementIndex + !dropBefore);
-      let endIndex = Math.max(draggedTab.elementIndex, dropElement.elementIndex - dropBefore);
-      for (let i = startIndex; i <= endIndex; i++) {
-        let tab = items[i];
-        if (!movingTabs.includes(tab) && isTab(tab)) {
-          tabsInBetween.push(tab);
+        };
+        const items = this._tabbrowserTabs.ariaFocusableItems;
+        let rect = window.windowUtils.getBoundsWithoutFlushing(draggedTab);
+        let tabsInBetween = [];
+        let startIndex = Math.min(draggedTab.elementIndex, dropElement.elementIndex + !dropBefore);
+        let endIndex = Math.max(draggedTab.elementIndex, dropElement.elementIndex - dropBefore);
+        for (let i = startIndex; i <= endIndex; i++) {
+          let tab = items[i];
+          if (!movingTabs.includes(tab) && isTab(tab)) {
+            tabsInBetween.push(tab);
+          }
        }
-      }
-      let extraTranslate = 0;
-      let translateY =
-        draggedTab.elementIndex > dropElement.elementIndex ? -rect.height : rect.height;
-      translateY *= movingTabs.length;
-      if (draggedTab.pinned != dropElement.pinned) {
-        const shiftableItems = this.#dragShiftableItems;
-        for (let item of shiftableItems) {
-          // We also need to animate these shiftable items and add it to the extraTranslate
-          // so the dragged tab ends up in the right position.
-          let itemRect = window.windowUtils.getBoundsWithoutFlushing(item);
-          extraTranslate += itemRect.height;
-          animateElement(item, translateY);
+        let extraTranslate = 0;
+        let translateY =
+          draggedTab.elementIndex > dropElement.elementIndex ? -rect.height : rect.height;
+        translateY *= movingTabs.length;
+        if (draggedTab.pinned != dropElement.pinned) {
+          const shiftableItems = this.#dragShiftableItems;
+          for (let item of shiftableItems) {
+            // We also need to animate these shiftable items and add it to the extraTranslate
+            // so the dragged tab ends up in the right position.
+            let itemRect = window.windowUtils.getBoundsWithoutFlushing(item);
+            extraTranslate += itemRect.height;
+            animateElement(item, translateY);
+          }
        }
+        // Animate tabs in between moving out of the way
+        for (let tab of tabsInBetween) {
+          animateElement(tab, translateY);
+        }
+        let draggedTabTranslateY =
+          draggedTab.elementIndex > dropElement.elementIndex
+            ? rect.height * tabsInBetween.length
+            : -rect.height * tabsInBetween.length;
+        draggedTabTranslateY +=
+          extraTranslate * (draggedTab.elementIndex > dropElement.elementIndex ? 1 : -1);
+        animateElement(draggedTab, draggedTabTranslateY);
+      } catch (e) {
+        console.error(e);
      }
-      // Animate tabs in between moving out of the way
-      for (let tab of tabsInBetween) {
-        animateElement(tab, translateY);
-      }
-      let draggedTabTranslateY =
-        draggedTab.elementIndex > dropElement.elementIndex
-          ? rect.height * tabsInBetween.length
-          : -rect.height * tabsInBetween.length;
-      draggedTabTranslateY +=
-        extraTranslate * (draggedTab.elementIndex > dropElement.elementIndex ? 1 : -1);
-      animateElement(draggedTab, draggedTabTranslateY);
+      Promise.all(animations).finally(() => {
+        this.#isAnimatingTabMove = false;
+      });
    }

    handle_dragend(event) {
@@ -839,6 +924,12 @@
      let dragData = draggedTab._dragData;
      let movingTabs = dragData.movingTabs;
      this.clearDragOverVisuals();
+      if (
+        !draggedTab.hasAttribute('zen-essential') &&
+        gBrowser._numZenEssentials >= gZenPinnedTabManager.maxEssentialTabs
+      ) {
+        return;
+      }

      if (!this._fakeEssentialTab) {
        const numEssentials = gBrowser._numZenEssentials;
@@ -908,7 +999,7 @@
      dragData.animLastScreenX = screenX;

      let { width: tabWidth, height: tabHeight } = elementMoving.getBoundingClientRect();
-      tabWidth += 4; // Add 4px to account for the gap
+      tabWidth += 4; // Add 6px to account for the gap
      tabHeight += 4;
      let shiftSizeX = tabWidth;
      let shiftSizeY = tabHeight;
--- a/src/zen/sessionstore/ZenWindowSync.sys.mjs
+++ b/src/zen/sessionstore/ZenWindowSync.sys.mjs
@@ -465,6 +465,12 @@ class nsZenWindowSync {
      }
      const relativeTab = this.#getItemFromWindow(aWindow, originalSibling.id);
      if (relativeTab) {
+        gBrowser.tabContainer.tabDragAndDrop.handle_drop_transition(
+          relativeTab,
+          aTargetItem,
+          [aTargetItem],
+          false
+        );
        relativeTab.after(aTargetItem);
      }
    });
--- a/src/zen/split-view/ZenViewSplitter.mjs
+++ b/src/zen/split-view/ZenViewSplitter.mjs
@@ -433,6 +433,7 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
    const side = this.fakeBrowser.getAttribute('side');
    this._lastOpenedTab = gBrowser.selectedTab;
    this._draggingTab = null;
+    gBrowser.tabContainer.tabDragAndDrop.clearSpaceSwitchTimer();
    event.dataTransfer.updateDragImage(
      ...gBrowser.tabContainer.tabDragAndDrop.originalDragImageArgs
    );
--- a/src/zen/workspaces/ZenWorkspaces.mjs
+++ b/src/zen/workspaces/ZenWorkspaces.mjs
@@ -1542,11 +1542,7 @@ class nsZenWorkspaces {
  }

  async changeWorkspace(workspace, ...args) {
-    if (
-      !this.workspaceEnabled ||
-      this.#inChangingWorkspace ||
-      gNavToolbox.hasAttribute('movingtab')
-    ) {
+    if (!this.workspaceEnabled || this.#inChangingWorkspace) {
      return;
    }
    this.#inChangingWorkspace = true;
@@ -2659,7 +2655,7 @@ class nsZenWorkspaces {
    return tab;
  }

-  async changeWorkspaceShortcut(offset = 1, whileScrolling = false) {
+  async changeWorkspaceShortcut(offset = 1, whileScrolling = false, disableWrap = false) {
    // Cycle through workspaces
    let workspaces = this.getWorkspaces();
    let activeWorkspace = this.getActiveWorkspace();
@@ -2667,7 +2663,7 @@ class nsZenWorkspaces {

    // note: offset can be negative
    let targetIndex = workspaceIndex + offset;
-    if (this.shouldWrapAroundNavigation) {
+    if (this.shouldWrapAroundNavigation && !disableWrap) {
      // Add length to handle negative indices and loop
      targetIndex = (targetIndex + workspaces.length) % workspaces.length;
    } else {