From 66a31c8920bad6e2d7c04fc1d80b34437acf5a54 Mon Sep 17 00:00:00 2001
From: Tim <37033036+TimStewartJ@users.noreply.github.com>
Date: Fri, 14 Mar 2025 15:45:59 -0700
Subject: [PATCH] Respect prefers-reduced-motion in zen-styles

Add `@media (prefers-reduced-motion: reduce)` queries to respect reduced motion preferences.

* **zen-animations.css**: Wrap all `@keyframes` rules inside the `@media` query to disable animations for users who prefer reduced motion.
* **zen-browser-ui.css**: Add `@media (prefers-reduced-motion: reduce)` query to disable `zen-main-app-wrapper-animation`.
* **zen-panel-ui.css**: Add `@media (prefers-reduced-motion: reduce)` query to disable `zen-jello-animation` for panel content.
---
 .../content/zen-styles/zen-animations.css     | 493 +++++++++---------
 .../content/zen-styles/zen-browser-ui.css     |  11 +
 .../base/content/zen-styles/zen-panel-ui.css  |  10 +
 3 files changed, 269 insertions(+), 245 deletions(-)

diff --git a/src/browser/base/content/zen-styles/zen-animations.css b/src/browser/base/content/zen-styles/zen-animations.css
index 4d820f3202..45dd32ad72 100644
--- a/src/browser/base/content/zen-styles/zen-animations.css
+++ b/src/browser/base/content/zen-styles/zen-animations.css
@@ -3,290 +3,293 @@
  * 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/.
  */
-@keyframes zen-jello-animation {
-  0% {
-    transform: scale3d(0.8, 0.8, 0.8);
-  }
-
-  60% {
-    transform: scale3d(1.02, 1.02, 1.02);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-@keyframes zen-jello-animation-alt {
-  0% {
-    transform: scale3d(0.8, 0.8, 0.8);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-@keyframes zen-jello-animation-large {
-  0% {
-    transform: scale3d(0.8, 0.8, 0.8);
-  }
-
-  60% {
-    transform: scale3d(1.02, 1.02, 1.02);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale3d(1, 1, 1);
-  }
-}
-
-@keyframes zen-theme-picker-dot-animation {
-  from {
-    transform: scale(0.8) translate(-50%, -50%);
-  }
-  50% {
-    transform: scale(1.2) translate(-50%, -50%);
-  }
-  to {
-    transform: scale(1) translate(-50%, -50%);
-  }
-}
-
-@keyframes zen-main-app-wrapper-animation {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes zen-jello-out-animation {
-  0% {
-    transform: scale3d(1, 1, 1);
-  }
-
-  60% {
-    transform: scale3d(1.02, 1.02, 1.02);
-  }
-
-  99% {
-    opacity: 0;
-    transform: scale3d(0.8, 0.8, 0.8);
-  }
-
-  100% {
-    -moz-window-transform: none;
-    transform: none;
-  }
-}
-
-@keyframes better-sidebar-pinned-hide {
-  0% {
-    opacity: 1;
-    transform: scale(1) rotateX(0deg);
-  }
-
-  100% {
-    transform: scale(0.99) rotateX(-5deg);
-    opacity: 0;
-  }
-}
-
-@keyframes better-sidebar-pinned-show {
-  0% {
-    opacity: 0;
-
-    transform: scale(0.99) rotateX(-5deg);
-  }
-
-  100% {
-    transform: scale(1) rotateX(0deg);
-    opacity: 1;
-  }
-}
-
-@keyframes better-sidebar-hide {
-  0% {
-    opacity: 1;
-
-    transform: scale(1) rotateX(0deg);
-  }
 
-  100% {
-    transform: scale(0.99) rotateX(-5deg);
-    opacity: 0;
-  }
-}
+@media (prefers-reduced-motion: reduce) {
+  @keyframes zen-jello-animation {
+    0% {
+      transform: scale3d(0.8, 0.8, 0.8);
+    }
 
-@keyframes better-sidebar-show {
-  0% {
-    opacity: 0;
-  }
+    60% {
+      transform: scale3d(1.02, 1.02, 1.02);
+    }
 
-  100% {
-    transform: scale(1);
-    opacity: 1;
+    to {
+      opacity: 1;
+      transform: scale3d(1, 1, 1);
+    }
   }
-}
 
-@keyframes better-sidebar-intro-show {
-  0% {
-    opacity: 0;
-    transform: translateY(5px);
-  }
+  @keyframes zen-jello-animation-alt {
+    0% {
+      transform: scale3d(0.8, 0.8, 0.8);
+    }
 
-  100% {
-    transform: translateY(0px);
-    opacity: 1;
+    to {
+      opacity: 1;
+      transform: scale3d(1, 1, 1);
+    }
   }
-}
 
-@keyframes zen-vtabs-animation {
-  0% {
-    opacity: 0;
-    transform: translateX(-10px);
-  }
+  @keyframes zen-jello-animation-large {
+    0% {
+      transform: scale3d(0.8, 0.8, 0.8);
+    }
 
-  20% {
-    opacity: 1;
-  }
+    60% {
+      transform: scale3d(1.02, 1.02, 1.02);
+    }
 
-  100% {
-    transform: translateX(0);
+    to {
+      opacity: 1;
+      transform: scale3d(1, 1, 1);
+    }
   }
-}
 
-@keyframes zen-sidebar-panel-animation-right {
-  0% {
-    opacity: 0;
-    transform: translateX(10px);
+  @keyframes zen-theme-picker-dot-animation {
+    from {
+      transform: scale(0.8) translate(-50%, -50%);
+    }
+    50% {
+      transform: scale(1.2) translate(-50%, -50%);
+    }
+    to {
+      transform: scale(1) translate(-50%, -50%);
+    }
   }
 
-  20% {
-    opacity: 1;
+  @keyframes zen-main-app-wrapper-animation {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
   }
 
-  100% {
-    transform: translateX(0);
-  }
-}
+  @keyframes zen-jello-out-animation {
+    0% {
+      transform: scale3d(1, 1, 1);
+    }
 
-@keyframes zen-sidebar-panel-animation-reverse {
-  0% {
-    opacity: 1;
-    transform: translateX(0) scale3d(1, 1, 1);
-  }
+    60% {
+      transform: scale3d(1.02, 1.02, 1.02);
+    }
 
-  99% {
-    opacity: 0;
-    transform: translateX(-50px) scale3d(0.95, 0.95, 0.95);
-  }
+    99% {
+      opacity: 0;
+      transform: scale3d(0.8, 0.8, 0.8);
+    }
 
-  100% {
-    display: none !important;
+    100% {
+      -moz-window-transform: none;
+      transform: none;
+    }
   }
-}
 
-/* Mark: Zen Glance */
-@keyframes zen-glance-overlay-animation {
-  from {
-    opacity: 0;
-    transform: scale(0.8);
-  }
+  @keyframes better-sidebar-pinned-hide {
+    0% {
+      opacity: 1;
+      transform: scale(1) rotateX(0deg);
+    }
 
-  to {
-    opacity: 1;
-    transform: scale(1);
+    100% {
+      transform: scale(0.99) rotateX(-5deg);
+      opacity: 0;
+    }
   }
-}
 
-@keyframes zen-glance-overlay-animation-out {
-  from {
-    opacity: 1;
-  }
+  @keyframes better-sidebar-pinned-show {
+    0% {
+      opacity: 0;
 
-  to {
-    opacity: 0;
-  }
-}
+      transform: scale(0.99) rotateX(-5deg);
+    }
 
-@keyframes zen-rice-form-out {
-  0% {
-    transform: translateX(0);
-    max-height: 350px;
-    opacity: 1;
-    position: relative;
+    100% {
+      transform: scale(1) rotateX(0deg);
+      opacity: 1;
+    }
   }
 
-  50% {
-    transform: translateX(-100%);
-    opacity: 0;
-    position: relative;
-  }
+  @keyframes better-sidebar-hide {
+    0% {
+      opacity: 1;
 
-  99% {
-    transform: translateX(-100%);
-    opacity: 0;
-    max-height: 15px;
-    position: relative;
-  }
+      transform: scale(1) rotateX(0deg);
+    }
 
-  100% {
-    transform: translateX(-100%);
-    opacity: 0;
-    pointer-events: none;
-    position: absolute;
+    100% {
+      transform: scale(0.99) rotateX(-5deg);
+      opacity: 0;
+    }
   }
-}
 
-@keyframes zen-rice-form-in {
-  0% {
-    position: absolute;
-    transform: translateX(100%);
-    opacity: 0;
-  }
+  @keyframes better-sidebar-show {
+    0% {
+      opacity: 0;
+    }
 
-  99% {
-    position: absolute;
-    transform: translateX(0);
-    opacity: 1;
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
   }
 
-  100% {
-    position: relative;
-  }
-}
+  @keyframes better-sidebar-intro-show {
+    0% {
+      opacity: 0;
+      transform: translateY(5px);
+    }
+
+    100% {
+      transform: translateY(0px);
+      opacity: 1;
+    }
+  }
+
+  @keyframes zen-vtabs-animation {
+    0% {
+      opacity: 0;
+      transform: translateX(-10px);
+    }
 
-@keyframes zen-rice-form-in-2 {
-  from {
-    opacity: 0;
-    transform: translateX(100%);
-    max-height: 50px;
-  }
+    20% {
+      opacity: 1;
+    }
+
+    100% {
+      transform: translateX(0);
+    }
+  }
 
-  to {
-    opacity: 1;
-    transform: translateX(0);
-    max-height: 450px;
-  }
-}
+  @keyframes zen-sidebar-panel-animation-right {
+    0% {
+      opacity: 0;
+      transform: translateX(10px);
+    }
+
+    20% {
+      opacity: 1;
+    }
+
+    100% {
+      transform: translateX(0);
+    }
+  }
 
-@keyframes zen-rice-submit-animation {
-  /* Scale and shake the dialog */
-  0% {
-    transform: scale(1);
-  }
+  @keyframes zen-sidebar-panel-animation-reverse {
+    0% {
+      opacity: 1;
+      transform: translateX(0) scale3d(1, 1, 1);
+    }
 
-  50% {
-    transform: scale(1.1);
+    99% {
+      opacity: 0;
+      transform: translateX(-50px) scale3d(0.95, 0.95, 0.95);
+    }
+
+    100% {
+      display: none !important;
+    }
   }
-
-  100% {
-    transform: scale(1);
+
+  /* Mark: Zen Glance */
+  @keyframes zen-glance-overlay-animation {
+    from {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes zen-glance-overlay-animation-out {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes zen-rice-form-out {
+    0% {
+      transform: translateX(0);
+      max-height: 350px;
+      opacity: 1;
+      position: relative;
+    }
+
+    50% {
+      transform: translateX(-100%);
+      opacity: 0;
+      position: relative;
+    }
+
+    99% {
+      transform: translateX(-100%);
+      opacity: 0;
+      max-height: 15px;
+      position: relative;
+    }
+
+    100% {
+      transform: translateX(-100%);
+      opacity: 0;
+      pointer-events: none;
+      position: absolute;
+    }
+  }
+
+  @keyframes zen-rice-form-in {
+    0% {
+      position: absolute;
+      transform: translateX(100%);
+      opacity: 0;
+    }
+
+    99% {
+      position: absolute;
+      transform: translateX(0);
+      opacity: 1;
+    }
+
+    100% {
+      position: relative;
+    }
+  }
+
+  @keyframes zen-rice-form-in-2 {
+    from {
+      opacity: 0;
+      transform: translateX(100%);
+      max-height: 50px;
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+      max-height: 450px;
+    }
+  }
+
+  @keyframes zen-rice-submit-animation {
+    /* Scale and shake the dialog */
+    0% {
+      transform: scale(1);
+    }
+
+    50% {
+      transform: scale(1.1);
+    }
+
+    100% {
+      transform: scale(1);
+    }
   }
 }
diff --git a/src/browser/base/content/zen-styles/zen-browser-ui.css b/src/browser/base/content/zen-styles/zen-browser-ui.css
index 2235c38815..5f15f1179f 100644
--- a/src/browser/base/content/zen-styles/zen-browser-ui.css
+++ b/src/browser/base/content/zen-styles/zen-browser-ui.css
@@ -86,6 +86,17 @@
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  @keyframes zen-main-app-wrapper-animation {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+}
+
 #sidebar-box {
   /** Sidebar is already hidden in full screen mode */
   border: none;
diff --git a/src/browser/base/content/zen-styles/zen-panel-ui.css b/src/browser/base/content/zen-styles/zen-panel-ui.css
index 7938194e7d..80e66b202a 100644
--- a/src/browser/base/content/zen-styles/zen-panel-ui.css
+++ b/src/browser/base/content/zen-styles/zen-panel-ui.css
@@ -3,6 +3,16 @@
  * 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/.
  */
+@media (prefers-reduced-motion: reduce) {
+  panel[type='arrow'][animate][animate='open']::part(content) {
+    animation: none;
+  }
+
+  panel[type='arrow'][animate]:not([animate='open'])::part(content) {
+    animation: none;
+  }
+}
+
 panel[type='arrow'][animate][animate='open']::part(content) {
   animation: zen-jello-animation 0.35s ease;