From e3523066c3e77066f243360e44240b0404eed11a Mon Sep 17 00:00:00 2001 From: "mr. m" <91018726+mr-cheffy@users.noreply.github.com> Date: Sun, 19 Oct 2025 12:29:37 +0200 Subject: [PATCH] chore: Remove :has selector for compact mode check and prevent menu close when toggling site permissions, p=#10867, c=common, compact-mode, tabs * feat: Improve button sizings for the sidebar, b=no-bug, c=common, tabs, workspaces * perf: Improved split view switch perf, b=no-bug, c=glance, split-view * chore: Remove :has selector for compact mode check and prevent menu close when toggling site permissions, b=no-bug, c=common, compact-mode, tabs --- src/zen/common/ZenCustomizableUI.sys.mjs | 2 +- src/zen/common/styles/zen-browser-ui.css | 11 +++++++---- src/zen/common/styles/zen-popup.css | 2 +- src/zen/compact-mode/sidebar.inc.css | 15 +++++++-------- src/zen/compact-mode/toolbar.inc.css | 5 +---- src/zen/compact-mode/zen-compact-mode.css | 18 ------------------ src/zen/tabs/zen-tabs/vertical-tabs.css | 4 ++-- src/zen/urlbar/ZenSiteDataPanel.sys.mjs | 3 ++- 8 files changed, 21 insertions(+), 39 deletions(-) diff --git a/src/zen/common/ZenCustomizableUI.sys.mjs b/src/zen/common/ZenCustomizableUI.sys.mjs index e748b5b71..6e9667aba 100644 --- a/src/zen/common/ZenCustomizableUI.sys.mjs +++ b/src/zen/common/ZenCustomizableUI.sys.mjs @@ -37,7 +37,7 @@ export var ZenCustomizableUI = new (class { } #addSidebarButtons(window) { - const kDefaultSidebarWidth = '215px'; + const kDefaultSidebarWidth = '230px'; const toolbox = window.gNavToolbox; // Set a splitter to navigator-toolbox diff --git a/src/zen/common/styles/zen-browser-ui.css b/src/zen/common/styles/zen-browser-ui.css index f90b7f747..287201a20 100644 --- a/src/zen/common/styles/zen-browser-ui.css +++ b/src/zen/common/styles/zen-browser-ui.css @@ -337,10 +337,13 @@ } } -#zen-appcontent-navbar-wrapper #zen-sidebar-top-buttons { - max-width: fit-content; - :root[zen-right-side='true'] & { - order: 1; +#zen-appcontent-navbar-wrapper { + z-index: 1; + & #zen-sidebar-top-buttons { + max-width: fit-content; + :root[zen-right-side='true'] & { + order: 1; + } } } diff --git a/src/zen/common/styles/zen-popup.css b/src/zen/common/styles/zen-popup.css index 55f3ac798..c2d1b31f3 100644 --- a/src/zen/common/styles/zen-popup.css +++ b/src/zen/common/styles/zen-popup.css @@ -390,9 +390,9 @@ menuseparator { min-height: 28px; margin: 0px !important; border-radius: 6px !important; - background: light-dark(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1)) !important; border-top: 2px solid light-dark(transparent, rgba(255, 255, 255, 0.1)); color: light-dark(rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.8)) !important; + box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05); outline: 0.5px solid light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.02)); outline-offset: -0.5px; diff --git a/src/zen/compact-mode/sidebar.inc.css b/src/zen/compact-mode/sidebar.inc.css index b93f6f174..62a906ce9 100644 --- a/src/zen/compact-mode/sidebar.inc.css +++ b/src/zen/compact-mode/sidebar.inc.css @@ -132,14 +132,13 @@ } } - #navigator-toolbox[zen-has-hover]:not(:has(#urlbar[zen-floating-urlbar='true']:hover)), - #navigator-toolbox[zen-user-show], - #navigator-toolbox[zen-has-empty-tab], - #navigator-toolbox[flash-popup], - #navigator-toolbox[has-popup-menu], - #navigator-toolbox[movingtab], - &[zen-renaming-tab='true'] #navigator-toolbox, - #navigator-toolbox[zen-compact-mode-active] { + #navigator-toolbox:is( + [zen-has-hover], [zen-user-show], + [zen-has-empty-tab], [flash-popup], + [has-popup-menu], [movingtab], + [zen-compact-mode-active] + ), + &[zen-renaming-tab='true'] #navigator-toolbox { &:not([animate='true']) { --zen-compact-mode-func: linear( 0 0%, diff --git a/src/zen/compact-mode/toolbar.inc.css b/src/zen/compact-mode/toolbar.inc.css index 8cd55c910..44554528c 100644 --- a/src/zen/compact-mode/toolbar.inc.css +++ b/src/zen/compact-mode/toolbar.inc.css @@ -48,10 +48,7 @@ } } - & - #zen-appcontent-navbar-wrapper[zen-has-hover]:not( - :has(#urlbar[zen-floating-urlbar='true']:hover) - ), + & #zen-appcontent-navbar-wrapper[zen-has-hover], & #zen-appcontent-navbar-wrapper[has-popup-menu], & #zen-appcontent-navbar-wrapper:has( diff --git a/src/zen/compact-mode/zen-compact-mode.css b/src/zen/compact-mode/zen-compact-mode.css index 342514d03..d87f09dde 100644 --- a/src/zen/compact-mode/zen-compact-mode.css +++ b/src/zen/compact-mode/zen-compact-mode.css @@ -49,21 +49,3 @@ %include toolbar.inc.css } } - -/* Fix for https://github.com/zen-browser/desktop/issues/7615 */ -:root[zen-compact-mode='true']:not([customizing])[inDOMFullscreen='true'] { - @media -moz-pref('zen.view.compact.hide-tabbar') or -moz-pref('zen.view.use-single-toolbar') { - &:not([zen-compact-animating]) { - #navigator-toolbox { - opacity: 0; - } - } - } - @media -moz-pref('zen.view.compact.hide-toolbar') { - &:not([zen-single-toolbar='true']) { - & #zen-appcontent-navbar-wrapper { - opacity: 0; - } - } - } -} diff --git a/src/zen/tabs/zen-tabs/vertical-tabs.css b/src/zen/tabs/zen-tabs/vertical-tabs.css index a28fcebd2..9d26c940f 100644 --- a/src/zen/tabs/zen-tabs/vertical-tabs.css +++ b/src/zen/tabs/zen-tabs/vertical-tabs.css @@ -1156,11 +1156,11 @@ --zen-essential-tab-selected-bg: light-dark( rgba(255, 255, 255, 0.85), - color-mix(in srgb, var(--zen-primary-color), rgba(68, 64, 64, 0.85) 40%) + color-mix(in srgb, var(--zen-primary-color), rgba(132, 132, 132, 0.85) 40%) ); --zen-essential-tab-selected-bg-hover: light-dark( rgba(255, 255, 255, 0.8), - color-mix(in srgb, var(--zen-primary-color), rgba(68, 64, 64, 0.85) 50%) + color-mix(in srgb, var(--zen-primary-color), rgba(132, 132, 132, 0.85) 30%) ); :root[zen-default-theme='true'] & { diff --git a/src/zen/urlbar/ZenSiteDataPanel.sys.mjs b/src/zen/urlbar/ZenSiteDataPanel.sys.mjs index 91f648636..63fe006a3 100644 --- a/src/zen/urlbar/ZenSiteDataPanel.sys.mjs +++ b/src/zen/urlbar/ZenSiteDataPanel.sys.mjs @@ -380,6 +380,7 @@ export class nsZenSiteDataPanel { let img = this.document.createXULElement('toolbarbutton'); img.classList.add('permission-popup-permission-icon', 'zen-site-data-permission-icon'); + img.setAttribute('closemenu', 'none'); if (this.#iconMap[id]) { img.classList.add(`zen-permission-${this.#iconMap[id]}-icon`); } @@ -389,7 +390,6 @@ export class nsZenSiteDataPanel { labelContainer.setAttribute('align', 'start'); labelContainer.classList.add('permission-popup-permission-label-container'); labelContainer._permission = permission; - labelContainer.addEventListener('click', this); let nameLabel = this.document.createXULElement('label'); nameLabel.setAttribute('flex', '1'); @@ -419,6 +419,7 @@ export class nsZenSiteDataPanel { container.appendChild(img); container.appendChild(labelContainer); + container.addEventListener('click', this); return [container, isCrossSiteCookie]; }