Enhance tab movement functionality with error handling and style reset for dragged tabs

src/browser/base/content/zen-styles/zen-decks.css

@@ -227,6 +227,9 @@
   box-shadow: 0 0 0 1px var(--button-primary-border-color);
   gap: 0.8rem;
   transform: translateX(-50%);
+  box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 }
 
 :root:not([inDOMFullscreen='true']) .browserSidebarContainer:hover .zen-view-splitter-header-container,

src/browser/base/zen-components/ZenPinnedTabManager.mjs

@@ -718,72 +718,77 @@
     }
 
     moveToAnotherTabContainerIfNecessary(event, movingTabs) {
-      const pinnedTabsTarget =
-        event.target.closest('#vertical-pinned-tabs-container') || event.target.closest('.zen-current-workspace-indicator');
-      const essentialTabsTarget = event.target.closest('#zen-essentials-container');
-      const tabsTarget = event.target.closest('#tabbrowser-arrowscrollbox');
+      try {
+        const pinnedTabsTarget =
+          event.target.closest('#vertical-pinned-tabs-container') || event.target.closest('.zen-current-workspace-indicator');
+        const essentialTabsTarget = event.target.closest('#zen-essentials-container');
+        const tabsTarget = event.target.closest('#tabbrowser-arrowscrollbox');
 
-      let isVertical = this.expandedSidebarMode;
-      let moved = false;
-      for (const draggedTab of movingTabs) {
-        let isRegularTabs = false;
-        // Check for pinned tabs container
-        if (pinnedTabsTarget) {
-          if (!draggedTab.pinned) {
-            gBrowser.pinTab(draggedTab);
-            moved = true;
-          } else if (draggedTab.hasAttribute('zen-essential')) {
-            this.removeEssentials(draggedTab, false);
-            moved = true;
-          }
-        }
-        // Check for essentials container
-        else if (essentialTabsTarget) {
-          if (!draggedTab.hasAttribute('zen-essential') && !draggedTab?.group?.hasAttribute('split-view-group')) {
-            this.addToEssentials(draggedTab);
-            moved = true;
-            isVertical = false;
-          }
-        }
-        // Check for normal tabs container
-        else if (tabsTarget || event.target.id === 'zen-tabs-wrapper') {
-          if (draggedTab.pinned && !draggedTab.hasAttribute('zen-essential')) {
-            gBrowser.unpinTab(draggedTab);
-            moved = true;
-            isRegularTabs = true;
-          } else if (draggedTab.hasAttribute('zen-essential')) {
-            this.removeEssentials(draggedTab);
-            moved = true;
-            isRegularTabs = true;
-          }
-        }
-
-        // If the tab was moved, adjust its position relative to the target tab
-        if (moved) {
-          const targetTab = event.target.closest('.tabbrowser-tab');
-          if (targetTab) {
-            const rect = targetTab.getBoundingClientRect();
-            let newIndex = targetTab._tPos;
-
-            if (isVertical) {
-              const middleY = targetTab.screenY + rect.height / 2;
-              if (!isRegularTabs && event.screenY > middleY) {
-                newIndex++;
-              } else if (isRegularTabs && event.screenY < middleY) {
-                newIndex--;
-              }
-            } else {
-              const middleX = targetTab.screenX + rect.width / 2;
-              if (event.screenX > middleX) {
-                newIndex++;
-              }
+        let isVertical = this.expandedSidebarMode;
+        let moved = false;
+        for (const draggedTab of movingTabs) {
+          let isRegularTabs = false;
+          // Check for pinned tabs container
+          if (pinnedTabsTarget) {
+            if (!draggedTab.pinned) {
+              gBrowser.pinTab(draggedTab);
+              moved = true;
+            } else if (draggedTab.hasAttribute('zen-essential')) {
+              this.removeEssentials(draggedTab, false);
+              moved = true;
+            }
+          }
+          // Check for essentials container
+          else if (essentialTabsTarget) {
+            if (!draggedTab.hasAttribute('zen-essential') && !draggedTab?.group?.hasAttribute('split-view-group')) {
+              this.addToEssentials(draggedTab);
+              moved = true;
+              isVertical = false;
+            }
+          }
+          // Check for normal tabs container
+          else if (tabsTarget || event.target.id === 'zen-tabs-wrapper') {
+            if (draggedTab.pinned && !draggedTab.hasAttribute('zen-essential')) {
+              gBrowser.unpinTab(draggedTab);
+              moved = true;
+              isRegularTabs = true;
+            } else if (draggedTab.hasAttribute('zen-essential')) {
+              this.removeEssentials(draggedTab);
+              moved = true;
+              isRegularTabs = true;
+            }
+          }
+
+          // If the tab was moved, adjust its position relative to the target tab
+          if (moved) {
+            const targetTab = event.target.closest('.tabbrowser-tab');
+            if (targetTab) {
+              const rect = targetTab.getBoundingClientRect();
+              let newIndex = targetTab._tPos;
+
+              if (isVertical) {
+                const middleY = targetTab.screenY + rect.height / 2;
+                if (!isRegularTabs && event.screenY > middleY) {
+                  newIndex++;
+                } else if (isRegularTabs && event.screenY < middleY) {
+                  newIndex--;
+                }
+              } else {
+                const middleX = targetTab.screenX + rect.width / 2;
+                if (event.screenX > middleX) {
+                  newIndex++;
+                }
+              }
+              gBrowser.moveTabTo(draggedTab, newIndex);
             }
-            gBrowser.moveTabTo(draggedTab, newIndex);
           }
         }
-      }
 
-      return moved;
+        return moved;
+      } catch (ex) {
+        console.error('Error moving tabs:', ex);
+        return false;
+      }
     }
 
     async onLocationChange(browser) {

src/browser/base/zen-components/ZenViewSplitter.mjs

@@ -214,6 +214,9 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
       this._draggingTab = draggedTab;
       gBrowser.selectedTab = oldTab;
       this._hasAnimated = true;
+      for (const tab of gBrowser.tabs) {
+        tab.style.removeProperty('transform');
+      }
       const panelsWidth = gBrowser.tabbox.getBoundingClientRect().width;
       const halfWidth = panelsWidth / 2;
       this.fakeBrowser = document.createXULElement('vbox');
@@ -251,7 +254,6 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
         this._finishAllAnimatingPromise.then(() => {
           this._canDrop = true;
           draggedTab._visuallySelected = true;
-          this._finishAllAnimatingPromise = null;
         });
       }
     }, 100);
@@ -267,7 +269,9 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
       (event.target.closest('#tabbrowser-tabbox') && event.target != this.fakeBrowser) ||
       (fakeBrowserRect &&
         event.clientX > fakeBrowserRect.left &&
-        event.clientX < fakeBrowserRect.left + fakeBrowserRect.width) ||
+        event.clientX < fakeBrowserRect.left + fakeBrowserRect.width &&
+        event.clientY > fakeBrowserRect.top &&
+        event.clientY < fakeBrowserRect.top + fakeBrowserRect.height) ||
       (event.screenX === 0 && event.screenY === 0) // It's equivalent to 0 if the event has been dropped
     ) {
       return;
@@ -1594,9 +1598,11 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
         this.splitTabs([draggedTab, droppedOnTab], gridType, 1);
       }
     }
-    this._finishAllAnimatingPromise.then(() => {
-      this._maybeRemoveFakeBrowser(false);
-    });
+    if (this._finishAllAnimatingPromise) {
+      this._finishAllAnimatingPromise.then(() => {
+        this._maybeRemoveFakeBrowser(false);
+      });
+    }
 
     if (browserContainer) {
       gZenUIManager.motion
@@ -1615,6 +1621,7 @@ class ZenViewSplitter extends ZenDOMOperatedFeature {
         )
         .then(() => {
           this._maybeRemoveFakeBrowser(false);
+          this._finishAllAnimatingPromise = null;
         });
     }
     return true;