ZenBrowserMirrors/zen-desktop
1
0
Fork 1
mirror of https://github.com/zen-browser/desktop.git synced 2025-07-09 19:05:29 +02:00
Code Releases Wiki Activity

refactor: improve tab group handling and adjust overflow styles

Browse source
This commit is contained in:
mr. M 2025-04-06 00:49:06 +02:00
parent b4703baf23
commit a77d2cfed3
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB
6 changed files with 103 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/browser/base/content/zen-styles/zen-folders.css
View file

@ -148,7 +148,6 @@ tab-group:not([split-view-group]) {
} }
& .tab-group-container { & .tab-group-container {
overflow-y: hidden;
padding-top: var(--tab-block-margin); padding-top: var(--tab-block-margin);
padding-left: var(--zen-folder-indent, 0.5em); padding-left: var(--zen-folder-indent, 0.5em);
@ -156,9 +155,8 @@ tab-group:not([split-view-group]) {
background: none !important; background: none !important;
} }
} }
margin: 2px 2px 2px 2px;
transition: max-height 0.75s cubic-bezier(0.4, 0, 0.2, 1); margin: var(--tab-block-margin);
overflow: hidden !important;
& .tab-group-label-container { & .tab-group-label-container {
flex: 0 0 auto !important; flex: 0 0 auto !important;
@ -213,11 +211,9 @@ tab-group:not([split-view-group]) {
& .tabbrowser-tab:not([hidden]) { & .tabbrowser-tab:not([hidden]) {
display: flex; display: flex;
} }
}
/* Expand when NOT collapsed */ & .tab-group-container {
&:not([collapsed]) { overflow-y: hidden;
overflow: scroll !important; }
scrollbar-width: none !important;
} }
} }

8
src/browser/base/zen-components/ZenFolders.mjs
View file

@ -127,7 +127,11 @@
} }
#onNewFolder(event) { #onNewFolder(event) {
const group = gBrowser.addTabGroup(gBrowser.selectedTabs, { const tabs = gBrowser.selectedTabs;
for (const tab of tabs) {
gBrowser.pinTab(tab);
}
const group = gBrowser.addTabGroup(tabs, {
insertBefore: ZenWorkspaces.pinnedTabsContainer.querySelector('.vertical-pinned-tabs-container-separator'), insertBefore: ZenWorkspaces.pinnedTabsContainer.querySelector('.vertical-pinned-tabs-container-separator'),
label: 'New Folder', label: 'New Folder',
}); });
@ -174,6 +178,7 @@
const tabsContainer = group.querySelector('.tab-group-container'); const tabsContainer = group.querySelector('.tab-group-container');
const groupStart = group.querySelector('.zen-tab-group-start'); const groupStart = group.querySelector('.zen-tab-group-start');
const animations = []; const animations = [];
tabsContainer.style.overflow = 'hidden';
animations.push( animations.push(
gZenUIManager.motion.animate( gZenUIManager.motion.animate(
groupStart, groupStart,
@ -187,6 +192,7 @@
) )
); );
await Promise.all(animations); await Promise.all(animations);
tabsContainer.style.overflow = '';
} }
} }

1
src/browser/base/zen-components/ZenWorkspaces.mjs
View file

@ -176,6 +176,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
} }
get tabboxChildren() { get tabboxChildren() {
console.log(new Error().stack);
return Array.from(this.activeWorkspaceStrip?.children || []); return Array.from(this.activeWorkspaceStrip?.children || []);
} }

32
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 diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
index 5f406ea5d09273c9b70b84eee24c6267f88692f8..949533237ded4ede7b446b1740b63013937f222e 100644 index 5f406ea5d09273c9b70b84eee24c6267f88692f8..ef12b6bcde0adc517ab9747adf3f93a94af927a4 100644
--- a/browser/components/tabbrowser/content/tabbrowser.js --- a/browser/components/tabbrowser/content/tabbrowser.js
+++ b/browser/components/tabbrowser/content/tabbrowser.js +++ b/browser/components/tabbrowser/content/tabbrowser.js
@@ -424,11 +424,67 @@ @@ -424,11 +424,67 @@
@ -664,7 +664,19 @@ index 5f406ea5d09273c9b70b84eee24c6267f88692f8..949533237ded4ede7b446b1740b63013
if (tab.pinned && this.tabContainer.verticalMode) { if (tab.pinned && this.tabContainer.verticalMode) {
return this.tabContainer.verticalPinnedTabsContainer; return this.tabContainer.verticalPinnedTabsContainer;
} }
@@ -5937,7 +6110,7 @@ @@ -5915,7 +6088,11 @@
};
this.#handleTabMove(tab, () => {
if (moveBefore) {
+ if (targetElement) {
+ targetElement.before(tab);
+ } else {
getContainer().insertBefore(tab, targetElement);
+ }
} else if (targetElement) {
targetElement.after(tab);
} else {
@@ -5937,7 +6114,7 @@
} }
moveTabToGroup(aTab, aGroup) { moveTabToGroup(aTab, aGroup) {
@ -673,7 +685,7 @@ index 5f406ea5d09273c9b70b84eee24c6267f88692f8..949533237ded4ede7b446b1740b63013
return; return;
} }
if (aTab.group && aTab.group.id === aGroup.id) { if (aTab.group && aTab.group.id === aGroup.id) {
@@ -5945,7 +6118,7 @@ @@ -5945,7 +6122,7 @@
} }
aGroup.collapsed = false; aGroup.collapsed = false;
@ -682,7 +694,7 @@ index 5f406ea5d09273c9b70b84eee24c6267f88692f8..949533237ded4ede7b446b1740b63013
this.removeFromMultiSelectedTabs(aTab); this.removeFromMultiSelectedTabs(aTab);
this.tabContainer._notifyBackgroundTab(aTab); this.tabContainer._notifyBackgroundTab(aTab);
} }
@@ -5961,6 +6134,10 @@ @@ -5961,6 +6138,10 @@
moveActionCallback(); moveActionCallback();
@ -693,7 +705,7 @@ index 5f406ea5d09273c9b70b84eee24c6267f88692f8..949533237ded4ede7b446b1740b63013
// Clear tabs cache after moving nodes because the order of tabs may have // Clear tabs cache after moving nodes because the order of tabs may have
// changed. // changed.
this.tabContainer._invalidateCachedTabs(); this.tabContainer._invalidateCachedTabs();
@@ -6015,7 +6192,7 @@ @@ -6015,7 +6196,7 @@
createLazyBrowser, createLazyBrowser,
}; };
@ -702,7 +714,7 @@ index 5f406ea5d09273c9b70b84eee24c6267f88692f8..949533237ded4ede7b446b1740b63013
if (aIndex < numPinned || (aTab.pinned && aIndex == numPinned)) { if (aIndex < numPinned || (aTab.pinned && aIndex == numPinned)) {
params.pinned = true; params.pinned = true;
} }
@@ -6765,7 +6942,7 @@ @@ -6765,7 +6946,7 @@
// preventDefault(). It will still raise the window if appropriate. // preventDefault(). It will still raise the window if appropriate.
break; break;
} }
@ -711,7 +723,7 @@ index 5f406ea5d09273c9b70b84eee24c6267f88692f8..949533237ded4ede7b446b1740b63013
window.focus(); window.focus();
aEvent.preventDefault(); aEvent.preventDefault();
break; break;
@@ -7671,6 +7848,7 @@ @@ -7671,6 +7852,7 @@
aWebProgress.isTopLevel aWebProgress.isTopLevel
) { ) {
this.mTab.setAttribute("busy", "true"); this.mTab.setAttribute("busy", "true");
@ -719,7 +731,7 @@ index 5f406ea5d09273c9b70b84eee24c6267f88692f8..949533237ded4ede7b446b1740b63013
gBrowser._tabAttrModified(this.mTab, ["busy"]); gBrowser._tabAttrModified(this.mTab, ["busy"]);
this.mTab._notselectedsinceload = !this.mTab.selected; this.mTab._notselectedsinceload = !this.mTab.selected;
} }
@@ -8640,7 +8818,7 @@ var TabContextMenu = { @@ -8640,7 +8822,7 @@ var TabContextMenu = {
); );
contextUnpinSelectedTabs.hidden = contextUnpinSelectedTabs.hidden =
!this.contextTab.pinned || !this.multiselected; !this.contextTab.pinned || !this.multiselected;
@ -728,7 +740,7 @@ index 5f406ea5d09273c9b70b84eee24c6267f88692f8..949533237ded4ede7b446b1740b63013
// Move Tab items // Move Tab items
let contextMoveTabOptions = document.getElementById( let contextMoveTabOptions = document.getElementById(
"context_moveTabOptions" "context_moveTabOptions"
@@ -8674,7 +8852,7 @@ var TabContextMenu = { @@ -8674,7 +8856,7 @@ var TabContextMenu = {
let isFirstTab = let isFirstTab =
!this.contextTabs[0].group && !this.contextTabs[0].group &&
(this.contextTabs[0] == visibleTabs[0] || (this.contextTabs[0] == visibleTabs[0] ||
@ -737,7 +749,7 @@ index 5f406ea5d09273c9b70b84eee24c6267f88692f8..949533237ded4ede7b446b1740b63013
contextMoveTabToStart.disabled = isFirstTab && allSelectedTabsAdjacent; contextMoveTabToStart.disabled = isFirstTab && allSelectedTabsAdjacent;
document.getElementById("context_openTabInWindow").disabled = document.getElementById("context_openTabInWindow").disabled =
@@ -8904,6 +9082,7 @@ var TabContextMenu = { @@ -8904,6 +9086,7 @@ var TabContextMenu = {
if (this.contextTab.multiselected) { if (this.contextTab.multiselected) {
gBrowser.removeMultiSelectedTabs(); gBrowser.removeMultiSelectedTabs();
} else { } else {

11
src/browser/components/tabbrowser/content/tabgroup-js.patch
View file

@ -1,5 +1,5 @@
diff --git a/browser/components/tabbrowser/content/tabgroup.js b/browser/components/tabbrowser/content/tabgroup.js diff --git a/browser/components/tabbrowser/content/tabgroup.js b/browser/components/tabbrowser/content/tabgroup.js
index 670fe2b309863102f63246e26194c8958e28bbb7..88ec6eb101f6b2de6cbb4d3a43d4fbeea4158561 100644 index 670fe2b309863102f63246e26194c8958e28bbb7..692ef1f39ac9d9647034ff5f46f24881f963dc8e 100644
--- a/browser/components/tabbrowser/content/tabgroup.js --- a/browser/components/tabbrowser/content/tabgroup.js
+++ b/browser/components/tabbrowser/content/tabgroup.js +++ b/browser/components/tabbrowser/content/tabgroup.js
@@ -9,10 +9,13 @@ @@ -9,10 +9,13 @@
@ -18,6 +18,15 @@ index 670fe2b309863102f63246e26194c8958e28bbb7..88ec6eb101f6b2de6cbb4d3a43d4fbee
`; `;
/** @type {string} */ /** @type {string} */
@@ -57,7 +60,7 @@
this.initializeAttributeInheritance();
this.#labelElement = this.querySelector(".tab-group-label");
- this.#labelElement.addEventListener("click", this);
+ this.querySelector(".tab-group-label-container").addEventListener("click", this);
this.#updateLabelAriaAttributes();
this.#updateCollapsedAriaAttributes();
@@ -213,7 +216,7 @@ @@ -213,7 +216,7 @@
} }

104
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 diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fecfb4db0a 100644 index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..71bcc2b6221fb0a54667d1a72155b500869e6c1a 100644
--- a/browser/components/tabbrowser/content/tabs.js --- a/browser/components/tabbrowser/content/tabs.js
+++ b/browser/components/tabbrowser/content/tabs.js +++ b/browser/components/tabbrowser/content/tabs.js
@@ -93,7 +93,7 @@ @@ -93,7 +93,7 @@
@ -144,7 +144,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
} }
get verticalMode() { get verticalMode() {
@@ -1524,29 +1553,41 @@ @@ -1524,29 +1553,52 @@
if (this.#allTabs) { if (this.#allTabs) {
return this.#allTabs; return this.#allTabs;
} }
@ -162,28 +162,40 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
- } - }
- } - }
this.#allTabs = [ - this.#allTabs = [
- ...this.verticalPinnedTabsContainer.children, - ...this.verticalPinnedTabsContainer.children,
+ const allTabs = [
+ ...document.getElementById("zen-essentials-container").children, ...this.verticalPinnedTabsContainer.children, + ...document.getElementById("zen-essentials-container").children, ...this.verticalPinnedTabsContainer.children,
...children, ...children,
]; ];
+ const lastPinnedTabIdx = gBrowser.pinnedTabCount; + let pinnedTabIdx = 0;
+ for (let i = 0; i < this.#allTabs.length; i++) { + let hasFoundGroup = true;
+ while (hasFoundGroup) {
+ hasFoundGroup = false;
+ for (let i = 0; i < allTabs.length; i++) {
+ if (allTabs[i].classList.contains("vertical-pinned-tabs-container-separator")) {
+ // remove the separator from the list
+ allTabs.splice(i, 1);
+ i--;
+ } else if (allTabs[i].tagName == "tab-group") {
+ allTabs.splice(i, 1, ...allTabs[i].tabs);
+ hasFoundGroup = true; // Recursively explode tab groups
+ } else if (allTabs[i].pinned) {
+ pinnedTabIdx++;
+ }
+ }
+ }
+ for (let i = 0; i < allTabs.length; i++) {
+ // add glance tabs (tabs inside tabs) to the list + // add glance tabs (tabs inside tabs) to the list
+ const glanceTab = this.#allTabs[i].querySelector("tab[zen-glance-tab]"); + const glanceTab = allTabs[i].querySelector("tab[zen-glance-tab]");
+ if (glanceTab) { + if (glanceTab) {
+ // insert right after the parent tab. note: it must be inserted before + // insert right after the parent tab. note: it must be inserted before
+ // the last pinned tab so it can be inserted in the correct order + // the last pinned tab so it can be inserted in the correct order
+ this.#allTabs.splice(Math.max(i + 1, lastPinnedTabIdx), 0, glanceTab); + allTabs.splice(Math.max(i + 1, pinnedTabIdx), 0, glanceTab);
+ i++; + i++;
+ } else if (this.#allTabs[i].classList.contains("vertical-pinned-tabs-container-separator")) {
+ // remove the separator from the list
+ this.#allTabs.splice(i, 1);
+ i--;
+ } else if (this.#allTabs[i].tagName == "tab-group") {
+ this.#allTabs.splice(i, 1, ...this.#allTabs[i].tabs);
+ } + }
+ } + }
+ this.#allTabs = allTabs;
return this.#allTabs; return this.#allTabs;
} }
@ -194,7 +206,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
} }
/** /**
@@ -1566,7 +1607,7 @@ @@ -1566,7 +1618,7 @@
*/ */
get visibleTabs() { get visibleTabs() {
if (!this.#visibleTabs) { if (!this.#visibleTabs) {
@ -203,7 +215,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
} }
return this.#visibleTabs; return this.#visibleTabs;
} }
@@ -1601,23 +1642,18 @@ @@ -1601,23 +1653,18 @@
} }
let elementIndex = 0; let elementIndex = 0;
@ -231,7 +243,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
let visibleTabsInGroup = child.tabs.filter(tab => tab.visible); let visibleTabsInGroup = child.tabs.filter(tab => tab.visible);
visibleTabsInGroup.forEach(tab => { visibleTabsInGroup.forEach(tab => {
tab.elementIndex = elementIndex++; tab.elementIndex = elementIndex++;
@@ -1627,10 +1663,7 @@ @@ -1627,10 +1674,7 @@
} }
} }
@ -243,7 +255,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
return this.#focusableItems; return this.#focusableItems;
} }
@@ -1638,6 +1671,7 @@ @@ -1638,6 +1682,7 @@
_invalidateCachedTabs() { _invalidateCachedTabs() {
this.#allTabs = null; this.#allTabs = null;
this._invalidateCachedVisibleTabs(); this._invalidateCachedVisibleTabs();
@ -251,7 +263,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
} }
_invalidateCachedVisibleTabs() { _invalidateCachedVisibleTabs() {
@@ -1652,8 +1686,8 @@ @@ -1652,8 +1697,8 @@
#isContainerVerticalPinnedExpanded(tab) { #isContainerVerticalPinnedExpanded(tab) {
return ( return (
this.verticalMode && this.verticalMode &&
@ -262,7 +274,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
); );
} }
@@ -1668,7 +1702,7 @@ @@ -1668,7 +1713,7 @@
if (node == null) { if (node == null) {
// We have a container for non-tab elements at the end of the scrollbox. // We have a container for non-tab elements at the end of the scrollbox.
@ -271,7 +283,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
} }
node.before(tab); node.before(tab);
@@ -1763,7 +1797,7 @@ @@ -1763,7 +1808,7 @@
// There are separate "new tab" buttons for horizontal tabs toolbar, vertical tabs and // There are separate "new tab" buttons for horizontal tabs toolbar, vertical tabs and
// for when the tab strip is overflowed (which is shared by vertical and horizontal tabs); // for when the tab strip is overflowed (which is shared by vertical and horizontal tabs);
// Attach the long click popup to all of them. // Attach the long click popup to all of them.
@ -280,7 +292,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
const newTab2 = this.newTabButton; const newTab2 = this.newTabButton;
const newTabVertical = document.getElementById( const newTabVertical = document.getElementById(
"vertical-tabs-newtab-button" "vertical-tabs-newtab-button"
@@ -1846,7 +1880,7 @@ @@ -1846,7 +1891,7 @@
let rect = ele => { let rect = ele => {
return window.windowUtils.getBoundsWithoutFlushing(ele); return window.windowUtils.getBoundsWithoutFlushing(ele);
}; };
@ -289,7 +301,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
if (tab && rect(tab).width <= this._tabClipWidth) { if (tab && rect(tab).width <= this._tabClipWidth) {
this.setAttribute("closebuttons", "activetab"); this.setAttribute("closebuttons", "activetab");
} else { } else {
@@ -1858,10 +1892,12 @@ @@ -1858,10 +1903,12 @@
_handleTabSelect(aInstant) { _handleTabSelect(aInstant) {
let selectedTab = this.selectedItem; let selectedTab = this.selectedItem;
@ -302,7 +314,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
selectedTab._notselectedsinceload = false; selectedTab._notselectedsinceload = false;
} }
@@ -1873,7 +1909,7 @@ @@ -1873,7 +1920,7 @@
return; return;
} }
@ -311,7 +323,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
if (!tabs.length) { if (!tabs.length) {
return; return;
} }
@@ -1909,7 +1945,7 @@ @@ -1909,7 +1956,7 @@
if (isEndTab && !this._hasTabTempMaxWidth) { if (isEndTab && !this._hasTabTempMaxWidth) {
return; return;
} }
@ -320,7 +332,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
// Force tabs to stay the same width, unless we're closing the last tab, // Force tabs to stay the same width, unless we're closing the last tab,
// which case we need to let them expand just enough so that the overall // which case we need to let them expand just enough so that the overall
// tabbar width is the same. // tabbar width is the same.
@@ -1924,7 +1960,7 @@ @@ -1924,7 +1971,7 @@
let tabsToReset = []; let tabsToReset = [];
for (let i = numPinned; i < tabs.length; i++) { for (let i = numPinned; i < tabs.length; i++) {
let tab = tabs[i]; let tab = tabs[i];
@ -329,7 +341,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
if (!isEndTab) { if (!isEndTab) {
// keep tabs the same width // keep tabs the same width
tab.style.transition = "none"; tab.style.transition = "none";
@@ -1990,16 +2026,15 @@ @@ -1990,16 +2037,15 @@
// Move pinned tabs to another container when the tabstrip is toggled to vertical // Move pinned tabs to another container when the tabstrip is toggled to vertical
// and when session restore code calls _positionPinnedTabs; update styling whenever // and when session restore code calls _positionPinnedTabs; update styling whenever
// the number of pinned tabs changes. // the number of pinned tabs changes.
@ -348,11 +360,11 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
for (let i = 0; i < numPinned; i++) { for (let i = 0; i < numPinned; i++) {
tabs[i].style.marginInlineStart = ""; tabs[i].style.marginInlineStart = "";
- verticalTabsContainer.appendChild(tabs[i]); - verticalTabsContainer.appendChild(tabs[i]);
+ tabs[i].hasAttribute("zen-essential") ? document.getElementById("zen-essentials-container").appendChild(tabs[i].group?.hasAttribute("split-view-group") ? tabs[i].group : tabs[i]) : verticalTabsContainer.insertBefore(tabs[i].group?.hasAttribute("split-view-group") ? tabs[i].group : tabs[i], verticalTabsContainer.lastChild); + tabs[i].hasAttribute("zen-essential") ? document.getElementById("zen-essentials-container").appendChild(tabs[i].group ?? tabs[i]) : verticalTabsContainer.insertBefore(tabs[i].group ?? tabs[i], verticalTabsContainer.lastChild);
} }
} }
@@ -2007,9 +2042,7 @@ @@ -2007,9 +2053,7 @@
} }
_resetVerticalPinnedTabs() { _resetVerticalPinnedTabs() {
@ -363,7 +375,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
if (!verticalTabsContainer.children.length) { if (!verticalTabsContainer.children.length) {
return; return;
@@ -2022,8 +2055,8 @@ @@ -2022,8 +2066,8 @@
} }
_positionPinnedTabs() { _positionPinnedTabs() {
@ -374,7 +386,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
let absPositionHorizontalTabs = let absPositionHorizontalTabs =
this.overflowing && tabs.length > numPinned && numPinned > 0; this.overflowing && tabs.length > numPinned && numPinned > 0;
@@ -2032,7 +2065,7 @@ @@ -2032,7 +2076,7 @@
if (this.verticalMode) { if (this.verticalMode) {
this._updateVerticalPinnedTabs(); this._updateVerticalPinnedTabs();
@ -383,7 +395,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
let layoutData = this._pinnedTabsLayoutCache; let layoutData = this._pinnedTabsLayoutCache;
let uiDensity = document.documentElement.getAttribute("uidensity"); let uiDensity = document.documentElement.getAttribute("uidensity");
if (!layoutData || layoutData.uiDensity != uiDensity) { if (!layoutData || layoutData.uiDensity != uiDensity) {
@@ -2104,7 +2137,7 @@ @@ -2104,7 +2148,7 @@
return; return;
} }
@ -392,7 +404,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
let directionX = screenX > dragData.animLastScreenX; let directionX = screenX > dragData.animLastScreenX;
let directionY = screenY > dragData.animLastScreenY; let directionY = screenY > dragData.animLastScreenY;
@@ -2112,7 +2145,7 @@ @@ -2112,7 +2156,7 @@
dragData.animLastScreenX = screenX; dragData.animLastScreenX = screenX;
let { width: tabWidth, height: tabHeight } = let { width: tabWidth, height: tabHeight } =
@ -401,7 +413,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
let shiftSizeX = tabWidth * movingTabs.length; let shiftSizeX = tabWidth * movingTabs.length;
let shiftSizeY = tabHeight; let shiftSizeY = tabHeight;
dragData.tabWidth = tabWidth; dragData.tabWidth = tabWidth;
@@ -2296,11 +2329,15 @@ @@ -2296,11 +2340,15 @@
this.#clearDragOverCreateGroupTimer(); this.#clearDragOverCreateGroupTimer();
let isPinned = draggedTab.pinned; let isPinned = draggedTab.pinned;
@ -421,7 +433,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
if (this.#rtlMode) { if (this.#rtlMode) {
tabs.reverse(); tabs.reverse();
@@ -2314,7 +2351,7 @@ @@ -2314,7 +2362,7 @@
let size = this.verticalMode ? "height" : "width"; let size = this.verticalMode ? "height" : "width";
let translateAxis = this.verticalMode ? "translateY" : "translateX"; let translateAxis = this.verticalMode ? "translateY" : "translateX";
let scrollDirection = this.verticalMode ? "scrollTop" : "scrollLeft"; let scrollDirection = this.verticalMode ? "scrollTop" : "scrollLeft";
@ -430,7 +442,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
let translateX = event.screenX - dragData.screenX; let translateX = event.screenX - dragData.screenX;
let translateY = event.screenY - dragData.screenY; let translateY = event.screenY - dragData.screenY;
@@ -2328,6 +2365,12 @@ @@ -2328,6 +2376,12 @@
let lastTab = tabs.at(-1); let lastTab = tabs.at(-1);
let lastMovingTab = movingTabs.at(-1); let lastMovingTab = movingTabs.at(-1);
let firstMovingTab = movingTabs[0]; let firstMovingTab = movingTabs[0];
@ -443,7 +455,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
let endEdge = ele => ele[screenAxis] + bounds(ele)[size]; let endEdge = ele => ele[screenAxis] + bounds(ele)[size];
let lastMovingTabScreen = endEdge(lastMovingTab); let lastMovingTabScreen = endEdge(lastMovingTab);
let firstMovingTabScreen = firstMovingTab[screenAxis]; let firstMovingTabScreen = firstMovingTab[screenAxis];
@@ -2348,7 +2391,11 @@ @@ -2348,7 +2402,11 @@
translate = Math.min(Math.max(translate, firstBound), lastBound); translate = Math.min(Math.max(translate, firstBound), lastBound);
for (let tab of movingTabs) { for (let tab of movingTabs) {
@ -456,7 +468,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
} }
dragData.translatePos = translate; dragData.translatePos = translate;
@@ -2485,6 +2532,9 @@ @@ -2485,6 +2543,9 @@
break; break;
} }
let element = tabs[mid]; let element = tabs[mid];
@ -466,7 +478,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
let elementForSize = isTabGroupLabel(element) let elementForSize = isTabGroupLabel(element)
? element.parentElement ? element.parentElement
: element; : element;
@@ -2507,6 +2557,10 @@ @@ -2507,6 +2568,10 @@
if (!dropElement) { if (!dropElement) {
dropElement = this.ariaFocusableItems[oldDropElementIndex]; dropElement = this.ariaFocusableItems[oldDropElementIndex];
} }
@ -477,7 +489,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
let newDropElementIndex = dropElement let newDropElementIndex = dropElement
? dropElement.elementIndex ? dropElement.elementIndex
: oldDropElementIndex; : oldDropElementIndex;
@@ -2515,7 +2569,7 @@ @@ -2515,7 +2580,7 @@
let shouldCreateGroupOnDrop; let shouldCreateGroupOnDrop;
let dropBefore; let dropBefore;
if (dropElement) { if (dropElement) {
@ -486,7 +498,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
? dropElement.parentElement ? dropElement.parentElement
: dropElement; : dropElement;
@@ -2566,12 +2620,12 @@ @@ -2566,12 +2631,12 @@
} }
} }
@ -501,7 +513,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
dropElement != draggedTab && dropElement != draggedTab &&
isTab(dropElement) && isTab(dropElement) &&
!dropElement?.group && !dropElement?.group &&
@@ -2639,7 +2693,7 @@ @@ -2639,7 +2704,7 @@
// Shift background tabs to leave a gap where the dragged tab // Shift background tabs to leave a gap where the dragged tab
// would currently be dropped. // would currently be dropped.
for (let item of tabs) { for (let item of tabs) {
@ -510,7 +522,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
continue; continue;
} }
@@ -2648,6 +2702,9 @@ @@ -2648,6 +2713,9 @@
if (isTabGroupLabel(item)) { if (isTabGroupLabel(item)) {
// Shift the `.tab-group-label-container` to shift the label element. // Shift the `.tab-group-label-container` to shift the label element.
item = item.parentElement; item = item.parentElement;
@ -520,7 +532,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
} }
item.style.transform = transform; item.style.transform = transform;
} }
@@ -2697,8 +2754,9 @@ @@ -2697,8 +2765,9 @@
); );
} }
@ -532,7 +544,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
return; return;
} }
@@ -2711,6 +2769,12 @@ @@ -2711,6 +2780,12 @@
item = item.parentElement; item = item.parentElement;
} }
item.style.transform = ""; item.style.transform = "";
@ -545,7 +557,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
item.removeAttribute("dragover-createGroup"); item.removeAttribute("dragover-createGroup");
} }
this.removeAttribute("movingtab-createGroup"); this.removeAttribute("movingtab-createGroup");
@@ -2754,7 +2818,7 @@ @@ -2754,7 +2829,7 @@
let postTransitionCleanup = () => { let postTransitionCleanup = () => {
movingTab._moveTogetherSelectedTabsData.animate = false; movingTab._moveTogetherSelectedTabsData.animate = false;
}; };
@ -554,7 +566,7 @@ index 0fbdbf3aefc467880e6b0bae2615cb145735cb0f..7fc101549947718ed2624a5d673227fe
postTransitionCleanup(); postTransitionCleanup();
} else { } else {
let onTransitionEnd = transitionendEvent => { let onTransitionEnd = transitionendEvent => {
@@ -2924,7 +2988,7 @@ @@ -2924,7 +2999,7 @@
} }
_notifyBackgroundTab(aTab) { _notifyBackgroundTab(aTab) {