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

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

Browse Source
This commit is contained in:
Mr. M
2025-08-07 18:09:57 +02:00
parent 5f2af48c4e
commit 82f30e1820
7 changed files with 197 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

3
src/zen/folders/ZenFolders.mjs
View File

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

111
src/zen/tabs/ZenPinnedTabManager.mjs
View File

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

41
src/zen/tabs/zen-tabs/vertical-tabs.css
View File

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

4
src/zen/workspaces/ZenWorkspace.mjs
View File

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

15
src/zen/workspaces/ZenWorkspaces.mjs
View File

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