fix: Small fixes to folders, b=no-bug, c=tabs, common, folders

Author: mr-cheffy

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 1fcebe3962398ff1b7cadef657ac8b68a80e720d..f8e190aaae14b23bd1a50573f61114a0947aa55a 100644
+index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..9022f3f566e8829fa8d3c5a58f0300ab96869073 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -289,6 +289,7 @@
@@ -360,11 +360,11 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..f8e190aaae14b23bd1a50573f61114a0
 +      let isPinned = draggedTab?.group ? draggedTab.group.pinned : draggedTab.pinned;
 +      let numPinned = gBrowser._numVisiblePinTabsWithoutCollapsed;
 +      let essential = draggedTab.hasAttribute("zen-essential");
-+      const isDraggingFolder = isTabGroupLabel(draggedTab) || draggedTab.group?.isZenFolder;
++      const isDraggingFolder = isTabGroupLabel(draggedTab) && draggedTab.group?.isZenFolder;
        let tabs = this.ariaFocusableItems.slice(
 -        isPinned ? 0 : numPinned,
 -        isPinned ? numPinned : undefined
-+        isPinned ? (essential ? 0 : gBrowser._numZenEssentials) : undefined,
++        (isPinned && essential) ? 0 : gBrowser._numZenEssentials,
 +        isPinned ? (essential ? gBrowser._numZenEssentials : (isDraggingFolder ? numPinned : undefined)) : undefined
        );
 +      if (draggedTab.group?.hasAttribute("split-view-group")) {
@@ -457,7 +457,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..f8e190aaae14b23bd1a50573f61114a0
          moveOverThreshold = Math.min(1, Math.max(0, moveOverThreshold));
          let shouldMoveOver = overlapPercent > moveOverThreshold;
          if (logicalForward && shouldMoveOver) {
-@@ -2656,23 +2738,6 @@
+@@ -2656,44 +2738,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.
@@ -481,8 +481,14 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..f8e190aaae14b23bd1a50573f61114a0
 
          // Constrain drop direction at the boundary between pinned and
          // unpinned tabs so that they don't mix together.
-@@ -2686,14 +2751,13 @@
-         }
+         let isOutOfBounds = isPinned
+           ? dropElement.elementIndex >= numPinned
+           : dropElement.elementIndex < numPinned;
+-        if (isOutOfBounds) {
+-          // Drop after last pinned tab
+-          dropElement = this.ariaFocusableItems[numPinned - 1];
+-          dropBefore = false;
+-        }
        }
 
 -      if (
@@ -501,7 +507,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..f8e190aaae14b23bd1a50573f61114a0
          // When dragging tab(s) over an ungrouped tab, signal to the user
          // that dropping the tab(s) will create a new tab group.
          shouldCreateGroupOnDrop =
-@@ -2703,12 +2767,6 @@
+@@ -2703,12 +2762,6 @@
            overlapPercent > dragOverGroupingThreshold;
 
          if (shouldCreateGroupOnDrop) {
@@ -514,7 +520,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..f8e190aaae14b23bd1a50573f61114a0
          } else {
            this.removeAttribute("movingtab-createGroup");
            document
-@@ -2735,19 +2793,14 @@
+@@ -2735,19 +2788,14 @@
              dropElement = dropElementGroup;
              colorCode = undefined;
            } else if (isTabGroupLabel(dropElement)) {
@@ -542,7 +548,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..f8e190aaae14b23bd1a50573f61114a0
            }
            this.#setDragOverGroupColor(colorCode);
            this.toggleAttribute("movingtab-ungroup", !colorCode);
-@@ -2769,15 +2822,24 @@
+@@ -2769,15 +2817,24 @@
        // Shift background tabs to leave a gap where the dragged tab
        // would currently be dropped.
        for (let item of tabs) {
@@ -568,7 +574,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..f8e190aaae14b23bd1a50573f61114a0
          }
          item.style.transform = transform;
        }
-@@ -2830,12 +2892,14 @@
+@@ -2830,12 +2887,14 @@
        );
      }
 
@@ -585,7 +591,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..f8e190aaae14b23bd1a50573f61114a0
 
        for (let item of this.ariaFocusableItems) {
          if (isTabGroupLabel(item)) {
-@@ -2843,6 +2907,18 @@
+@@ -2843,6 +2902,18 @@
            item = item.parentElement;
          }
          item.style.transform = "";
@@ -604,7 +610,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..f8e190aaae14b23bd1a50573f61114a0
          item.removeAttribute("dragover-createGroup");
        }
        this.removeAttribute("movingtab-createGroup");
-@@ -2889,7 +2965,7 @@
+@@ -2889,7 +2960,7 @@
          let postTransitionCleanup = () => {
            movingTab._moveTogetherSelectedTabsData.animate = false;
          };
@@ -613,7 +619,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..f8e190aaae14b23bd1a50573f61114a0
            postTransitionCleanup();
          } else {
            let onTransitionEnd = transitionendEvent => {
-@@ -3062,7 +3138,7 @@
+@@ -3062,7 +3133,7 @@
      }
 
      _notifyBackgroundTab(aTab) {
@@ -622,7 +628,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..f8e190aaae14b23bd1a50573f61114a0
          return;
        }
 
-@@ -3171,7 +3247,10 @@
+@@ -3171,7 +3242,10 @@
      #getDragTarget(event, { ignoreSides = false } = {}) {
        let { target } = event;
        while (target) {
@@ -634,7 +640,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..f8e190aaae14b23bd1a50573f61114a0
            break;
          }
          target = target.parentNode;
-@@ -3188,6 +3267,9 @@
+@@ -3188,6 +3262,9 @@
            return null;
          }
        }

src/zen/common/ZenUIManager.mjs

@@ -1056,6 +1056,7 @@ var gZenVerticalTabsManager = {
       this._tabEdited = null;
       return;
     }
+    gZenFolders.cancelPopupTimer();
     event.stopPropagation?.();
     document.documentElement.setAttribute('zen-renaming-tab', 'true');
     const label = isTab ? this._tabEdited.querySelector('.tab-label-container') : this._tabEdited;

src/zen/folders/ZenFolders.mjs

@@ -170,7 +170,7 @@
         .getElementById('zen-context-menu-new-folder')
         .addEventListener('command', this.#onNewFolder.bind(this));
       SessionStore.promiseInitialized.then(() => {
-        gBrowser.tabContainer.addEventListener('dragstart', this.#cancelPopupTimer.bind(this));
+        gBrowser.tabContainer.addEventListener('dragstart', this.cancelPopupTimer.bind(this));
       });
     }
 
@@ -204,6 +204,9 @@
       const isActive = group?.activeGroups?.length > 0;
       if (isActive) tab.setAttribute('folder-active', true);
       if (prevTab.hasAttribute('folder-active')) prevTab.removeAttribute('folder-active');
+      if (tab.group?.collapsed) {
+        this.expandToSelected(group);
+      }
       gBrowser.tabContainer._invalidateCachedTabs();
     }
 
@@ -257,7 +260,7 @@
       }
     }
 
-    #cancelPopupTimer() {
+    cancelPopupTimer() {
       if (this.#mouseTimer) {
         clearTimeout(this.#mouseTimer);
         this.#mouseTimer = null;
@@ -269,7 +272,7 @@
       const group = event.target;
       if (!group.isZenFolder) return;
 
-      this.#cancelPopupTimer();
+      this.cancelPopupTimer();
 
       const tabsContainer = group.querySelector('.tab-group-container');
       const animations = [];
@@ -348,7 +351,7 @@
       const group = event.target;
       if (!group.isZenFolder) return;
 
-      this.#cancelPopupTimer();
+      this.cancelPopupTimer();
 
       const tabsContainer = group.querySelector('.tab-group-container');
       tabsContainer.removeAttribute('hidden');
@@ -632,6 +635,9 @@
 
     openTabsPopup(event) {
       event.stopPropagation();
+      if (document.documentElement.getAttribute('zen-renaming-tab')) {
+        return;
+      }
 
       const activeGroup = event.target.parentElement;
       if (activeGroup.tabs.filter((tab) => !tab.hasAttribute('zen-empty-tab')).length === 0) {
@@ -777,7 +783,6 @@
           group.setAttribute('has-active', 'true');
           gBrowser.selectedTab = tab;
           this.#popup.hidePopup();
-          this.expandToSelected(group);
         });
 
         tabsList.appendChild(item);
@@ -853,6 +858,16 @@
       return [];
     }
 
+    getFolderIndentation(tab, group = undefined) {
+      const level = group?.level || 0;
+      const baseSpacing = 4; // Base spacing for each level
+      const tabLevel = tab?.group?.level || 0;
+      // If the level is less, we need to make a negative margin
+      const spacing =
+        level > tabLevel ? -baseSpacing * (level - tabLevel) : baseSpacing * (tabLevel - level);
+      return spacing;
+    }
+
     changeFolderUserIcon(group) {
       if (!group) return;
 

src/zen/tabs/ZenPinnedTabManager.mjs

@@ -975,7 +975,7 @@
         const pinnedTabsTarget =
           event.target.closest('.zen-workspace-pinned-tabs-section') ||
           event.target.closest('.zen-current-workspace-indicator') ||
-          this._pinnedTabsContainer;
+          this._isGoingToPinnedTabs;
         const essentialTabsTarget = event.target.closest('.zen-essentials-container');
         const tabsTarget = event.target.closest('.zen-workspace-normal-tabs-section');
 
@@ -1253,6 +1253,12 @@
       if (!this.enabled) {
         return;
       }
+      const folderTarget = event.target.closest('zen-folder');
+      let isVertical = this.expandedSidebarMode;
+      //if (isVertical) {
+      //  draggedTab.style.marginInlineStart = `${gZenFolders.getFolderIndentation(draggedTab, folderTarget)}px`;
+      //}
+
       if (
         gBrowser.isTabGroupLabel(draggedTab) &&
         !draggedTab?.group?.hasAttribute('split-view-group')
@@ -1261,7 +1267,6 @@
         this.removeTabContainersDragoverClass();
         return;
       }
-      const folderTarget = event.target.closest('zen-folder');
       const pinnedTabsTarget = event.target.closest('.zen-workspace-pinned-tabs-section');
       const essentialTabsTarget = event.target.closest('.zen-essentials-container');
       const tabsTarget = event.target.closest('.zen-workspace-normal-tabs-section');
@@ -1283,7 +1288,6 @@
       }
 
       let shouldAddDragOverElement = false;
-      let isVertical = this.expandedSidebarMode;
 
       // Decide whether we should show a dragover class for the given target
       if (pinnedTabsTarget) {