fix: Fixed drag and dropping from pinned to normal not being consistent, b=no-bug, c=tabs, 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..49cb1c803b3b4384d948103f6352058e543081de 100644
+index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..bc971287bbd0d799700cdd8f25f1191422af1b92 100644
 --- a/browser/components/tabbrowser/content/tabs.js
 +++ b/browser/components/tabbrowser/content/tabs.js
 @@ -289,6 +289,7 @@
@@ -435,7 +435,7 @@ index 1fcebe3962398ff1b7cadef657ac8b68a80e720d..49cb1c803b3b4384d948103f6352058e
 
        let dropElement = getOverlappedElement();
 +      if (dropElement?.hasAttribute("split-view-group")) dropElement = dropElement.labelElement;
-+      gZenPinnedTabManager.animateSeparatorMove(draggedTab, dropElement, isPinned);
++      gZenPinnedTabManager.animateSeparatorMove(draggedTab, dropElement, isPinned, event);
 
        let newDropElementIndex;
        if (dropElement) {

src/zen/folders/ZenFolder.mjs

@@ -158,7 +158,7 @@
     }
 
     async delete() {
-      for (const tab of this.tabs) {
+      for (const tab of this.allItemsRecursive) {
         await ZenPinnedTabsStorage.removePin(tab.getAttribute('zen-pin-id'));
         if (tab.hasAttribute('zen-empty-tab')) {
           // Manually remove the empty tabs as removeTabs() inside removeTabGroup
@@ -169,6 +169,18 @@
       await gBrowser.removeTabGroup(this, { isUserTriggered: true });
     }
 
+    get allItemsRecursive() {
+      const items = [];
+      for (const item of this.allItems) {
+        if (item.isZenFolder) {
+          items.push(item, ...item.allItemsRecursive);
+        } else {
+          items.push(item);
+        }
+      }
+      return items;
+    }
+
     get level() {
       return this.group?.level + 1 || 0;
     }

src/zen/folders/ZenFolders.mjs

@@ -874,19 +874,22 @@
       return [];
     }
 
-    setFolderIndentation(tab, group = undefined, dropBefore = false) {
+    setFolderIndentation(tab, group = undefined) {
       if (!gZenPinnedTabManager.expandedSidebarMode) {
         return;
       }
       let isTab = false;
       if (!group && tab?.group) {
         group = tab; // So we can set isTab later
       }
-      if (gBrowser.isTab(group)) {
+      if (gBrowser.isTab(group) && !group.hasAttribute('zen-empty-tab')) {
         group = group.group;
         isTab = true;
       }
-      const level = group?.level + 1 - (dropBefore && !isTab ? 1 : 0) || 0;
+      if (!isTab && !group?.hasAttribute('selected')) {
+        group = null; // Don't indent if the group is not selected
+      }
+      const level = group?.level + 1 || 0;
       const baseSpacing = 14; // Base spacing for each level
       const tabLevel = tab?.group?.level || 0;
       const spacing = (level - tabLevel) * baseSpacing;

src/zen/tabs/ZenPinnedTabManager.mjs

@@ -68,6 +68,8 @@
   class nsZenPinnedTabManager extends nsZenDOMOperatedFeature {
     MAX_ESSENTIALS_TABS = 12;
 
+    #hasInitializedPins = false;
+
     async init() {
       if (!this.enabled) {
         return;
@@ -351,6 +353,10 @@
 
       gBrowser._updateTabBarForPinnedTabs();
       gZenUIManager.updateTabsToolbar();
+
+      setTimeout(() => {
+        this.#hasInitializedPins = true;
+      }, 0);
     }
 
     _onPinnedTabEvent(action, event) {
@@ -693,6 +699,9 @@
     }
 
     async savePin(pin, notifyObservers = true) {
+      if (!this.#hasInitializedPins) {
+        return;
+      }
       const existingPin = this._pinsCache.find((p) => p.uuid === pin.uuid);
       if (existingPin) {
         Object.assign(existingPin, pin);
@@ -1163,24 +1172,23 @@
         : [separator];
     }
 
-    animateSeparatorMove(draggedTab, dropElement, isPinned) {
+    animateSeparatorMove(draggedTab, dropElement, isPinned, event) {
       if (draggedTab?.group?.hasAttribute('split-view-group')) {
         draggedTab = draggedTab.group;
       }
       const itemsToCheck = this.dragShiftableItems;
-      const separatorHeight = window.windowUtils.getBoundsWithoutFlushing(itemsToCheck[0]).height;
-      const tabRect = window.windowUtils.getBoundsWithoutFlushing(draggedTab);
-      const translate = tabRect.top - tabRect.height / 2;
-      const topToNormalTabs =
-        window.windowUtils.getBoundsWithoutFlushing(itemsToCheck[0]).top - separatorHeight / 2;
+      const translate = event.screenY;
+      const draggingTabHeight = window.windowUtils.getBoundsWithoutFlushing(draggedTab).height;
+      let topToNormalTabs = itemsToCheck[0].screenY;
+      if (!isPinned) {
+        topToNormalTabs += draggedTab.getBoundingClientRect().height;
+      }
       const isGoingToPinnedTabs = translate < topToNormalTabs;
       const multiplier = isGoingToPinnedTabs !== isPinned ? (isGoingToPinnedTabs ? 1 : -1) : 0;
-      const draggingTabHeight =
-        window.windowUtils.getBoundsWithoutFlushing(draggedTab).height * multiplier;
       this._isGoingToPinnedTabs = isGoingToPinnedTabs;
       if (!dropElement) {
         itemsToCheck.forEach((item) => {
-          item.style.transform = `translateY(${draggingTabHeight}px)`;
+          item.style.transform = `translateY(${draggingTabHeight * multiplier}px)`;
         });
       }
     }

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

@@ -156,40 +156,31 @@
    Pinned Tabs Separator
    ========================================================================== */
 .pinned-tabs-container-separator {
-  margin: 0 auto; /* Center vertically */
-  padding: 8px 0;
+  background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
+  margin: 8px auto;
+  border: none;
   height: 1px;
   max-height: 1px;
   width: 98%; /* Slightly less than full width */
   transition:
-    padding 0.1s ease-in-out,
-    max-height 0.2s ease-in-out,
-    opacity 0.1s ease-in-out;
+    margin 0.2s ease-in-out,
+    background 0.2s ease-in-out,
+    max-height 0.2s ease-in-out;
   overflow: hidden;
   position: relative;
   opacity: 1;
 
   #tabbrowser-tabs[movingtab] & {
-    transition: transform 0.1s ease-in-out;
-  }
-
-  &::before {
-    background: light-dark(rgba(1, 1, 1, 0.075), rgba(255, 255, 255, 0.1));
-    content: '';
-    height: 1px;
-    width: 100%;
-    margin: 0 auto; /* Center the line */
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    transition:
+      margin 0.2s ease-in-out,
+      background 0.2s ease-in-out,
+      max-height 0.2s ease-in-out,
+      transform 0.1s ease-in-out;
   }
 
-  /* Hide separator when specified by parent container attribute */
   .zen-workspace-pinned-tabs-section[hide-separator] & {
     max-height: 0;
-    padding: 0;
-    opacity: 0;
+    margin: 0 auto;
   }
 }