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

Refactor tab close handling and maintain scrollbar state

Browse Source
This commit is contained in:
mr. M
2025-01-31 23:35:45 +01:00
parent 7b41eb753d
commit d81745eef2
3 changed files with 54 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/browser/base/content/ZenUIManager.mjs
View File

@@ -28,7 +28,7 @@ var gZenUIManager = {
this._hasLoadedDOM = true; this._hasLoadedDOM = true;
}); });
window.addEventListener('TabClose', this.updateTabsToolbar.bind(this)); window.addEventListener('TabClose', this.onTabClose.bind(this));
}, },
updateTabsToolbar() { updateTabsToolbar() {
@@ -56,6 +56,24 @@ var gZenUIManager = {
tabs.style.maxHeight = height + 'px'; tabs.style.maxHeight = height + 'px';
}, },
get tabsWrapper() {
if (this._tabsWrapper) {
return this._tabsWrapper;
}
this._tabsWrapper = document.getElementById('zen-browser-tabs-wrapper');
return this._tabsWrapper;
},
saveScrollbarState() {
this._scrollbarState = this.tabsWrapper.scrollTop;
},
onTabClose(event) {
this.updateTabsToolbar();
this.tabsWrapper.scrollTop = this._scrollbarState;
this._scrollbarState = 0;
},
openAndChangeToTab(url, options) { openAndChangeToTab(url, options) {
if (window.ownerGlobal.parent) { if (window.ownerGlobal.parent) {
const tab = window.ownerGlobal.parent.gBrowser.addTrustedTab(url, options); const tab = window.ownerGlobal.parent.gBrowser.addTrustedTab(url, options);
@@ -248,7 +266,7 @@ var gZenVerticalTabsManager = {
aTab.style.removeProperty('opacity'); aTab.style.removeProperty('opacity');
}); });
gZenUIManager.motion gZenUIManager.motion
.animate(aTab.querySelector('.tab-stack'), { .animate(aTab.querySelector('.tab-content'), {
filter: ['blur(1px)', 'blur(0px)'], filter: ['blur(1px)', 'blur(0px)'],
}) })
.then(() => { .then(() => {

2
src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
View File

@@ -1080,7 +1080,7 @@
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;
background: var(--zen-drag-indicator-bg); background: var(--zen-drag-indicator-bg);
transition: top 0.1s ease; transition: top 0.1s ease-out;
pointer-events: none; pointer-events: none;
left: calc(var(--indicator-left) + 2 * var(--zen-drag-indicator-height) + 4px); left: calc(var(--indicator-left) + 2 * var(--zen-drag-indicator-height) + 4px);
border-radius: 5px; border-radius: 5px;

58
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 8aeb244ffca9f48661805f5b7d860b5896055562..35f5562d60d70ac4e117c7f098d96eccdd9bbbc4 100644 index 8aeb244ffca9f48661805f5b7d860b5896055562..a6fae3e317afc9b681f818506c7f34a325e43df4 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
@@ -94,7 +94,7 @@ @@ -94,7 +94,7 @@
@@ -20,7 +20,15 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..35f5562d60d70ac4e117c7f098d96ecc
event.composedTarget.localName == "toolbarbutton" event.composedTarget.localName == "toolbarbutton"
) { ) {
return; return;
@@ -659,7 +659,7 @@ @@ -411,6 +411,7 @@
// Reset the "ignored click" flag
target._ignoredCloseButtonClicks = false;
}
+ gZenUIManager.saveScrollbarState();
}
/* Protects from close-tab-button errant doubleclick:
@@ -659,7 +660,7 @@
if (this.#isContainerVerticalPinnedExpanded(tab)) { if (this.#isContainerVerticalPinnedExpanded(tab)) {
// In expanded vertical mode, the max number of pinned tabs per row is dynamic // In expanded vertical mode, the max number of pinned tabs per row is dynamic
// Set this before adjusting dragged tab's position // Set this before adjusting dragged tab's position
@@ -29,7 +37,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..35f5562d60d70ac4e117c7f098d96ecc
let tabsPerRow = 0; let tabsPerRow = 0;
let position = 0; let position = 0;
for (let pinnedTab of pinnedTabs) { for (let pinnedTab of pinnedTabs) {
@@ -859,6 +859,9 @@ @@ -859,6 +860,9 @@
} }
let draggedTab = event.dataTransfer.mozGetDataAt(TAB_DROP_TYPE, 0); let draggedTab = event.dataTransfer.mozGetDataAt(TAB_DROP_TYPE, 0);
@@ -39,7 +47,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..35f5562d60d70ac4e117c7f098d96ecc
if ( if (
(effects == "move" || effects == "copy") && (effects == "move" || effects == "copy") &&
this == draggedTab.container && this == draggedTab.container &&
@@ -972,6 +975,14 @@ @@ -972,6 +976,14 @@
this._tabDropIndicator.hidden = true; this._tabDropIndicator.hidden = true;
event.stopPropagation(); event.stopPropagation();
@@ -54,7 +62,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..35f5562d60d70ac4e117c7f098d96ecc
if (draggedTab && dropEffect == "copy") { if (draggedTab && dropEffect == "copy") {
// copy the dropped tab (wherever it's from) // copy the dropped tab (wherever it's from)
let newIndex = this._getDropIndex(event); let newIndex = this._getDropIndex(event);
@@ -1010,7 +1021,7 @@ @@ -1010,7 +1022,7 @@
} }
} else { } else {
let pinned = draggedTab.pinned; let pinned = draggedTab.pinned;
@@ -63,7 +71,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..35f5562d60d70ac4e117c7f098d96ecc
let tabs = this.visibleTabs.slice( let tabs = this.visibleTabs.slice(
pinned ? 0 : numPinned, pinned ? 0 : numPinned,
pinned ? numPinned : undefined pinned ? numPinned : undefined
@@ -1090,7 +1101,7 @@ @@ -1090,7 +1102,7 @@
let postTransitionCleanup = () => { let postTransitionCleanup = () => {
tab.removeAttribute("tabdrop-samewindow"); tab.removeAttribute("tabdrop-samewindow");
@@ -72,7 +80,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..35f5562d60d70ac4e117c7f098d96ecc
if (dropIndex !== false) { if (dropIndex !== false) {
gBrowser.moveTabTo(tab, dropIndex); gBrowser.moveTabTo(tab, dropIndex);
if (!directionForward) { if (!directionForward) {
@@ -1100,7 +1111,7 @@ @@ -1100,7 +1112,7 @@
gBrowser.syncThrobberAnimations(tab); gBrowser.syncThrobberAnimations(tab);
}; };
@@ -81,7 +89,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..35f5562d60d70ac4e117c7f098d96ecc
postTransitionCleanup(); postTransitionCleanup();
} else { } else {
let onTransitionEnd = transitionendEvent => { let onTransitionEnd = transitionendEvent => {
@@ -1263,7 +1274,8 @@ @@ -1263,7 +1275,8 @@
if ( if (
dt.mozUserCancelled || dt.mozUserCancelled ||
dt.dropEffect != "none" || dt.dropEffect != "none" ||
@@ -91,7 +99,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..35f5562d60d70ac4e117c7f098d96ecc
) { ) {
delete draggedTab._dragData; delete draggedTab._dragData;
return; return;
@@ -1512,7 +1524,7 @@ @@ -1512,7 +1525,7 @@
} }
this.#allTabs = [ this.#allTabs = [
@@ -100,7 +108,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..35f5562d60d70ac4e117c7f098d96ecc
...children, ...children,
]; ];
return this.#allTabs; return this.#allTabs;
@@ -1593,6 +1605,7 @@ @@ -1593,6 +1606,7 @@
} }
this.#focusableItems = [ this.#focusableItems = [
@@ -108,7 +116,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..35f5562d60d70ac4e117c7f098d96ecc
...verticalPinnedTabsContainer.children, ...verticalPinnedTabsContainer.children,
...focusableItems, ...focusableItems,
]; ];
@@ -1617,8 +1630,8 @@ @@ -1617,8 +1631,8 @@
#isContainerVerticalPinnedExpanded(tab) { #isContainerVerticalPinnedExpanded(tab) {
return ( return (
this.verticalMode && this.verticalMode &&
@@ -119,7 +127,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..35f5562d60d70ac4e117c7f098d96ecc
); );
} }
@@ -1816,7 +1829,7 @@ @@ -1816,7 +1830,7 @@
let rect = ele => { let rect = ele => {
return window.windowUtils.getBoundsWithoutFlushing(ele); return window.windowUtils.getBoundsWithoutFlushing(ele);
}; };
@@ -128,7 +136,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..35f5562d60d70ac4e117c7f098d96ecc
if (tab && rect(tab).width <= this._tabClipWidth) { if (tab && rect(tab).width <= this._tabClipWidth) {
this.setAttribute("closebuttons", "activetab"); this.setAttribute("closebuttons", "activetab");
} else { } else {
@@ -1832,6 +1845,7 @@ @@ -1832,6 +1846,7 @@
this.arrowScrollbox.ensureElementIsVisible(selectedTab, aInstant); this.arrowScrollbox.ensureElementIsVisible(selectedTab, aInstant);
} }
@@ -136,7 +144,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..35f5562d60d70ac4e117c7f098d96ecc
selectedTab._notselectedsinceload = false; selectedTab._notselectedsinceload = false;
} }
@@ -1879,7 +1893,7 @@ @@ -1879,7 +1894,7 @@
if (isEndTab && !this._hasTabTempMaxWidth) { if (isEndTab && !this._hasTabTempMaxWidth) {
return; return;
} }
@@ -145,7 +153,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..35f5562d60d70ac4e117c7f098d96ecc
// 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.
@@ -1894,7 +1908,7 @@ @@ -1894,7 +1909,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];
@@ -154,7 +162,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..35f5562d60d70ac4e117c7f098d96ecc
if (!isEndTab) { if (!isEndTab) {
// keep tabs the same width // keep tabs the same width
tab.style.transition = "none"; tab.style.transition = "none";
@@ -1963,13 +1977,13 @@ @@ -1963,13 +1978,13 @@
let verticalTabsContainer = document.getElementById( let verticalTabsContainer = document.getElementById(
"vertical-pinned-tabs-container" "vertical-pinned-tabs-container"
); );
@@ -171,7 +179,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..35f5562d60d70ac4e117c7f098d96ecc
} }
} }
@@ -1993,7 +2007,7 @@ @@ -1993,7 +2008,7 @@
_positionPinnedTabs() { _positionPinnedTabs() {
let tabs = this.visibleTabs; let tabs = this.visibleTabs;
@@ -180,7 +188,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..35f5562d60d70ac4e117c7f098d96ecc
let absPositionHorizontalTabs = let absPositionHorizontalTabs =
this.overflowing && tabs.length > numPinned && numPinned > 0; this.overflowing && tabs.length > numPinned && numPinned > 0;
@@ -2074,7 +2088,7 @@ @@ -2074,7 +2089,7 @@
return; return;
} }
@@ -189,7 +197,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..35f5562d60d70ac4e117c7f098d96ecc
let directionX = screenX > dragData.animLastScreenX; let directionX = screenX > dragData.animLastScreenX;
let directionY = screenY > dragData.animLastScreenY; let directionY = screenY > dragData.animLastScreenY;
@@ -2257,9 +2271,9 @@ @@ -2257,9 +2272,9 @@
} }
let pinned = draggedTab.pinned; let pinned = draggedTab.pinned;
@@ -201,7 +209,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..35f5562d60d70ac4e117c7f098d96ecc
pinned ? numPinned : undefined pinned ? numPinned : undefined
); );
@@ -2502,8 +2516,9 @@ @@ -2502,8 +2517,9 @@
); );
} }
@@ -213,7 +221,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..35f5562d60d70ac4e117c7f098d96ecc
return; return;
} }
@@ -2668,9 +2683,9 @@ @@ -2668,9 +2684,9 @@
function newIndex(aTab, index) { function newIndex(aTab, index) {
// Don't allow mixing pinned and unpinned tabs. // Don't allow mixing pinned and unpinned tabs.
if (aTab.pinned) { if (aTab.pinned) {
@@ -225,7 +233,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..35f5562d60d70ac4e117c7f098d96ecc
} }
} }
@@ -2754,7 +2769,7 @@ @@ -2754,7 +2770,7 @@
} }
_notifyBackgroundTab(aTab) { _notifyBackgroundTab(aTab) {
@@ -234,7 +242,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..35f5562d60d70ac4e117c7f098d96ecc
return; return;
} }
@@ -2772,12 +2787,14 @@ @@ -2772,12 +2788,14 @@
selectedTab = { selectedTab = {
left: selectedTab.left, left: selectedTab.left,
right: selectedTab.right, right: selectedTab.right,
@@ -250,7 +258,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..35f5562d60d70ac4e117c7f098d96ecc
selectedTab, selectedTab,
]; ];
}) })
@@ -2794,8 +2811,11 @@ @@ -2794,8 +2812,11 @@
delete this._lastTabToScrollIntoView; delete this._lastTabToScrollIntoView;
// Is the new tab already completely visible? // Is the new tab already completely visible?
if ( if (
@@ -264,7 +272,7 @@ index 8aeb244ffca9f48661805f5b7d860b5896055562..35f5562d60d70ac4e117c7f098d96ecc
) { ) {
return; return;
} }
@@ -2803,21 +2823,29 @@ @@ -2803,21 +2824,29 @@
if (this.arrowScrollbox.smoothScroll) { if (this.arrowScrollbox.smoothScroll) {
// Can we make both the new tab and the selected tab completely visible? // Can we make both the new tab and the selected tab completely visible?
if ( if (