mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-05 19:08:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' of https://github.com/zen-browser/desktop into dev

Browse Source
This commit is contained in:
mr. m
2025-05-18 11:26:05 +02:00
parent c9f632c1b8 297a95986c
commit d9a6bb5b2d
11 changed files with 139 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
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 dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2610e08ad 100644
index dacf52070348a205a56ef42eb8320602f98e5daa..3337362a6c9115fd5207ebe548b43706a762f3d4 100644
--- a/browser/components/tabbrowser/content/tabbrowser.js
+++ b/browser/components/tabbrowser/content/tabbrowser.js
@@ -415,11 +415,45 @@
@@ -262,7 +262,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
return group;
}
@@ -2993,6 +3070,7 @@
@@ -2993,10 +3070,10 @@
insertBefore = null,
isUserTriggered = false,
telemetryUserCreateSource = "unknown",
@@ -270,7 +270,11 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
} = {}
) {
if (!tabs?.length) {
@@ -3011,7 +3089,12 @@
- throw new Error("Cannot create tab group with zero tabs");
}
if (!color) {
@@ -3011,7 +3088,12 @@
id = `${Date.now()}-${Math.round(Math.random() * 100)}`;
}
let group = this._createTabGroup(id, color, false, label);
@@ -284,7 +288,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
group,
insertBefore?.group ?? insertBefore
);
@@ -3342,6 +3425,7 @@
@@ -3342,6 +3424,7 @@
openWindowInfo,
skipLoad,
triggeringRemoteType,
@@ -292,7 +296,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
}
) {
// If we don't have a preferred remote type (or it is `NOT_REMOTE`), and
@@ -3411,6 +3495,7 @@
@@ -3411,6 +3494,7 @@
openWindowInfo,
name,
skipLoad,
@@ -300,7 +304,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
});
}
@@ -3599,7 +3684,7 @@
@@ -3599,7 +3683,7 @@
// Add a new tab if needed.
if (!tab) {
let createLazyBrowser =
@@ -309,7 +313,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
let url = "about:blank";
if (tabData.entries?.length) {
@@ -3637,7 +3722,29 @@
@@ -3637,7 +3721,29 @@
skipLoad: true,
preferredRemoteType,
});
@@ -339,7 +343,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
if (select) {
tabToSelect = tab;
}
@@ -3661,7 +3768,8 @@
@@ -3661,7 +3767,8 @@
// needs calling:
shouldUpdateForPinnedTabs = true;
}
@@ -349,7 +353,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
let { groupId } = tabData;
const tabGroup = tabGroupWorkingData.get(groupId);
// if a tab refers to a tab group we don't know, skip any group
@@ -3675,7 +3783,10 @@
@@ -3675,7 +3782,10 @@
tabGroup.stateData.id,
tabGroup.stateData.color,
tabGroup.stateData.collapsed,
@@ -361,7 +365,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
);
tabsFragment.appendChild(tabGroup.node);
}
@@ -3723,8 +3834,16 @@
@@ -3723,8 +3833,16 @@
// to remove the old selected tab.
if (tabToSelect) {
let leftoverTab = this.selectedTab;
@@ -380,7 +384,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
}
if (tabs.length > 1 || !tabs[0].selected) {
@@ -3912,7 +4031,7 @@
@@ -3912,7 +4030,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.
@@ -389,7 +393,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
if (
!bulkOrderedOpen &&
((openerTab &&
@@ -3935,7 +4054,7 @@
@@ -3935,7 +4053,7 @@
) {
index = Infinity;
} else if (previousTab.visible) {
@@ -398,7 +402,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
} else if (previousTab == FirefoxViewHandler.tab) {
index = 0;
}
@@ -3958,18 +4077,18 @@
@@ -3958,18 +4076,18 @@
// Ensure index is within bounds.
if (tab.pinned) {
@@ -422,7 +426,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
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);
@@ -4290,6 +4409,9 @@
@@ -4290,6 +4408,9 @@
return;
}
@@ -432,7 +436,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
this.removeTabs(selectedTabs, { telemetrySource });
}
@@ -4542,6 +4664,7 @@
@@ -4542,6 +4663,7 @@
telemetrySource,
} = {}
) {
@@ -440,7 +444,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
// When 'closeWindowWithLastTab' pref is enabled, closing all tabs
// can be considered equivalent to closing the window.
if (
@@ -4626,6 +4749,7 @@
@@ -4626,6 +4748,7 @@
if (lastToClose) {
this.removeTab(lastToClose, aParams);
}
@@ -448,15 +452,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
} catch (e) {
console.error(e);
}
@@ -4650,6 +4774,7 @@
telemetrySource,
} = {}
) {
+ gZenUIManager.saveScrollbarState();
if (UserInteraction.running("browser.tabs.opening", window)) {
UserInteraction.finish("browser.tabs.opening", window);
}
@@ -4663,6 +4788,12 @@
@@ -4663,6 +4786,12 @@
aTab._closeTimeNoAnimTimerId = Glean.browserTabclose.timeNoAnim.start();
}
@@ -469,7 +465,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
// Handle requests for synchronously removing an already
// asynchronously closing tab.
if (!animate && aTab.closing) {
@@ -4677,7 +4808,9 @@
@@ -4677,7 +4806,9 @@
// frame created for it (for example, by updating the visually selected
// state).
let tabWidth = window.windowUtils.getBoundsWithoutFlushing(aTab).width;
@@ -480,7 +476,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
if (
!this._beginRemoveTab(aTab, {
closeWindowFastpath: true,
@@ -4840,7 +4973,7 @@
@@ -4840,7 +4971,7 @@
closeWindowWithLastTab != null
? closeWindowWithLastTab
: !window.toolbar.visible ||
@@ -489,7 +485,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
if (closeWindow) {
// We've already called beforeunload on all the relevant tabs if we get here,
@@ -4864,6 +4997,7 @@
@@ -4864,6 +4995,7 @@
newTab = true;
}
@@ -497,7 +493,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
aTab._endRemoveArgs = [closeWindow, newTab];
// swapBrowsersAndCloseOther will take care of closing the window without animation.
@@ -4903,9 +5037,7 @@
@@ -4903,9 +5035,7 @@
aTab._mouseleave();
if (newTab) {
@@ -508,7 +504,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
} else {
TabBarVisibility.update();
}
@@ -5034,6 +5166,8 @@
@@ -5034,6 +5164,8 @@
this.tabs[i]._tPos = i;
}
@@ -517,7 +513,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
if (!this._windowIsClosing) {
if (wasPinned) {
this.tabContainer._positionPinnedTabs();
@@ -5159,8 +5293,8 @@
@@ -5159,8 +5291,8 @@
return closedCount;
}
@@ -528,7 +524,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
if (unloadBlocked) {
return;
}
@@ -5248,6 +5382,7 @@
@@ -5248,6 +5380,7 @@
}
let excludeTabs = new Set(aExcludeTabs);
@@ -536,7 +532,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
// If this tab has a successor, it should be selectable, since
// hiding or closing a tab removes that tab as a successor.
@@ -5260,13 +5395,13 @@
@@ -5260,13 +5393,13 @@
!excludeTabs.has(aTab.owner) &&
Services.prefs.getBoolPref("browser.tabs.selectOwnerOnClose")
) {
@@ -552,7 +548,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
);
let tab = this.tabContainer.findNextTab(aTab, {
@@ -5282,7 +5417,7 @@
@@ -5282,7 +5415,7 @@
}
if (tab) {
@@ -561,7 +557,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
}
// If no qualifying visible tab was found, see if there is a tab in
@@ -5303,7 +5438,7 @@
@@ -5303,7 +5436,7 @@
});
}
@@ -570,7 +566,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
}
_blurTab(aTab) {
@@ -5704,10 +5839,10 @@
@@ -5704,10 +5837,10 @@
SessionStore.deleteCustomTabValue(aTab, "hiddenBy");
}
@@ -583,7 +579,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
aTab.selected ||
aTab.closing ||
// Tabs that are sharing the screen, microphone or camera cannot be hidden.
@@ -6002,7 +6137,7 @@
@@ -6002,7 +6135,7 @@
// Don't allow mixing pinned and unpinned tabs.
if (this.isTab(element) && element.pinned) {
@@ -592,7 +588,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
} else {
tabIndex = Math.max(tabIndex, this.pinnedTabCount);
}
@@ -6029,9 +6164,16 @@
@@ -6029,9 +6162,16 @@
element,
() => {
let neighbor = this.tabs[tabIndex];
@@ -610,7 +606,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
if (neighbor && this.isTab(element) && tabIndex > element._tPos) {
neighbor.after(element);
} else {
@@ -6100,7 +6242,9 @@
@@ -6100,7 +6240,9 @@
targetElement = targetElement.group;
}
}
@@ -621,7 +617,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
// Don't allow mixing pinned and unpinned tabs.
if (element.pinned && !targetElement?.pinned) {
targetElement = this.tabs[this.pinnedTabCount - 1];
@@ -6110,7 +6254,13 @@
@@ -6110,7 +6252,13 @@
moveBefore = true;
}
@@ -635,7 +631,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
if (element.pinned && this.tabContainer.verticalMode) {
return this.tabContainer.verticalPinnedTabsContainer;
}
@@ -6170,7 +6320,7 @@
@@ -6170,7 +6318,7 @@
if (!this.isTab(aTab)) {
throw new Error("Can only move a tab into a tab group");
}
@@ -644,7 +640,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
return;
}
if (aTab.group && aTab.group.id === aGroup.id) {
@@ -6264,6 +6414,10 @@
@@ -6264,6 +6412,10 @@
moveActionCallback();
@@ -655,7 +651,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
// Clear tabs cache after moving nodes because the order of tabs may have
// changed.
this.tabContainer._invalidateCachedTabs();
@@ -7081,7 +7235,7 @@
@@ -7081,7 +7233,7 @@
// preventDefault(). It will still raise the window if appropriate.
break;
}
@@ -664,7 +660,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
window.focus();
aEvent.preventDefault();
break;
@@ -7982,6 +8136,7 @@
@@ -7982,6 +8134,7 @@
aWebProgress.isTopLevel
) {
this.mTab.setAttribute("busy", "true");
@@ -672,7 +668,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
gBrowser._tabAttrModified(this.mTab, ["busy"]);
this.mTab._notselectedsinceload = !this.mTab.selected;
}
@@ -8955,7 +9110,7 @@ var TabContextMenu = {
@@ -8955,7 +9108,7 @@ var TabContextMenu = {
);
contextUnpinSelectedTabs.hidden =
!this.contextTab.pinned || !this.multiselected;
@@ -681,7 +677,7 @@ index dacf52070348a205a56ef42eb8320602f98e5daa..66c42501899b15e1f250880ebe9e64b2
// Move Tab items
let contextMoveTabOptions = document.getElementById(
"context_moveTabOptions"
@@ -9224,6 +9379,7 @@ var TabContextMenu = {
@@ -9224,6 +9377,7 @@ var TabContextMenu = {
telemetrySource: gBrowser.TabMetrics.METRIC_SOURCE.TAB_STRIP,
});
} else {

20
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 ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..97e2a505892a82084ade7d2b1c5b690444f65254 100644
index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..62fcba41ec1976e24343a54f8dd146a430a6640e 100644
--- a/browser/components/tabbrowser/content/tabs.js
+++ b/browser/components/tabbrowser/content/tabs.js
@@ -83,7 +83,7 @@
@@ -11,7 +11,15 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..97e2a505892a82084ade7d2b1c5b6904
}
return true;
};
@@ -342,7 +342,7 @@
@@ -286,6 +286,7 @@
on_TabGroupCollapse(event) {
this._invalidateCachedVisibleTabs();
this._unlockTabSizing();
+ return;
// If the user's selected tab is in the collapsing group, kick them off
// the tab. If no tabs exist outside the group, create a new one and
@@ -342,7 +343,7 @@
// and we're not hitting the scroll buttons.
if (
event.button != 0 ||
@@ -20,14 +28,6 @@ index ef9c0389ec926e6bc01c0dc3b883beceaf1f7d43..97e2a505892a82084ade7d2b1c5b6904
event.composedTarget.localName == "toolbarbutton"
) {
return;
@@ -391,6 +391,7 @@
// Reset the "ignored click" flag
target._ignoredCloseButtonClicks = false;
}
+ gZenUIManager.saveScrollbarState();
}
/* Protects from close-tab-button errant doubleclick:
@@ -692,7 +693,7 @@
if (this.#isContainerVerticalPinnedGrid(tab)) {
// In expanded vertical mode, the max number of pinned tabs per row is dynamic

35
src/zen/common/ZenStartup.mjs
View File

@@ -28,7 +28,6 @@
document.getElementById('zen-appcontent-navbar-container').appendChild(deckTemplate);
}
this._initSidebarScrolling();
this._hideUnusedElements();
gZenWorkspaces.init();
@@ -144,40 +143,6 @@
}
},
_initSidebarScrolling() {
// Disable smooth scroll
const canSmoothScroll = Services.prefs.getBoolPref(
'zen.startup.smooth-scroll-in-tabs',
false
);
const tabsWrapper = document.getElementById('zen-tabs-wrapper');
gBrowser.tabContainer.addEventListener('wheel', (event) => {
if (canSmoothScroll) return;
event.preventDefault(); // Prevent the smooth scroll behavior
gBrowser.tabContainer.scrollTop += event.deltaY * 20; // Apply immediate scroll
});
// Detect overflow and underflow
const observer = new ResizeObserver((_) => {
const tabContainer = gBrowser.tabContainer;
// const isVertical = tabContainer.getAttribute('orient') === 'vertical';
// let contentSize = tabsWrapper.getBoundingClientRect()[isVertical ? 'height' : 'width'];
// NOTE: This should be contentSize > scrollClientSize, but due
// to how Gecko internally rounds in those cases, we allow for some
// minor differences (the internal Gecko layout size is 1/60th of a
// pixel, so 0.02 should cover it).
//let overflowing = contentSize - tabContainer.arrowScrollbox.scrollClientSize > 0.02;
let overflowing = true; // cheatign the system, because we want to always show make the element overflowing
window.requestAnimationFrame(() => {
tabContainer.arrowScrollbox.toggleAttribute('overflowing', overflowing);
tabContainer.arrowScrollbox.dispatchEvent(
new CustomEvent(overflowing ? 'overflow' : 'underflow')
);
});
});
observer.observe(tabsWrapper);
},
_initSearchBar() {
// Only focus the url bar
gURLBar.focus();

11
src/zen/common/ZenUIManager.mjs
View File

@@ -88,18 +88,9 @@ var gZenUIManager = {
return this._tabsWrapper;
},
saveScrollbarState() {
this._scrollbarState = this.tabsWrapper.scrollTop;
},
restoreScrollbarState() {
this.tabsWrapper.scrollTop = this._scrollbarState;
},
onTabClose(event = undefined) {
if (!event?.target?._closedInMultiselection) {
this.updateTabsToolbar();
this.restoreScrollbarState();
}
},
@@ -791,7 +782,9 @@ var gZenVerticalTabsManager = {
document.documentElement.removeAttribute('zen-right-side');
}
delete this._hadSidebarCollapse;
if (isSidebarExpanded) {
this._hadSidebarCollapse = !document.documentElement.hasAttribute('zen-sidebar-expanded');
this.navigatorToolbox.setAttribute('zen-sidebar-expanded', 'true');
document.documentElement.setAttribute('zen-sidebar-expanded', 'true');
gBrowser.tabContainer.setAttribute('expanded', 'true');

1
src/zen/common/styles/zen-popup.css
View File

@@ -393,6 +393,7 @@ menuseparator {
}
& button {
color-scheme: dark;
width: min-content;
padding: 0 12px !important;
min-width: unset !important;

12
src/zen/compact-mode/ZenCompactMode.mjs
View File

@@ -201,13 +201,21 @@ var gZenCompactModeManager = {
}
let sidebarWidth = this.sidebar.getBoundingClientRect().width;
if (sidebarWidth > 1) {
gZenUIManager.restoreScrollbarState();
if (this.preference && gZenVerticalTabsManager._prefsSidebarExpanded) {
sidebarWidth = Math.max(sidebarWidth, 150);
}
// Second variable to get the genuine width of the sidebar
this.sidebar.style.setProperty('--actual-zen-sidebar-width', `${sidebarWidth}px`);
window.dispatchEvent(new window.Event('resize')); // To recalculate the layout
if (event && this.preference) {
if (
event &&
this.preference &&
gZenVerticalTabsManager._prefsSidebarExpanded &&
!gZenVerticalTabsManager._hadSidebarCollapse
) {
return;
}
delete gZenVerticalTabsManager._hadSidebarCollapse;
this.sidebar.style.setProperty('--zen-sidebar-width', `${sidebarWidth}px`);
}
return sidebarWidth;

3
src/zen/media/ZenMediaController.mjs
View File

@@ -231,7 +231,6 @@
this.mediaControlBar.setAttribute('hidden', 'true');
this.mediaControlBar.removeAttribute('media-sharing');
gZenUIManager.updateTabsToolbar();
gZenUIManager.restoreScrollbarState();
});
}
@@ -257,7 +256,6 @@
this.mediaControlBar.querySelector('toolbaritem').getBoundingClientRect().height + 'px';
this.mediaControlBar.style.opacity = 0;
gZenUIManager.updateTabsToolbar();
gZenUIManager.restoreScrollbarState();
gZenUIManager.motion.animate(
this.mediaControlBar,
{
@@ -306,7 +304,6 @@
this.mediaArtist.textContent = metadata.artist || '';
gZenUIManager.updateTabsToolbar();
gZenUIManager.restoreScrollbarState();
this._currentPosition = positionState.position;
this._currentDuration = positionState.duration;

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

@@ -447,7 +447,6 @@
min-height: fit-content;
overflow-y: auto; /* Allow vertical scrolling */
height: 100%; /* Take full available height */
scrollbar-color: color-mix(in srgb, currentColor 26%, transparent) transparent; /* Custom scrollbar */
/* Negative margin hack for workspace transitions (only if workspaces are enabled) */
:root[zen-workspace-id][zen-sidebar-expanded='true'] & {
@@ -734,6 +733,7 @@
padding: 0 !important;
max-width: var(--zen-sidebar-width) !important;
min-width: unset !important;
width: 100% !important;
}
& #zen-essentials {

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

@@ -49,6 +49,33 @@
this.initializeAttributeInheritance();
this.scrollbox = this.querySelector('arrowscrollbox');
this.scrollbox.smoothScroll = Services.prefs.getBoolPref(
'zen.startup.smooth-scroll-in-tabs',
false
);
this.scrollbox._getScrollableElements = () => {
return gBrowser.tabContainer.ariaFocusableItems.filter(this.scrollbox._canScrollToElement);
};
this.scrollbox._canScrollToElement = (element) => {
if (gBrowser.isTab(element)) {
return !element.hasAttribute('zen-essential') && !this.hasAttribute('positionpinnedtabs');
}
return true;
};
// Override for performance reasons. This is the size of a single element
// that can be scrolled when using mouse wheel scrolling. If we don't do
// this then arrowscrollbox computes this value by calling
// _getScrollableElements and dividing the box size by that number.
// However in the tabstrip case we already know the answer to this as,
// when we're overflowing, it is always the same as the tab min width or
// height. For tab group labels, the number won't exactly match, but
// that shouldn't be a problem in practice since the arrowscrollbox
// stops at element bounds when finishing scrolling.
Object.defineProperty(this.scrollbox, 'lineScrollAmount', {
get: () => 36,
});
// Add them manually since attribute inheritance doesn't work
// for multiple layers of shadow DOM.

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

@@ -2590,6 +2590,9 @@ var gZenWorkspaces = new (class extends ZenMultiWindowFeature {
}
for (const workspaceId of workspacesIds) {
const workspaceElement = this.workspaceElement(workspaceId);
if (!workspaceElement) {
continue;
}
const arrowScrollbox = workspaceElement.tabsContainer;
const pinnedContainer = workspaceElement.pinnedTabsContainer;
const workspaceObject = this.getWorkspaceFromId(workspaceId);

44
src/zen/workspaces/zen-workspaces.css
View File

@@ -513,9 +513,14 @@ zen-workspace {
height: 100%;
overflow: hidden;
:root:not([zen-sidebar-expanded='true']) & {
width: 100%;
}
& > arrowscrollbox {
max-height: 100%;
overflow: hidden;
position: relative;
&::part(scrollbutton-up),
&::part(scrollbutton-down) {
@@ -524,10 +529,47 @@ zen-workspace {
&::part(scrollbox) {
scrollbar-width: thin;
scrollbar-color: var(--vertical-tabs-scrollbar-color);
scrollbar-color: color-mix(in srgb, currentColor 35%, transparent 65%) transparent; /* Custom scrollbar */
overflow-y: auto;
}
&[overflowing] {
--zen-scrollbar-overflow-background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
opacity: 0;
pointer-events: none;
transition: opacity 0.1s;
background-color: var(--zen-scrollbar-overflow-background);
}
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
opacity: 0;
pointer-events: none;
transition: opacity 0.1s;
background-color: var(--zen-scrollbar-overflow-background);
}
&:not([scrolledtostart])::before {
opacity: 1;
}
&:not([scrolledtoend])::after {
opacity: 1;
}
}
&,
& .zen-workspace-normal-tabs-section {
height: 100%;