mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-05 01:16:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor tab management and drag-and-drop functionality; improve animation durations and conditions for splitting tabs.

Browse Source
This commit is contained in:
mr. M
2025-03-02 21:36:31 +01:00
parent 7646c43f45
commit 0cb7b0af95
5 changed files with 82 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/browser/base/content/zen-styles/zen-decks.css
View File

@@ -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 {

5
src/browser/base/zen-components/ZenPinnedTabManager.mjs
View File

@@ -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')) {

52
src/browser/base/zen-components/ZenViewSplitter.mjs
View File

@@ -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;

69
src/browser/components/tabbrowser/content/tabbrowser-js.patch
View File

@@ -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 {

4
src/browser/components/tabbrowser/content/tabs-js.patch
View File

@@ -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;