From 2b69a3a3d221c66be9c6c62e30626f07aad01217 Mon Sep 17 00:00:00 2001 From: "mr. m" Date: Sun, 28 Dec 2025 02:58:48 +0100 Subject: [PATCH] feat: Added support to switch space when holding on the side of the sidebar, b=no-bug, c=common, split-view, workspaces --- prefs/zen/zen.yaml | 3 + .../tabbrowser/content/tabbrowser-js.patch | 154 ++++++------ src/zen/common/modules/ZenUIManager.mjs | 1 + src/zen/drag-and-drop/ZenDragAndDrop.js | 225 ++++++++++++------ src/zen/sessionstore/ZenWindowSync.sys.mjs | 6 + src/zen/split-view/ZenViewSplitter.mjs | 1 + src/zen/workspaces/ZenWorkspaces.mjs | 10 +- 7 files changed, 251 insertions(+), 149 deletions(-) diff --git a/prefs/zen/zen.yaml b/prefs/zen/zen.yaml index 9cb6734be..4dbcbd18d 100644 --- 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 diff --git a/src/browser/components/tabbrowser/content/tabbrowser-js.patch b/src/browser/components/tabbrowser/content/tabbrowser-js.patch index 32e12d994..a059984a6 100644 --- 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 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 `` */ 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; diff --git a/src/zen/common/modules/ZenUIManager.mjs b/src/zen/common/modules/ZenUIManager.mjs index ae63ace1e..d3c886923 100644 --- 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) { diff --git a/src/zen/drag-and-drop/ZenDragAndDrop.js b/src/zen/drag-and-drop/ZenDragAndDrop.js index 4e192289d..252e44eb0 100644 --- 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; diff --git a/src/zen/sessionstore/ZenWindowSync.sys.mjs b/src/zen/sessionstore/ZenWindowSync.sys.mjs index b421bb89b..79ee5a5d3 100644 --- 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); } }); diff --git a/src/zen/split-view/ZenViewSplitter.mjs b/src/zen/split-view/ZenViewSplitter.mjs index 71c3b225d..dff16ca6a 100644 --- 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 ); diff --git a/src/zen/workspaces/ZenWorkspaces.mjs b/src/zen/workspaces/ZenWorkspaces.mjs index a3b570de9..7ba3943fe 100644 --- 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 {