From 5484aea042e959243ba45211188143ac6c05f720 Mon Sep 17 00:00:00 2001 From: "mr. M" Date: Fri, 7 Mar 2025 17:39:05 +0100 Subject: [PATCH] Enhance tab movement functionality with error handling and style reset for dragged tabs --- .../base/content/zen-styles/zen-decks.css | 3 + .../zen-components/ZenPinnedTabManager.mjs | 127 +++++++++--------- .../base/zen-components/ZenViewSplitter.mjs | 17 ++- 3 files changed, 81 insertions(+), 66 deletions(-) diff --git a/src/browser/base/content/zen-styles/zen-decks.css b/src/browser/base/content/zen-styles/zen-decks.css index 63507963e..96e6237dc 100644 --- a/src/browser/base/content/zen-styles/zen-decks.css +++ b/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, diff --git a/src/browser/base/zen-components/ZenPinnedTabManager.mjs b/src/browser/base/zen-components/ZenPinnedTabManager.mjs index 31a1c927f..eeb9301e0 100644 --- a/src/browser/base/zen-components/ZenPinnedTabManager.mjs +++ b/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) { diff --git a/src/browser/base/zen-components/ZenViewSplitter.mjs b/src/browser/base/zen-components/ZenViewSplitter.mjs index 31cebad9b..ac43a7c56 100644 --- a/src/browser/base/zen-components/ZenViewSplitter.mjs +++ b/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;