From 85c6de8d2a6bacbc317e04b632324ecbc88b2b40 Mon Sep 17 00:00:00 2001 From: brahim <92426196+BrhmDev@users.noreply.github.com> Date: Sat, 14 Sep 2024 19:19:08 +0200 Subject: [PATCH 01/24] Put resize splitters inside tabBrowser --- .../content/zen-styles/zen-browser-ui.css | 25 ++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/src/browser/base/content/zen-styles/zen-browser-ui.css b/src/browser/base/content/zen-styles/zen-browser-ui.css index 0f3525faf..97f4d0247 100644 --- a/src/browser/base/content/zen-styles/zen-browser-ui.css +++ b/src/browser/base/content/zen-styles/zen-browser-ui.css @@ -41,4 +41,27 @@ #tabbrowser-tabbox { display: flex; flex-direction: row; -} \ No newline at end of file +} + +#tabbrowser-tabpanels[zen-split-view] { + + .zen-split-view-splitter[orient='vertical'] { + display: inherit !important; + width: 7px; + cursor: col-resize; + } +} + +.zen-split-view-splitter { + display: none; + visibility: inherit; + -moz-subtree-hidden-only-visually: 0; +} +#tabbrowser-tabpanels[zen-split-view] { + + .zen-split-view-splitter[orient='vertical'] { + display: inherit !important; + width: 7px; + cursor: col-resize; + } +} From bd25205ad58c7165ace527a1df42bba16950ff9c Mon Sep 17 00:00:00 2001 From: brahim <92426196+BrhmDev@users.noreply.github.com> Date: Sun, 15 Sep 2024 14:00:16 +0200 Subject: [PATCH 02/24] Split view splitter css --- .../content/zen-styles/zen-browser-ui.css | 19 ++++++++----------- .../base/content/zen-styles/zen-decks.css | 1 - 2 files changed, 8 insertions(+), 12 deletions(-) diff --git a/src/browser/base/content/zen-styles/zen-browser-ui.css b/src/browser/base/content/zen-styles/zen-browser-ui.css index 97f4d0247..bc71a4a6e 100644 --- a/src/browser/base/content/zen-styles/zen-browser-ui.css +++ b/src/browser/base/content/zen-styles/zen-browser-ui.css @@ -44,24 +44,21 @@ } #tabbrowser-tabpanels[zen-split-view] { - - .zen-split-view-splitter[orient='vertical'] { + .zen-split-view-splitter { display: inherit !important; + } + .zen-split-view-splitter[orient='vertical'] { width: 7px; - cursor: col-resize; + } + .zen-split-view-splitter[orient='horizontal'] { + height: 7px; + cursor: n-resize; } } .zen-split-view-splitter { display: none; visibility: inherit; + cursor: ew-resize; -moz-subtree-hidden-only-visually: 0; } -#tabbrowser-tabpanels[zen-split-view] { - - .zen-split-view-splitter[orient='vertical'] { - display: inherit !important; - width: 7px; - cursor: col-resize; - } -} diff --git a/src/browser/base/content/zen-styles/zen-decks.css b/src/browser/base/content/zen-styles/zen-decks.css index 871c15996..79a6d6227 100644 --- a/src/browser/base/content/zen-styles/zen-decks.css +++ b/src/browser/base/content/zen-styles/zen-decks.css @@ -18,7 +18,6 @@ #tabbrowser-tabpanels[zen-split-view='true'] > [zen-split='true'] { flex: 1; - margin-right: 5px; } #tabbrowser-tabpanels[zen-split-view='true'] > [zen-split-anim='true'] { From 4cf7827df96289ddaa40f2eefe45b2875c941665 Mon Sep 17 00:00:00 2001 From: brahim <92426196+BrhmDev@users.noreply.github.com> Date: Mon, 16 Sep 2024 02:56:46 +0200 Subject: [PATCH 03/24] Move splitter css to zen-decks.css, use css vars for gridSizes --- .../content/zen-styles/zen-browser-ui.css | 20 ---------------- .../base/content/zen-styles/zen-decks.css | 24 +++++++++++++++++-- 2 files changed, 22 insertions(+), 22 deletions(-) diff --git a/src/browser/base/content/zen-styles/zen-browser-ui.css b/src/browser/base/content/zen-styles/zen-browser-ui.css index bc71a4a6e..ff17a92f5 100644 --- a/src/browser/base/content/zen-styles/zen-browser-ui.css +++ b/src/browser/base/content/zen-styles/zen-browser-ui.css @@ -42,23 +42,3 @@ display: flex; flex-direction: row; } - -#tabbrowser-tabpanels[zen-split-view] { - .zen-split-view-splitter { - display: inherit !important; - } - .zen-split-view-splitter[orient='vertical'] { - width: 7px; - } - .zen-split-view-splitter[orient='horizontal'] { - height: 7px; - cursor: n-resize; - } -} - -.zen-split-view-splitter { - display: none; - visibility: inherit; - cursor: ew-resize; - -moz-subtree-hidden-only-visually: 0; -} diff --git a/src/browser/base/content/zen-styles/zen-decks.css b/src/browser/base/content/zen-styles/zen-decks.css index 79a6d6227..9ef63985b 100644 --- a/src/browser/base/content/zen-styles/zen-decks.css +++ b/src/browser/base/content/zen-styles/zen-decks.css @@ -30,8 +30,28 @@ #tabbrowser-tabpanels:has(> [zen-split='true']) { display: grid; - row-gap: var(--zen-element-separation); - column-gap: calc(var(--zen-element-separation) / 2); + row-gap: 0; + column-gap: 0; + --zen-split-grid-gap: calc(var(--zen-element-separation) + 2px); + --zen-split-row-gap: var(--zen-split-grid-gap); + --zen-split-column-gap: var(--zen-split-grid-gap); +} + +#tabbrowser-tabpanels[zen-split-view] { + .zen-split-view-splitter { + display: inherit; + } +} + +.zen-split-view-splitter { + display: none; + visibility: inherit; + cursor: ew-resize; + -moz-subtree-hidden-only-visually: 0; +} + +.zen-split-view-splitter[orient='horizontal'] { + cursor: n-resize; } #zen-split-views-box:not([hidden='true']) { From 37ee485140faccae7300407b3811d0052831ea45 Mon Sep 17 00:00:00 2001 From: brahim <92426196+BrhmDev@users.noreply.github.com> Date: Mon, 16 Sep 2024 04:09:59 +0200 Subject: [PATCH 04/24] Add zen.splitView.min-resize-width pref --- src/browser/app/profile/zen-browser.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js index 860256885..fdbf02435 100644 --- a/src/browser/app/profile/zen-browser.js +++ b/src/browser/app/profile/zen-browser.js @@ -111,6 +111,7 @@ pref('zen.sidebar.close-on-blur', true); // Zen Split View pref('zen.splitView.working', false); +pref('zen.splitView.min-resize-width', 7); // Zen Workspaces pref('zen.workspaces.enabled', true); From d502555428795a3dbabcf2a423fe0cd2acdbfecd Mon Sep 17 00:00:00 2001 From: brahim <92426196+BrhmDev@users.noreply.github.com> Date: Mon, 16 Sep 2024 04:14:41 +0200 Subject: [PATCH 05/24] Remove --zen-split-grid-gap var --- src/browser/base/content/zen-styles/zen-decks.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/browser/base/content/zen-styles/zen-decks.css b/src/browser/base/content/zen-styles/zen-decks.css index 9ef63985b..890797ad9 100644 --- a/src/browser/base/content/zen-styles/zen-decks.css +++ b/src/browser/base/content/zen-styles/zen-decks.css @@ -32,9 +32,8 @@ display: grid; row-gap: 0; column-gap: 0; - --zen-split-grid-gap: calc(var(--zen-element-separation) + 2px); - --zen-split-row-gap: var(--zen-split-grid-gap); - --zen-split-column-gap: var(--zen-split-grid-gap); + --zen-split-row-gap: calc(var(--zen-element-separation) + 2px); + --zen-split-column-gap: calc(var(--zen-element-separation) + 1px); } #tabbrowser-tabpanels[zen-split-view] { From 863d087ae8527a5d8a8d14e8fc136c62680e33c1 Mon Sep 17 00:00:00 2001 From: brahim <92426196+BrhmDev@users.noreply.github.com> Date: Sat, 21 Sep 2024 02:35:02 +0200 Subject: [PATCH 06/24] Add general gZenUIManager.addPopupTracking method to detect open popups on any element. Add popup tracking to navbar container. --- src/browser/base/content/ZenStartup.mjs | 1 + src/browser/base/content/ZenUIManager.mjs | 88 ++++++++++++++--------- 2 files changed, 57 insertions(+), 32 deletions(-) diff --git a/src/browser/base/content/ZenStartup.mjs b/src/browser/base/content/ZenStartup.mjs index b1ad3e4d0..bd4f37b65 100644 --- a/src/browser/base/content/ZenStartup.mjs +++ b/src/browser/base/content/ZenStartup.mjs @@ -41,6 +41,7 @@ gBrowser.tabContainer.arrowScrollbox.smoothScroll = false; ZenWorkspaces.init(); + gZenUIManager.init(); gZenVerticalTabsManager.init(); gZenCompactModeManager.init(); gZenKeyboardShortcuts.init(); diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs index 13b6a34cc..a7b2332f4 100644 --- a/src/browser/base/content/ZenUIManager.mjs +++ b/src/browser/base/content/ZenUIManager.mjs @@ -1,4 +1,13 @@ var gZenUIManager = { + _popupTrackingElements: [], + + init () { + + addEventListener('popupshowing', this.onPopupShowing.bind(this)); + addEventListener('popuphidden', this.onPopupHidden.bind(this)); + addEventListener('click', this.onClick.bind(this)); + }, + openAndChangeToTab(url, options) { if (window.ownerGlobal.parent) { let tab = window.ownerGlobal.parent.gBrowser.addTrustedTab(url, options); @@ -24,6 +33,51 @@ var gZenUIManager = { createValidXULText(text) { return text.replace(/&/g, '&').replace(//g, '>'); }, + + /** + * Adds the 'has-popup-menu' attribute to the element when popup is opened on it. + * @param element element to track + */ + addPopupTracking(element) { + this._popupTrackingElements.push(element); + }, + + onPopupShowing(showEvent) { + for (const el of this._popupTrackingElements) { + if (!el.contains(event.explicitOriginalTarget)) { + continue; + } + removeEventListener('mousemove', this.__removeHasPopupAttribute); + el.setAttribute('has-popup-menu', ''); + + this.__lastElementClicked = null; + this.__currentPopup = showEvent.target; + this.__currentPopupTrackElement = el; + break; + } + }, + + onPopupHidden(hideEvent) { + if (!this.__currentPopup || this.__currentPopup !== hideEvent.target) { + return; + } + const element = this.__currentPopupTrackElement; + /* If item is selected on popup, the :hover effect will not be reapplied until the cursor moves, + to mitigate this: Wait for mousemove when popup item selected + */ + if (this.__lastElementClicked?.tagName === 'menuitem') { + this.__removeHasPopupAttribute = () => element.removeAttribute('has-popup-menu'); + addEventListener('mousemove', this.__removeHasPopupAttribute, {once: true}); + } else { + element.removeAttribute('has-popup-menu'); + } + this.__currentPopup = null; + this.__currentPopupTrackElement = null; + }, + + onClick(event) { + this.__lastElementClicked = event.target; + }, }; var gZenVerticalTabsManager = { @@ -151,7 +205,8 @@ var gZenCompactModeManager = { Services.prefs.addObserver('zen.view.compact', this._updateEvent.bind(this)); Services.prefs.addObserver('zen.view.compact.toolbar-flash-popup.duration', this._updatedSidebarFlashDuration.bind(this)); - addEventListener('popupshowing', this.keepSidebarVisibleOnContextMenu.bind(this)); + gZenUIManager.addPopupTracking(this.sidebar); + gZenUIManager.addPopupTracking(document.getElementById('zen-appcontent-navbar-container')); }, get prefefence() { @@ -210,37 +265,6 @@ var gZenCompactModeManager = { }, this.flashSidebarDuration); }, - keepSidebarVisibleOnContextMenu(event) { - if (!this.sidebar.contains(event.explicitOriginalTarget)) { - return; - } - this.sidebar.setAttribute('has-popup-menu', ''); - /* If the cursor is on the popup when it hides, the :hover effect will not be reapplied to the sidebar until the cursor moves, - to mitigate this: Wait for mousemove when popup item selected - */ - if (!this.__removeHasPopupAttribute) { - this.__removeHasPopupAttribute = () => this.sidebar.removeAttribute('has-popup-menu'); - } - removeEventListener('mousemove', this.__removeHasPopupAttribute); - - const waitForMouseMoveOnPopupSelect = (event) => { - if (event.target.tagName === 'menuitem') { - removeEventListener('click', waitForMouseMoveOnPopupSelect); - removeEventListener('popuphidden', removeHasPopupOnPopupHidden); - addEventListener('mousemove', this.__removeHasPopupAttribute, {once: true}); - } - } - const removeHasPopupOnPopupHidden = (hiddenEvent) => { - if (event.target === hiddenEvent.target) { - removeEventListener('click', waitForMouseMoveOnPopupSelect); - removeEventListener('popuphidden', removeHasPopupOnPopupHidden); - this.__removeHasPopupAttribute(); - } - } - addEventListener('click', waitForMouseMoveOnPopupSelect); - addEventListener('popuphidden', removeHasPopupOnPopupHidden); - }, - toggleToolbar() { let toolbar = document.getElementById('zen-appcontent-navbar-container'); toolbar.toggleAttribute('zen-user-show'); From b06edc0dd9cf4d1a7999c78a6f3e9125934fd748 Mon Sep 17 00:00:00 2001 From: brahim <92426196+BrhmDev@users.noreply.github.com> Date: Sat, 21 Sep 2024 11:50:15 +0200 Subject: [PATCH 07/24] Add removePopupTrackingAttribute method, refactor onPopupHidden. --- src/browser/base/content/ZenUIManager.mjs | 34 ++++++++++------------- 1 file changed, 14 insertions(+), 20 deletions(-) diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs index a7b2332f4..59e8bb0bc 100644 --- a/src/browser/base/content/ZenUIManager.mjs +++ b/src/browser/base/content/ZenUIManager.mjs @@ -3,9 +3,8 @@ var gZenUIManager = { init () { - addEventListener('popupshowing', this.onPopupShowing.bind(this)); - addEventListener('popuphidden', this.onPopupHidden.bind(this)); - addEventListener('click', this.onClick.bind(this)); + document.addEventListener('popupshowing', this.onPopupShowing.bind(this)); + document.addEventListener('popuphidden', this.onPopupHidden.bind(this)); }, openAndChangeToTab(url, options) { @@ -38,19 +37,21 @@ var gZenUIManager = { * Adds the 'has-popup-menu' attribute to the element when popup is opened on it. * @param element element to track */ - addPopupTracking(element) { + addPopupTrackingAttribute(element) { this._popupTrackingElements.push(element); }, + removePopupTrackingAttribute(element) { + this._popupTrackingElements.remove(element); + }, + onPopupShowing(showEvent) { for (const el of this._popupTrackingElements) { if (!el.contains(event.explicitOriginalTarget)) { continue; } - removeEventListener('mousemove', this.__removeHasPopupAttribute); + document.removeEventListener('mousemove', this.__removeHasPopupAttribute); el.setAttribute('has-popup-menu', ''); - - this.__lastElementClicked = null; this.__currentPopup = showEvent.target; this.__currentPopupTrackElement = el; break; @@ -62,22 +63,15 @@ var gZenUIManager = { return; } const element = this.__currentPopupTrackElement; - /* If item is selected on popup, the :hover effect will not be reapplied until the cursor moves, - to mitigate this: Wait for mousemove when popup item selected - */ - if (this.__lastElementClicked?.tagName === 'menuitem') { - this.__removeHasPopupAttribute = () => element.removeAttribute('has-popup-menu'); - addEventListener('mousemove', this.__removeHasPopupAttribute, {once: true}); - } else { + if (document.getElementById('main-window').matches(':hover')) { element.removeAttribute('has-popup-menu'); + } else { + this.__removeHasPopupAttribute = () => element.removeAttribute('has-popup-menu'); + document.addEventListener('mousemove', this.__removeHasPopupAttribute, {once: true}); } this.__currentPopup = null; this.__currentPopupTrackElement = null; }, - - onClick(event) { - this.__lastElementClicked = event.target; - }, }; var gZenVerticalTabsManager = { @@ -205,8 +199,8 @@ var gZenCompactModeManager = { Services.prefs.addObserver('zen.view.compact', this._updateEvent.bind(this)); Services.prefs.addObserver('zen.view.compact.toolbar-flash-popup.duration', this._updatedSidebarFlashDuration.bind(this)); - gZenUIManager.addPopupTracking(this.sidebar); - gZenUIManager.addPopupTracking(document.getElementById('zen-appcontent-navbar-container')); + gZenUIManager.addPopupTrackingAttribute(this.sidebar); + gZenUIManager.addPopupTrackingAttribute(document.getElementById('zen-appcontent-navbar-container')); }, get prefefence() { From aef6c2ac48530d2779a78c2133a1a109fcfa5dce Mon Sep 17 00:00:00 2001 From: mauro-balades Date: Sat, 21 Sep 2024 13:24:06 +0200 Subject: [PATCH 08/24] Refactor ZenCompactModeManager and add ZenCompactMode.mjs --- l10n | 2 +- src/browser/base/content/ZenUIManager.mjs | 73 ------------------- src/browser/base/content/zen-assets.inc.xhtml | 1 + .../base/content/zen-assets.jar.inc.mn | 1 + src/browser/base/content/zen-components | 2 +- 5 files changed, 4 insertions(+), 75 deletions(-) diff --git a/l10n b/l10n index 6934ff4f1..1d1873c8e 160000 --- a/l10n +++ b/l10n @@ -1 +1 @@ -Subproject commit 6934ff4f19c344da8fd89bd72c81517217c448f2 +Subproject commit 1d1873c8e4407ede90829b70c96d196cd385a524 diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs index 59e8bb0bc..65d52ae93 100644 --- a/src/browser/base/content/ZenUIManager.mjs +++ b/src/browser/base/content/ZenUIManager.mjs @@ -191,76 +191,3 @@ var gZenVerticalTabsManager = { Services.prefs.setBoolPref('zen.view.sidebar-expanded.on-hover', false); }, }; - -var gZenCompactModeManager = { - _flashSidebarTimeout: null, - - init() { - Services.prefs.addObserver('zen.view.compact', this._updateEvent.bind(this)); - Services.prefs.addObserver('zen.view.compact.toolbar-flash-popup.duration', this._updatedSidebarFlashDuration.bind(this)); - - gZenUIManager.addPopupTrackingAttribute(this.sidebar); - gZenUIManager.addPopupTrackingAttribute(document.getElementById('zen-appcontent-navbar-container')); - }, - - get prefefence() { - return Services.prefs.getBoolPref('zen.view.compact'); - }, - - set preference(value) { - Services.prefs.setBoolPref('zen.view.compact', value); - }, - - get sidebar() { - if (!this._sidebar) { - this._sidebar= document.getElementById('navigator-toolbox'); - } - return this._sidebar; - }, - - _updateEvent() { - Services.prefs.setBoolPref('zen.view.sidebar-expanded.on-hover', false); - }, - - toggle() { - this.preference = !this.prefefence; - }, - - _updatedSidebarFlashDuration() { - this._flashSidebarDuration = Services.prefs.getIntPref('zen.view.compact.toolbar-flash-popup.duration'); - }, - - toggleSidebar() { - this.sidebar.toggleAttribute('zen-user-show'); - }, - - get flashSidebarDuration() { - if (this._flashSidebarDuration) { - return this._flashSidebarDuration; - } - return Services.prefs.getIntPref('zen.view.compact.toolbar-flash-popup.duration'); - }, - - flashSidebar() { - let tabPanels = document.getElementById('tabbrowser-tabpanels'); - if (this.sidebar.matches(':hover') || tabPanels.matches("[zen-split-view='true']")) { - return; - } - if (this._flashSidebarTimeout) { - clearTimeout(this._flashSidebarTimeout); - } else { - window.requestAnimationFrame(() => this.sidebar.setAttribute('flash-popup', '')); - } - this._flashSidebarTimeout = setTimeout(() => { - window.requestAnimationFrame(() => { - this.sidebar.removeAttribute('flash-popup'); - this._flashSidebarTimeout = null; - }); - }, this.flashSidebarDuration); - }, - - toggleToolbar() { - let toolbar = document.getElementById('zen-appcontent-navbar-container'); - toolbar.toggleAttribute('zen-user-show'); - }, -}; diff --git a/src/browser/base/content/zen-assets.inc.xhtml b/src/browser/base/content/zen-assets.inc.xhtml index addf290d8..2dc586201 100644 --- a/src/browser/base/content/zen-assets.inc.xhtml +++ b/src/browser/base/content/zen-assets.inc.xhtml @@ -33,6 +33,7 @@ window.addEventListener("DOMContentLoaded", async () => { Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenWorkspaces.mjs"); Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenViewSplitter.mjs"); Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenProfileDialogUI.mjs"); + Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenCompactMode.mjs"); Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenKeyboardShortcuts.mjs"); }, { once: true }); diff --git a/src/browser/base/content/zen-assets.jar.inc.mn b/src/browser/base/content/zen-assets.jar.inc.mn index f6d5f10c5..719870b1a 100644 --- a/src/browser/base/content/zen-assets.jar.inc.mn +++ b/src/browser/base/content/zen-assets.jar.inc.mn @@ -3,6 +3,7 @@ content/browser/zenThemeModifier.js (content/zenThemeModifier.js) content/browser/ZenStartup.mjs (content/ZenStartup.mjs) content/browser/ZenUIManager.mjs (content/ZenUIManager.mjs) + content/browser/ZenCompactMode.mjs (content/ZenCompactMode.mjs) content/browser/zen-components/ZenViewSplitter.mjs (content/zen-components/src/ZenViewSplitter.mjs) content/browser/zen-components/ZenThemesCommon.mjs (content/zen-components/src/ZenThemesCommon.mjs) content/browser/zen-components/ZenWorkspaces.mjs (content/zen-components/src/ZenWorkspaces.mjs) diff --git a/src/browser/base/content/zen-components b/src/browser/base/content/zen-components index 3c66cbdc2..9a5770b18 160000 --- a/src/browser/base/content/zen-components +++ b/src/browser/base/content/zen-components @@ -1 +1 @@ -Subproject commit 3c66cbdc24936c4827443d6946baa708173c6d62 +Subproject commit 9a5770b183d53ce4a22ad7dcbfd0e2419a9933dd From e4aa9054404c37910fabf76b374e02a361764a3b Mon Sep 17 00:00:00 2001 From: mauro-balades Date: Sat, 21 Sep 2024 14:31:25 +0200 Subject: [PATCH 09/24] Refactor ZenCompactModeManager and add ZenCompactMode.mjs --- src/browser/app/profile/zen-browser.js | 1 + src/browser/base/content/zen-assets.inc.xhtml | 2 +- src/browser/base/content/zen-assets.jar.inc.mn | 2 +- src/browser/base/content/zen-components | 2 +- src/browser/base/content/zen-styles/zen-compact-mode.css | 4 ---- 5 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js index 25245093a..8925e66ea 100644 --- a/src/browser/app/profile/zen-browser.js +++ b/src/browser/app/profile/zen-browser.js @@ -85,6 +85,7 @@ pref('zen.theme.color-prefs.colorful', false); pref('zen.view.compact.toolbar-flash-popup', true); pref('zen.view.compact.toolbar-flash-popup.duration', 800); +pref('zen.view.compact.toolbar-hide-after-hover.duration', 2000); pref('zen.view.sidebar-height-throttle', 200); // in ms pref('zen.view.sidebar-expanded', false); diff --git a/src/browser/base/content/zen-assets.inc.xhtml b/src/browser/base/content/zen-assets.inc.xhtml index 2dc586201..41068665d 100644 --- a/src/browser/base/content/zen-assets.inc.xhtml +++ b/src/browser/base/content/zen-assets.inc.xhtml @@ -28,12 +28,12 @@ window.addEventListener("DOMContentLoaded", async () => { // Theme importer always needs to be loaded first Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenThemesCommon.mjs"); Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenThemesImporter.mjs"); + Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenCompactMode.mjs"); Services.scriptloader.loadSubScript("chrome://browser/content/ZenUIManager.mjs"); Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenSidebarManager.mjs"); Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenWorkspaces.mjs"); Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenViewSplitter.mjs"); Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenProfileDialogUI.mjs"); - Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenCompactMode.mjs"); Services.scriptloader.loadSubScript("chrome://browser/content/zen-components/ZenKeyboardShortcuts.mjs"); }, { once: true }); diff --git a/src/browser/base/content/zen-assets.jar.inc.mn b/src/browser/base/content/zen-assets.jar.inc.mn index 719870b1a..3e828a6b1 100644 --- a/src/browser/base/content/zen-assets.jar.inc.mn +++ b/src/browser/base/content/zen-assets.jar.inc.mn @@ -3,7 +3,7 @@ content/browser/zenThemeModifier.js (content/zenThemeModifier.js) content/browser/ZenStartup.mjs (content/ZenStartup.mjs) content/browser/ZenUIManager.mjs (content/ZenUIManager.mjs) - content/browser/ZenCompactMode.mjs (content/ZenCompactMode.mjs) + content/browser/zen-components/ZenCompactMode.mjs (content/zen-components/src/ZenCompactMode.mjs) content/browser/zen-components/ZenViewSplitter.mjs (content/zen-components/src/ZenViewSplitter.mjs) content/browser/zen-components/ZenThemesCommon.mjs (content/zen-components/src/ZenThemesCommon.mjs) content/browser/zen-components/ZenWorkspaces.mjs (content/zen-components/src/ZenWorkspaces.mjs) diff --git a/src/browser/base/content/zen-components b/src/browser/base/content/zen-components index 9a5770b18..b84a9418c 160000 --- a/src/browser/base/content/zen-components +++ b/src/browser/base/content/zen-components @@ -1 +1 @@ -Subproject commit 9a5770b183d53ce4a22ad7dcbfd0e2419a9933dd +Subproject commit b84a9418c28396fc9d143a72cdfc70edba4776a6 diff --git a/src/browser/base/content/zen-styles/zen-compact-mode.css b/src/browser/base/content/zen-styles/zen-compact-mode.css index c738fd69b..3d9744116 100644 --- a/src/browser/base/content/zen-styles/zen-compact-mode.css +++ b/src/browser/base/content/zen-styles/zen-compact-mode.css @@ -38,9 +38,6 @@ top: 50%; opacity: 0; - transition-delay: 0.8s; - backface-visibility: hidden; - transform: translate3d(0, calc(-50% - 2px), 0); #browser:has(#navigator-toolbox[zen-right-side='true']) & { @@ -68,7 +65,6 @@ #navigator-toolbox:has(.tabbrowser-tab:active), #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) { opacity: 1; - transition-delay: 0s !important; transform: translate3d(calc(100% - var(--zen-element-separation) - 1px), calc(-50% - 2px), 0); #browser:has(#navigator-toolbox[zen-right-side='true']) & { From 4510bc64d6af786fd1620f326d6004e76dac0e97 Mon Sep 17 00:00:00 2001 From: mauro-balades Date: Sat, 21 Sep 2024 16:11:07 +0200 Subject: [PATCH 10/24] Refactor ZenCompactModeManager and ZenStartup.mjs --- l10n | 2 +- src/browser/app/profile/zen-browser.js | 5 +- src/browser/base/content/ZenStartup.mjs | 9 +- src/browser/base/content/zen-components | 2 +- .../content/zen-styles/zen-compact-mode.css | 162 ++++++++++++------ .../base/content/zen-styles/zen-sidebar.css | 2 + .../zen-styles/zen-tabs/vertical-tabs.css | 4 +- .../base/content/zen-styles/zen-urlbar.css | 3 - .../content/zen-styles/zen-workspaces.css | 2 +- .../components/preferences/zen-settings.js | 42 ++++- .../preferences/zenLooksAndFeel.inc.xhtml | 54 ++++-- .../shared/preferences/zen-preferences.css | 40 ++++- 12 files changed, 242 insertions(+), 85 deletions(-) diff --git a/l10n b/l10n index 1d1873c8e..248aa49b8 160000 --- a/l10n +++ b/l10n @@ -1 +1 @@ -Subproject commit 1d1873c8e4407ede90829b70c96d196cd385a524 +Subproject commit 248aa49b8d2a9b5b074aedae2465382f10ded24b diff --git a/src/browser/app/profile/zen-browser.js b/src/browser/app/profile/zen-browser.js index 8925e66ea..54bedfdef 100644 --- a/src/browser/app/profile/zen-browser.js +++ b/src/browser/app/profile/zen-browser.js @@ -78,14 +78,15 @@ pref('zen.theme.content-element-separation', 8); // In pixels pref('zen.theme.toolbar-themed', true); pref('zen.theme.pill-button', false); pref('zen.view.compact', false); -pref('zen.view.compact.hide-toolbar', false); pref('zen.theme.color-prefs.amoled', false); pref('zen.theme.color-prefs.colorful', false); +pref('zen.view.compact.hide-tabbar', true); +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.compact.toolbar-hide-after-hover.duration', 2000); +pref('zen.view.compact.toolbar-hide-after-hover.duration', 1000); pref('zen.view.sidebar-height-throttle', 200); // in ms pref('zen.view.sidebar-expanded', false); diff --git a/src/browser/base/content/ZenStartup.mjs b/src/browser/base/content/ZenStartup.mjs index bd4f37b65..11014c1e7 100644 --- a/src/browser/base/content/ZenStartup.mjs +++ b/src/browser/base/content/ZenStartup.mjs @@ -128,15 +128,14 @@ splitter.setAttribute('resizeafter', 'none'); toolbox.insertAdjacentElement('afterend', splitter); - this._moveWindowButtons(); this._addSidebarButtons(); this._hideToolbarButtons(); }, _moveWindowButtons() { - const windowControls = document.getElementById('titlebar-buttonbox-container'); - const toolboxIcons = document.getElementById('zen-sidebar-top-buttons'); - if (AppConstants.platform == "macosx") { + const windowControls = document.getElementsByClassName('titlebar-buttonbox-container')[0]; + const toolboxIcons = document.getElementById('zen-sidebar-top-buttons-customization-target'); + if (AppConstants.platform === "macosx") { toolboxIcons.prepend(windowControls); } }, @@ -221,6 +220,8 @@ CustomizableUI.registerToolbarNode( document.getElementById('zen-sidebar-icons-wrapper') ); + + this._moveWindowButtons(); }, 100); }, diff --git a/src/browser/base/content/zen-components b/src/browser/base/content/zen-components index b84a9418c..80a8904bb 160000 --- a/src/browser/base/content/zen-components +++ b/src/browser/base/content/zen-components @@ -1 +1 @@ -Subproject commit b84a9418c28396fc9d143a72cdfc70edba4776a6 +Subproject commit 80a8904bbc1642e98d1b6cd2e5f7bcf3e0788655 diff --git a/src/browser/base/content/zen-styles/zen-compact-mode.css b/src/browser/base/content/zen-styles/zen-compact-mode.css index 3d9744116..6ae7c4e08 100644 --- a/src/browser/base/content/zen-styles/zen-compact-mode.css +++ b/src/browser/base/content/zen-styles/zen-compact-mode.css @@ -7,68 +7,116 @@ } @media (-moz-bool-pref: 'zen.view.compact') { - /* Set the extra paddings */ - #tabbrowser-tabpanels { - #browser:has(#navigator-toolbox[zen-right-side='true']) & { - padding-right: var(--zen-element-separation); + :root:not([customizing]) { + @media (-moz-bool-pref: 'zen.view.compact.hide-tabbar') { + #zen-sidebar-web-panel-wrapper { + margin-left: calc(var(--zen-sidebar-web-panel-spacing) * 2) !important; + } + + #zen-sidebar-top-buttons-customization-target { + padding-inline-start: calc(var(--zen-toolbox-padding) - var(--toolbarbutton-outer-padding)) !important; + } + + /* Set the extra paddings */ + #tabbrowser-tabpanels { + #browser:has(#navigator-toolbox[zen-right-side='true']) & { + padding-right: var(--zen-element-separation); + } + + #browser:has(#navigator-toolbox:not([zen-right-side='true'])) & { + padding-left: var(--zen-element-separation); + } + } + + #zen-sidebar-splitter { + display: none !important; + } + + #navigator-toolbox { + position: absolute; + height: 98%; + z-index: 9; + background: var(--zen-themed-toolbar-bg) !important; + box-shadow: 0 0 2px 2px rgba(0,0,0,.1); + border-top-right-radius: var(--zen-border-radius); + border-bottom-right-radius: var(--zen-border-radius); + border: 1px solid var(--zen-colors-border); + border-left-width: 0; + padding: var(--zen-toolbox-padding) !important; + transition: all 0.1s ease-in-out; + right: calc(100% - var(--zen-element-separation)); + top: 50%; + opacity: 0; + + transform: translate3d(0, -50%, 0); + + #browser:has(#navigator-toolbox[zen-right-side='true']) & { + border-left-width: 1px; + border-right-width: 0; + + left: calc(100% - var(--zen-element-separation)); + right: unset; + + border-top-left-radius: var(--zen-border-radius); + border-bottom-left-radius: var(--zen-border-radius); + + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + } + + #navigator-toolbox:hover, + #navigator-toolbox[zen-has-hover], + #navigator-toolbox:focus-within, + #navigator-toolbox[zen-user-show], + #navigator-toolbox[flash-popup], + #navigator-toolbox[has-popup-menu], + #navigator-toolbox[movingtab], + #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox, + #navigator-toolbox:has(.tabbrowser-tab:active), + #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) { + opacity: 1; + + transform: translate3d(calc(100% - var(--zen-element-separation) - 1px), -50%, 0); + #browser:has(#navigator-toolbox[zen-right-side='true']) & { + transform: translate3d(calc(-100% + var(--zen-element-separation) + 1px), -50%, 0); + } + } } - #browser:has(#navigator-toolbox:not([zen-right-side='true'])) & { - padding-left: var(--zen-element-separation); - } - } + @media (-moz-bool-pref: 'zen.view.compact.hide-toolbar') { + #tabbrowser-tabpanels { + padding-top: var(--zen-element-separation) !important; + } - #zen-sidebar-splitter { - display: none !important; - } + #zen-appcontent-navbar-container { + position: absolute; + top: 0; + transform: translateY(calc(-100% + var(--zen-element-separation))); + left: 0; + z-index: 10; + background: var(--zen-themed-toolbar-bg); + box-shadow: 0 0 2px 2px rgba(0,0,0,.1); + border-bottom-left-radius: var(--zen-border-radius); + border-bottom-right-radius: var(--zen-border-radius); + border: 1px solid var(--zen-colors-border); + border-top-width: 0px; + transition: all 0.1s ease-in-out; + width: 100%; + opacity: 0; + } - #navigator-toolbox { - position: absolute; - height: 98%; - z-index: 9; - background: var(--zen-themed-toolbar-bg) !important; - box-shadow: 0 0 2px 2px rgba(0,0,0,.1); - border-top-right-radius: var(--zen-border-radius); - border-bottom-right-radius: var(--zen-border-radius); - border: 1px solid var(--zen-colors-border); - border-left-width: 0; - padding: var(--zen-toolbox-padding) !important; - transition: all 0.1s ease-in-out; - right: calc(100% - var(--zen-element-separation)); - top: 50%; - opacity: 0; + #zen-appcontent-navbar-container:hover, + #zen-appcontent-navbar-container[zen-has-hover], + #zen-appcontent-navbar-container:focus-within, + #zen-appcontent-navbar-container[zen-user-show], + #zen-appcontent-navbar-container[has-popup-menu], + #zen-appcontent-navbar-container:has(*[open='true']) { + opacity: 1; + border-top-width: 1px; - transform: translate3d(0, calc(-50% - 2px), 0); - - #browser:has(#navigator-toolbox[zen-right-side='true']) & { - border-left-width: 1px; - border-right-width: 0; - - left: calc(100% - var(--zen-element-separation)); - right: unset; - - border-top-left-radius: var(--zen-border-radius); - border-bottom-left-radius: var(--zen-border-radius); - - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - } - - #navigator-toolbox:hover, - #navigator-toolbox:focus-within, - #navigator-toolbox[zen-user-show], - #navigator-toolbox[flash-popup], - #navigator-toolbox[has-popup-menu], - #navigator-toolbox[movingtab], - #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox, - #navigator-toolbox:has(.tabbrowser-tab:active), - #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) { - opacity: 1; - - transform: translate3d(calc(100% - var(--zen-element-separation) - 1px), calc(-50% - 2px), 0); - #browser:has(#navigator-toolbox[zen-right-side='true']) & { - transform: translate3d(calc(-100% + var(--zen-element-separation) + 1px), calc(-50% - 2px), 0); + transform: translateY(-1px); + } } } } diff --git a/src/browser/base/content/zen-styles/zen-sidebar.css b/src/browser/base/content/zen-styles/zen-sidebar.css index 0b8d465cd..d607850ce 100644 --- a/src/browser/base/content/zen-styles/zen-sidebar.css +++ b/src/browser/base/content/zen-styles/zen-sidebar.css @@ -23,6 +23,8 @@ toolbar { height: calc(var(--toolbarbutton-inner-padding) + 10px); width: calc(var(--toolbarbutton-inner-padding) + 10px); padding: 0; + + margin: 0 var(--toolbarbutton-inner-padding) !important; } &:hover { 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 f08d1e99b..187d2e8ae 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 @@ -147,7 +147,7 @@ /* Mark: toolbox as expanded */ #navigator-toolbox:is( - #navigator-toolbox[zen-user-hover='true']:hover, + #navigator-toolbox[zen-user-hover='true'][zen-has-hover], #navigator-toolbox[zen-user-hover='true']:focus-within, #navigator-toolbox[zen-user-hover='true'][movingtab], #navigator-toolbox[zen-user-hover='true'][flash-popup], @@ -269,7 +269,7 @@ /* Mark: toolbox as collapsed */ #navigator-toolbox:not(#navigator-toolbox:is( - #navigator-toolbox[zen-user-hover='true']:hover, + #navigator-toolbox[zen-user-hover='true'][zen-has-hover], #navigator-toolbox[zen-user-hover='true']:focus-within, #navigator-toolbox[zen-user-hover='true'][movingtab], #navigator-toolbox[zen-user-hover='true'][flash-popup], diff --git a/src/browser/base/content/zen-styles/zen-urlbar.css b/src/browser/base/content/zen-styles/zen-urlbar.css index 15973c8f8..d864d3771 100644 --- a/src/browser/base/content/zen-styles/zen-urlbar.css +++ b/src/browser/base/content/zen-styles/zen-urlbar.css @@ -259,9 +259,6 @@ button.popup-notification-dropmarker { align-items: center; } -#browser:not(:has([zen-expanded="true"])) #nav-bar { - padding-left: calc(var(--zen-toolbox-padding) 4px); -} /* Other small tweaks */ #nav-bar-customization-target { diff --git a/src/browser/base/content/zen-styles/zen-workspaces.css b/src/browser/base/content/zen-styles/zen-workspaces.css index 177f1543d..1c0c43c0d 100644 --- a/src/browser/base/content/zen-styles/zen-workspaces.css +++ b/src/browser/base/content/zen-styles/zen-workspaces.css @@ -82,7 +82,7 @@ @media (-moz-bool-pref: 'zen.view.sidebar-expanded') { /** Keep these selectors in sync with the ones in vertical-tabs.css */ #navigator-toolbox:is( - #navigator-toolbox[zen-user-hover='true']:hover, + #navigator-toolbox[zen-user-hover='true'][zen-has-hover], #navigator-toolbox[zen-user-hover='true'][has-popup-menu], #navigator-toolbox[zen-user-hover='true']:focus-within, #mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox, diff --git a/src/browser/components/preferences/zen-settings.js b/src/browser/components/preferences/zen-settings.js index 6d720eea2..c3277861d 100644 --- a/src/browser/components/preferences/zen-settings.js +++ b/src/browser/components/preferences/zen-settings.js @@ -442,6 +442,7 @@ var gZenLooksAndFeel = { } }, 500); this.setDarkThemeListener(); + this.setCompactModeStyle(); }, onPreferColorSchemeChange(event) { @@ -455,9 +456,9 @@ var gZenLooksAndFeel = { }, setDarkThemeListener() { - this.chooser = document.getElementById('zen-dark-theme-styles-form'); - this.radios = [...this.chooser.querySelectorAll('input')]; - for (let radio of this.radios) { + const chooser = document.getElementById('zen-dark-theme-styles-form'); + const radios = [...chooser.querySelectorAll('input')]; + for (let radio of radios) { if (radio.value === 'amoled' && Services.prefs.getBoolPref('zen.theme.color-prefs.amoled')) { radio.checked = true; } else if (radio.value === 'colorful' && Services.prefs.getBoolPref('zen.theme.color-prefs.colorful')) { @@ -489,6 +490,41 @@ var gZenLooksAndFeel = { } }, + setCompactModeStyle() { + const chooser = document.getElementById('zen-compact-mode-styles-form'); + const radios = [...chooser.querySelectorAll('input')]; + for (let radio of radios) { + if (radio.value === 'left' && Services.prefs.getBoolPref('zen.view.compact.hide-tabbar')) { + radio.checked = true; + } else if (radio.value === 'top' && Services.prefs.getBoolPref('zen.view.compact.hide-toolbar')) { + radio.checked = true; + } else if ( + radio.value === 'both' && + !Services.prefs.getBoolPref('zen.view.compact.hide-tabbar') && + !Services.prefs.getBoolPref('zen.view.compact.hide-toolbar') + ) { + radio.checked = true; + } + radio.addEventListener('change', (e) => { + let value = e.target.value; + switch (value) { + case 'left': + Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', true); + Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', false); + break; + case 'top': + Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', false); + Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', true); + break; + default: + Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', true); + Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', true); + break; + } + }); + } + }, + _initializeTabbarExpandForm() { const form = document.getElementById('zen-expand-tabbar-strat'); const radios = form.querySelectorAll('input[type=radio]'); diff --git a/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml b/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml index 7bcd0646f..f1e52860a 100644 --- a/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml +++ b/src/browser/components/preferences/zenLooksAndFeel.inc.xhtml @@ -36,10 +36,10 @@ - + - + @@ -77,14 +77,14 @@ - + - + - + @@ -126,10 +126,10 @@ - + - + @@ -190,10 +190,44 @@ + +
+
+
+
+
+
+
+ +
+ + + + + - diff --git a/src/browser/themes/shared/preferences/zen-preferences.css b/src/browser/themes/shared/preferences/zen-preferences.css index ba7614262..c2d866d4b 100644 --- a/src/browser/themes/shared/preferences/zen-preferences.css +++ b/src/browser/themes/shared/preferences/zen-preferences.css @@ -179,7 +179,8 @@ groupbox h2 { margin-bottom: 15px; } -#zen-dark-theme-styles-form { +#zen-dark-theme-styles-form, +#zen-compact-mode-styles-form { display: flex; justify-content: space-between; gap: var(--space-large); @@ -234,6 +235,43 @@ groupbox h2 { border-color: var(--zen-primary-color); } +.zen-compact-mode-styles-browser-wrapper { + width: 55%; + height: 60px; + display: flex; + border-radius: 10px; + border: 1px solid var(--zen-colors-border); + background: var(--zen-colors-tertiary); + position: relative; + box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1); + + padding: 7px; + + &[left] div { + width: 100%; + background: var(--zen-primary-color); + border-radius: 5px; + height: 18px; + box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1); + } + + &[top] div { + width: 18px; + background: var(--zen-primary-color); + border-radius: 5px; + height: 100%; + box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1); + } + + &[both] div { + width: 100%; + height: 100%; + background: var(--zen-colors-secondary); + border-radius: 5px; + box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1); + } +} + .zenLooksAndFeelColorOption { width: 60px; height: 60px; From a4edeb5b49948cd22dc2397ff8dcd682e97dbc14 Mon Sep 17 00:00:00 2001 From: mauro-balades Date: Sat, 21 Sep 2024 16:58:22 +0200 Subject: [PATCH 11/24] Refactor ZenUIManager to add event listener for gZenCompactModeManager --- src/browser/base/content/ZenUIManager.mjs | 1 + src/browser/base/content/zen-components | 2 +- .../content/zen-styles/zen-browser-ui.css | 2 +- .../content/zen-styles/zen-compact-mode.css | 16 +++++++-------- .../zen-styles/zen-tabs/vertical-tabs.css | 20 +++++++++---------- .../content/zen-styles/zen-workspaces.css | 2 +- 6 files changed, 21 insertions(+), 22 deletions(-) diff --git a/src/browser/base/content/ZenUIManager.mjs b/src/browser/base/content/ZenUIManager.mjs index 65d52ae93..52d455be3 100644 --- a/src/browser/base/content/ZenUIManager.mjs +++ b/src/browser/base/content/ZenUIManager.mjs @@ -81,6 +81,7 @@ var gZenVerticalTabsManager = { Services.prefs.addObserver('zen.tabs.vertical.right-side', updateEvent); Services.prefs.addObserver('zen.view.sidebar-expanded.max-width', updateEvent); Services.prefs.addObserver('zen.view.sidebar-expanded.on-hover', updateEvent); + gZenCompactModeManager.addEventListener(updateEvent); this._updateEvent(); this.initRightSideOrderContextMenu(); }, diff --git a/src/browser/base/content/zen-components b/src/browser/base/content/zen-components index 80a8904bb..e14fbd8e5 160000 --- a/src/browser/base/content/zen-components +++ b/src/browser/base/content/zen-components @@ -1 +1 @@ -Subproject commit 80a8904bbc1642e98d1b6cd2e5f7bcf3e0788655 +Subproject commit e14fbd8e5c069abf1717e674712229c67b80d461 diff --git a/src/browser/base/content/zen-styles/zen-browser-ui.css b/src/browser/base/content/zen-styles/zen-browser-ui.css index c7491e695..5c2b7b4cc 100644 --- a/src/browser/base/content/zen-styles/zen-browser-ui.css +++ b/src/browser/base/content/zen-styles/zen-browser-ui.css @@ -35,7 +35,6 @@ :root:not([inDOMFullscreen='true']) #appcontent { overflow: hidden; - padding: 1px; } :root:not([inDOMFullscreen='true']) #appcontent, @@ -51,4 +50,5 @@ #tabbrowser-tabbox { display: flex; flex-direction: row; + padding: 1px; /* To allow the web view's shadow to be visible */ } \ No newline at end of file diff --git a/src/browser/base/content/zen-styles/zen-compact-mode.css b/src/browser/base/content/zen-styles/zen-compact-mode.css index 6ae7c4e08..2004ee89c 100644 --- a/src/browser/base/content/zen-styles/zen-compact-mode.css +++ b/src/browser/base/content/zen-styles/zen-compact-mode.css @@ -43,8 +43,8 @@ border: 1px solid var(--zen-colors-border); border-left-width: 0; padding: var(--zen-toolbox-padding) !important; - transition: all 0.1s ease-in-out; - right: calc(100% - var(--zen-element-separation)); + transition: all 0.2s ease-in-out; + right: calc(100% - var(--zen-element-separation) + 1px); top: 50%; opacity: 0; @@ -54,7 +54,7 @@ border-left-width: 1px; border-right-width: 0; - left: calc(100% - var(--zen-element-separation)); + left: calc(100% - var(--zen-element-separation) - 1px); right: unset; border-top-left-radius: var(--zen-border-radius); @@ -77,9 +77,9 @@ #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) { opacity: 1; - transform: translate3d(calc(100% - var(--zen-element-separation) - 1px), -50%, 0); + transform: translate3d(calc(100% - var(--zen-element-separation)), -50%, 0); #browser:has(#navigator-toolbox[zen-right-side='true']) & { - transform: translate3d(calc(-100% + var(--zen-element-separation) + 1px), -50%, 0); + transform: translate3d(calc(-100% + var(--zen-element-separation)), -50%, 0); } } } @@ -92,16 +92,16 @@ #zen-appcontent-navbar-container { position: absolute; top: 0; - transform: translateY(calc(-100% + var(--zen-element-separation))); + transform: translateY(calc(-100% + var(--zen-element-separation) + 1px)); left: 0; z-index: 10; background: var(--zen-themed-toolbar-bg); - box-shadow: 0 0 2px 2px rgba(0,0,0,.1); + box-shadow: 0 0 2px 2px rgba(0,0,0,.1) !important; border-bottom-left-radius: var(--zen-border-radius); border-bottom-right-radius: var(--zen-border-radius); border: 1px solid var(--zen-colors-border); border-top-width: 0px; - transition: all 0.1s ease-in-out; + transition: all 0.2s ease-in-out; width: 100%; opacity: 0; } 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 187d2e8ae..b79e0c79b 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 @@ -31,8 +31,6 @@ min-width: var(--zen-toolbox-min-width); padding: var(--zen-toolbox-padding); - /* We do this to fix the padding of webview, the shadow overlaps one pixel */ - padding-left: calc(var(--zen-toolbox-padding) - 1px); padding-top: var(--zen-toolbox-top-align); padding-bottom: var(--zen-element-separation); @@ -152,7 +150,6 @@ #navigator-toolbox[zen-user-hover='true'][movingtab], #navigator-toolbox[zen-user-hover='true'][flash-popup], #navigator-toolbox[zen-user-hover='true'][has-popup-menu], - #mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox, #navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)), #navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true'])) { --zen-toolbox-min-width: fit-content; @@ -161,8 +158,13 @@ min-width: 150px; } - & #zen-workspaces-button .zen-workspace-sidebar-icon[no-icon='true'] { - display: none; + & #zen-workspaces-button { + margin-left: 2px; + margin-right: 2px; + + & .zen-workspace-sidebar-icon[no-icon='true'] { + display: none; + } } & #zen-sidebar-icons-wrapper { @@ -274,7 +276,6 @@ #navigator-toolbox[zen-user-hover='true'][movingtab], #navigator-toolbox[zen-user-hover='true'][flash-popup], #navigator-toolbox[zen-user-hover='true'][has-popup-menu], - #mainPopupSet[zen-user-hover='true']:has(> #appMenu-popup:hover) ~ toolbox, #navigator-toolbox[zen-user-hover='true']:has(*[open='true']:not(tab):not(#zen-sidepanel-button)), #navigator-toolbox[zen-expanded='true']:not([zen-user-hover='true']))) { --zen-toolbox-max-width: 51px; @@ -434,8 +435,6 @@ } #TabsToolbar { - --hovered-verticaltab-width: 20em; - z-index: 1; background-repeat: no-repeat !important; background-position: center center !important; @@ -449,15 +448,14 @@ border-top-right-radius: var(--zen-border-radius); } - #navigator-toolbox:hover, + #navigator-toolbox[zen-has-hover], #navigator-toolbox:focus-within, #navigator-toolbox[movingtab], #navigator-toolbox[flash-popup], #navigator-toolbox[has-popup-menu], - #mainPopupSet:has(> #appMenu-popup:hover) ~ toolbox, #navigator-toolbox:has(.tabbrowser-tab:active), #navigator-toolbox:has(*[open='true']:not(tab):not(#zen-sidepanel-button)) { - --zen-navigation-toolbar-min-width: 50px !important; + --zen-navigation-toolbar-min-width: 55.5px !important; /* + the width of the splitter */ max-width: var(--zen-navigation-toolbar-min-width) !important; min-width: var(--zen-navigation-toolbar-min-width) !important; diff --git a/src/browser/base/content/zen-styles/zen-workspaces.css b/src/browser/base/content/zen-styles/zen-workspaces.css index 1c0c43c0d..9678c3ccc 100644 --- a/src/browser/base/content/zen-styles/zen-workspaces.css +++ b/src/browser/base/content/zen-styles/zen-workspaces.css @@ -8,7 +8,7 @@ &:not([as-button='true']) { border-radius: var(--zen-button-border-radius); background: color-mix(in srgb, var(--zen-colors-border) 50%, transparent 50%); - padding: 6px; + padding: 5px; height: fit-content; gap: 3px; From bc64f3874f09de159d90b2c43bebb458f5b67af5 Mon Sep 17 00:00:00 2001 From: mauro-balades Date: Sat, 21 Sep 2024 17:00:57 +0200 Subject: [PATCH 12/24] Refactor vertical-tabs.css to update padding-inline-start calculation --- src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 b79e0c79b..757dcc80c 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 @@ -547,7 +547,7 @@ align-items: center; #nav-bar:has(&) & { - padding-inline-start: calc(var(--zen-toolbox-padding) + 2px); + padding-inline-start: calc(var(--zen-toolbox-padding) + var(--toolbarbutton-outer-padding)); } #browser:has(#navigator-toolbox[zen-right-side='true']) & { From 2e40d34e019c0320bcded0fdfbd1a1dabd662e36 Mon Sep 17 00:00:00 2001 From: mauro-balades Date: Sat, 21 Sep 2024 17:01:39 +0200 Subject: [PATCH 13/24] Update l10n subproject commit --- l10n | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/l10n b/l10n index 248aa49b8..49d1e57f7 160000 --- a/l10n +++ b/l10n @@ -1 +1 @@ -Subproject commit 248aa49b8d2a9b5b074aedae2465382f10ded24b +Subproject commit 49d1e57f7bcea61b146034a9b0d5647d7b515d55 From 76c749d31a36bcf2b91b0ef7eca91c0431222394 Mon Sep 17 00:00:00 2001 From: mauro-balades Date: Sat, 21 Sep 2024 17:13:54 +0200 Subject: [PATCH 14/24] Refactor ZenUIManager to update sidebar panel positioning --- src/browser/base/content/zen-components | 2 +- src/browser/base/content/zen-sidebar-panel.inc.xhtml | 2 +- .../components/sidebar/browser-sidebar-js.patch | 10 +++++----- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/browser/base/content/zen-components b/src/browser/base/content/zen-components index e14fbd8e5..ae56ffc36 160000 --- a/src/browser/base/content/zen-components +++ b/src/browser/base/content/zen-components @@ -1 +1 @@ -Subproject commit e14fbd8e5c069abf1717e674712229c67b80d461 +Subproject commit ae56ffc36559f044863ba96e3ebc7d90c0d70d69 diff --git a/src/browser/base/content/zen-sidebar-panel.inc.xhtml b/src/browser/base/content/zen-sidebar-panel.inc.xhtml index 4330ef51f..a1edc2aaa 100644 --- a/src/browser/base/content/zen-sidebar-panel.inc.xhtml +++ b/src/browser/base/content/zen-sidebar-panel.inc.xhtml @@ -1,4 +1,4 @@ - +