feat: Start animating folder closes, b=no-bug, c=common

.nvmrc

@@ -1 +1 @@
-20
+22

src/browser/components/tabbrowser/content/tabbrowser-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabbrowser.js b/browser/components/tabbrowser/content/tabbrowser.js
-index d7765e0adb37216d35f2125abf96025cbb150bab..27202066cef98d9826884806f71e70812457bd78 100644
+index d7765e0adb37216d35f2125abf96025cbb150bab..4913c2e6cfb4f77bd8f2c0f33310c27475172132 100644
 --- a/browser/components/tabbrowser/content/tabbrowser.js
 +++ b/browser/components/tabbrowser/content/tabbrowser.js
 @@ -405,6 +405,7 @@
@@ -605,7 +605,7 @@ index d7765e0adb37216d35f2125abf96025cbb150bab..27202066cef98d9826884806f71e7081
          aTab._closeTimeAnimTimerId = null;
 -        this._endRemoveTab(aTab);
 +        if (animate && !gReduceMotion && !(gZenUIManager.testingEnabled && !gZenUIManager.profilingEnabled)) {
-+          gZenVerticalTabsManager.animateTabClose(aTab, (animate && !gReduceMotion)).then(() => {
++          gZenVerticalTabsManager.animateItemClose(aTab, (animate && !gReduceMotion)).then(() => {
 +            this._endRemoveTab(aTab);
 +          });
 +        } else {

src/browser/components/tabbrowser/content/tabgroup-js.patch

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabgroup.js b/browser/components/tabbrowser/content/tabgroup.js
-index ebcc072abca51ba9936d0e6d97bbd329427c0231..62e8209bbc38fb209340279e5ed3e2cc2441c48c 100644
+index ebcc072abca51ba9936d0e6d97bbd329427c0231..2b0980a745e2339d3220bb701092f4f621876985 100644
 --- a/browser/components/tabbrowser/content/tabgroup.js
 +++ b/browser/components/tabbrowser/content/tabgroup.js
 @@ -14,11 +14,11 @@
@@ -100,7 +100,17 @@ index ebcc072abca51ba9936d0e6d97bbd329427c0231..62e8209bbc38fb209340279e5ed3e2cc
  
      resetDefaultGroupName = () => {
        this.#defaultGroupName = "";
-@@ -211,7 +234,10 @@
+@@ -166,7 +189,9 @@
+             this.dispatchEvent(
+               new CustomEvent("TabGroupRemoved", { bubbles: true })
+             );
++          gZenVerticalTabsManager.animateItemClose(this).then(() => {
+             this.remove();
++          });
+             Services.obs.notifyObservers(
+               this,
+               "browser-tabgroup-removed-from-dom"
+@@ -211,7 +236,10 @@
            }
          });
        }
@@ -112,7 +122,7 @@ index ebcc072abca51ba9936d0e6d97bbd329427c0231..62e8209bbc38fb209340279e5ed3e2cc
      }
  
      get color() {
-@@ -305,6 +331,9 @@
+@@ -305,6 +333,9 @@
      }
  
      set collapsed(val) {
@@ -122,7 +132,7 @@ index ebcc072abca51ba9936d0e6d97bbd329427c0231..62e8209bbc38fb209340279e5ed3e2cc
        if (!!val == this.collapsed) {
          return;
        }
-@@ -391,7 +420,6 @@
+@@ -391,7 +422,6 @@
            tabGroupName,
          })
          .then(result => {
@@ -130,7 +140,7 @@ index ebcc072abca51ba9936d0e6d97bbd329427c0231..62e8209bbc38fb209340279e5ed3e2cc
          });
      }
  
-@@ -466,13 +494,65 @@
+@@ -466,13 +496,65 @@
       * @returns {MozTabbrowserTab[]}
       */
      get tabs() {
@@ -145,9 +155,8 @@ index ebcc072abca51ba9936d0e6d97bbd329427c0231..62e8209bbc38fb209340279e5ed3e2cc
 +        tabsCollect.push(item);
 +        if (gBrowser.isTabGroup(item)) {
 +          tabsCollect.push(...item.tabs);
-         }
++        }
-       }
++      }
--      return childrenArray.filter(node => node.matches("tab"));
 +      return tabsCollect.filter(node => node.matches("tab"));
 +    }
 +
@@ -173,8 +182,9 @@ index ebcc072abca51ba9936d0e6d97bbd329427c0231..62e8209bbc38fb209340279e5ed3e2cc
 +            result.push(labelContainer);
 +          }
 +          result.push(...item.childGroupsAndTabs);
-+        }
+         }
-+      }
+       }
+-      return childrenArray.filter(node => node.matches("tab"));
 +      return result;
 +    }
 +
@@ -201,7 +211,7 @@ index ebcc072abca51ba9936d0e6d97bbd329427c0231..62e8209bbc38fb209340279e5ed3e2cc
      }
  
      /**
-@@ -569,7 +649,6 @@
+@@ -569,7 +651,6 @@
            );
          } else {
            if (tabOrSplitView.pinned) {
@@ -209,7 +219,7 @@ index ebcc072abca51ba9936d0e6d97bbd329427c0231..62e8209bbc38fb209340279e5ed3e2cc
            }
            let tabToMove =
              this.ownerGlobal === tabOrSplitView.ownerGlobal
-@@ -634,7 +713,7 @@
+@@ -634,7 +715,7 @@
       */
      on_click(event) {
        let isToggleElement =
@@ -218,7 +228,7 @@ index ebcc072abca51ba9936d0e6d97bbd329427c0231..62e8209bbc38fb209340279e5ed3e2cc
          event.target === this.#overflowCountLabel;
        if (isToggleElement && event.button === 0) {
          event.preventDefault();
-@@ -705,5 +784,6 @@
+@@ -705,5 +786,6 @@
      }
    }
  

src/zen/common/modules/ZenUIManager.mjs

@@ -929,15 +929,20 @@ window.gZenVerticalTabsManager = {
     }
   },
 
-  animateTabClose(aTab) {
+  animateItemClose(aItem) {
-    if (aTab.hasAttribute("zen-essential") || aTab.group?.hasAttribute("split-view-group")) {
+    if (
+      aItem.hasAttribute("zen-essential") ||
+      aItem.group?.hasAttribute("split-view-group") ||
+      !gZenUIManager.motion ||
+      gReduceMotion
+    ) {
       return Promise.resolve();
     }
-    const height = aTab.getBoundingClientRect().height;
+    const height = aItem.getBoundingClientRect().height;
     const visibleItems = gBrowser.tabContainer.ariaFocusableItems;
-    const isLastItem = visibleItems[visibleItems.length - 1] === aTab;
+    const isLastItem = visibleItems[visibleItems.length - 1] === aItem;
     return gZenUIManager.motion.animate(
-      aTab,
+      aItem,
       {
         opacity: [1, 0],
         transform: ["scale(1)", "scale(0.95)"],