fix: Fixed wrong shift size for folders, b=no-bug, c=folders

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 e47f735e4e4563c9b7537944628418d1478c068d..ca542ede66aed5bcd6ecfc5c3d5fce164f06b427 100644
+index e47f735e4e4563c9b7537944628418d1478c068d..b6d52ef3179d66ecd7f06fd61a6bca6d075b9cf7 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -332,7 +332,7 @@
@@ -341,15 +341,24 @@ index e47f735e4e4563c9b7537944628418d1478c068d..ca542ede66aed5bcd6ecfc5c3d5fce16
        selectedTab._notselectedsinceload = false;
      }
  
-@@ -2152,6 +2208,7 @@
+@@ -2152,6 +2208,16 @@
        when the tab is first selected to be dragged.
      */
      #updateTabStylesOnDrag(tab) {
++      let { movingTabs: zenMovingTabs } = tab._dragData;
++      for (let movingTab of zenMovingTabs.slice(zenMovingTabs.findIndex(t => t._tPos == tab._tPos))) {
++        if (isTabGroupLabel(tab)) {
++          movingTab = movingTab.parentElement;
++        }
++        // "dragtarget" contains the following rules which must only be set AFTER the above
++        // elements have been adjusted. {z-index: 3 !important, position: absolute !important}
++        movingTab.setAttribute("zen-dragtarget", "");
++      }
 +      return;
        let isPinned = tab.pinned;
        let numPinned = gBrowser.pinnedTabCount;
        let allTabs = this.ariaFocusableItems;
-@@ -2385,7 +2442,7 @@
+@@ -2385,7 +2451,7 @@
          return;
        }
  
@@ -358,7 +367,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..ca542ede66aed5bcd6ecfc5c3d5fce16
  
        let directionX = screenX > dragData.animLastScreenX;
        let directionY = screenY > dragData.animLastScreenY;
-@@ -2394,6 +2451,8 @@
+@@ -2394,6 +2460,8 @@
  
        let { width: tabWidth, height: tabHeight } =
          draggedTab.getBoundingClientRect();
@@ -367,7 +376,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..ca542ede66aed5bcd6ecfc5c3d5fce16
        let shiftSizeX = tabWidth * movingTabs.length;
        let shiftSizeY = tabHeight;
        dragData.tabWidth = tabWidth;
-@@ -2430,8 +2489,8 @@
+@@ -2430,8 +2498,8 @@
        let lastBoundX =
          lastTabInRow.screenX +
          lastTabInRow.getBoundingClientRect().width -
@@ -378,7 +387,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..ca542ede66aed5bcd6ecfc5c3d5fce16
        translateX = Math.min(Math.max(translateX, firstBoundX), lastBoundX);
        translateY = Math.min(Math.max(translateY, firstBoundY), lastBoundY);
  
-@@ -2547,7 +2606,7 @@
+@@ -2547,7 +2615,7 @@
        }
  
        dragData.animDropElementIndex = newIndex;
@@ -387,7 +396,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..ca542ede66aed5bcd6ecfc5c3d5fce16
        dragData.dropBefore = newIndex < tabs.length;
  
        // Shift background tabs to leave a gap where the dragged tab
-@@ -2580,13 +2639,18 @@
+@@ -2580,13 +2648,18 @@
  
        this.#clearDragOverCreateGroupTimer();
  
@@ -410,7 +419,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..ca542ede66aed5bcd6ecfc5c3d5fce16
  
        if (this.#rtlMode) {
          tabs.reverse();
-@@ -2597,7 +2661,7 @@
+@@ -2597,7 +2670,7 @@
        let screenAxis = this.verticalMode ? "screenY" : "screenX";
        let size = this.verticalMode ? "height" : "width";
        let translateAxis = this.verticalMode ? "translateY" : "translateX";
@@ -419,7 +428,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..ca542ede66aed5bcd6ecfc5c3d5fce16
        let translateX = event.screenX - dragData.screenX;
        let translateY = event.screenY - dragData.screenY;
  
-@@ -2607,10 +2671,16 @@
+@@ -2607,10 +2680,16 @@
        dragData.translateY = translateY;
  
        // Move the dragged tab based on the mouse position.
@@ -438,7 +447,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..ca542ede66aed5bcd6ecfc5c3d5fce16
        let endEdge = ele => ele[screenAxis] + bounds(ele)[size];
        let lastMovingTabScreen = endEdge(lastMovingTab);
        let firstMovingTabScreen = firstMovingTab[screenAxis];
-@@ -2619,6 +2689,7 @@
+@@ -2619,6 +2698,7 @@
        // Constrain the range over which the moving tabs can move between the first and last tab
        let firstBound = firstTab[screenAxis] - firstMovingTabScreen;
        let lastBound = endEdge(lastTab) - lastMovingTabScreen;
@@ -446,7 +455,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..ca542ede66aed5bcd6ecfc5c3d5fce16
  
        // Center the tab under the cursor if the tab is not under the cursor while dragging
        if (
-@@ -2636,6 +2707,9 @@
+@@ -2636,6 +2716,9 @@
            // Shift the `.tab-group-label-container` to shift the label element.
            item = item.parentElement;
          }
@@ -456,7 +465,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..ca542ede66aed5bcd6ecfc5c3d5fce16
          item.style.transform = `${translateAxis}(${translate}px)`;
        }
  
-@@ -2773,6 +2847,9 @@
+@@ -2773,6 +2856,9 @@
              break;
            }
            let element = tabs[mid];
@@ -466,7 +475,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..ca542ede66aed5bcd6ecfc5c3d5fce16
            let elementForSize = isTabGroupLabel(element)
              ? element.parentElement
              : element;
-@@ -2792,6 +2869,8 @@
+@@ -2792,6 +2878,8 @@
        };
  
        let dropElement = getOverlappedElement();
@@ -475,7 +484,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..ca542ede66aed5bcd6ecfc5c3d5fce16
  
        let newDropElementIndex;
        if (dropElement) {
-@@ -2856,7 +2935,10 @@
+@@ -2856,7 +2944,10 @@
        let shouldCreateGroupOnDrop;
        let dropBefore;
        if (dropElement) {
@@ -487,7 +496,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..ca542ede66aed5bcd6ecfc5c3d5fce16
            ? dropElement.parentElement
            : dropElement;
  
-@@ -2876,7 +2958,7 @@
+@@ -2876,7 +2967,7 @@
            ? Services.prefs.getIntPref(
                "browser.tabs.dragDrop.moveOverThresholdPercent"
              ) / 100
@@ -496,7 +505,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..ca542ede66aed5bcd6ecfc5c3d5fce16
          moveOverThreshold = Math.min(1, Math.max(0, moveOverThreshold));
          let shouldMoveOver = overlapPercent > moveOverThreshold;
          if (logicalForward && shouldMoveOver) {
-@@ -2908,44 +2990,21 @@
+@@ -2908,44 +2999,21 @@
  
          // If dragging a group over another group, don't make it look like it is
          // possible to drop the dragged group inside the other group.
@@ -546,7 +555,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..ca542ede66aed5bcd6ecfc5c3d5fce16
          // When dragging tab(s) over an ungrouped tab, signal to the user
          // that dropping the tab(s) will create a new tab group.
          shouldCreateGroupOnDrop =
-@@ -2955,12 +3014,6 @@
+@@ -2955,12 +3023,6 @@
            overlapPercent > dragOverGroupingThreshold;
  
          if (shouldCreateGroupOnDrop) {
@@ -559,7 +568,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..ca542ede66aed5bcd6ecfc5c3d5fce16
          } else {
            this.removeAttribute("movingtab-createGroup");
            document
-@@ -2987,19 +3040,14 @@
+@@ -2987,19 +3049,14 @@
              dropElement = dropElementGroup;
              colorCode = undefined;
            } else if (isTabGroupLabel(dropElement)) {
@@ -587,7 +596,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..ca542ede66aed5bcd6ecfc5c3d5fce16
            }
            this.#setDragOverGroupColor(colorCode);
            this.toggleAttribute("movingtab-ungroup", !colorCode);
-@@ -3017,19 +3065,28 @@
+@@ -3017,19 +3074,28 @@
        dragData.dropElement = dropElement;
        dragData.dropBefore = dropBefore;
        dragData.animDropElementIndex = newDropElementIndex;
@@ -618,7 +627,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..ca542ede66aed5bcd6ecfc5c3d5fce16
          }
          item.style.transform = transform;
        }
-@@ -3082,12 +3139,14 @@
+@@ -3082,12 +3148,14 @@
        );
      }
  
@@ -635,7 +644,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..ca542ede66aed5bcd6ecfc5c3d5fce16
  
        for (let item of this.ariaFocusableItems) {
          if (isTabGroupLabel(item)) {
-@@ -3095,6 +3154,18 @@
+@@ -3095,6 +3163,18 @@
            item = item.parentElement;
          }
          item.style.transform = "";
@@ -654,15 +663,26 @@ index e47f735e4e4563c9b7537944628418d1478c068d..ca542ede66aed5bcd6ecfc5c3d5fce16
          item.removeAttribute("dragover-createGroup");
        }
        this.removeAttribute("movingtab-createGroup");
-@@ -3122,7 +3193,6 @@
+@@ -3116,16 +3196,15 @@
+         tab.style.left = "";
+         tab.style.top = "";
+         tab.style.maxWidth = "";
+-        tab.removeAttribute("dragtarget");
++        tab.removeAttribute("zen-dragtarget");
+       }
+       for (let label of draggedTabDocument.getElementsByClassName(
          "tab-group-label-container"
        )) {
          label.style.width = "";
 -        label.style.height = "";
          label.style.left = "";
          label.style.top = "";
-         label.removeAttribute("dragtarget");
-@@ -3198,7 +3268,7 @@
+-        label.removeAttribute("dragtarget");
++        label.removeAttribute("zen-dragtarget");
+       }
+       let periphery = draggedTabDocument.getElementById(
+         "tabbrowser-arrowscrollbox-periphery"
+@@ -3198,7 +3277,7 @@
          let postTransitionCleanup = () => {
            movingTab._moveTogetherSelectedTabsData.animate = false;
          };
@@ -671,7 +691,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..ca542ede66aed5bcd6ecfc5c3d5fce16
            postTransitionCleanup();
          } else {
            let onTransitionEnd = transitionendEvent => {
-@@ -3371,7 +3441,7 @@
+@@ -3371,7 +3450,7 @@
      }
  
      _notifyBackgroundTab(aTab) {
@@ -680,7 +700,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..ca542ede66aed5bcd6ecfc5c3d5fce16
          return;
        }
  
-@@ -3480,7 +3550,10 @@
+@@ -3480,7 +3559,10 @@
      #getDragTarget(event, { ignoreSides = false } = {}) {
        let { target } = event;
        while (target) {
@@ -692,7 +712,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..ca542ede66aed5bcd6ecfc5c3d5fce16
            break;
          }
          target = target.parentNode;
-@@ -3497,6 +3570,9 @@
+@@ -3497,6 +3579,9 @@
            return null;
          }
        }

src/zen/folders/ZenFolder.mjs

@@ -238,9 +238,9 @@
       this.#unloadAllActiveTabs(event, /* noClose */ true);
     }
 
-    #unloadAllActiveTabs(event, noClose = false) {
+    async #unloadAllActiveTabs(event, noClose = false) {
       for (const tab of this.tabs) {
-        gZenPinnedTabManager._onCloseTabShortcut(event, tab, { noClose });
+        await gZenPinnedTabManager._onCloseTabShortcut(event, tab, { noClose });
       }
       this.activeTabs = [];
     }

src/zen/folders/ZenFolders.mjs

@@ -1223,13 +1223,15 @@
 
     collapseVisibleTab(group, onlyIfActive = false, selectedTab = null) {
       let tabsToCollapse = [selectedTab];
-      if (group?.hasAttribute('split-view-group')) {
+      if (group?.hasAttribute('split-view-group') && selectedTab && onlyIfActive) {
         tabsToCollapse = group.tabs;
         group = group.group;
       }
       if (!group?.isZenFolder) return;
 
-      selectedTab.style.removeProperty('--zen-folder-indent');
+      if (selectedTab) {
+        selectedTab.style.removeProperty('--zen-folder-indent');
+      }
       // We ignore if the flag is set to avoid infinite recursion
       if (onlyIfActive && group.activeGroups.length && selectedTab) {
         onlyIfActive = true;

src/zen/folders/zen-folders.css

@@ -154,11 +154,11 @@ tab-group[split-view-group] .tabbrowser-tab {
 
 tab-group[split-view-group] .tab-group-label-container {
   position: absolute;
-  width: 100%;
-  height: 40px;
+  width: -moz-available;
+  height: 36px;
   visibility: hidden;
   padding: 0 !important;
-  margin: 0 !important;
+  margin: 2px 0 0 0 !important;
 }
 
 tab-group[split-view-group] .tab-close-button {
@@ -319,10 +319,10 @@ zen-folder {
       color: var(--sidebar-text-color) !important;
       margin: 0 !important;
       font-weight: 600;
-      display: flex;
-      align-items: center;
-      height: 100% !important;
+      align-self: center !important;
       text-align: start;
+      align-content: center;
+      height: 100% !important;
 
       :root:not([zen-sidebar-expanded]) & {
         padding: 0 !important;

src/zen/tabs/ZenPinnedTabManager.mjs

@@ -442,7 +442,7 @@
         group.collapsed,
         workspaceId,
         group.getAttribute('zen-pin-id'),
-        group.labelElement.elementIndex
+        group._pPos
       );
       group.setAttribute('zen-pin-id', id);
       await this.refreshPinnedTabs();
@@ -457,7 +457,7 @@
       const pinId = group.getAttribute('zen-pin-id');
       const tabPinId = tab.getAttribute('zen-pin-id');
       const tabPin = this._pinsCache?.find((p) => p.uuid === tabPinId);
-      if (!tabPin) {
+      if (!tabPin || !tabPin.group) {
         return;
       }
       ZenPinnedTabsStorage.addTabToGroup(tabPinId, pinId, /* position */ tab._pPos);
@@ -487,7 +487,7 @@
         groupPin.title = group.name;
         groupPin.folderIcon = group.iconURL;
         groupPin.isFolderCollapsed = group.collapsed;
-        groupPin.position = group.labelElement.elementIndex;
+        groupPin.position = group._pPos;
         groupPin.parentUuid = group.group?.getAttribute('zen-pin-id') || null;
         groupPin.workspaceUuid = group.getAttribute('zen-workspace-id') || null;
         await this.savePin(groupPin);
@@ -515,7 +515,7 @@
       if (!group.isZenFolder) {
         return;
       }
-      const newIndex = group.labelElement.elementIndex;
+      const newIndex = group._pPos;
       const pinId = group.getAttribute('zen-pin-id');
       if (!pinId) {
         return;
@@ -1259,7 +1259,7 @@
     }
 
     getLastTabBound(lastBound, lastTab, isDraggingFolder = false) {
-      if (!gBrowser.isTab(lastTab) || !lastTab.pinned || isDraggingFolder) {
+      if (!lastTab.pinned || isDraggingFolder) {
         return lastBound;
       }
       const shiftedItems = this.dragShiftableItems;

src/zen/tabs/zen-tabs/vertical-tabs.css

@@ -1475,3 +1475,8 @@
     display: flex !important;
   }
 }
+
+.tabbrowser-tab[zen-dragtarget],
+.tab-group-label-container[zen-dragtarget] {
+  z-index: 9 !important;
+}

src/zen/workspaces/ZenWorkspaces.mjs

@@ -1106,9 +1106,12 @@ var gZenWorkspaces = new (class extends nsZenMultiWindowFeature {
     for (let tab of tabs) {
       const workspaceID = tab.getAttribute('zen-workspace-id');
       if (
-        workspaceID &&
-        !tab.hasAttribute('zen-essential') &&
-        !workspaces.workspaces.find((workspace) => workspace.uuid === workspaceID)
+        (workspaceID &&
+          !tab.hasAttribute('zen-essential') &&
+          !workspaces.workspaces.find((workspace) => workspace.uuid === workspaceID)) ||
+        // Also remove empty tabs that are supposed to be from parent folders but
+        // they dont exist anymore
+        (tab.pinned && tab.hasAttribute('zen-empty-tab') && !tab.group)
       ) {
         // Remove any tabs where their workspace doesn't exist anymore
         gBrowser.unpinTab(tab);
@@ -1615,6 +1618,7 @@ var gZenWorkspaces = new (class extends nsZenMultiWindowFeature {
   }
 
   #fixTabPositions() {
+    gBrowser.tabContainer._invalidateCachedTabs();
     // Fix tabs _tPos values relative to the actual order
     const tabs = gBrowser.tabs;
     const usedGroups = new Set();