refactor: Reimplement folder animation logic (#10361)

* refactor: Reimplement folder animation logic

* fix: Tab indent in has-active folder

* fix: Enhance grouping/ungrouping stability and visual consistency

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 c0cb11590d6dfbcf6fa49ef5e10c6d3877191d1f..503e97a4ec87625b154627aa5839fb4f8d050f86 100644
+index c0cb11590d6dfbcf6fa49ef5e10c6d3877191d1f..cd98bd2401e4618b003c184108e8532174e2a7cf 100644
 --- a/browser/components/tabbrowser/content/tabgroup.js
 +++ b/browser/components/tabbrowser/content/tabgroup.js
 @@ -13,10 +13,12 @@
@@ -18,10 +18,18 @@ index c0cb11590d6dfbcf6fa49ef5e10c6d3877191d1f..503e97a4ec87625b154627aa5839fb4f
        <vbox class="tab-group-overflow-count-container" pack="center">
          <label class="tab-group-overflow-count" role="button" />
        </vbox>
-@@ -57,20 +59,28 @@
+@@ -57,20 +59,36 @@
      }
  
      connectedCallback() {
++      if (this._lastGroup && this._lastGroup !== this.group) {
++        this._lastGroup.dispatchEvent(
++          new CustomEvent("FolderUngrouped", {
++            bubbles: true,
++            detail: this,
++          })
++        );
++      }
 +      if (this.group && this._lastGroup != this.group) {
 +        this._lastGroup = this.group;
 +        this.group.dispatchEvent(
@@ -51,7 +59,7 @@ index c0cb11590d6dfbcf6fa49ef5e10c6d3877191d1f..503e97a4ec87625b154627aa5839fb4f
  
        this._initialized = true;
        this.saveOnWindowClose = true;
-@@ -99,11 +109,14 @@
+@@ -99,11 +117,14 @@
  
        this.#labelElement.addEventListener("mouseover", this);
        this.#labelElement.addEventListener("mouseout", this);
@@ -71,7 +79,7 @@ index c0cb11590d6dfbcf6fa49ef5e10c6d3877191d1f..503e97a4ec87625b154627aa5839fb4f
  
        this.#updateLabelAriaAttributes();
        this.#updateCollapsedAriaAttributes();
-@@ -129,6 +142,8 @@
+@@ -129,6 +150,8 @@
        // mounts after getting created by `Tabbrowser.adoptTabGroup`.
        this.#wasCreatedByAdoption = false;
      }
@@ -80,7 +88,7 @@ index c0cb11590d6dfbcf6fa49ef5e10c6d3877191d1f..503e97a4ec87625b154627aa5839fb4f
  
      resetDefaultGroupName = () => {
        this.#defaultGroupName = "";
-@@ -213,7 +228,10 @@
+@@ -213,7 +236,10 @@
            }
          });
        }
@@ -92,7 +100,7 @@ index c0cb11590d6dfbcf6fa49ef5e10c6d3877191d1f..503e97a4ec87625b154627aa5839fb4f
      }
  
      get color() {
-@@ -307,6 +325,9 @@
+@@ -307,6 +333,9 @@
      }
  
      set collapsed(val) {
@@ -102,7 +110,7 @@ index c0cb11590d6dfbcf6fa49ef5e10c6d3877191d1f..503e97a4ec87625b154627aa5839fb4f
        if (!!val == this.collapsed) {
          return;
        }
-@@ -364,7 +385,6 @@
+@@ -364,7 +393,6 @@
            tabGroupName,
          })
          .then(result => {
@@ -110,7 +118,7 @@ index c0cb11590d6dfbcf6fa49ef5e10c6d3877191d1f..503e97a4ec87625b154627aa5839fb4f
          });
      }
  
-@@ -383,7 +403,57 @@
+@@ -383,7 +411,57 @@
       * @returns {MozTabbrowserTab[]}
       */
      get tabs() {
@@ -169,7 +177,7 @@ index c0cb11590d6dfbcf6fa49ef5e10c6d3877191d1f..503e97a4ec87625b154627aa5839fb4f
      }
  
      /**
-@@ -442,7 +512,6 @@
+@@ -442,7 +520,6 @@
      addTabs(tabs, metricsContext) {
        for (let tab of tabs) {
          if (tab.pinned) {
@@ -177,7 +185,7 @@ index c0cb11590d6dfbcf6fa49ef5e10c6d3877191d1f..503e97a4ec87625b154627aa5839fb4f
          }
          let tabToMove =
            this.ownerGlobal === tab.ownerGlobal
-@@ -505,7 +574,7 @@
+@@ -505,7 +582,7 @@
       */
      on_click(event) {
        let isToggleElement =
@@ -186,7 +194,7 @@ index c0cb11590d6dfbcf6fa49ef5e10c6d3877191d1f..503e97a4ec87625b154627aa5839fb4f
          event.target === this.#overflowCountLabel;
        if (isToggleElement && event.button === 0) {
          event.preventDefault();
-@@ -570,5 +639,6 @@
+@@ -570,5 +647,6 @@
      }
    }