fix: Correct styling and cleanup after folder unload animation, p=#10795, c=folders

* fix: Correct styling and cleanup after folder unload animation

* fix: Formatting

* fix: Add overflow:clip when animateGroupMove

* fix: Don't reset groupLabel height after drag and drop

* fix: When unloading, don't hide the last tab

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

@@ -1,5 +1,5 @@
 diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
-index 1425607ef87d6c28fb676e722617edfb51ba12a1..8431ed0ab80e1e08fa622633d86e52915a44c9b1 100644
+index 1425607ef87d6c28fb676e722617edfb51ba12a1..97cdeaf7cde41f39d70bd50ac8ca78bec02d253a 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -44,6 +44,9 @@
@@ -600,7 +600,7 @@ index 1425607ef87d6c28fb676e722617edfb51ba12a1..8431ed0ab80e1e08fa622633d86e5291
  
        for (let item of this.ariaFocusableItems) {
          this.#resetGroupTarget(item);
-@@ -3440,7 +3524,7 @@
+@@ -3440,17 +3524,16 @@
          tab.style.left = "";
          tab.style.top = "";
          tab.style.maxWidth = "";
@@ -609,7 +609,9 @@ index 1425607ef87d6c28fb676e722617edfb51ba12a1..8431ed0ab80e1e08fa622633d86e5291
        }
        for (let label of draggedTabDocument.getElementsByClassName(
          "tab-group-label-container"
-@@ -3450,7 +3534,7 @@
+       )) {
+         label.style.width = "";
+-        label.style.height = "";
          label.style.left = "";
          label.style.top = "";
          label.style.maxWidth = "";
@@ -618,7 +620,7 @@ index 1425607ef87d6c28fb676e722617edfb51ba12a1..8431ed0ab80e1e08fa622633d86e5291
        }
        let periphery = draggedTabDocument.getElementById(
          "tabbrowser-arrowscrollbox-periphery"
-@@ -3522,7 +3606,7 @@
+@@ -3522,7 +3605,7 @@
          let postTransitionCleanup = () => {
            movingTab._moveTogetherSelectedTabsData.animate = false;
          };
@@ -627,7 +629,7 @@ index 1425607ef87d6c28fb676e722617edfb51ba12a1..8431ed0ab80e1e08fa622633d86e5291
            postTransitionCleanup();
          } else {
            let onTransitionEnd = transitionendEvent => {
-@@ -3686,7 +3770,7 @@
+@@ -3686,7 +3769,7 @@
      }
  
      _notifyBackgroundTab(aTab) {
@@ -636,7 +638,7 @@ index 1425607ef87d6c28fb676e722617edfb51ba12a1..8431ed0ab80e1e08fa622633d86e5291
          return;
        }
  
-@@ -3795,7 +3879,10 @@
+@@ -3795,7 +3878,10 @@
      #getDragTarget(event, { ignoreSides = false } = {}) {
        let { target } = event;
        while (target) {
@@ -648,7 +650,7 @@ index 1425607ef87d6c28fb676e722617edfb51ba12a1..8431ed0ab80e1e08fa622633d86e5291
            break;
          }
          target = target.parentNode;
-@@ -3812,6 +3899,9 @@
+@@ -3812,6 +3898,9 @@
            return null;
          }
        }

src/zen/folders/ZenFolders.mjs

@@ -1272,7 +1272,7 @@
         splitViewIds,
         activeFoldersIds,
       });
-      const heightUntilSelected = this.#calculateHeightShift(tabsContainer, selectedTabs);
+      const collapsedHeight = this.#calculateHeightShift(tabsContainer, selectedTabs);
 
       if (selectedTabs.length) {
         for (let i = 0; i < groupItems.length; i++) {
@@ -1316,7 +1316,7 @@
         ...this.#createAnimation(
           groupStart,
           {
-            marginTop: -(heightUntilSelected + 4 * (selectedTabs.length === 0 ? 1 : 0)),
+            marginTop: -(collapsedHeight + 4 * (selectedTabs.length === 0 ? 1 : 0)),
           },
           { duration: 0.12, ease: 'easeInOut' }
         )
@@ -1463,14 +1463,20 @@
         const groupItems = this.#normalizeGroupItems(folder.allItems);
         const tabsContainer = folder.querySelector('.tab-group-container');
 
-        this.styleCleanup(groupItems);
+        // Set correct margin-top after animation
+        const afterAnimate = () => {
+          groupStart.style.removeProperty('margin-top');
+          this.styleCleanup(groupItems);
+          // Trigger the recalculation so that zen returns
+          // the correct container size in the DOM
+          tabsContainer.offsetHeight;
+          tabsContainer.setAttribute('hidden', true);
+          const collapsedHeight = this.#calculateHeightShift(tabsContainer, []);
+          groupStart.style.marginTop = `${-(collapsedHeight + 4)}px`;
+        };
 
         const groupStart = folder.querySelector('.zen-tab-group-start');
-
+        const collapsedHeight = this.#calculateHeightShift(tabsContainer, []);
-        // Trigger a reflow
-        tabsContainer.offsetHeight;
-
-        const heightUntilSelected = this.#calculateHeightShift(tabsContainer, []);
 
         // Collect animations for this specific folder becoming inactive
         animations.push(
@@ -1478,9 +1484,10 @@
           ...this.#createAnimation(
             groupStart,
             {
-              marginTop: -(heightUntilSelected + 4),
+              marginTop: -(collapsedHeight + 4),
             },
-            { duration: 0.12, ease: 'easeInOut' }
+            { duration: 0.12, ease: 'easeInOut' },
+            afterAnimate
           )
         );
       }
@@ -1496,26 +1503,33 @@
       if ((!group?.isZenFolder || !isSplitView) && !tabToUnload.hasAttribute('folder-active'))
         return;
       const animations = [];
+      let lastTab = false;
 
       const activeGroups = group.activeGroups;
       for (const folder of activeGroups) {
         folder.activeTabs = folder.activeTabs.filter((tab) => tab !== tabToUnload);
 
         if (folder.activeTabs.length === 0) {
+          lastTab = true;
           animations.push(async () => {
             folder.removeAttribute('has-active');
             const groupItems = this.#normalizeGroupItems(folder.allItems);
             const tabsContainer = folder.querySelector('.tab-group-container');
 
-            this.styleCleanup(groupItems);
+            // Set correct margin-top after animation
+            const afterAnimate = () => {
+              groupStart.style.removeProperty('margin-top');
+              this.styleCleanup(groupItems);
+              // Trigger the recalculation so that zen returns
+              // the correct container size in the DOM
+              tabsContainer.offsetHeight;
+              tabsContainer.setAttribute('hidden', true);
+              const collapsedHeight = this.#calculateHeightShift(tabsContainer, []);
+              groupStart.style.marginTop = `${-(collapsedHeight + 4)}px`;
+            };
 
             const groupStart = folder.querySelector('.zen-tab-group-start');
-
+            const collapsedHeight = this.#calculateHeightShift(tabsContainer, []);
-            // Trigger a reflow
-            tabsContainer.offsetHeight;
-            tabsContainer.setAttribute('hidden', true);
-
-            const heightUntilSelected = this.#calculateHeightShift(tabsContainer, []);
 
             // Collect animations for this specific folder becoming inactive
             const folderAnimation = [
@@ -1523,9 +1537,10 @@
               ...this.#createAnimation(
                 groupStart,
                 {
-                  marginTop: -(heightUntilSelected + 4),
+                  marginTop: -(collapsedHeight + 4),
                 },
-                { duration: 0.12, ease: 'easeInOut' }
+                { duration: 0.12, ease: 'easeInOut' },
+                afterAnimate
               ),
             ];
             await Promise.all(folderAnimation);
@@ -1541,7 +1556,7 @@
       tabToUnload.style.removeProperty('--zen-folder-indent');
 
       let tabUnloadAnimations = [];
-      if (!ungroup) {
+      if (!ungroup && !lastTab) {
         tabUnloadAnimations = this.#createAnimation(
           tabToUnload,
           {
@@ -1701,7 +1716,7 @@
       const groupStart = group.querySelector('.zen-tab-group-start');
       const tabsContainer = group.querySelector('.tab-group-container');
       const heightContainer = expand ? 0 : this.#calculateHeightShift(tabsContainer, []);
-      tabsContainer.style.overflow = expand ? '' : 'clip';
+      tabsContainer.style.overflow = 'clip';
 
       this.#createAnimation(
         groupStart,