feat: Rework panel animations and updated Firefox 147.0.4, b=no-bug, c=split-view, folders, common, compact-mode, kbs, workspaces

src/browser/base/content/zen-panels/folders-search.inc

@@ -2,7 +2,7 @@
 # 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/.
 
-<panel id="zen-folder-tabs-popup" type="arrow" orient="vertical">
+<panel id="zen-folder-tabs-popup" type="arrow" orient="vertical" side="left">
   <hbox class="tabs-list-header" flex="1">
     <image class="zen-folder-tabs-list-search-icon" src="chrome://global/skin/icons/search-glass.svg"/>
     <html:input id="zen-folder-tabs-list-search" 

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 c2618b86d7e8bb71f9f7f71ef9916c8140ca1ead..9e2006015e22f1ac043c46066c4c9a85fe053a21 100644
+index c2618b86d7e8bb71f9f7f71ef9916c8140ca1ead..96a602f9cbfb77ee0a52151ce8ccf7ba17cf5c43 100644
 --- a/toolkit/themes/shared/popup.css
 +++ b/toolkit/themes/shared/popup.css
 @@ -22,8 +22,8 @@ panel {
@@ -13,3 +13,24 @@ index c2618b86d7e8bb71f9f7f71ef9916c8140ca1ead..9e2006015e22f1ac043c46066c4c9a85
    -moz-window-input-region-margin: var(--panel-shadow-margin);
    margin: calc(-1 * var(--panel-shadow-margin));
  
+@@ -143,11 +143,7 @@ panel[type="arrow"] {
+       -moz-window-transform,
+       -moz-window-opacity;
+     @media not (prefers-reduced-motion) {
+-      -moz-window-transform: translateY(-70px);
+-
+-      &:where([side="bottom"]) {
+-        -moz-window-transform: translateY(70px);
+-      }
++      -moz-window-transform: scale(0);
+     }
+     /* Only do the fade-in animation on pre-Big Sur to avoid missing shadows on
+      * Big Sur+, see bug 1672091. */
+@@ -161,7 +157,6 @@ panel[type="arrow"] {
+   }
+ 
+   &[animate="cancel"] {
+-    -moz-window-transform: none;
+     transform: none;
+   }
+ 

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

@@ -4,18 +4,6 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-@keyframes zen-jello-animation-macos {
-  0% {
-    -moz-window-opacity: 0;
-    -moz-window-transform: scale(0.8);
-  }
-
-  100% {
-    -moz-window-opacity: 1;
-    -moz-window-transform: scale(1);
-  }
-}
-
 @keyframes zen-theme-picker-dot-animation {
   from {
     transform: scale(0.8) translate(-50%, -50%);

src/zen/common/styles/zen-panel-ui.css

@@ -9,18 +9,29 @@ panel[type="arrow"] {
       /* Animate from the bottom */
       -zen-window-transform-origin: 0 100%;
     }
+    &[side="left"] {
+      /* Animate from the left and center */
+      -zen-window-transform-origin: 0 50%;
+    }
+    &[side="right"] {
+      /* Animate from the right */
+      -zen-window-transform-origin: 100% 50%;
+    }
     :root[zen-right-side="true"] & {
       /* Animate from the right */
       -zen-window-transform-origin: 100% 0;
-
       &[side="bottom"] {
         /* Animate from the bottom right */
         -zen-window-transform-origin: 100% 100%;
       }
-    }
-    -moz-window-opacity: 0;
-    &[animate="open"] {
-      animation: zen-jello-animation-macos 0.1s ease-out forwards !important;
+      &[side="left"] {
+        /* Animate from the right */
+        -zen-window-transform-origin: 100% 50%;
+      }
+      &[side="right"] {
+        /* Animate from the right */
+        -zen-window-transform-origin: 100% 50%;
+      }
     }
   }
 }

src/zen/common/zen-sets.js

@@ -12,12 +12,12 @@ document.addEventListener(
         case "cmd_zenCompactModeToggle":
           gZenCompactModeManager.toggle();
           break;
-        case "cmd_zenCompactModeShowSidebar":
-          gZenCompactModeManager.toggleSidebar();
-          break;
         case "cmd_toggleCompactModeIgnoreHover":
           gZenCompactModeManager.toggle(true);
           break;
+        case "cmd_zenCompactModeShowSidebar":
+          gZenCompactModeManager.toggleSidebar();
+          break;
         case "cmd_zenWorkspaceForward":
           gZenWorkspaces.changeWorkspaceShortcut();
           break;

src/zen/compact-mode/ZenCompactMode.mjs

@@ -630,6 +630,7 @@ window.gZenCompactModeManager = {
   _setElementExpandAttribute(element, value, attr = "zen-has-hover") {
     const kVerifiedAttributes = ["zen-has-hover", "has-popup-menu", "zen-compact-mode-active"];
     const isToolbar = element.id === "zen-appcontent-navbar-wrapper";
+    this.log("Setting", attr, "to", value, "on element", element?.id);
     if (value) {
       if (attr === "zen-has-hover" && element !== gZenVerticalTabsManager.actualWindowButtons) {
         element.setAttribute("zen-has-implicit-hover", "true");
@@ -666,6 +667,7 @@ window.gZenCompactModeManager = {
 
   addMouseActions() {
     gURLBar.addEventListener("mouseenter", (event) => {
+      this.log("Mouse entered URL bar:", event.target);
       if (event.target.closest("#urlbar[zen-floating-urlbar]")) {
         window.requestAnimationFrame(() => {
           this._setElementExpandAttribute(gZenVerticalTabsManager.actualWindowButtons, false);

src/zen/folders/ZenFolders.mjs

@@ -179,7 +179,7 @@ class nsZenFolders extends nsZenDOMOperatedFeature {
         if (this.#popup.matches(":hover")) {
           return;
         }
-        this.#popup.hidePopup();
+        this.#popup.hidePopup(true);
       }, 200);
     });
   }
@@ -357,7 +357,7 @@ class nsZenFolders extends nsZenDOMOperatedFeature {
       this.#mouseTimer = null;
     }
     if (this.#popup) {
-      this.#popup.hidePopup();
+      this.#popup.hidePopup(true);
     }
   }
 
@@ -729,11 +729,13 @@ class nsZenFolders extends nsZenDOMOperatedFeature {
 
   get #searchPopupOptions() {
     const isRightSide = gZenVerticalTabsManager._prefsRightSide;
-    const position = isRightSide ? "topleft topright" : "topright topleft";
+    const position = isRightSide ? "start_before" : "start_before";
+    let size = this.#popup.querySelector("#zen-folder-tabs-list").children.length + 1;
+    size *= 48;
     return {
       position,
-      x: 10,
-      y: -25,
+      x: -10,
+      y: -size / 4,
     };
   }
 
@@ -958,7 +960,7 @@ class nsZenFolders extends nsZenDOMOperatedFeature {
         if (this.#popup.matches(":hover")) {
           return;
         }
-        this.#popup.hidePopup();
+        this.#popup.hidePopup(true);
       }, 200);
     });
   }

src/zen/kbs/ZenKeyboardShortcuts.mjs

@@ -677,7 +677,7 @@ class nsZenKeyboardShortcutsLoader {
         "",
         ZEN_COMPACT_MODE_SHORTCUTS_GROUP,
         nsKeyShortcutModifiers.fromObject({ accel: true }),
-        "cmd_zenCompactModeToggle",
+        "cmd_toggleCompactModeIgnoreHover",
         "zen-compact-mode-shortcut-toggle"
       )
     );
@@ -812,7 +812,7 @@ class nsZenKeyboardShortcutsLoader {
 }
 
 class nsZenKeyboardShortcutsVersioner {
-  static LATEST_KBS_VERSION = 14;
+  static LATEST_KBS_VERSION = 16;
 
   constructor() {}
 
@@ -1146,6 +1146,17 @@ class nsZenKeyboardShortcutsVersioner {
       }
     }
 
+    if (version < 16) {
+      // Migrate from version 14 to 16.
+      // We move the action for "toggle compact mode" to "cmd_toggleCompactModeIgnoreHover"
+      for (let shortcut of data) {
+        if (shortcut.getID() == "zen-compact-mode-toggle") {
+          shortcut._setAction("cmd_toggleCompactModeIgnoreHover");
+          break;
+        }
+      }
+    }
+
     return data;
   }
 }

src/zen/split-view/ZenViewSplitter.mjs

@@ -641,21 +641,6 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
     }
   }
 
-  get rearangeActionTarget() {
-    return document.getElementById("urlbar-container");
-  }
-
-  afterRearangeAction() {
-    document.getElementById("zenSplitViewModifier").hidePopup();
-    gZenUIManager.showToast("zen-split-view-modifier-enabled-toast", {
-      descriptionId: "zen-split-view-modifier-enabled-toast-description",
-    });
-  }
-
-  afterRearangeRemove() {
-    gZenUIManager.showToast("zen-split-view-modifier-disabled-toast");
-  }
-
   toggleWrapperDisplay(value) {
     const wrapper = this.overlay?.parentNode;
     if (!wrapper) {
@@ -695,9 +680,6 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
 
     this.tabBrowserPanel.addEventListener("click", this.disableTabRearrangeView);
     window.addEventListener("keydown", this.disableTabRearrangeView);
-    if (!tabDrag) {
-      this.afterRearangeAction();
-    }
   }
 
   disableTabRearrangeView = (event = null) => {
@@ -733,10 +715,6 @@ class nsZenViewSplitter extends nsZenDOMOperatedFeature {
     });
     this.rearrangeViewEnabled = false;
     this.rearrangeViewView = null;
-    if (!event?.type === "dragend") {
-      // Don't show toast if exiting from drag
-      this.afterRearangeRemove();
-    }
   };
 
   onBrowserDragStart = (event) => {

src/zen/workspaces/ZenGradientGenerator.mjs

@@ -182,9 +182,10 @@ export class nsZenThemePicker extends nsZenMultiWindowFeature {
       "zen-workspace-creation-edit-theme-button"
     );
     PanelMultiView.openPopup(this.panel, this.toolbox, {
-      position: "topright topleft",
+      position: "start_before",
       triggerEvent: event,
       y: fromForm ? -160 : 0,
+      x: 10,
     });
   }