From 767dfce556f27fc7d2d98fcccc86fc642d24904e Mon Sep 17 00:00:00 2001
From: rain capsule <29630035+busybox11@users.noreply.github.com>
Date: Tue, 14 Apr 2026 16:11:18 +0200
Subject: [PATCH] gh-7099: slight CSS and SVG optimizations on notes anim loop
 (gh-13246)

---
 src/zen/images/note-indicator.svg    | 106 +++++++++++++--------------
 src/zen/media/zen-media-controls.css |   8 +-
 2 files changed, 57 insertions(+), 57 deletions(-)

diff --git a/src/zen/images/note-indicator.svg b/src/zen/images/note-indicator.svg
index 02ff00771..1c69eae03 100644
--- a/src/zen/images/note-indicator.svg
+++ b/src/zen/images/note-indicator.svg
@@ -6,13 +6,44 @@
 <svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
   <rect width="100%" height="100%" fill="none"/>
 
-    <style type="text/css"><![CDATA[
+  <defs>
+    <path id="zen-note-shape-eighth"
+      d="M448.231,166.755C352.139,64.989,240.998,2.38,240.998,2.38
+        c-3.297-2.625-7.813-3.125-11.609-1.281c-3.813,1.844-6.219,5.688-6.219,9.906v329
+        c-20.078-8.281-44.688-11.656-71.344-8.344C84.717,340.005,30.514,386.849,30.67,436.255
+        c0.188,49.453,54.703,82.813,121.75,74.469c67.078-8.328,121.297-55.188,121.125-104.641V164.817
+        c15.828,3.313,34.391,10.531,54.391,25.219c67.703,49.625,100.905,81.484,58.218,166.859
+        C475.403,321.974,514.2,236.599,448.231,166.755z"/>
+    <path id="zen-note-shape-beamed"
+      d="M133.703,45.86v86.43v240.66c-16.8-6.173-36.654-8.012-57.11-4.054
+        c-49.141,9.454-82.977,48.227-75.577,86.559c7.389,38.353,53.195,61.757,102.326,52.292
+        c43.602-8.4,75.093-39.892,76.449-73.727h0.28V129.246L465.644,93.83v237.595
+        c-16.811-6.162-36.644-7.98-57.1-4.033c-49.152,9.443-82.966,48.217-75.6,86.559
+        c7.389,38.342,53.185,61.746,102.327,52.271c43.612-8.389,75.115-39.892,76.449-73.706
+        H512V90.785V2.152L133.703,45.86z"/>
+  </defs>
+
+  <style type="text/css"><![CDATA[
     .note {
       fill: currentColor;
       transform-box: fill-box;
       transform-origin: center;
+      animation-duration: 3s;
+      animation-timing-function: ease-in-out;
+      animation-iteration-count: infinite;
     }
 
+    .note--L { animation-name: flyUpLeft; }
+    .note--R { animation-name: flyUpRight; }
+    .note--C { animation-name: flyUpCenter; }
+
+    .note-d0 { animation-delay: 0s; }
+    .note-d1 { animation-delay: 0.5s; }
+    .note-d2 { animation-delay: 1s; }
+    .note-d3 { animation-delay: 1.5s; }
+    .note-d4 { animation-delay: 2s; }
+    .note-d5 { animation-delay: 2.5s; }
+
     @keyframes flyUpLeft {
       from {
         opacity: 1;
@@ -20,7 +51,7 @@
       }
       to {
         opacity: 0;
-        transform: translate(-9px, -35px) scale(5) rotate(0deg);
+        transform: translate(-9px, -35px) scale(4) rotate(0deg);
       }
     }
     @keyframes flyUpRight {
@@ -30,7 +61,7 @@
       }
       to {
         opacity: 0;
-        transform: translate(9px, -35px) scale(5) rotate(0deg);
+        transform: translate(9px, -35px) scale(4) rotate(0deg);
       }
     }
     @keyframes flyUpCenter {
@@ -40,66 +71,35 @@
       }
       to {
         opacity: 0;
-        transform: translate(0px, -35px) scale(5) rotate(0deg);
+        transform: translate(0px, -35px) scale(4) rotate(0deg);
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .note-group {
+        display: none;
       }
     }
-    }*/
   ]]></style>
 
-
   <g class="note-group">
-    <g class="note" style="animation: flyUpLeft 3s ease-in-out infinite; animation-delay: 0s;">
-      <path transform="translate(15,40) scale(0.0078)" d="M448.231,166.755C352.139,64.989,240.998,2.38,240.998,2.38
-        c-3.297-2.625-7.813-3.125-11.609-1.281c-3.813,1.844-6.219,5.688-6.219,9.906v329
-        c-20.078-8.281-44.688-11.656-71.344-8.344C84.717,340.005,30.514,386.849,30.67,436.255
-        c0.188,49.453,54.703,82.813,121.75,74.469c67.078-8.328,121.297-55.188,121.125-104.641V164.817
-        c15.828,3.313,34.391,10.531,54.391,25.219c67.703,49.625,100.905,81.484,58.218,166.859
-        C475.403,321.974,514.2,236.599,448.231,166.755z"/>
+    <g class="note note--L note-d0">
+      <use href="#zen-note-shape-eighth" transform="translate(15,40) scale(0.0078)"/>
     </g>
-
-    <g class="note" style="animation: flyUpRight 3s ease-in-out infinite; animation-delay: 0.5s;">
-      <path transform="translate(15,40) scale(0.0078)" d="M133.703,45.86v86.43v240.66c-16.8-6.173-36.654-8.012-57.11-4.054
-        c-49.141,9.454-82.977,48.227-75.577,86.559c7.389,38.353,53.195,61.757,102.326,52.292
-        c43.602-8.4,75.093-39.892,76.449-73.727h0.28V129.246L465.644,93.83v237.595
-        c-16.811-6.162-36.644-7.98-57.1-4.033c-49.152,9.443-82.966,48.217-75.6,86.559
-        c7.389,38.342,53.185,61.746,102.327,52.271c43.612-8.389,75.115-39.892,76.449-73.706
-        H512V90.785V2.152L133.703,45.86z"/>
+    <g class="note note--R note-d1">
+      <use href="#zen-note-shape-beamed" transform="translate(15,40) scale(0.0078)"/>
     </g>
-
-    <g class="note" style="animation: flyUpCenter 3s ease-in-out infinite; animation-delay: 1s;">
-      <path transform="translate(15,40) scale(0.0078)" d="M448.231,166.755C352.139,64.989,240.998,2.38,240.998,2.38
-        c-3.297-2.625-7.813-3.125-11.609-1.281c-3.813,1.844-6.219,5.688-6.219,9.906v329
-        c-20.078-8.281-44.688-11.656-71.344-8.344C84.717,340.005,30.514,386.849,30.67,436.255
-        c0.188,49.453,54.703,82.813,121.75,74.469c67.078-8.328,121.297-55.188,121.125-104.641V164.817
-        c15.828,3.313,34.391,10.531,54.391,25.219c67.703,49.625,100.905,81.484,58.218,166.859
-        C475.403,321.974,514.2,236.599,448.231,166.755z"/>
+    <g class="note note--C note-d2">
+      <use href="#zen-note-shape-eighth" transform="translate(15,40) scale(0.0078)"/>
     </g>
-
-    <g class="note" style="animation: flyUpLeft 3s ease-in-out infinite; animation-delay: 1.5s;">
-      <path transform="translate(15,40) scale(0.0078)" d="M133.703,45.86v86.43v240.66c-16.8-6.173-36.654-8.012-57.11-4.054
-        c-49.141,9.454-82.977,48.227-75.577,86.559c7.389,38.353,53.195,61.757,102.326,52.292
-        c43.602-8.4,75.093-39.892,76.449-73.727h0.28V129.246L465.644,93.83v237.595
-        c-16.811-6.162-36.644-7.98-57.1-4.033c-49.152,9.443-82.966,48.217-75.6,86.559
-        c7.389,38.342,53.185,61.746,102.327,52.271c43.612-8.389,75.115-39.892,76.449-73.706
-        H512V90.785V2.152L133.703,45.86z"/>
+    <g class="note note--L note-d3">
+      <use href="#zen-note-shape-beamed" transform="translate(15,40) scale(0.0078)"/>
     </g>
-
-    <g class="note" style="animation: flyUpRight 3s ease-in-out infinite; animation-delay: 2s;">
-      <path transform="translate(15,40) scale(0.0078)" d="M448.231,166.755C352.139,64.989,240.998,2.38,240.998,2.38
-        c-3.297-2.625-7.813-3.125-11.609-1.281c-3.813,1.844-6.219,5.688-6.219,9.906v329
-        c-20.078-8.281-44.688-11.656-71.344-8.344C84.717,340.005,30.514,386.849,30.67,436.255
-        c0.188,49.453,54.703,82.813,121.75,74.469c67.078-8.328,121.297-55.188,121.125-104.641V164.817
-        c15.828,3.313,34.391,10.531,54.391,25.219c67.703,49.625,100.905,81.484,58.218,166.859
-        C475.403,321.974,514.2,236.599,448.231,166.755z"/>
+    <g class="note note--R note-d4">
+      <use href="#zen-note-shape-eighth" transform="translate(15,40) scale(0.0078)"/>
     </g>
-
-    <g class="note" style="animation: flyUpCenter 3s ease-in-out infinite; animation-delay: 2.5s;">
-      <path transform="translate(15,40) scale(0.0078)" d="M133.703,45.86v86.43v240.66c-16.8-6.173-36.654-8.012-57.11-4.054
-        c-49.141,9.454-82.977,48.227-75.577,86.559c7.389,38.353,53.195,61.757,102.326,52.292
-        c43.602-8.4,75.093-39.892,76.449-73.727h0.28V129.246L465.644,93.83v237.595
-        c-16.811-6.162-36.644-7.98-57.1-4.033c-49.152,9.443-82.966,48.217-75.6,86.559
-        c7.389,38.342,53.185,61.746,102.327,52.271c43.612-8.389,75.115-39.892,76.449-73.706
-        H512V90.785V2.152L133.703,45.86z"/>
+    <g class="note note--C note-d5">
+      <use href="#zen-note-shape-beamed" transform="translate(15,40) scale(0.0078)"/>
     </g>
   </g>
 </svg>
diff --git a/src/zen/media/zen-media-controls.css b/src/zen/media/zen-media-controls.css
index 8b23e50ee..9cabf107e 100644
--- a/src/zen/media/zen-media-controls.css
+++ b/src/zen/media/zen-media-controls.css
@@ -117,16 +117,16 @@
   & #zen-media-focus-button::after {
     content: "";
     position: absolute;
-    width: 110%;
-    height: 110%;
     background: url("chrome://browser/content/zen-images/note-indicator.svg") no-repeat;
     top: -70%;
-    left: 50%;
-    transform: translateX(-50%);
+    left: 0;
+    right: 0;
+    bottom: 0;
     z-index: 0;
     pointer-events: none;
     transition: opacity 0.8s ease;
     opacity: 1;
+    will-change: opacity;
   }
 
   &:is(:not(.playing:not([muted])), :hover) #zen-media-focus-button::after {