diff --git a/src/browser/base/content/ZenStartup.mjs b/src/browser/base/content/ZenStartup.mjs index 6ac249e9a..67847f5f4 100644 --- a/src/browser/base/content/ZenStartup.mjs +++ b/src/browser/base/content/ZenStartup.mjs @@ -84,31 +84,31 @@ _initSidebarScrolling() { // Disable smooth scroll - if (!Services.prefs.getBoolPref('zen.startup.smooth-scroll-in-tabs', false)) { - gBrowser.tabContainer.addEventListener('wheel', (event) => { - event.preventDefault(); // Prevent the smooth scroll behavior - gBrowser.tabContainer.scrollTop += event.deltaY * 20; // Apply immediate scroll - }); - } + const canSmoothScroll = Services.prefs.getBoolPref('zen.startup.smooth-scroll-in-tabs', false); + const workspaceIndicator = document.getElementById('zen-current-workspace-indicator'); + const tabsWrapper = document.getElementById('zen-browser-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 = - tabContainer.getBoundingClientRect()[isVertical ? 'height' : 'width']; + 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; - tabContainer.arrowScrollbox.toggleAttribute("overflowing", overflowing); - tabContainer.arrowScrollbox.dispatchEvent( - new CustomEvent(overflowing ? "overflow" : "underflow") - ); + window.requestAnimationFrame(() => { + tabContainer.arrowScrollbox.toggleAttribute('overflowing', overflowing); + tabContainer.arrowScrollbox.dispatchEvent(new CustomEvent(overflowing ? 'overflow' : 'underflow')); + }); }); - observer.observe(document.getElementById('navigator-toolbox')); - + observer.observe(tabsWrapper); }, _initSearchBar() { diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs index 82094366a..9648aef8c 100644 --- a/src/browser/base/content/ZenUIManager.mjs +++ b/src/browser/base/content/ZenUIManager.mjs @@ -26,7 +26,7 @@ var gZenUIManager = { updateTabsToolbar() { // Set tabs max-height to the "toolbar-items" height - const tabs = document.getElementById('tabbrowser-tabs'); + const tabs = document.getElementById('zen-browser-tabs-wrapper'); // Remove tabs so we can accurately calculate the height // without them affecting the height of the toolbar for (const tab of gBrowser.tabs) { @@ -42,10 +42,9 @@ var gZenUIManager = { if (tab.hasAttribute('zen-essential')) { continue; } - tab.style.maxHeight = height + 'px'; + tab.style.removeProperty('max-height'); } tabs.style.maxHeight = height + 'px'; - //console.info('ZenThemeModifier: set tabs max-height to', totalHeight + 'px'); }, openAndChangeToTab(url, options) { diff --git a/src/browser/base/content/navigator-toolbox-inc-xhtml.patch b/src/browser/base/content/navigator-toolbox-inc-xhtml.patch index 44cf0f9cd..00ad568d9 100644 --- a/src/browser/base/content/navigator-toolbox-inc-xhtml.patch +++ b/src/browser/base/content/navigator-toolbox-inc-xhtml.patch @@ -1,5 +1,5 @@ diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml -index 00391af141d9015fe5839534e5e6b22a91ba65d9..ee31d5f5116bc8f19f56fb868eceefea558659d6 100644 +index 00391af141d9015fe5839534e5e6b22a91ba65d9..b68767d0fef6cea2756376bbcfe00603d5d1a655 100644 --- a/browser/base/content/navigator-toolbox.inc.xhtml +++ b/browser/base/content/navigator-toolbox.inc.xhtml @@ -2,7 +2,7 @@ @@ -29,7 +29,7 @@ index 00391af141d9015fe5839534e5e6b22a91ba65d9..ee31d5f5116bc8f19f56fb868eceefea - -+ -+ -+ -+ -+ ++ ++ ++ ++ ++ ++ + + + + @@ -70,7 +86,7 @@ index 00391af141d9015fe5839534e5e6b22a91ba65d9..ee31d5f5116bc8f19f56fb868eceefea diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs-topbar.inc.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs-topbar.inc.css index 95df75975..a14afcac7 100644 --- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs-topbar.inc.css +++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs-topbar.inc.css @@ -13,9 +13,7 @@ height: var(--zen-toolbar-height); } } - &:not([zen-has-hover='true']):not([has-popup-menu]):not(:focus-within):not(:has( - *:is([panelopen='true'], [open='true']) - )) { + &:not([zen-has-hover='true']):not([has-popup-menu]):not(:focus-within):not(:has(*:is([panelopen='true'], [open='true']))) { transition-delay: 0.2s; height: var(--zen-element-separation); overflow: hidden; diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css index fd372c882..e12549cd2 100644 --- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css +++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css @@ -109,7 +109,7 @@ } & #nav-bar { - margin-bottom: calc(var(--zen-toolbox-padding) - 2px); + margin-bottom: var(--zen-toolbox-padding); & toolbarspring { display: none; @@ -353,6 +353,12 @@ } } +#zen-browser-tabs-wrapper { + min-height: fit-content; + overflow-y: scroll; + height: 100%; +} + #vertical-pinned-tabs-container { padding-inline-end: 0 !important; display: flex !important; @@ -902,7 +908,6 @@ padding-bottom: var(--zen-toolbox-padding); overflow: hidden; gap: 3px; - order: -2; } #zen-essentials-container { diff --git a/src/browser/base/content/zen-styles/zen-workspaces.css b/src/browser/base/content/zen-styles/zen-workspaces.css index 97bb8895e..339110d47 100644 --- a/src/browser/base/content/zen-styles/zen-workspaces.css +++ b/src/browser/base/content/zen-styles/zen-workspaces.css @@ -458,7 +458,6 @@ font-weight: 600; align-items: center; position: relative; - order: -1; /* After essential tabs */ & #zen-current-workspace-indicator-icon { font-size: 14px; diff --git a/src/toolkit/content/widgets/arrowscrollbox-js.patch b/src/toolkit/content/widgets/arrowscrollbox-js.patch index 6063551a4..c9866a1b0 100644 --- a/src/toolkit/content/widgets/arrowscrollbox-js.patch +++ b/src/toolkit/content/widgets/arrowscrollbox-js.patch @@ -1,5 +1,5 @@ diff --git a/toolkit/content/widgets/arrowscrollbox.js b/toolkit/content/widgets/arrowscrollbox.js -index 328c770d275ebbaada8a44438eaf738b1a62d985..1724b7bdba5ed3a82643e07cc3571040ddcf4911 100644 +index 328c770d275ebbaada8a44438eaf738b1a62d985..01256a9b4510b27e180e8b11f1436621ad3e45b5 100644 --- a/toolkit/content/widgets/arrowscrollbox.js +++ b/toolkit/content/widgets/arrowscrollbox.js @@ -639,7 +639,7 @@ @@ -7,7 +7,7 @@ index 328c770d275ebbaada8a44438eaf738b1a62d985..1724b7bdba5ed3a82643e07cc3571040 on_wheel(event) { // Don't consume the event if we can't scroll. - if (!this.overflowing) { -+ if (!this.overflowing || false) { // we handle this on ZenStartup ++ if (!this.overflowing || true) { // we handle this on ZenStartup return; }