fix: Fix tahoe popups rendering shadows and other small tweaks, b=no-bug, c=welcome, common

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.

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!

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() {

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';

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 {

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;
     }
   }

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 {

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',
                 },

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;
             },