diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js
index ff98c9b93..0607a1d6e 100644
--- a/src/browser/app/profile/zen-browser.js
+++ b/src/browser/app/profile/zen-browser.js
@@ -80,6 +80,7 @@ pref('zen.view.compact.hide-toolbar', false);
pref('zen.view.compact.toolbar-flash-popup', true);
pref('zen.view.compact.toolbar-flash-popup.duration', 800);
+pref('zen.view.sidebar-height-throttle', 500); // in ms
pref('zen.view.sidebar-expanded', false);
pref('zen.view.sidebar-expanded.on-hover', false);
pref('zen.view.sidebar-expanded.show-button', true);
diff --git a/src/browser/base/content/ZenStartup.mjs b/src/browser/base/content/ZenStartup.mjs
index 4abab1ce3..9c8d86d6f 100644
--- a/src/browser/base/content/ZenStartup.mjs
+++ b/src/browser/base/content/ZenStartup.mjs
@@ -1,129 +1,147 @@
-var ZenStartup = {
- init() {
- this._changeSidebarLocation();
- this._zenInitBrowserLayout();
- window.SessionStore.promiseInitialized.then(async () => {
- this._focusSearchBar();
- });
- },
- _zenInitBrowserLayout() {
- if (this.__hasInitBrowserLayout) return;
- this.__hasInitBrowserLayout = true;
- this.openWatermark();
- console.info('ZenThemeModifier: init browser layout');
- const kNavbarItems = ['nav-bar', 'PersonalToolbar'];
- const kNewContainerId = 'zen-appcontent-navbar-container';
- let newContainer = document.getElementById(kNewContainerId);
- for (let id of kNavbarItems) {
- const node = document.getElementById(id);
- console.assert(node, 'Could not find node with id: ' + id);
- if (!node) continue;
- newContainer.appendChild(node);
- }
+{
+ const lazy = {};
+ XPCOMUtils.defineLazyPreferenceGetter(
+ lazy,
+ "sidebarHeightThrottle",
+ "zen.view.sidebar-height-throttle",
+ 500
+ );
+ var ZenStartup = {
+ init() {
+ this._changeSidebarLocation();
+ this._zenInitBrowserLayout();
+ window.SessionStore.promiseInitialized.then(async () => {
+ this._focusSearchBar();
+ });
+ },
- // Fix notification deck
- document
- .getElementById('zen-appcontent-navbar-container')
- .appendChild(document.getElementById('tab-notification-deck-template'));
-
- // Disable smooth scroll
- gBrowser.tabContainer.arrowScrollbox.smoothScroll = false;
-
- gZenVerticalTabsManager.init();
- gZenCompactModeManager.init();
- gZenKeyboardShortcuts.init();
-
- function throttle(f, delay) {
- let timer = 0;
- return function (...args) {
- clearTimeout(timer);
- timer = setTimeout(() => f.apply(this, args), delay);
- };
- }
-
- new ResizeObserver(throttle(this._updateTabsToolbar.bind(this), 1000)).observe(document.getElementById('tabbrowser-tabs'));
-
- this.closeWatermark();
- },
-
- _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();
- // -5 for the controls padding
- let totalHeight = toolbarRect.height - 15;
- // 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;
- }
- tabs.style.maxHeight = totalHeight + 'px';
- console.info('ZenThemeModifier: set tabs max-height to', totalHeight + 'px');
- },
-
- openWatermark() {
- if (!Services.prefs.getBoolPref('zen.watermark.enabled', false)) {
- return;
- }
- const watermark = window.MozXULElement.parseXULToFragment(`
-
-
-
- `);
- document.body.appendChild(watermark);
- },
-
- closeWatermark() {
- const watermark = document.getElementById('zen-watermark');
- if (watermark) {
- watermark.setAttribute('hidden', 'true');
- }
- },
-
- _changeSidebarLocation() {
- const legacyLocation = Services.prefs.getBoolPref('zen.themes.tabs.legacy-location', false);
- const kElementsToAppend = ['sidebar-splitter', 'sidebar-box'];
- if (legacyLocation) {
- kElementsToAppend.push('navigator-toolbox');
- window.document.documentElement.setAttribute('zen-sidebar-legacy', 'true');
- }
- const wrapper = document.getElementById('zen-tabbox-wrapper');
- const appWrapepr = document.getElementById('zen-sidebar-box-container');
- for (let id of kElementsToAppend) {
- const elem = document.getElementById(id);
- if (elem) {
- wrapper.prepend(elem);
+ _zenInitBrowserLayout() {
+ if (this.__hasInitBrowserLayout) return;
+ this.__hasInitBrowserLayout = true;
+ this.openWatermark();
+ console.info('ZenThemeModifier: init browser layout');
+ const kNavbarItems = ['nav-bar', 'PersonalToolbar'];
+ const kNewContainerId = 'zen-appcontent-navbar-container';
+ let newContainer = document.getElementById(kNewContainerId);
+ for (let id of kNavbarItems) {
+ const node = document.getElementById(id);
+ console.assert(node, 'Could not find node with id: ' + id);
+ if (!node) continue;
+ newContainer.appendChild(node);
}
- }
- appWrapepr.setAttribute('hidden', 'true');
- const browser = document.getElementById('browser');
- const toolbox = document.getElementById('navigator-toolbox');
- if (!legacyLocation) {
- browser.prepend(toolbox);
- }
+ // Fix notification deck
+ document
+ .getElementById('zen-appcontent-navbar-container')
+ .appendChild(document.getElementById('tab-notification-deck-template'));
- // remove all styles except for the width, since we are xulstoring the complet style list
- const width = toolbox.style.width;
- toolbox.removeAttribute('style');
- toolbox.style.width = width;
+ // Disable smooth scroll
+ gBrowser.tabContainer.arrowScrollbox.smoothScroll = false;
- // Set a splitter to navigator-toolbox
- const splitter = document.createXULElement('splitter');
- splitter.setAttribute('id', 'zen-sidebar-splitter');
- splitter.setAttribute('orient', 'horizontal');
- splitter.setAttribute('resizebefore', 'sibling');
- splitter.setAttribute('resizeafter', 'none');
- toolbox.insertAdjacentElement('afterend', splitter);
- },
+ gZenVerticalTabsManager.init();
+ gZenCompactModeManager.init();
+ gZenKeyboardShortcuts.init();
- _focusSearchBar() {
- gURLBar.focus();
- },
-};
+ function throttle(f, delay) {
+ let timer = 0;
+ return function (...args) {
+ clearTimeout(timer);
+ timer = setTimeout(() => f.apply(this, args), delay);
+ };
+ }
-ZenStartup.init();
+ new ResizeObserver(throttle(this._updateTabsToolbar.bind(this), lazy.sidebarHeightThrottle)).observe(document.getElementById('tabbrowser-tabs'));
+
+ this.closeWatermark();
+ },
+
+ _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();
+ // -5 for the controls padding
+ let totalHeight = toolbarRect.height - 15;
+ // 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;
+ }
+ tabs.style.maxHeight = totalHeight + 'px';
+ console.info('ZenThemeModifier: set tabs max-height to', totalHeight + 'px');
+
+ const allTabs = document.getElementById('alltabs-button');
+ allTabs.removeAttribute('hidden');
+ allTabs.removeAttribute('badged');
+ allTabs.setAttribute('class', 'toolbarbutton-1 zen-sidebar-action-button');
+ document.getElementById('zen-sidebar-icons-wrapper').prepend(
+ allTabs
+ );
+ },
+
+ openWatermark() {
+ if (!Services.prefs.getBoolPref('zen.watermark.enabled', false)) {
+ return;
+ }
+ const watermark = window.MozXULElement.parseXULToFragment(`
+
+
+
+ `);
+ document.body.appendChild(watermark);
+ },
+
+ closeWatermark() {
+ const watermark = document.getElementById('zen-watermark');
+ if (watermark) {
+ watermark.setAttribute('hidden', 'true');
+ }
+ },
+
+ _changeSidebarLocation() {
+ const legacyLocation = Services.prefs.getBoolPref('zen.themes.tabs.legacy-location', false);
+ const kElementsToAppend = ['sidebar-splitter', 'sidebar-box'];
+ if (legacyLocation) {
+ kElementsToAppend.push('navigator-toolbox');
+ window.document.documentElement.setAttribute('zen-sidebar-legacy', 'true');
+ }
+ const wrapper = document.getElementById('zen-tabbox-wrapper');
+ const appWrapepr = document.getElementById('zen-sidebar-box-container');
+ for (let id of kElementsToAppend) {
+ const elem = document.getElementById(id);
+ if (elem) {
+ wrapper.prepend(elem);
+ }
+ }
+ appWrapepr.setAttribute('hidden', 'true');
+
+ const browser = document.getElementById('browser');
+ const toolbox = document.getElementById('navigator-toolbox');
+ if (!legacyLocation) {
+ browser.prepend(toolbox);
+ }
+
+ // remove all styles except for the width, since we are xulstoring the complet style list
+ const width = toolbox.style.width;
+ toolbox.removeAttribute('style');
+ toolbox.style.width = width;
+
+ // Set a splitter to navigator-toolbox
+ const splitter = document.createXULElement('splitter');
+ splitter.setAttribute('id', 'zen-sidebar-splitter');
+ splitter.setAttribute('orient', 'horizontal');
+ splitter.setAttribute('resizebefore', 'sibling');
+ splitter.setAttribute('resizeafter', 'none');
+ toolbox.insertAdjacentElement('afterend', splitter);
+ },
+
+ _focusSearchBar() {
+ gURLBar.focus();
+ },
+ };
+
+ ZenStartup.init();
+}
diff --git a/src/browser/base/content/zen-components b/src/browser/base/content/zen-components
index c9c5c94e8..89f28b307 160000
--- a/src/browser/base/content/zen-components
+++ b/src/browser/base/content/zen-components
@@ -1 +1 @@
-Subproject commit c9c5c94e8d4d9f306bfe73fc79b153d9b979533e
+Subproject commit 89f28b307d8cd45ee5416a8dafb76f298bd6c212
diff --git a/src/browser/base/content/zen-styles/zen-sidebar.css b/src/browser/base/content/zen-styles/zen-sidebar.css
index 64320e84e..423c9be7b 100644
--- a/src/browser/base/content/zen-styles/zen-sidebar.css
+++ b/src/browser/base/content/zen-styles/zen-sidebar.css
@@ -194,10 +194,15 @@
min-height: fit-content;
--zen-sidebar-action-content-separator: calc(5px + var(--zen-tabbrowser-padding));
padding-top: var(--zen-sidebar-action-content-separator);
- margin-top: var(--zen-sidebar-action-content-separator);
color-scheme: inherit !important;
}
+#alltabs-button {
+ &:hover .toolbarbutton-badge-stack {
+ background: transparent !important;
+ }
+}
+
#zen-sidebar-icons-wrapper::before {
content: '';
position: absolute;
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 1fef1f934..4ffd7c02f 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
@@ -30,30 +30,10 @@
--zen-sidebar-action-button-width: 30px;
}
- & #vertical-tabs-newtab-button {
- background: color-mix(in srgb, var(--button-hover-bgcolor) 40%, transparent 60%);
- }
-
- &::before {
- width: 70%;
- height: 1px;
- background: var(--zen-colors-border);
- content: '';
- position: absolute;
- top: -1px;
- left: 50%;
- display: none;
- transform: translateX(-50%);
- }
-
&[showborder] {
margin-top: var(--space-small);
border-top: 0px solid transparent !important;
padding-top: var(--space-small) !important;
-
- &::before {
- display: block;
- }
}
}
@@ -256,8 +236,8 @@
}
#nav-bar > *:not(.titlebar-buttonbox-container) {
- padding-top: 5px;
- padding-bottom: 5px;
+ padding-top: 3px;
+ padding-bottom: 3px;
}
#TabsToolbar-customization-target {
@@ -335,17 +315,16 @@
#newtab-button-container {
margin: calc(var(--zen-tabbrowser-padding) - 2px);
margin-bottom: 0;
- margin-bottom: var(--space-small);
- &[showborder] {
- margin-top: 0;
- padding-top: calc(var(--space-small) / 2) !important;
- }
-
- &::before {
- width: 100%;
- top: calc(100% + var(--space-small) / 2);
- display: block;
+ & #vertical-tabs-newtab-button {
+ padding: 0 !important;
+
+ & label {
+ display: flex;
+ text-align: start;
+ align-items: center;
+ padding: 0;
+ }
}
}
@@ -570,7 +549,7 @@
--toolbarbutton-active-background: transparent;
}
- & label {
+ & label:not(.toolbarbutton-badge) {
--toolbarbutton-hover-background: transparent;
display: block !important;
text-align: start;
diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css
index 7f473c9c1..78353050a 100644
--- a/src/browser/base/content/zen-styles/zen-urlbar.css
+++ b/src/browser/base/content/zen-styles/zen-urlbar.css
@@ -270,3 +270,17 @@ button.popup-notification-dropmarker {
}
}
}
+
+/* Other small tweaks */
+#nav-bar-customization-target {
+ /* Don't grow if potentially-user-sized elements (like the searchbar or the
+ * bookmarks toolbar item list) are too wide. This forces them to flex to the
+ * available space as much as possible, see bug 1795260. */
+ min-width: 0;
+
+ /* Add space to beginning of toolbar and make that space click the first */
+ > :is(toolbarbutton, toolbaritem):first-child,
+ > toolbarpaletteitem:first-child > :is(toolbarbutton, toolbaritem) {
+ padding-inline-start: 0;
+ }
+}
diff --git a/src/browser/base/content/zen-styles/zen-workspaces.css b/src/browser/base/content/zen-styles/zen-workspaces.css
index 3fea2a60c..6f66bb81a 100644
--- a/src/browser/base/content/zen-styles/zen-workspaces.css
+++ b/src/browser/base/content/zen-styles/zen-workspaces.css
@@ -1,14 +1,14 @@
#zen-workspaces-button {
--zen-workspaces-button-vmargin: 0.4rem;
border: 1px solid var(--zen-colors-border);
- border-radius: 50px;
+ border-radius: var(--zen-button-border-radius);
width: calc(var(--zen-sidebar-action-button-width) - 5px) !important;
- height: calc(var(--zen-sidebar-action-button-width) - 10px) !important;
- margin-top: var(--zen-workspaces-button-vmargin) !important;
+ height: calc(var(--zen-sidebar-action-button-width) - 5px) !important;
margin-bottom: var(--zen-workspaces-button-vmargin) !important;
justify-content: center;
align-items: center;
display: flex;
+ box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
:root[zen-sidebar-legacy='true'] & {
margin-top: 0 !important;
@@ -33,6 +33,13 @@
#navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)),
:not([zen-user-hover='true'])
) {
+
+ & #zen-workspaces-button {
+ width: calc(var(--zen-sidebar-action-button-width) - 1px) !important;
+ margin-top: .2rem;
+ height: calc(var(--zen-sidebar-action-button-width) - 10px) !important;
+ }
+
& #zen-workspaces-button .zen-workspace-sidebar-name {
display: block;
}