fix: update animations and styles for macOS compatibility and improve contrast in popup elements

src/browser/base/content/zen-styles/zen-animations.css

@@ -18,14 +18,20 @@
   }
 }
 
-@keyframes zen-jello-animation-alt {
+@keyframes zen-jello-animation-macos {
   0% {
-    transform: scale3d(0.8, 0.8, 0.8);
+    opacity: 0;
+    -moz-window-transform: scale(0.3);
   }
 
-  to {
+  50% {
     opacity: 1;
-    transform: scale3d(1, 1, 1);
+    -moz-window-transform: scale(1.04);
+  }
+
+  100% {
+    opacity: 1;
+    -moz-window-transform: scale(1);
   }
 }
 

src/browser/base/content/zen-styles/zen-gradient-generator.css

@@ -261,7 +261,7 @@
   transform: translateX(-50%);
   & .separator,
   & #PanelUI-zen-gradient-generator-color-toggle-algo {
-    background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
+    background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.5));
   }
 
   & button {

src/browser/base/content/zen-styles/zen-panel-ui.css

@@ -3,14 +3,17 @@
  * 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/.
  */
-panel[type='arrow'][animate][animate='open']::part(content) {
+panel[type='arrow'][animate='open'] {
-  animation: zen-jello-animation 0.35s ease;
-
   @media (-moz-platform: macos) {
-    animation: zen-jello-animation-alt 0.2s ease-out;
+    animation: zen-jello-animation-macos 0.4s ease-out;
+  }
+  @media not(-moz-platform: macos) {
+    &::part(content) {
+      animation: zen-jello-animation 0.35s ease;
+    }
   }
 }
 
-panel[type='arrow'][animate]:not([animate='open'])::part(content) {
+panel[type='arrow'][animate]:not([animate='open']) {
   animation: zen-jello-out-animation 0.3s ease-in-out;
 }

src/toolkit/themes/shared/popup-css.patch

@@ -1,5 +1,5 @@
 diff --git a/toolkit/themes/shared/popup.css b/toolkit/themes/shared/popup.css
-index ed0caa97db5726a7d1bc1cd0aa7af3fdf99690dc..4827373b138dd59dd4adc5289adef95ef2410090 100644
+index ed0caa97db5726a7d1bc1cd0aa7af3fdf99690dc..58b640a81aae4f662a5e01abadc03af614cc107d 100644
 --- a/toolkit/themes/shared/popup.css
 +++ b/toolkit/themes/shared/popup.css
 @@ -21,8 +21,8 @@ panel {
@@ -22,7 +22,7 @@ index ed0caa97db5726a7d1bc1cd0aa7af3fdf99690dc..4827373b138dd59dd4adc5289adef95e
  
      @media (prefers-contrast) {
        --panel-border-color: color-mix(in srgb, currentColor 60%, transparent);
-@@ -54,9 +52,9 @@ panel {
+@@ -54,19 +52,20 @@ panel {
      -moz-default-appearance: menupopup;
      /* The blur behind doesn't blur all that much, add a semi-transparent
       * background to improve contrast */
@@ -35,7 +35,20 @@ index ed0caa97db5726a7d1bc1cd0aa7af3fdf99690dc..4827373b138dd59dd4adc5289adef95e
    }
  
    @media (-moz-platform: macos) {
-@@ -208,7 +206,6 @@ panel:where([type="arrow"]) {
+-    appearance: auto;
++    appearance: auto !important;
+     -moz-default-appearance: menupopup;
+     /* We set the default background here, rather than on ::part(content),
+      * because otherwise it'd interfere with the native look. Non-native-looking
+      * popups should get their background via --panel-background */
+     background-color: Menu;
+-    --panel-background: none;
++    --panel-shadow-margin: 0px !important;
++    --panel-background: transparent !important;
+     --panel-border-color: transparent;
+     /* This should be kept in sync with GetMenuMaskImage() */
+     --panel-border-radius: 6px;
+@@ -208,7 +207,6 @@ panel:where([type="arrow"]) {
      }
  
      &[animating] {