diff --git a/src/browser/base/content/zen-styles/zen-decks.css b/src/browser/base/content/zen-styles/zen-decks.css index dbd8f4f77..edb94880e 100644 --- a/src/browser/base/content/zen-styles/zen-decks.css +++ b/src/browser/base/content/zen-styles/zen-decks.css @@ -255,7 +255,6 @@ background: rgba(255, 255, 255, 0.1); border-radius: var(--zen-native-inner-radius); box-shadow: var(--zen-big-shadow); - pointer-events: none; overflow: hidden; &::after { diff --git a/src/browser/base/zen-components/ZenPinnedTabManager.mjs b/src/browser/base/zen-components/ZenPinnedTabManager.mjs index 82f90009a..66596d595 100644 --- a/src/browser/base/zen-components/ZenPinnedTabManager.mjs +++ b/src/browser/base/zen-components/ZenPinnedTabManager.mjs @@ -600,7 +600,10 @@ } addToEssentials(tab) { - const tabs = tab ? [tab] : TabContextMenu.contextTab.multiselected ? gBrowser.selectedTabs : [TabContextMenu.contextTab]; + const tabs = tab ? ( + // if it's already an array, dont make it [tab] + tab?.length ? tab : [tab] + ) : TabContextMenu.contextTab.multiselected ? gBrowser.selectedTabs : [TabContextMenu.contextTab]; for (let i = 0; i < tabs.length; i++) { const tab = tabs[i]; if (tab.hasAttribute('zen-essential')) { diff --git a/src/browser/base/zen-components/ZenViewSplitter.mjs b/src/browser/base/zen-components/ZenViewSplitter.mjs index 68fee3cd2..4d200bb81 100644 --- a/src/browser/base/zen-components/ZenViewSplitter.mjs +++ b/src/browser/base/zen-components/ZenViewSplitter.mjs @@ -86,8 +86,9 @@ class ZenViewSplitter extends ZenDOMOperatedFeature { this.insertIntoContextMenu(); // Add drag over listener to the browser view - this.tabBrowserPanel.addEventListener('dragenter', this.onBrowserDragOverToSplit.bind(this)); - this.tabBrowserPanel.addEventListener('dragleave', this.onBrowserDragEndToSplit.bind(this)); + const tabBox = document.getElementById('tabbrowser-tabbox'); + tabBox.addEventListener('dragenter', this.onBrowserDragOverToSplit.bind(this)); + tabBox.addEventListener('dragleave', this.onBrowserDragEndToSplit.bind(this)); } insertIntoContextMenu() { @@ -148,6 +149,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature { onBrowserDragOverToSplit(event) { var dt = event.dataTransfer; + const dragEffect = dt.dropEffect; var draggedTab; if (dt.mozTypesAt(0)[0] == TAB_DROP_TYPE) { // tab copy or move @@ -161,6 +163,9 @@ class ZenViewSplitter extends ZenDOMOperatedFeature { if (!draggedTab || this._canDrop || this._hasAnimated || this.fakeBrowser) { return; } + if (draggedTab.splitView) { + return; + } const currentView = this._data[this.currentView]; if (currentView?.tabs.length >= this.MAX_TABS) { return; @@ -184,7 +189,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature { paddingLeft: [0, `${halfWidth}px`], }, { - duration: 0.1, + duration: 0.15, easing: 'ease-out', } ), @@ -195,7 +200,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature { marginLeft: [0, `${-(halfWidth - padding)}px`], }, { - duration: 0.1, + duration: 0.15, easing: 'ease-out', } ), @@ -209,7 +214,8 @@ class ZenViewSplitter extends ZenDOMOperatedFeature { } const panelsRect = gBrowser.tabbox.getBoundingClientRect(); // this event is fired even though we are still in the "allowed" area - if (event.target !== this.tabBrowserPanel) { + console.log(event.target); + if (event.target !== gBrowser.tabbox && event.target !== this.fakeBrowser) { return; } this._canDrop = false; @@ -230,7 +236,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature { paddingLeft: [`${halfWidth}px`, 0], }, { - duration: 0.1, + duration: 0.15, easing: 'ease-out', } ), @@ -241,7 +247,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature { marginLeft: [`${-(halfWidth - padding)}px`, 0], }, { - duration: 0.1, + duration: 0.15, easing: 'ease-out', } ), @@ -817,14 +823,27 @@ class ZenViewSplitter extends ZenDOMOperatedFeature { * @param {Tab[]} tabs - The tabs to split. * @param {string} gridType - The type of grid layout. */ - splitTabs(tabs, gridType) { - const firstisPinned = tabs[0].pinned; + splitTabs(tabs, gridType, initialIndex = 0) { tabs = tabs.filter( - (t) => t.pinned === firstisPinned && !t.hidden && !t.hasAttribute('zen-empty-tab') && !t.hasAttribute('zen-essential') + (t) => !t.hidden && !t.hasAttribute('zen-empty-tab') ); if (tabs.length < 2 || tabs.length > this.MAX_TABS) { return; } + const firstIsPinned = tabs[initialIndex].pinned; + const firstIsEssential = tabs[initialIndex].hasAttribute('zen-essential'); + const oddOnes = tabs.filter((t) => t.pinned !== firstIsPinned || t.hasAttribute('zen-essential') != firstIsEssential); + if (firstIsEssential) { + gZenPinnedTabManager.addToEssentials(oddOnes); + } else { + for (const tab of oddOnes) { + if (firstIsPinned) { + gBrowser.pinTab(tab); + } else { + gBrowser.unpinTab(tab); + } + } + } const existingSplitTab = tabs.find((tab) => tab.splitView); if (existingSplitTab) { @@ -1473,7 +1492,18 @@ class ZenViewSplitter extends ZenDOMOperatedFeature { //} // Put tabs always as if it was dropped from the left - this.splitTabs([draggedTab, droppedOnTab], gridType); + this.splitTabs([draggedTab, droppedOnTab], gridType, 1); + if (draggedTab.linkedBrowser) { + gZenUIManager.motion.animate(draggedTab.linkedBrowser.closest('.browserSidebarContainer'), { + scale: [0.98, 1], + opacity: [0, 1], + }, { + type: 'spring', + bounce: 0.6, + duration: 0.5, + delay: 0.1, + }); + } } } return true; diff --git a/src/browser/components/tabbrowser/content/tabbrowser-js.patch b/src/browser/components/tabbrowser/content/tabbrowser-js.patch index 77d7c2bcc..90b4ac070 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 628aa6596627c85efe361fc1ece8fd58f7ee653e..f4a4ad413785e08bbb70df8cbb5feefd71c4dfe1 100644 +index 628aa6596627c85efe361fc1ece8fd58f7ee653e..372a783210c5829533eb8c2b3ca32a370be5f820 100644 --- a/browser/components/tabbrowser/content/tabbrowser.js +++ b/browser/components/tabbrowser/content/tabbrowser.js @@ -412,11 +412,50 @@ @@ -246,7 +246,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f4a4ad413785e08bbb70df8cbb5feefd } = {} ) { if (!tabs?.length) { -@@ -2918,7 +2991,11 @@ +@@ -2918,7 +2991,12 @@ id = `${Date.now()}-${Math.round(Math.random() * 100)}`; } let group = this._createTabGroup(id, color, false, label); @@ -254,12 +254,13 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f4a4ad413785e08bbb70df8cbb5feefd + if (forSplitView) { + group.setAttribute('split-view-group', true); + } -+ group.pinned = tabs.some(tab => tab.pinned); -+ (group.pinned ? this.verticalPinnedTabsContainer : this.tabContainer).insertBefore( ++ group.essential = tabs.some(tab => tab.hasAttribute("essential")); ++ group.pinned = group.essential || tabs.some(tab => tab.pinned); ++ (group.essential ? document.getElementById("zen-essentials-container") : (group.pinned ? this.verticalPinnedTabsContainer : this.tabContainer)).insertBefore( group, insertBefore?.group ?? insertBefore ); -@@ -3126,6 +3203,7 @@ +@@ -3126,6 +3204,7 @@ initialBrowsingContextGroupId, openWindowInfo, skipLoad, @@ -267,7 +268,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f4a4ad413785e08bbb70df8cbb5feefd } ) { // If we don't have a preferred remote type, and we have a remote -@@ -3189,6 +3267,7 @@ +@@ -3189,6 +3268,7 @@ openWindowInfo, name, skipLoad, @@ -275,7 +276,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f4a4ad413785e08bbb70df8cbb5feefd }); } -@@ -3367,6 +3446,24 @@ +@@ -3367,6 +3447,24 @@ ) { tabWasReused = true; tab = this.selectedTab; @@ -300,7 +301,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f4a4ad413785e08bbb70df8cbb5feefd if (!tabData.pinned) { this.unpinTab(tab); } else { -@@ -3380,6 +3477,7 @@ +@@ -3380,6 +3478,7 @@ restoreTabsLazily && !select && !tabData.pinned; let url = "about:blank"; @@ -308,7 +309,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f4a4ad413785e08bbb70df8cbb5feefd if (tabData.entries?.length) { let activeIndex = (tabData.index || tabData.entries.length) - 1; // Ensure the index is in bounds. -@@ -3415,7 +3513,24 @@ +@@ -3415,7 +3514,24 @@ skipLoad: true, preferredRemoteType, }); @@ -334,7 +335,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f4a4ad413785e08bbb70df8cbb5feefd if (select) { tabToSelect = tab; } -@@ -3428,8 +3543,8 @@ +@@ -3428,8 +3544,8 @@ // inserted in the DOM. If the tab is not yet in the DOM, // just insert it in the right place from the start. if (!tab.parentNode) { @@ -345,7 +346,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f4a4ad413785e08bbb70df8cbb5feefd tab.toggleAttribute("pinned", true); this.tabContainer._invalidateCachedTabs(); // Then ensure all the tab open/pinning information is sent. -@@ -3693,7 +3808,7 @@ +@@ -3693,7 +3809,7 @@ // Ensure we have an index if one was not provided. if (typeof index != "number") { // Move the new tab after another tab if needed, to the end otherwise. @@ -354,7 +355,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f4a4ad413785e08bbb70df8cbb5feefd if ( !bulkOrderedOpen && ((openerTab && -@@ -3736,18 +3851,18 @@ +@@ -3736,18 +3852,18 @@ // Ensure index is within bounds. if (tab.pinned) { @@ -377,7 +378,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f4a4ad413785e08bbb70df8cbb5feefd if (tabAfter && tabAfter.group == tabGroup) { // Place at the front of, or between tabs in, the same tab group this.tabContainer.insertBefore(tab, tabAfter); -@@ -4059,6 +4174,9 @@ +@@ -4059,6 +4175,9 @@ return; } @@ -387,7 +388,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f4a4ad413785e08bbb70df8cbb5feefd this.removeTabs(selectedTabs); } -@@ -4391,6 +4509,7 @@ +@@ -4391,6 +4510,7 @@ skipSessionStore, } = {} ) { @@ -395,7 +396,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f4a4ad413785e08bbb70df8cbb5feefd if (UserInteraction.running("browser.tabs.opening", window)) { UserInteraction.finish("browser.tabs.opening", window); } -@@ -4407,6 +4526,12 @@ +@@ -4407,6 +4527,12 @@ TelemetryStopwatch.start("FX_TAB_CLOSE_TIME_NO_ANIM_MS", aTab); } @@ -408,7 +409,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f4a4ad413785e08bbb70df8cbb5feefd // Handle requests for synchronously removing an already // asynchronously closing tab. if (!animate && aTab.closing) { -@@ -4421,7 +4546,9 @@ +@@ -4421,7 +4547,9 @@ // frame created for it (for example, by updating the visually selected // state). let tabWidth = window.windowUtils.getBoundsWithoutFlushing(aTab).width; @@ -419,7 +420,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f4a4ad413785e08bbb70df8cbb5feefd if ( !this._beginRemoveTab(aTab, { closeWindowFastpath: true, -@@ -4435,7 +4562,6 @@ +@@ -4435,7 +4563,6 @@ TelemetryStopwatch.cancel("FX_TAB_CLOSE_TIME_NO_ANIM_MS", aTab); return; } @@ -427,7 +428,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f4a4ad413785e08bbb70df8cbb5feefd let lockTabSizing = !this.tabContainer.verticalMode && !aTab.pinned && -@@ -4574,14 +4700,14 @@ +@@ -4574,14 +4701,14 @@ !!this.tabsInCollapsedTabGroups.length; if ( aTab.visible && @@ -444,7 +445,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f4a4ad413785e08bbb70df8cbb5feefd if (closeWindow) { // We've already called beforeunload on all the relevant tabs if we get here, -@@ -4605,6 +4731,7 @@ +@@ -4605,6 +4732,7 @@ newTab = true; } @@ -452,7 +453,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f4a4ad413785e08bbb70df8cbb5feefd aTab._endRemoveArgs = [closeWindow, newTab]; // swapBrowsersAndCloseOther will take care of closing the window without animation. -@@ -4645,9 +4772,7 @@ +@@ -4645,9 +4773,7 @@ aTab._mouseleave(); if (newTab) { @@ -463,7 +464,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f4a4ad413785e08bbb70df8cbb5feefd } else { TabBarVisibility.update(); } -@@ -4776,6 +4901,8 @@ +@@ -4776,6 +4902,8 @@ this.tabs[i]._tPos = i; } @@ -472,7 +473,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f4a4ad413785e08bbb70df8cbb5feefd if (!this._windowIsClosing) { if (wasPinned) { this.tabContainer._positionPinnedTabs(); -@@ -4994,7 +5121,7 @@ +@@ -4994,7 +5122,7 @@ !excludeTabs.has(aTab.owner) && Services.prefs.getBoolPref("browser.tabs.selectOwnerOnClose") ) { @@ -481,7 +482,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f4a4ad413785e08bbb70df8cbb5feefd } // Try to find a remaining tab that comes after the given tab -@@ -5016,7 +5143,7 @@ +@@ -5016,7 +5144,7 @@ } if (tab) { @@ -490,7 +491,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f4a4ad413785e08bbb70df8cbb5feefd } // If no qualifying visible tab was found, see if there is a tab in -@@ -5434,10 +5561,10 @@ +@@ -5434,10 +5562,10 @@ SessionStore.deleteCustomTabValue(aTab, "hiddenBy"); } @@ -503,7 +504,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f4a4ad413785e08bbb70df8cbb5feefd aTab.selected || aTab.closing || // Tabs that are sharing the screen, microphone or camera cannot be hidden. -@@ -5675,7 +5802,7 @@ +@@ -5675,7 +5803,7 @@ // Don't allow mixing pinned and unpinned tabs. if (aTab.pinned) { @@ -512,7 +513,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f4a4ad413785e08bbb70df8cbb5feefd } else { aIndex = Math.max(aIndex, this.pinnedTabCount); } -@@ -5684,11 +5811,18 @@ +@@ -5684,11 +5812,18 @@ } this._handleTabMove(aTab, () => { @@ -534,16 +535,16 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f4a4ad413785e08bbb70df8cbb5feefd neighbor.after(aTab); } else { this.tabContainer.insertBefore(aTab, neighbor); -@@ -5697,7 +5831,7 @@ +@@ -5697,7 +5832,7 @@ } moveTabToGroup(aTab, aGroup) { - if (aTab.pinned) { -+ if (aTab.pinned != !!aGroup.pinned && !aTab.hasAttribute("zen-essential")) { ++ if (aTab.pinned != !!aGroup.pinned) { return; } if (aTab.group && aTab.group.id === aGroup.id) { -@@ -5721,6 +5855,8 @@ +@@ -5721,6 +5856,8 @@ moveActionCallback(); @@ -552,7 +553,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f4a4ad413785e08bbb70df8cbb5feefd // Clear tabs cache after moving nodes because the order of tabs may have // changed. this.tabContainer._invalidateCachedTabs(); -@@ -5771,7 +5907,7 @@ +@@ -5771,7 +5908,7 @@ createLazyBrowser, }; @@ -561,7 +562,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f4a4ad413785e08bbb70df8cbb5feefd if (aIndex < numPinned || (aTab.pinned && aIndex == numPinned)) { params.pinned = true; } -@@ -7415,6 +7551,7 @@ +@@ -7415,6 +7552,7 @@ aWebProgress.isTopLevel ) { this.mTab.setAttribute("busy", "true"); @@ -569,7 +570,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f4a4ad413785e08bbb70df8cbb5feefd gBrowser._tabAttrModified(this.mTab, ["busy"]); this.mTab._notselectedsinceload = !this.mTab.selected; } -@@ -8381,7 +8518,7 @@ var TabContextMenu = { +@@ -8381,7 +8519,7 @@ var TabContextMenu = { ); contextUnpinSelectedTabs.hidden = !this.contextTab.pinned || !multiselectionContext; @@ -578,7 +579,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f4a4ad413785e08bbb70df8cbb5feefd // Move Tab items let contextMoveTabOptions = document.getElementById( "context_moveTabOptions" -@@ -8414,7 +8551,7 @@ var TabContextMenu = { +@@ -8414,7 +8552,7 @@ var TabContextMenu = { let contextMoveTabToStart = document.getElementById("context_moveToStart"); let isFirstTab = tabsToMove[0] == visibleTabs[0] || @@ -587,7 +588,7 @@ index 628aa6596627c85efe361fc1ece8fd58f7ee653e..f4a4ad413785e08bbb70df8cbb5feefd contextMoveTabToStart.disabled = isFirstTab && allSelectedTabsAdjacent; document.getElementById("context_openTabInWindow").disabled = -@@ -8647,6 +8784,7 @@ var TabContextMenu = { +@@ -8647,6 +8785,7 @@ var TabContextMenu = { if (this.contextTab.multiselected) { gBrowser.removeMultiSelectedTabs(); } else { diff --git a/src/browser/components/tabbrowser/content/tabs-js.patch b/src/browser/components/tabbrowser/content/tabs-js.patch index fa88040a7..978a13e6c 100644 --- a/src/browser/components/tabbrowser/content/tabs-js.patch +++ b/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 fa96568d366fd3608f9bd583fa793150bd815c8b..9a288957781277246b66a911590a13e7231958d0 100644 +index fa96568d366fd3608f9bd583fa793150bd815c8b..37644a42ac426c2a48e28056654eb654ffa660e4 100644 --- a/browser/components/tabbrowser/content/tabs.js +++ b/browser/components/tabbrowser/content/tabs.js @@ -94,7 +94,7 @@ @@ -103,7 +103,7 @@ index fa96568d366fd3608f9bd583fa793150bd815c8b..9a288957781277246b66a911590a13e7 - this._finishMoveTogetherSelectedTabs(draggedTab); this._finishAnimateTabMove(); -+ if (event.ctrlKey && !dt.mozUserCancelled && dt.dropEffect == "none" && !this._isCustomizing) { ++ if ((event.ctrlKey || event.metaKey) && !dt.mozUserCancelled && dt.dropEffect == "none" && !this._isCustomizing) { + const moved = gZenViewSplitter.moveTabToSplitView(event, draggedTab); + if (moved) { + delete draggedTab._dragData;