feat: Improve glance animation, p=#10790, c=glance

package-lock.json

@@ -21,7 +21,7 @@
         "eslint-plugin-import": "^2.32.0",
         "eslint-plugin-json": "^4.0.1",
         "eslint-plugin-react-hooks": "^5.2.0",
-        "formal-git": "^1.2.6",
+        "formal-git": "^1.2.8",
         "globals": "^16.3.0",
         "husky": "^9.1.7",
         "lint-staged": "^15.3.0",
@@ -3379,9 +3379,9 @@
       }
     },
     "node_modules/formal-git": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/formal-git/-/formal-git-1.2.6.tgz",
-      "integrity": "sha512-/sCZIEpGP5sGx1r8zJStXHmuZQxTdnyB5Mrq7I2BZhAMEP6TOvqopP0uzYCLjWhE2Z4QrFcxeTzsyHAENZaCzQ==",
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/formal-git/-/formal-git-1.2.8.tgz",
+      "integrity": "sha512-ZGJbnKs4ANaxq3Dr3znRwZTdxP+F1AfEzkiEjCGBIf31xDcJ8StLWPI87/H/8KY801NWw9dc6qoraZzTSH5IyA==",
       "dev": true,
       "license": "ISC",
       "bin": {

package.json

@@ -61,7 +61,7 @@
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-json": "^4.0.1",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "formal-git": "^1.2.6",
+    "formal-git": "^1.2.8",
     "globals": "^16.3.0",
     "husky": "^9.1.7",
     "lint-staged": "^15.3.0",

src/browser/themes/shared/zen-icons/icons.css

@@ -105,6 +105,14 @@
 
 #nav-bar-overflow-button {
   list-style-image: url('chevron.svg') !important;
+
+  /* On macos, we don't display the app menu, meaning
+   * we can re-use the menu icon for the overflow button.
+   * Which is more intuitive for users and looks better.
+   */
+  @media (-moz-platform: macos) {
+    list-style-image: url('menu.svg') !important;
+  }
 }
 
 #zen-rice-share-options .options-header,
@@ -411,7 +419,6 @@
   list-style-image: url('arrow-left.svg') !important;
 }
 
-#overflowMenu-customize-button,
 #appmenu-moreTools-button {
   list-style-image: url('customize.svg') !important;
 }

src/zen/common/ZenUIManager.mjs

@@ -58,6 +58,8 @@ var gZenUIManager = {
       this.onUrlbarSearchModeChanged.bind(this)
     );
 
+    document.getElementById('stop-reload-button').removeAttribute('overflows');
+
     gZenMediaController.init();
     gZenVerticalTabsManager.init();
 

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

@@ -176,10 +176,6 @@ panel {
   opacity: 0.7;
 }
 
-#widget-overflow-mainView .panel-subview-body {
-  padding-bottom: 0;
-}
-
 .PanelUI-subView > .panel-header + toolbarseparator {
   margin-bottom: 0;
 }

src/zen/common/styles/zen-single-components.css

@@ -171,15 +171,10 @@ body > #confetti {
 }
 
 .toolbarbutton-1:not(#tabs-newtab-button) {
-  :root:is([zen-single-toolbar='true'], :not([zen-sidebar-expanded='true']))
-    #zen-sidebar-top-buttons-customization-target
-    &,
-  #zen-sidebar-foot-buttons & {
-    --tab-border-radius: 6px;
-    --toolbarbutton-border-radius: var(--tab-border-radius);
-    --toolbarbutton-inner-padding: 7px;
-    --toolbarbutton-outer-padding: 2px;
-  }
+  --tab-border-radius: 6px;
+  --toolbarbutton-border-radius: var(--tab-border-radius);
+  --toolbarbutton-inner-padding: 7px;
+  --toolbarbutton-outer-padding: 2px;
 
   transition:
     background-color 0.1s,
@@ -534,3 +529,25 @@ body > #confetti {
     }
   }
 }
+
+/* Overflow panel */
+#widget-overflow-mainView {
+  --menu-panel-width-wide: 200px;
+
+  & toolbarbutton {
+    scale: 1 !important;
+  }
+
+  & .panel-subview-body {
+    padding: var(--panel-subview-body-padding) !important;
+  }
+}
+
+#widget-overflow-mainView > toolbarseparator,
+#overflowMenu-customize-button {
+  display: none;
+}
+
+#widget-overflow-list {
+  flex-direction: column-reverse;
+}

src/zen/glance/ZenGlanceManager.mjs

@@ -383,8 +383,9 @@
       const imageDataElement = document.createXULElement('image');
       imageDataElement.setAttribute('src', data.elementData);
       imageDataElement.classList.add('zen-glance-element-preview');
-      imageDataElement.style.width = `${data.width}px`;
-      imageDataElement.style.height = `${data.height}px`;
+
+      // set an aspect ratio to prevent stretching during animation
+      imageDataElement.style.aspectRatio = `${data.width} / ${data.height}`;
 
       this.browserWrapper.prepend(imageDataElement);
       this.#glances.get(this.#currentGlanceID).elementImageData = data.elementData;
@@ -392,7 +393,7 @@
       gZenUIManager.motion.animate(
         imageDataElement,
         {
-          scale: [1, 3],
+          opacity: [1, 0],
         },
         {
           duration: 0.3,
@@ -572,12 +573,12 @@
       }
 
       let scale = 1;
-      const bounceSteps = 40;
+      const bounceSteps = 50;
       if (direction === 'opening') {
         for (let i = 0; i < bounceSteps; i++) {
           const progress = i / bounceSteps;
           // Scale up slightly then back to normal
-          scale = 1 + 0.006 * Math.sin(progress * Math.PI);
+          scale = 1 + 0.004 * Math.sin(progress * Math.PI);
           // If we are at the last step, ensure scale is exactly 1
           if (i === bounceSteps - 1) {
             scale = 1;
@@ -910,21 +911,11 @@
         const imageDataElement = document.createXULElement('image');
         imageDataElement.setAttribute('src', elementImageData);
         imageDataElement.classList.add('zen-glance-element-preview');
-        imageDataElement.style.width = rect.width;
-        imageDataElement.style.height = rect.height;
-        this.browserWrapper.prepend(imageDataElement);
 
-        gZenUIManager.motion.animate(
-          imageDataElement,
-          {
-            scale: [3, 1],
-          },
-          {
-            duration: 0.3,
-            easing: 'easeInOut',
-            bounce: 0,
-          }
-        );
+        // set an aspect ratio to prevent stretching during animation
+        imageDataElement.style.aspectRatio = `${parseFloat(rect.width)} / ${parseFloat(rect.height)}`;
+
+        this.browserWrapper.prepend(imageDataElement);
       }
     }
 

src/zen/glance/zen-glance.css

@@ -176,5 +176,5 @@
   border-radius: var(--zen-native-inner-radius);
   inset: 50%;
   translate: -50% -50%;
-  will-change: transform;
+  will-change: transform, opacity;
 }