diff --git a/src/browser/components/tabbrowser/content/tabs-js.patch b/src/browser/components/tabbrowser/content/tabs-js.patch index c1c09ac70..ec1bebfc1 100644 --- a/src/browser/components/tabbrowser/content/tabs-js.patch +++ b/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 1425607ef87d6c28fb676e722617edfb51ba12a1..8431ed0ab80e1e08fa622633d86e52915a44c9b1 100644 +index 1425607ef87d6c28fb676e722617edfb51ba12a1..97cdeaf7cde41f39d70bd50ac8ca78bec02d253a 100644 --- a/browser/components/tabbrowser/content/tabs.js +++ b/browser/components/tabbrowser/content/tabs.js @@ -44,6 +44,9 @@ @@ -600,7 +600,7 @@ index 1425607ef87d6c28fb676e722617edfb51ba12a1..8431ed0ab80e1e08fa622633d86e5291 for (let item of this.ariaFocusableItems) { this.#resetGroupTarget(item); -@@ -3440,7 +3524,7 @@ +@@ -3440,17 +3524,16 @@ tab.style.left = ""; tab.style.top = ""; tab.style.maxWidth = ""; @@ -609,7 +609,9 @@ index 1425607ef87d6c28fb676e722617edfb51ba12a1..8431ed0ab80e1e08fa622633d86e5291 } for (let label of draggedTabDocument.getElementsByClassName( "tab-group-label-container" -@@ -3450,7 +3534,7 @@ + )) { + label.style.width = ""; +- label.style.height = ""; label.style.left = ""; label.style.top = ""; label.style.maxWidth = ""; @@ -618,7 +620,7 @@ index 1425607ef87d6c28fb676e722617edfb51ba12a1..8431ed0ab80e1e08fa622633d86e5291 } let periphery = draggedTabDocument.getElementById( "tabbrowser-arrowscrollbox-periphery" -@@ -3522,7 +3606,7 @@ +@@ -3522,7 +3605,7 @@ let postTransitionCleanup = () => { movingTab._moveTogetherSelectedTabsData.animate = false; }; @@ -627,7 +629,7 @@ index 1425607ef87d6c28fb676e722617edfb51ba12a1..8431ed0ab80e1e08fa622633d86e5291 postTransitionCleanup(); } else { let onTransitionEnd = transitionendEvent => { -@@ -3686,7 +3770,7 @@ +@@ -3686,7 +3769,7 @@ } _notifyBackgroundTab(aTab) { @@ -636,7 +638,7 @@ index 1425607ef87d6c28fb676e722617edfb51ba12a1..8431ed0ab80e1e08fa622633d86e5291 return; } -@@ -3795,7 +3879,10 @@ +@@ -3795,7 +3878,10 @@ #getDragTarget(event, { ignoreSides = false } = {}) { let { target } = event; while (target) { @@ -648,7 +650,7 @@ index 1425607ef87d6c28fb676e722617edfb51ba12a1..8431ed0ab80e1e08fa622633d86e5291 break; } target = target.parentNode; -@@ -3812,6 +3899,9 @@ +@@ -3812,6 +3898,9 @@ return null; } } diff --git a/src/zen/folders/ZenFolders.mjs b/src/zen/folders/ZenFolders.mjs index b04c2a787..ec10042b6 100644 --- a/src/zen/folders/ZenFolders.mjs +++ b/src/zen/folders/ZenFolders.mjs @@ -1272,7 +1272,7 @@ splitViewIds, activeFoldersIds, }); - const heightUntilSelected = this.#calculateHeightShift(tabsContainer, selectedTabs); + const collapsedHeight = this.#calculateHeightShift(tabsContainer, selectedTabs); if (selectedTabs.length) { for (let i = 0; i < groupItems.length; i++) { @@ -1316,7 +1316,7 @@ ...this.#createAnimation( groupStart, { - marginTop: -(heightUntilSelected + 4 * (selectedTabs.length === 0 ? 1 : 0)), + marginTop: -(collapsedHeight + 4 * (selectedTabs.length === 0 ? 1 : 0)), }, { duration: 0.12, ease: 'easeInOut' } ) @@ -1463,14 +1463,20 @@ const groupItems = this.#normalizeGroupItems(folder.allItems); const tabsContainer = folder.querySelector('.tab-group-container'); - this.styleCleanup(groupItems); + // Set correct margin-top after animation + const afterAnimate = () => { + groupStart.style.removeProperty('margin-top'); + this.styleCleanup(groupItems); + // Trigger the recalculation so that zen returns + // the correct container size in the DOM + tabsContainer.offsetHeight; + tabsContainer.setAttribute('hidden', true); + const collapsedHeight = this.#calculateHeightShift(tabsContainer, []); + groupStart.style.marginTop = `${-(collapsedHeight + 4)}px`; + }; const groupStart = folder.querySelector('.zen-tab-group-start'); - - // Trigger a reflow - tabsContainer.offsetHeight; - - const heightUntilSelected = this.#calculateHeightShift(tabsContainer, []); + const collapsedHeight = this.#calculateHeightShift(tabsContainer, []); // Collect animations for this specific folder becoming inactive animations.push( @@ -1478,9 +1484,10 @@ ...this.#createAnimation( groupStart, { - marginTop: -(heightUntilSelected + 4), + marginTop: -(collapsedHeight + 4), }, - { duration: 0.12, ease: 'easeInOut' } + { duration: 0.12, ease: 'easeInOut' }, + afterAnimate ) ); } @@ -1496,26 +1503,33 @@ if ((!group?.isZenFolder || !isSplitView) && !tabToUnload.hasAttribute('folder-active')) return; const animations = []; + let lastTab = false; const activeGroups = group.activeGroups; for (const folder of activeGroups) { folder.activeTabs = folder.activeTabs.filter((tab) => tab !== tabToUnload); if (folder.activeTabs.length === 0) { + lastTab = true; animations.push(async () => { folder.removeAttribute('has-active'); const groupItems = this.#normalizeGroupItems(folder.allItems); const tabsContainer = folder.querySelector('.tab-group-container'); - this.styleCleanup(groupItems); + // Set correct margin-top after animation + const afterAnimate = () => { + groupStart.style.removeProperty('margin-top'); + this.styleCleanup(groupItems); + // Trigger the recalculation so that zen returns + // the correct container size in the DOM + tabsContainer.offsetHeight; + tabsContainer.setAttribute('hidden', true); + const collapsedHeight = this.#calculateHeightShift(tabsContainer, []); + groupStart.style.marginTop = `${-(collapsedHeight + 4)}px`; + }; const groupStart = folder.querySelector('.zen-tab-group-start'); - - // Trigger a reflow - tabsContainer.offsetHeight; - tabsContainer.setAttribute('hidden', true); - - const heightUntilSelected = this.#calculateHeightShift(tabsContainer, []); + const collapsedHeight = this.#calculateHeightShift(tabsContainer, []); // Collect animations for this specific folder becoming inactive const folderAnimation = [ @@ -1523,9 +1537,10 @@ ...this.#createAnimation( groupStart, { - marginTop: -(heightUntilSelected + 4), + marginTop: -(collapsedHeight + 4), }, - { duration: 0.12, ease: 'easeInOut' } + { duration: 0.12, ease: 'easeInOut' }, + afterAnimate ), ]; await Promise.all(folderAnimation); @@ -1541,7 +1556,7 @@ tabToUnload.style.removeProperty('--zen-folder-indent'); let tabUnloadAnimations = []; - if (!ungroup) { + if (!ungroup && !lastTab) { tabUnloadAnimations = this.#createAnimation( tabToUnload, { @@ -1701,7 +1716,7 @@ const groupStart = group.querySelector('.zen-tab-group-start'); const tabsContainer = group.querySelector('.tab-group-container'); const heightContainer = expand ? 0 : this.#calculateHeightShift(tabsContainer, []); - tabsContainer.style.overflow = expand ? '' : 'clip'; + tabsContainer.style.overflow = 'clip'; this.#createAnimation( groupStart,