mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-16 14:56:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: Correct styling and cleanup after folder unload animation, p=#10795, c=folders

Browse Source 
* fix: Correct styling and cleanup after folder unload animation

* fix: Formatting

* fix: Add overflow:clip when animateGroupMove

* fix: Don't reset groupLabel height after drag and drop

* fix: When unloading, don't hide the last tab
This commit is contained in:
octaviusz
2025-10-13 02:08:08 +03:00
committed by GitHub
parent f9d1f18ad1
commit c2d6ce83c0
2 changed files with 45 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/browser/components/tabbrowser/content/tabs-js.patch
View File

@@ -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;
}
}

57
src/zen/folders/ZenFolders.mjs
View File

@@ -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,