From 9e2b0cc1edf1d4116a1cf38dba9311e3bbb4e630 Mon Sep 17 00:00:00 2001 From: "mr. m" Date: Tue, 14 Oct 2025 14:28:54 +0200 Subject: [PATCH] fix: Fix tahoe popups rendering shadows and other small tweaks, b=no-bug, c=welcome, common --- locales/en-US/browser/browser/zen-general.ftl | 3 ++ locales/en-US/browser/browser/zen-welcome.ftl | 1 - src/zen/common/ZenUIManager.mjs | 34 +++++++++++++------ src/zen/common/ZenUIMigration.sys.mjs | 2 +- src/zen/common/styles/zen-omnibox.css | 4 +++ src/zen/common/styles/zen-panel-ui.css | 16 ++++++++- src/zen/common/styles/zen-popup.css | 12 ++++--- src/zen/urlbar/ZenSiteDataPanel.sys.mjs | 5 ++- src/zen/welcome/ZenWelcome.mjs | 8 ++--- 9 files changed, 60 insertions(+), 25 deletions(-) diff --git a/locales/en-US/browser/browser/zen-general.ftl b/locales/en-US/browser/browser/zen-general.ftl index 9e568170c..636809b2f 100644 --- a/locales/en-US/browser/browser/zen-general.ftl +++ b/locales/en-US/browser/browser/zen-general.ftl @@ -72,6 +72,7 @@ zen-site-data-settings = Settings zen-generic-manage = Manage zen-generic-more = More +zen-generic-next = Next # These labels will be used for the site data panel settings zen-site-data-setting-allow = Allowed @@ -95,5 +96,7 @@ zen-urlbar-copy-url-button = zen-site-data-setting-site-protection = Site Protection +# Section: Feature callouts + zen-site-data-panel-feature-callout-title = A new home for add-ons, permissions, and more zen-site-data-panel-feature-callout-subtitle = Click the icon to manage site settings, view security info, access extensions, and perform common actions. diff --git a/locales/en-US/browser/browser/zen-welcome.ftl b/locales/en-US/browser/browser/zen-welcome.ftl index c137bf910..1967595a9 100644 --- a/locales/en-US/browser/browser/zen-welcome.ftl +++ b/locales/en-US/browser/browser/zen-welcome.ftl @@ -29,6 +29,5 @@ zen-welcome-default-search-title = Your Default Search Engine zen-welcome-default-search-description = Choose your default search engine. You can always change it later! zen-welcome-skip-button = Skip -zen-welcome-next-action = Next zen-welcome-finished = Your Zen has been set up correctly! diff --git a/src/zen/common/ZenUIManager.mjs b/src/zen/common/ZenUIManager.mjs index c0a45816c..faf3cf950 100644 --- a/src/zen/common/ZenUIManager.mjs +++ b/src/zen/common/ZenUIManager.mjs @@ -2,10 +2,6 @@ // License, v. 2.0. If a copy of the MPL was not distributed with this // file, You can obtain one at http://mozilla.org/MPL/2.0/. -ChromeUtils.defineESModuleGetters(this, { - nsZenSiteDataPanel: 'resource:///modules/ZenSiteDataPanel.sys.mjs', -}); - var gZenUIManager = { _popupTrackingElements: [], _hoverPausedForExpand: false, @@ -36,10 +32,6 @@ var gZenUIManager = { return document.getElementById('zen-toast-container'); }); - window.gZenSiteDataPanel = new nsZenSiteDataPanel(window); - - gURLBar._zenTrimURL = this.urlbarTrim.bind(this); - new ResizeObserver( gZenCommonActions.throttle( gZenCompactModeManager.getAndApplySidebarWidth.bind(gZenCompactModeManager), @@ -63,14 +55,36 @@ var gZenUIManager = { this._initCreateNewPopup(); this._debloatContextMenus(); - this._initOmniboxCommands(); + this._addNewCustomizableButtonsIfNeeded(); + this._initOmnibox(); }, - _initOmniboxCommands() { + _addNewCustomizableButtonsIfNeeded() { + const kPref = 'zen.ui.migration.compact-mode-button-added'; + let navbarPlacements = CustomizableUI.getWidgetIdsInArea('zen-sidebar-top-buttons'); + try { + if (!navbarPlacements.length && !Services.prefs.getBoolPref(kPref, false)) { + CustomizableUI.addWidgetToArea('zen-toggle-compact-mode', 'zen-sidebar-top-buttons', 0); + gZenVerticalTabsManager._topButtonsSeparatorElement.before( + document.getElementById('zen-toggle-compact-mode') + ); + } + } catch (e) { + console.error('Error adding compact mode button to sidebar:', e); + } + Services.prefs.setBoolPref(kPref, true); + }, + + _initOmnibox() { const { registerZenUrlbarProviders } = ChromeUtils.importESModule( 'resource:///modules/ZenUBProvider.sys.mjs' ); + const { nsZenSiteDataPanel } = ChromeUtils.importESModule( + 'resource:///modules/ZenSiteDataPanel.sys.mjs' + ); registerZenUrlbarProviders(); + window.gZenSiteDataPanel = new nsZenSiteDataPanel(window); + gURLBar._zenTrimURL = this.urlbarTrim.bind(this); }, _debloatContextMenus() { diff --git a/src/zen/common/ZenUIMigration.sys.mjs b/src/zen/common/ZenUIMigration.sys.mjs index bd9129360..7b7457012 100644 --- a/src/zen/common/ZenUIMigration.sys.mjs +++ b/src/zen/common/ZenUIMigration.sys.mjs @@ -2,7 +2,7 @@ // License, v. 2.0. If a copy of the MPL was not distributed with this // file, You can obtain one at http://mozilla.org/MPL/2.0/. -const { AppConstants } = ChromeUtils.importESModule('resource://gre/modules/AppConstants.sys.mjs'); +import { AppConstants } from 'resource://gre/modules/AppConstants.sys.mjs'; class nsZenUIMigration { PREF_NAME = 'zen.ui.migration.version'; diff --git a/src/zen/common/styles/zen-omnibox.css b/src/zen/common/styles/zen-omnibox.css index 5874345cb..e0cef344d 100644 --- a/src/zen/common/styles/zen-omnibox.css +++ b/src/zen/common/styles/zen-omnibox.css @@ -238,6 +238,10 @@ pointer-events: none; animation: zen-urlbar-searchmode ease-out 1s forwards; } + + & #zen-copy-url-button { + display: none; + } } #urlbar-go-button { diff --git a/src/zen/common/styles/zen-panel-ui.css b/src/zen/common/styles/zen-panel-ui.css index 2c10aea56..8c42b9803 100644 --- a/src/zen/common/styles/zen-panel-ui.css +++ b/src/zen/common/styles/zen-panel-ui.css @@ -33,13 +33,19 @@ panel[type='arrow']:not(#feature-callout) { /* The blur behind doesn't blur all that much, add a semi-transparent * background to improve contrast */ --panel-background: light-dark(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5)) !important; - --panel-border-color: transparent !important; + + /* The mica rendering already adds a shadow and a border, so we + * remove the one we add via CSS */ --panel-shadow-margin: 0px !important; + --panel-border-color: transparent !important; border: none !important; transition-duration: 0s !important; &::part(content) { + /* Refrain from animating for now as we haven't found a + * way to properly animate the popup without having the mica + * backdrop staying still while the popup animates */ animation: none !important; } } @@ -55,7 +61,15 @@ panel[type='arrow']:not(#feature-callout) { --panel-background: transparent !important; --panel-border-color: transparent; + /* Remove the shadow for the native panels, as macos already + * adds the shadows to the window. This is specially important + * on Tahoe, where we *dont* apply an image mask, meaning that + * trying to render a shadow would end up in having weird borders + * around the panel */ + --panel-shadow: none; + &::part(content) { + /* This shoudn't really be needed, but just in case */ background-color: transparent !important; } } diff --git a/src/zen/common/styles/zen-popup.css b/src/zen/common/styles/zen-popup.css index de9cdb051..755799ad3 100644 --- a/src/zen/common/styles/zen-popup.css +++ b/src/zen/common/styles/zen-popup.css @@ -38,12 +38,15 @@ menupopup, panel { --panel-background: var(--arrowpanel-background); - --menuitem-padding: 6px !important; --panel-shadow-margin: 10px; - /* This should match GetMenuMaskImage() on macOS, or be overridden below */ + /* This should match GetMenuCornerRadius() on macOS, or be overridden below */ @media (-moz-platform: macos) { --panel-border-radius: 10px; + + @media (-moz-mac-tahoe-theme) { + --panel-border-radius: 12px; + } } } @@ -343,7 +346,7 @@ menuseparator { } --zen-toast-padding: 6px; - --zen-toast-max-height: 46px; + --zen-toast-max-height: 42px; @media (-moz-platform: macos) { --zen-toast-padding: 8px; --zen-toast-max-height: 48px; @@ -376,8 +379,7 @@ menuseparator { } & label { - margin-top: 0; - margin-bottom: 0; + margin: 0 4px; } & button { diff --git a/src/zen/urlbar/ZenSiteDataPanel.sys.mjs b/src/zen/urlbar/ZenSiteDataPanel.sys.mjs index 4b04d49ee..e86c6f53e 100644 --- a/src/zen/urlbar/ZenSiteDataPanel.sys.mjs +++ b/src/zen/urlbar/ZenSiteDataPanel.sys.mjs @@ -554,10 +554,10 @@ export class nsZenSiteDataPanel { id: 'ZEN_EXTENSIONS_PANEL_MOVE_CALLOUT', template: 'multistage', backdrop: 'transparent', - transitions: false, + transitions: true, screens: [ { - id: 'ZEN_EXTENSIONS_PANEL_MOVE_CALLOUT_HORIZONTAL', + id: 'ZEN_EXTENSIONS_PANEL_MOVE_CALLOUT', anchors: [ { selector: '#zen-site-data-icon-button', @@ -577,7 +577,6 @@ export class nsZenSiteDataPanel { content: { position: 'callout', width: '355px', - padding: 16, title: { string_id: 'zen-site-data-panel-feature-callout-title', }, diff --git a/src/zen/welcome/ZenWelcome.mjs b/src/zen/welcome/ZenWelcome.mjs index 08a9458a5..3e1074bf5 100644 --- a/src/zen/welcome/ZenWelcome.mjs +++ b/src/zen/welcome/ZenWelcome.mjs @@ -409,7 +409,7 @@ document.querySelector('#zen-welcome-page-sidebar-buttons button').remove(); const newButton = document.querySelector('#zen-welcome-page-sidebar-buttons button'); newButton.classList.add('primary'); - document.l10n.setAttributes(newButton, 'zen-welcome-next-action'); + document.l10n.setAttributes(newButton, 'zen-generic-next'); return false; }, }, @@ -464,7 +464,7 @@ ], buttons: [ { - l10n: 'zen-welcome-next-action', + l10n: 'zen-generic-next', onclick: async () => { return true; }, @@ -533,7 +533,7 @@ ], buttons: [ { - l10n: 'zen-welcome-next-action', + l10n: 'zen-generic-next', onclick: async () => { return true; }, @@ -658,7 +658,7 @@ ], buttons: [ { - l10n: 'zen-welcome-next-action', + l10n: 'zen-generic-next', onclick: async () => { return true; },