mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-01-07 05:43:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: After expanding a folder, has-active folders show extra items (#9920)

Browse Source
This commit is contained in:
octaviusz
2025-08-18 13:32:19 +03:00
committed by GitHub
parent e06402f468
commit 6e161ac83e
1 changed files with 54 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -251,6 +251,7 @@
if (activeGroup?.length > 0) {
for (const folder of activeGroup) {
folder.removeAttribute('has-active');
folder.removeAttribute('selected-tab-id');
this.collapseVisibleTab(folder);
this.updateFolderIcon(folder, 'close', false);
}
@@ -350,6 +351,7 @@
if (selectedItem) {
group.setAttribute('has-active', 'true');
selectedItem.setAttribute('folder-active', 'true');
group.setAttribute('selected-tab-id', selectedItem.getAttribute('zen-pin-id'));
this.setFolderIndentation([selectedItem], group, /* for collapse = */ true);
}
@@ -393,43 +395,48 @@
const animations = [];
tabsContainer.style.overflow = 'hidden';
if (group.hasAttribute('has-active')) {
const selectedTabId = group.getAttribute('selected-tab-id');
const selectedTab = group?.querySelector(`tab[zen-pin-id="${selectedTabId}"]`);
// Since the folder is now expanded, we should remove active attribute
// to the tab that was previously visible
selectedTab.removeAttribute('folder-active');
selectedTab.style.removeProperty('--zen-folder-indent');
group.removeAttribute('has-active');
group.removeAttribute('selected-tab-id');
}
// Since the folder is now expanded, we should remove active attribute
// to the tab that was previously visible
for (const tab of group.tabs) {
if (tab.group === group && tab.hasAttribute('folder-active')) {
tab.removeAttribute('folder-active');
}
}
const groupItems = [];
group.childGroupsAndTabs.forEach((item) => {
if (gBrowser.isTabGroupLabel(item)) {
if (item?.group?.hasAttribute('split-view-group')) {
item = item.group;
} else {
item = item.parentNode;
}
}
// If all the groups above the item are visible, remove the indentation
if (gBrowser.isTab(item)) {
let isVisible = true;
let parent = item.group;
while (parent) {
if (parent.collapsed && !parent.hasAttribute('has-active')) {
isVisible = false;
break;
const normalizeGroupItems = (items) => {
const processed = [];
items
.filter((item) => !item.hasAttribute('zen-empty-tab'))
.forEach((item) => {
if (gBrowser.isTabGroupLabel(item)) {
if (item?.group?.hasAttribute('split-view-group')) {
item = item.group;
} else {
item = item.parentElement;
}
}
parent = parent.group;
}
if (isVisible) {
item.style.removeProperty('--zen-folder-indent');
}
processed.push(item);
});
return processed;
};
const activeGroups = group.querySelectorAll('zen-folder[has-active]');
const groupItems = normalizeGroupItems(group.childGroupsAndTabs);
const itemsToHide = [];
for (const activeGroup of activeGroups) {
let selectedTabId = activeGroup.getAttribute('selected-tab-id');
let selectedTab = activeGroup.querySelector(`tab[zen-pin-id="${selectedTabId}"]`);
// If the selected tab is in a split view group, we need to get the last tab
if (selectedTab?.group?.hasAttribute('split-view-group')) {
selectedTab = selectedTab.group.tabs.at(-1);
}
groupItems.push(item);
});
let index = activeGroup.childGroupsAndTabs.indexOf(selectedTab);
let itemsAfter = activeGroup.childGroupsAndTabs.slice(index + 1);
itemsToHide.push(...normalizeGroupItems(itemsAfter));
}
groupItems.map((item) => {
animations.push(
@@ -437,7 +444,20 @@
item,
{
opacity: 1,
height: 'auto',
height: '',
},
{ duration: 0.1, ease: 'easeInOut' }
)
);
});
itemsToHide.map((item) => {
animations.push(
gZenUIManager.motion.animate(
item,
{
opacity: 0,
height: 0,
},
{ duration: 0.1, ease: 'easeInOut' }
)
@@ -1122,6 +1142,7 @@
}
selectedItem.setAttribute('folder-active', 'true');
group.setAttribute('selected-tab-id', selectedItem.getAttribute('zen-pin-id'));
animations.push(...this.updateFolderIcon(group, 'close', false));