no-bug: Run less expensive glance animations (gh-12899)

src/zen/common/modules/ZenUIManager.mjs

@@ -1181,6 +1181,9 @@ window.gZenVerticalTabsManager = {
   },
 
   recalculateURLBarHeight(updateFormat = false) {
+    if (gZenWorkspaces._processingResize) {
+      return;
+    }
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
         gURLBar.removeAttribute("--urlbar-height");

src/zen/compact-mode/ZenCompactMode.mjs

@@ -1,4 +1,4 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
+/* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
@@ -349,6 +349,7 @@ window.gZenCompactModeManager = {
     // IF we are animating IN, call the callbacks first so we can calculate the width
     // once the window buttons are shown
     this.updateContextMenu();
+    gZenWorkspaces._processingResize = true;
     if (!this.preference) {
       this.callAllEventListeners();
       await this.animateCompactMode();
@@ -356,6 +357,7 @@ window.gZenCompactModeManager = {
       await this.animateCompactMode();
       this.callAllEventListeners();
     }
+    gZenWorkspaces._processingResize = false;
     if (isUrlbarFocused) {
       gURLBar.focus();
     }
@@ -392,7 +394,9 @@ window.gZenCompactModeManager = {
         "--actual-zen-sidebar-width",
         `${sidebarWidth}px`
       );
-      window.dispatchEvent(new window.Event("resize")); // To recalculate the layout
+      if (!gZenWorkspaces._processingResize) {
+        window.dispatchEvent(new window.Event("resize")); // To recalculate the layout
+      }
       if (
         event &&
         shouldRecalculate &&

src/zen/folders/zen-folders.css

@@ -225,9 +225,7 @@ zen-folder[collapsed] > .tab-group-container {
 /* Tabs popup */
 #zen-folder-tabs-popup {
   --arrowpanel-padding: 0;
-  min-width: 250px;
-  max-width: 400px;
-  width: max-content;
+  width: 250px;
 
   & #zen-folder-tabs-search-no-results {
     height: 100%;
@@ -300,6 +298,7 @@ zen-folder[collapsed] > .tab-group-container {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  width: 250px;
   color: light-dark(black, white);
 }
 

src/zen/glance/ZenGlanceManager.mjs

@@ -461,25 +461,21 @@ class nsZenGlanceManager extends nsZenDOMOperatedFeature {
 
     this.overlay.removeAttribute("fade-out");
     this.browserWrapper.setAttribute("animate", true);
-    this.browserWrapper.style.top = `${top}px`;
-    this.browserWrapper.style.left = `${left}px`;
+    this.browserWrapper.style.transform = `translate(${left - width / 2}px, ${top - height / 2}px)`;
     this.browserWrapper.style.width = `${width}px`;
     this.browserWrapper.style.height = `${height}px`;
 
-    this.#storeOriginalPosition();
+    this.#storeOriginalPosition({ top, left, width, height });
     this.overlay.style.overflow = "visible";
   }
 
   /**
    * Store the original position for later restoration
+   *
+   * @param {object} position - The original position and dimensions of the glance
    */
-  #storeOriginalPosition() {
-    this.#glances.get(this.#currentGlanceID).originalPosition = {
-      top: this.browserWrapper.style.top,
-      left: this.browserWrapper.style.left,
-      width: this.browserWrapper.style.width,
-      height: this.browserWrapper.style.height,
-    };
+  #storeOriginalPosition(position) {
+    this.#glances.get(this.#currentGlanceID).originalPosition = position;
   }
 
   #createGlancePreviewElement(src) {
@@ -653,8 +649,7 @@ class nsZenGlanceManager extends nsZenDOMOperatedFeature {
     );
 
     const sequence = {
-      top: [],
-      left: [],
+      transform: [],
       width: [],
       height: [],
     };
@@ -697,8 +692,9 @@ class nsZenGlanceManager extends nsZenDOMOperatedFeature {
         distanceY * eased +
         arcDirection * arcHeight * (1 - (2 * eased - 1) ** 2);
 
-      sequence.top.push(`${y}px`);
-      sequence.left.push(`${x}px`);
+      sequence.transform.push(
+        `translate(${x - currentWidth / 2}px, ${y - currentHeight / 2}px)`
+      );
       sequence.width.push(`${currentWidth}px`);
       sequence.height.push(`${currentHeight}px`);
     }
@@ -1316,7 +1312,6 @@ class nsZenGlanceManager extends nsZenDOMOperatedFeature {
     }
 
     this.#currentBrowser.removeAttribute("zen-glance-selected");
-    this.overlay.classList.remove("zen-glance-overlay");
   }
 
   /**
@@ -1721,7 +1716,14 @@ class nsZenGlanceManager extends nsZenDOMOperatedFeature {
     this.#handleZenFolderPinningForSplit(currentParentTab);
     await this.fullyOpenGlance({ forSplit: true });
 
-    gZenViewSplitter.splitTabs([currentTab, currentParentTab], "vsep", 1);
+    const isRightSidebar = gZenVerticalTabsManager._prefsRightSide;
+    gZenViewSplitter.splitTabs(
+      isRightSidebar
+        ? [currentTab, currentParentTab]
+        : [currentParentTab, currentTab],
+      "vsep",
+      isRightSidebar ? 0 : 1
+    );
 
     const browserContainer = currentTab.linkedBrowser?.closest(
       ".browserSidebarContainer"

src/zen/glance/zen-glance.css

@@ -96,6 +96,12 @@
 
 .browserSidebarContainer.zen-glance-background {
   box-shadow: var(--zen-big-shadow);
+
+  & .browserContainer {
+    /* For rounding the corners of the content to work while
+     * applying a transformation to the container. */
+    will-change: transform;
+  }
 }
 
 .browserSidebarContainer.zen-glance-background,
@@ -115,8 +121,6 @@
   & .browserContainer {
     transform: translate(-50%, -50%);
     position: fixed;
-    top: 0;
-    left: 0;
     flex: unset !important;
     width: 85%;
     height: 100%;
@@ -130,8 +134,6 @@
       transition: 0s !important;
       transform: none !important;
       margin: auto !important;
-      top: 0 !important;
-      left: 0 !important;
     }
 
     & .browserStack {