From b5e52ed087503155aed333497d30f57853e29f0a Mon Sep 17 00:00:00 2001 From: "mr. m" <91018726+mr-cheffy@users.noreply.github.com> Date: Wed, 15 Oct 2025 17:47:34 +0200 Subject: [PATCH] fix: Fixed right side tabs being out of order, p=#10826, c=common, compact-mode * fix: Fixed right side tabs being out of order, b=no-bug, c=common, compact-mode * chore: Fix spelling mistake, b=no-bug, c=compact-mode * chore: Fix lint, b=no-bug, c=common, compact-mode --------- Signed-off-by: mr. m <91018726+mr-cheffy@users.noreply.github.com> --- .../themes/shared/browser-shared-css.patch | 18 ++++++++- src/zen/common/ZenUIManager.mjs | 40 +++++++++++++------ .../common/styles/zen-browser-container.css | 2 +- src/zen/compact-mode/ZenCompactMode.mjs | 23 +++++++---- src/zen/compact-mode/toolbar.inc.css | 16 +++++++- 5 files changed, 76 insertions(+), 23 deletions(-) diff --git a/src/browser/themes/shared/browser-shared-css.patch b/src/browser/themes/shared/browser-shared-css.patch index 009a642c9..780f07a9b 100644 --- a/src/browser/themes/shared/browser-shared-css.patch +++ b/src/browser/themes/shared/browser-shared-css.patch @@ -1,5 +1,5 @@ diff --git a/browser/themes/shared/browser-shared.css b/browser/themes/shared/browser-shared.css -index c77a0e6388c4061d9e6ee5f396a3e3af8867e4fe..d37e49538cd07716da5ebed823622fccde5dd69a 100644 +index c77a0e6388c4061d9e6ee5f396a3e3af8867e4fe..3da164d2414e8726675ac0184310c9363365387f 100644 --- a/browser/themes/shared/browser-shared.css +++ b/browser/themes/shared/browser-shared.css @@ -102,7 +102,7 @@ body { @@ -20,3 +20,19 @@ index c77a0e6388c4061d9e6ee5f396a3e3af8867e4fe..d37e49538cd07716da5ebed823622fcc } /* Themes define a set of toolbox foreground and background colors which we +@@ -281,13 +279,13 @@ body { + + @media (-moz-platform: macos) and (not (-moz-mac-rtl)) { + &:-moz-locale-dir(ltr) { +- order: -1; ++ order: -2; + } + } + + @media (-moz-mac-rtl) { + &:-moz-locale-dir(rtl) { +- order: -1; ++ order: -2; + } + } + diff --git a/src/zen/common/ZenUIManager.mjs b/src/zen/common/ZenUIManager.mjs index aa03fef2a..a1726711a 100644 --- a/src/zen/common/ZenUIManager.mjs +++ b/src/zen/common/ZenUIManager.mjs @@ -77,16 +77,20 @@ var gZenUIManager = { }, _initBookmarkCollapseListener() { - document - .getElementById('PersonalToolbar') - .addEventListener('toolbarvisibilitychange', (event) => { - const visible = event.detail.visible; - if (visible) { - document.documentElement.setAttribute('zen-has-bookmarks', 'true'); - } else { - document.documentElement.removeAttribute('zen-has-bookmarks'); - } - }); + const toolbar = document.getElementById('PersonalToolbar'); + if (toolbar.getAttribute('collapsed') !== 'true') { + // Set it initially if bookmarks toolbar is visible, customizable UI + // is ran before this function. + document.documentElement.setAttribute('zen-has-bookmarks', 'true'); + } + toolbar.addEventListener('toolbarvisibilitychange', (event) => { + const visible = event.detail.visible; + if (visible) { + document.documentElement.setAttribute('zen-has-bookmarks', 'true'); + } else { + document.documentElement.removeAttribute('zen-has-bookmarks'); + } + }); }, _initOmnibox() { @@ -1081,7 +1085,15 @@ var gZenVerticalTabsManager = { topButtons.prepend(windowButtons); } - if ((!isSingleToolbar && isCompactMode) || !isSidebarExpanded) { + const canHideTabBarPref = Services.prefs.getBoolPref('zen.view.compact.hide-tabbar'); + const captionsShouldStayOnSidebar = + !canHideTabBarPref && + ((!this.isWindowsStyledButtons && !isRightSide) || + (this.isWindowsStyledButtons && isRightSide)); + if ( + (!isSingleToolbar && isCompactMode && !captionsShouldStayOnSidebar) || + !isSidebarExpanded + ) { navBar.prepend(topButtons); } @@ -1112,7 +1124,11 @@ var gZenVerticalTabsManager = { } } } else if (!isSingleToolbar && isCompactMode) { - navBar.appendChild(windowButtons); + if (captionsShouldStayOnSidebar) { + topButtons.prepend(windowButtons); + } else { + navBar.appendChild(windowButtons); + } } else if (isSingleToolbar && isCompactMode) { if (!isRightSide && !this.isWindowsStyledButtons) { topButtons.prepend(windowButtons); diff --git a/src/zen/common/styles/zen-browser-container.css b/src/zen/common/styles/zen-browser-container.css index 77a0172c8..de25bf38e 100644 --- a/src/zen/common/styles/zen-browser-container.css +++ b/src/zen/common/styles/zen-browser-container.css @@ -43,7 +43,7 @@ } } - @media not ((-moz-pref('zen.view.experimental-no-window-controls') or not -moz-pref('zen.view.hide-window-controls') ) and -moz-pref('zen.view.use-single-toolbar')) { + @media not ((-moz-pref('zen.view.experimental-no-window-controls') or (not -moz-pref('zen.view.hide-window-controls'))) and -moz-pref('zen.view.use-single-toolbar')) { .browserSidebarContainer:is(.deck-selected, [zen-split='true']) .browserContainer { transition: margin 0.15s ease; diff --git a/src/zen/compact-mode/ZenCompactMode.mjs b/src/zen/compact-mode/ZenCompactMode.mjs index f6b02d86c..8dfd8365d 100644 --- a/src/zen/compact-mode/ZenCompactMode.mjs +++ b/src/zen/compact-mode/ZenCompactMode.mjs @@ -30,7 +30,7 @@ ChromeUtils.defineLazyGetter(lazyCompactMode, 'mainAppWrapper', () => var gZenCompactModeManager = { _flashTimeouts: {}, - _evenListeners: [], + _eventListeners: [], _removeHoverFrames: {}, // Delay to avoid flickering when hovering over the sidebar @@ -216,26 +216,33 @@ var gZenCompactModeManager = { hideSidebar() { Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', true); Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', false); + this.callAllEventListeners(); }, hideToolbar() { Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', true); Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', false); + this.callAllEventListeners(); }, hideBoth() { Services.prefs.setBoolPref('zen.view.compact.hide-tabbar', true); Services.prefs.setBoolPref('zen.view.compact.hide-toolbar', true); + this.callAllEventListeners(); + }, + + callAllEventListeners() { + this._eventListeners.forEach((callback) => callback()); }, addEventListener(callback) { - this._evenListeners.push(callback); + this._eventListeners.push(callback); }, removeEventListener(callback) { - const index = this._evenListeners.indexOf(callback); + const index = this._eventListeners.indexOf(callback); if (index !== -1) { - this._evenListeners.splice(index, 1); + this._eventListeners.splice(index, 1); } }, @@ -245,11 +252,11 @@ var gZenCompactModeManager = { // once the window buttons are shown this.updateContextMenu(); if (!this.preference) { - this._evenListeners.forEach((callback) => callback()); + this.callAllEventListeners(); await this.animateCompactMode(); } else { await this.animateCompactMode(); - this._evenListeners.forEach((callback) => callback()); + this.callAllEventListeners(); } gZenUIManager.updateTabsToolbar(); if (isUrlbarFocused) { @@ -558,7 +565,9 @@ var gZenCompactModeManager = { element.setAttribute(attr, 'true'); if ( isToolbar && - (element.hasAttribute('should-hide') || + ((gZenVerticalTabsManager._hasSetSingleToolbar && + (element.hasAttribute('should-hide') || + document.documentElement.hasAttribute('zen-has-bookmarks'))) || (this.preference && Services.prefs.getBoolPref('zen.view.compact.hide-toolbar') && !gZenVerticalTabsManager._hasSetSingleToolbar)) diff --git a/src/zen/compact-mode/toolbar.inc.css b/src/zen/compact-mode/toolbar.inc.css index 6ca231175..166da1039 100644 --- a/src/zen/compact-mode/toolbar.inc.css +++ b/src/zen/compact-mode/toolbar.inc.css @@ -9,8 +9,10 @@ --zen-toolbox-top-align: var(--zen-element-separation); } - & #titlebar { - margin-top: var(--zen-element-separation) !important; + @media -moz-pref('zen.view.compact.hide-tabbar') { + & #titlebar { + margin-top: var(--zen-element-separation) !important; + } } & #zen-appcontent-wrapper { @@ -39,6 +41,11 @@ * web content */ transition: visibility 0.15s ease; } + + & #zen-appcontent-navbar-container { + opacity: 0; + transition: opacity 0.15s ease; + } } & @@ -65,5 +72,10 @@ opacity: 1; pointer-events: auto; } + + & #zen-appcontent-navbar-container { + opacity: 1; + transition: none; + } } }