mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-09-29 14:38:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enable smooth scrolling in tabs and adjust tab height calculations for better UI responsiveness

Browse Source
This commit is contained in:
mr. M
2025-01-26 21:36:09 +01:00
parent 462f354a9d
commit 405b2180cf
7 changed files with 59 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/browser/app/profile/zen-browser.js
View File

@@ -193,7 +193,7 @@ pref('zen.splitView.change-on-hover', false);
pref('zen.splitView.rearrange-hover-size', 24);
// Startup flags
pref('zen.startup.smooth-scroll-in-tabs', false);
pref('zen.startup.smooth-scroll-in-tabs', true);
// Zen Workspaces
pref('zen.workspaces.disabled_for_testing', false);

10
src/browser/base/content/ZenStartup.mjs
View File

@@ -32,10 +32,12 @@
}
// Disable smooth scroll
gBrowser.tabContainer.arrowScrollbox.smoothScroll = Services.prefs.getBoolPref(
'zen.startup.smooth-scroll-in-tabs',
false
);
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
});
}
gZenCompactModeManager.init();
ZenWorkspaces.init();

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

@@ -13,7 +13,7 @@ var gZenUIManager = {
});
new ResizeObserver(gZenCommonActions.throttle(this.updateTabsToolbar.bind(this), this.sidebarHeightThrottle)).observe(
document.getElementById('tabbrowser-tabs')
document.getElementById('TabsToolbar')
);
new ResizeObserver(
@@ -26,20 +26,25 @@ var gZenUIManager = {
updateTabsToolbar() {
// Set tabs max-height to the "toolbar-items" height
const toolbarItems = document.getElementById('tabbrowser-tabs');
const tabs = document.getElementById('tabbrowser-arrowscrollbox');
tabs.style.maxHeight = '0px'; // reset to 0
const toolbarRect = toolbarItems.getBoundingClientRect();
let height = toolbarRect.height;
// -5 for the controls padding
let totalHeight = toolbarRect.height - this.contentElementSeparation * 2 - 5;
// remove the height from other elements that aren't hidden
const otherElements = document.querySelectorAll('#tabbrowser-tabs > *:not([hidden="true"])');
for (let tab of otherElements) {
if (tabs === tab) continue;
totalHeight -= tab.getBoundingClientRect().height;
const tabs = document.getElementById('tabbrowser-tabs');
// Remove tabs so we can accurately calculate the height
// without them affecting the height of the toolbar
for (const tab of gBrowser.tabs) {
if (tab.hasAttribute('zen-essential')) {
continue;
}
tab.style.maxHeight = '0px';
}
tabs.style.maxHeight = totalHeight + 'px';
tabs.style.removeProperty('max-height');
const toolbarRect = tabs.getBoundingClientRect();
let height = toolbarRect.height;
for (const tab of gBrowser.tabs) {
if (tab.hasAttribute('zen-essential')) {
continue;
}
tab.style.maxHeight = height + 'px';
}
tabs.style.maxHeight = height + 'px';
//console.info('ZenThemeModifier: set tabs max-height to', totalHeight + 'px');
},

27
src/browser/base/content/navigator-toolbox-inc-xhtml.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/base/content/navigator-toolbox.inc.xhtml b/browser/base/content/navigator-toolbox.inc.xhtml
index 00391af141d9015fe5839534e5e6b22a91ba65d9..17d8ac96986e698b09033b870c24fc2f61c47a05 100644
index 00391af141d9015fe5839534e5e6b22a91ba65d9..ee31d5f5116bc8f19f56fb868eceefea558659d6 100644
--- a/browser/base/content/navigator-toolbox.inc.xhtml
+++ b/browser/base/content/navigator-toolbox.inc.xhtml
@@ -2,7 +2,7 @@
@@ -29,23 +29,24 @@ index 00391af141d9015fe5839534e5e6b22a91ba65d9..17d8ac96986e698b09033b870c24fc2f
<toolbartabstop/>
<hbox id="TabsToolbar-customization-target" flex="1">
<toolbarbutton id="firefox-view-button"
@@ -40,6 +40,7 @@
@@ -40,9 +40,14 @@
data-l10n-id="toolbar-button-firefox-view-2"
role="button"
aria-pressed="false"
+ hidden="true"
cui-areatype="toolbar"
removable="true"/>
@@ -55,9 +56,14 @@
# significantly, there is an optimization in
# DisplayPortUtils::MaybeCreateDisplayPortInFirstScrollFrameEncountered based
-
+ <html:div id="zen-essentials-container" skipintoolbarset="true"></html:div>
+ <hbox id="zen-current-workspace-indicator" skipintoolbarset="true">
+ <hbox id="zen-current-workspace-indicator-icon"></hbox>
+ <hbox id="zen-current-workspace-indicator-name"></hbox>
+ </hbox>
<tabs id="tabbrowser-tabs"
is="tabbrowser-tabs"
aria-multiselectable="true"
@@ -57,7 +62,7 @@
# the current structure that we may want to revisit.
+ <html:div id="zen-essentials-container"></html:div>
+ <hbox id="zen-current-workspace-indicator">
+ <hbox id="zen-current-workspace-indicator-icon"></hbox>
+ <hbox id="zen-current-workspace-indicator-name"></hbox>
+ </hbox>
<html:div id="vertical-pinned-tabs-container" tabindex="-1"></html:div>
<html:div id="vertical-pinned-tabs-container-separator"></html:div>
- <arrowscrollbox id="tabbrowser-arrowscrollbox" orient="horizontal" flex="1" clicktoscroll="" scrolledtostart="" scrolledtoend="">
@@ -53,7 +54,7 @@ index 00391af141d9015fe5839534e5e6b22a91ba65d9..17d8ac96986e698b09033b870c24fc2f
<tab is="tabbrowser-tab" class="tabbrowser-tab" selected="true" visuallyselected="" fadein=""/>
<hbox id="tabbrowser-arrowscrollbox-periphery">
<toolbartabstop/>
@@ -100,11 +106,12 @@
@@ -100,11 +105,12 @@
#include private-browsing-indicator.inc.xhtml
<toolbarbutton id="content-analysis-indicator"
class="toolbarbutton-1 content-analysis-indicator-icon"/>
@@ -69,7 +70,7 @@ index 00391af141d9015fe5839534e5e6b22a91ba65d9..17d8ac96986e698b09033b870c24fc2f
<toolbar id="nav-bar"
class="browser-toolbar chromeclass-location"
data-l10n-id="navbar-accessible"
@@ -487,10 +494,12 @@
@@ -487,10 +493,12 @@
consumeanchor="PanelUI-button"
data-l10n-id="appmenu-menu-button-closed2"/>
</toolbaritem>

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

@@ -55,6 +55,10 @@
}
}
#tabbrowser-arrowscrollbox {
min-height: fit-content !important;
}
#vertical-pinned-tabs-container, #tabbrowser-arrowscrollbox {
.tabbrowser-tab[fadein='true'][zen-initial-fadein='true'] {
animation: zen-new-tab-appear-vertical 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
@@ -105,7 +109,7 @@
}
& #nav-bar {
margin-bottom: 6px;
margin-bottom: calc(var(--zen-toolbox-padding) - 2px);
& toolbarspring {
display: none;
@@ -125,7 +129,7 @@
background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
margin: 8px auto;
border: none;
height: 1px;
min-height: 1px;
width: 98%;
#vertical-pinned-tabs-container:not(:has(tab:not([hidden]))) + & {
@@ -134,8 +138,8 @@
}
#navigator-toolbox {
--border-radius-medium: 12px;
--tab-border-radius: 8px;
--border-radius-medium: 10px;
--tab-border-radius: 6px;
--zen-toolbox-min-width: 1px;
--tab-hover-background-color: color-mix(in srgb, var(--toolbarbutton-hover-background) 50%, transparent 50%);
@@ -228,6 +232,7 @@
margin-inline-start: 0 !important;
padding-inline-start: 0 !important;
overflow-x: hidden;
overflow-y: scroll;
--tab-inner-inline-margin: 0;
@@ -352,7 +357,8 @@
padding-inline-end: 0 !important;
display: flex !important;
flex-direction: column;
max-height: calc(100vh - 12 * (var(--tab-min-height) + 2 * var(--tab-block-margin))) !important;
min-height: fit-content !important;
overflow: visible;
& .tabbrowser-tab:not(:hover) .tab-background:not([selected]):not([multiselected]) {
background: transparent !important;
@@ -460,7 +466,7 @@
bottom: calc(-0.5 * var(--zen-toolbox-padding));
}
& > *:not(tabs):not(#search-container):not(#zen-workspaces-button),
& > :is(toolbaritem, toolbarbutton):not(#search-container):not(#zen-workspaces-button),
& #tabbrowser-arrowscrollbox-periphery > toolbarbutton {
width: 100% !important;
border-radius: var(--border-radius-medium) !important;
@@ -895,6 +901,7 @@
padding-bottom: var(--zen-toolbox-padding);
overflow: hidden;
gap: 3px;
order: -2;
}
#zen-essentials-container {
@@ -913,7 +920,10 @@
--toolbarbutton-inner-padding: 0;
max-width: unset;
width: 100% !important;
border-radius: var(--border-radius-medium);
& .tab-background {
border-radius: var(--border-radius-medium) !important;
}
--tab-selected-bgcolor: light-dark(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.2));

3
src/browser/base/content/zen-styles/zen-urlbar.css
View File

@@ -32,10 +32,9 @@
#urlbar-background {
background: var(--zen-toolbar-element-bg) !important;
border-radius: var(--border-radius-medium);
outline: none !important;
}
#urlbar-background {
border: none !important;
margin: 1px;

1
src/browser/base/content/zen-styles/zen-workspaces.css
View File

@@ -458,6 +458,7 @@
font-weight: 600;
align-items: center;
position: relative;
order: -1; /* After essential tabs */
& #zen-current-workspace-indicator-icon {
font-size: 14px;