no-bug: Make glance perform more localized animation painting (gh-12913)

prefs/zen/glance.yaml

@@ -15,4 +15,7 @@
   value: "alt" # ctrl, alt, shift
 
 - name: zen.glance.animation-duration
-  value: 350 # in milliseconds
+  value: 300 # in milliseconds
+
+- name: zen.glance.deactivate-docshell-during-animation
+  value: true

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 064d39c586c01270545877ee9506ef3befa45a87..9b40bae87c3dd74cb921b5c486be01610c008216 100644
+index 064d39c586c01270545877ee9506ef3befa45a87..9c68eab80f84e5c2e156ded73242a12ca41e767c 100644
 --- a/toolkit/themes/shared/popup.css
 +++ b/toolkit/themes/shared/popup.css
 @@ -23,8 +23,8 @@ panel {
@@ -8,7 +8,7 @@ index 064d39c586c01270545877ee9506ef3befa45a87..9b40bae87c3dd74cb921b5c486be0161
  
 -  --panel-shadow-margin: var(--dimension-4);
 -  --panel-shadow: 0 0 var(--panel-shadow-margin) hsla(0, 0%, 0%, 0.2);
-+  --panel-shadow-margin: 10px;
++  --panel-shadow-margin: 8px;
 +  --panel-shadow: var(--zen-big-shadow);
    -moz-window-input-region-margin: var(--panel-shadow-margin);
    margin: calc(-1 * var(--panel-shadow-margin));

src/zen/common/modules/ZenUIManager.mjs

@@ -1027,7 +1027,8 @@ window.gZenVerticalTabsManager = {
     };
 
     try {
-      const itemSize = aItem.getBoundingClientRect().height;
+      const itemSize =
+        window.windowUtils.getBoundsWithoutFlushing(aItem).height;
       const transform = `-${itemSize}px`;
       gZenUIManager.motion
         .animate(
@@ -1038,7 +1039,7 @@ window.gZenVerticalTabsManager = {
             marginBottom: isLastItem() ? ["0px", "0px"] : [transform, "0px"],
           },
           {
-            duration: 0.1,
+            duration: 0.12,
             easing: "easeOut",
           }
         )
@@ -1061,7 +1062,7 @@ window.gZenVerticalTabsManager = {
             filter: ["blur(1px)", "blur(0px)"],
           },
           {
-            duration: 0.075,
+            duration: 0.1,
             easing: "easeOut",
           }
         )
@@ -1086,7 +1087,7 @@ window.gZenVerticalTabsManager = {
     ) {
       return Promise.resolve();
     }
-    const height = aItem.getBoundingClientRect().height;
+    const height = window.windowUtils.getBoundsWithoutFlushing(aItem).height;
     const visibleItems = gBrowser.tabContainer.ariaFocusableItems;
     const isLastItem = visibleItems[visibleItems.length - 1] === aItem;
     return gZenUIManager.motion.animate(
@@ -1101,7 +1102,7 @@ window.gZenVerticalTabsManager = {
             }),
       },
       {
-        duration: 0.075,
+        duration: 0.1,
         easing: "easeOut",
       }
     );

src/zen/common/styles/zen-popup.css

@@ -36,7 +36,7 @@ menupopup,
 panel {
   --panel-background: var(--arrowpanel-background);
   --menuitem-padding: 6px !important;
-  --panel-shadow-margin: 10px;
+  --panel-shadow-margin: 8px;
 
   /* This should match GetMenuCornerRadius() on macOS, or be overridden below */
   @media (-moz-platform: macos) {

src/zen/common/styles/zen-theme.css

@@ -248,7 +248,7 @@
 
   --panel-separator-color: color-mix(in srgb, currentColor 15%, transparent) !important;
 
-  --zen-big-shadow: 0 0 9.73px 0px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.25));
+  --zen-big-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
   --zen-active-tab-scale: 0.98;
 
   /* Define tab hover background color */

src/zen/glance/ZenGlanceManager.mjs

@@ -438,7 +438,7 @@ class nsZenGlanceManager extends nsZenDOMOperatedFeature {
       parentSidebarContainer,
       {
         scale: [1, 0.98],
-        opacity: [1, 0.4],
+        opacity: [1, 0.3],
       },
       {
         duration: this.#GLANCE_ANIMATION_DURATION,
@@ -581,6 +581,14 @@ class nsZenGlanceManager extends nsZenDOMOperatedFeature {
     }
 
     this.#animateParentBackground();
+    let activeValue = browserElement.zenModeActive;
+    let shouldDeactivateDocShell = Services.prefs.getBoolPref(
+      "zen.glance.deactivate-docshell-during-animation"
+    );
+    if (shouldDeactivateDocShell) {
+      browserElement.zenModeActive = false;
+      browserElement.docShellIsActive = false;
+    }
     gZenUIManager.motion
       .animate(this.browserWrapper, arcSequence, {
         duration: gZenUIManager.testingEnabled
@@ -589,6 +597,10 @@ class nsZenGlanceManager extends nsZenDOMOperatedFeature {
         ease: "easeInOut",
       })
       .then(() => {
+        if (shouldDeactivateDocShell) {
+          browserElement.zenModeActive = activeValue;
+          browserElement.docShellIsActive = true;
+        }
         this.#finalizeGlanceOpening(imageDataElement, browserElement, resolve);
       });
   }
@@ -993,7 +1005,7 @@ class nsZenGlanceManager extends nsZenDOMOperatedFeature {
         browserSidebarContainer,
         {
           scale: [0.98, 1],
-          opacity: [0.4, 1],
+          opacity: [0.3, 1],
         },
         {
           duration: this.#GLANCE_ANIMATION_DURATION / 1.5,

src/zen/glance/zen-glance.css

@@ -113,6 +113,7 @@
   box-shadow: none !important;
   visibility: inherit;
   z-index: 1;
+  overflow: visible !important;
 
   :root[zen-no-padding="true"] & {
     --zen-native-inner-radius: 0px;
@@ -125,8 +126,12 @@
     width: 85%;
     height: 100%;
 
-    &:not([has-finished-animation="true"]) #statuspanel {
-      display: none;
+    &:not([has-finished-animation="true"]) {
+      will-change: width, height, transform;
+
+      #statuspanel {
+        display: none;
+      }
     }
 
     &[has-finished-animation="true"] {
@@ -166,15 +171,18 @@
   pointer-events: none;
   width: 100%;
   height: 100%;
+  max-width: 100%;
+  max-height: 100%;
   z-index: 0;
   border-radius: var(--zen-native-inner-radius);
-  top: 0%;
+  top: 50%;
   left: 50%;
-  translate: -50% 0%;
+  translate: -50% -50%;
   background: rgba(255, 255, 255, 0.1);
 
   & image {
     width: 100%;
     max-width: 100%;
+    max-height: 100%;
   }
 }

src/zen/tabs/zen-tabs/vertical-tabs.css

@@ -313,7 +313,7 @@
     &,
     & .tab-content > image {
       transition:
-        scale 0.07s ease,
+        scale 0.2s ease,
         var(--zen-tabbox-element-indent-transition);
     }
 
@@ -329,12 +329,13 @@
     #tabbrowser-tabs:not([movingtab])
     &:active:not(:has(.tab-content > image:active)) {
       scale: var(--zen-active-tab-scale);
+      rotate: 0.01deg; /* Subtle rotation to trigger GPU acceleration and prevent blurriness */
     }
 
     :root:not([zen-renaming-tab="true"])
     #tabbrowser-tabs:not([movingtab])
     & .tab-content > image:active {
-      scale: 0.92;
+      scale: 0.99;
     }
 
     & .tab-icon-image {
@@ -1069,7 +1070,7 @@
   #tabs-newtab-button {
     max-height: var(--tab-min-height);
     display: flex !important;
-    transition: scale 0.1s ease;
+    transition: scale 0.2s ease;
     #tabbrowser-tabs[movingtab] & {
       transition: transform 0.1s ease;
     }