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

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 {