mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2026-04-28 18:24:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

test: Added tests for tab group expand and collapse, b=closes #9885, c=tabs, folders, tests, workspaces

Browse Source
This commit is contained in:
Mr. M
2025-08-14 18:00:13 +02:00
parent 4a48d11b74
commit 4e2dfd8a13
8 changed files with 189 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/browser/components/tabbrowser/content/tabgroup-js.patch
View File

@@ -1,5 +1,5 @@
diff --git a/browser/components/tabbrowser/content/tabgroup.js b/browser/components/tabbrowser/content/tabgroup.js diff --git a/browser/components/tabbrowser/content/tabgroup.js b/browser/components/tabbrowser/content/tabgroup.js
index caea196b22b4689f55780a528661d87b52f4e728..43d815218d652055378f50cb577086f3f01b681a 100644 index caea196b22b4689f55780a528661d87b52f4e728..ef687c6c693abab2b62023cfa7f44705acc5d04f 100644
--- a/browser/components/tabbrowser/content/tabgroup.js --- a/browser/components/tabbrowser/content/tabgroup.js
+++ b/browser/components/tabbrowser/content/tabgroup.js +++ b/browser/components/tabbrowser/content/tabgroup.js
@@ -13,10 +13,12 @@ @@ -13,10 +13,12 @@
@@ -161,7 +161,7 @@ index caea196b22b4689f55780a528661d87b52f4e728..43d815218d652055378f50cb577086f3
on_click(event) { on_click(event) {
let isToggleElement = let isToggleElement =
- event.target === this.#labelElement || - event.target === this.#labelElement ||
+ event.target.closest(".tab-group-label-container") || + this.labelElement.parentElement.contains(event.target) ||
event.target === this.#overflowCountLabel; event.target === this.#overflowCountLabel;
if (isToggleElement && event.button === 0) { if (isToggleElement && event.button === 0) {
event.preventDefault(); event.preventDefault();

106
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 diff --git a/browser/components/tabbrowser/content/tabs.js b/browser/components/tabbrowser/content/tabs.js
index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38c4d3dffe 100644 index e47f735e4e4563c9b7537944628418d1478c068d..1e821868ef0de97e19f46cc63ed03cb77ecf75a9 100644
--- a/browser/components/tabbrowser/content/tabs.js --- a/browser/components/tabbrowser/content/tabs.js
+++ b/browser/components/tabbrowser/content/tabs.js +++ b/browser/components/tabbrowser/content/tabs.js
@@ -332,7 +332,7 @@ @@ -332,7 +332,7 @@
@@ -11,7 +11,15 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
event.composedTarget.localName == "toolbarbutton" event.composedTarget.localName == "toolbarbutton"
) { ) {
return; return;
@@ -686,7 +686,7 @@ @@ -413,7 +413,6 @@
});
}
} else if (isTabGroupLabel(event.target)) {
- event.target.group.saveAndClose();
} else if (
event.originalTarget.closest("scrollbox") &&
!Services.prefs.getBoolPref(
@@ -686,7 +685,7 @@
if (this.#isContainerVerticalPinnedGrid(tab)) { if (this.#isContainerVerticalPinnedGrid(tab)) {
// In expanded vertical mode, the max number of pinned tabs per row is dynamic // In expanded vertical mode, the max number of pinned tabs per row is dynamic
// Set this before adjusting dragged tab's position // Set this before adjusting dragged tab's position
@@ -20,7 +28,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
let tabsPerRow = 0; let tabsPerRow = 0;
let position = RTL_UI let position = RTL_UI
? window.windowUtils.getBoundsWithoutFlushing( ? window.windowUtils.getBoundsWithoutFlushing(
@@ -773,8 +773,9 @@ @@ -773,8 +772,9 @@
if (tab.multiselected) { if (tab.multiselected) {
this.#moveTogetherSelectedTabs(tab); this.#moveTogetherSelectedTabs(tab);
} else if (isTabGroupLabel(tab) && !tab.group.collapsed) { } else if (isTabGroupLabel(tab) && !tab.group.collapsed) {
@@ -32,7 +40,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
} }
} }
@@ -872,7 +873,7 @@ @@ -872,7 +872,7 @@
? event.screenY - window.screenY - tabOffset ? event.screenY - window.screenY - tabOffset
: event.screenY - window.screenY, : event.screenY - window.screenY,
scrollPos: scrollPos:
@@ -41,7 +49,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
? this.pinnedTabsContainer.scrollPosition ? this.pinnedTabsContainer.scrollPosition
: this.arrowScrollbox.scrollPosition, : this.arrowScrollbox.scrollPosition,
screenX: event.screenX, screenX: event.screenX,
@@ -933,6 +934,10 @@ @@ -933,6 +933,10 @@
} }
let draggedTab = event.dataTransfer.mozGetDataAt(TAB_DROP_TYPE, 0); let draggedTab = event.dataTransfer.mozGetDataAt(TAB_DROP_TYPE, 0);
@@ -52,7 +60,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
if ( if (
(dropEffect == "move" || dropEffect == "copy") && (dropEffect == "move" || dropEffect == "copy") &&
document == draggedTab.ownerDocument && document == draggedTab.ownerDocument &&
@@ -1060,7 +1065,9 @@ @@ -1060,7 +1064,9 @@
isTabGroupLabel(draggedTab) && isTabGroupLabel(draggedTab) &&
draggedTab._dragData?.expandGroupOnDrop draggedTab._dragData?.expandGroupOnDrop
) { ) {
@@ -63,7 +71,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
} }
} }
@@ -1096,6 +1103,18 @@ @@ -1096,6 +1102,18 @@
this._tabDropIndicator.hidden = true; this._tabDropIndicator.hidden = true;
event.stopPropagation(); event.stopPropagation();
@@ -82,7 +90,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
if (draggedTab && dropEffect == "copy") { if (draggedTab && dropEffect == "copy") {
let duplicatedDraggedTab; let duplicatedDraggedTab;
let duplicatedTabs = []; let duplicatedTabs = [];
@@ -1120,8 +1139,9 @@ @@ -1120,8 +1138,9 @@
let translateOffsetY = oldTranslateY % tabHeight; let translateOffsetY = oldTranslateY % tabHeight;
let newTranslateX = oldTranslateX - translateOffsetX; let newTranslateX = oldTranslateX - translateOffsetX;
let newTranslateY = oldTranslateY - translateOffsetY; let newTranslateY = oldTranslateY - translateOffsetY;
@@ -94,7 +102,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
if (this.#isContainerVerticalPinnedGrid(draggedTab)) { if (this.#isContainerVerticalPinnedGrid(draggedTab)) {
// Update both translate axis for pinned vertical expanded tabs // Update both translate axis for pinned vertical expanded tabs
@@ -1137,8 +1157,8 @@ @@ -1137,8 +1156,8 @@
} }
} else { } else {
let tabs = this.ariaFocusableItems.slice( let tabs = this.ariaFocusableItems.slice(
@@ -105,7 +113,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
); );
let size = this.verticalMode ? "height" : "width"; let size = this.verticalMode ? "height" : "width";
let screenAxis = this.verticalMode ? "screenY" : "screenX"; let screenAxis = this.verticalMode ? "screenY" : "screenX";
@@ -1179,11 +1199,9 @@ @@ -1179,11 +1198,9 @@
} }
let shouldPin = let shouldPin =
@@ -119,7 +127,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
let shouldTranslate = let shouldTranslate =
!gReduceMotion && !gReduceMotion &&
!shouldCreateGroupOnDrop && !shouldCreateGroupOnDrop &&
@@ -1196,6 +1214,7 @@ @@ -1196,6 +1213,7 @@
(oldTranslateY && oldTranslateY != newTranslateY); (oldTranslateY && oldTranslateY != newTranslateY);
} else if (this.verticalMode) { } else if (this.verticalMode) {
shouldTranslate &&= oldTranslateY && oldTranslateY != newTranslateY; shouldTranslate &&= oldTranslateY && oldTranslateY != newTranslateY;
@@ -127,7 +135,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
} else { } else {
shouldTranslate &&= oldTranslateX && oldTranslateX != newTranslateX; shouldTranslate &&= oldTranslateX && oldTranslateX != newTranslateX;
} }
@@ -1379,6 +1398,7 @@ @@ -1379,6 +1397,7 @@
let nextItem = this.ariaFocusableItems[newIndex]; let nextItem = this.ariaFocusableItems[newIndex];
let tabGroup = isTab(nextItem) && nextItem.group; let tabGroup = isTab(nextItem) && nextItem.group;
@@ -135,7 +143,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
gBrowser.loadTabs(urls, { gBrowser.loadTabs(urls, {
inBackground, inBackground,
replace, replace,
@@ -1411,6 +1431,17 @@ @@ -1411,6 +1430,17 @@
this.finishMoveTogetherSelectedTabs(draggedTab); this.finishMoveTogetherSelectedTabs(draggedTab);
this.finishAnimateTabMove(); this.finishAnimateTabMove();
@@ -153,7 +161,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
this.#keepTabSizeLocked = false; this.#keepTabSizeLocked = false;
this._unlockTabSizing(); this._unlockTabSizing();
this.#expandGroupOnDrop(draggedTab); this.#expandGroupOnDrop(draggedTab);
@@ -1640,7 +1671,7 @@ @@ -1640,7 +1670,7 @@
} }
get newTabButton() { get newTabButton() {
@@ -162,7 +170,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
} }
get verticalMode() { get verticalMode() {
@@ -1656,6 +1687,7 @@ @@ -1656,6 +1686,7 @@
} }
get overflowing() { get overflowing() {
@@ -170,7 +178,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
return this.hasAttribute("overflow"); return this.hasAttribute("overflow");
} }
@@ -1664,26 +1696,54 @@ @@ -1664,26 +1695,54 @@
if (this.#allTabs) { if (this.#allTabs) {
return this.#allTabs; return this.#allTabs;
} }
@@ -232,7 +240,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
} }
/** /**
@@ -1750,32 +1810,27 @@ @@ -1750,32 +1809,27 @@
let elementIndex = 0; let elementIndex = 0;
@@ -274,7 +282,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
return this.#focusableItems; return this.#focusableItems;
} }
@@ -1783,6 +1838,7 @@ @@ -1783,6 +1837,7 @@
_invalidateCachedTabs() { _invalidateCachedTabs() {
this.#allTabs = null; this.#allTabs = null;
this._invalidateCachedVisibleTabs(); this._invalidateCachedVisibleTabs();
@@ -282,7 +290,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
} }
_invalidateCachedVisibleTabs() { _invalidateCachedVisibleTabs() {
@@ -1798,8 +1854,8 @@ @@ -1798,8 +1853,8 @@
#isContainerVerticalPinnedGrid(tab) { #isContainerVerticalPinnedGrid(tab) {
return ( return (
this.verticalMode && this.verticalMode &&
@@ -293,7 +301,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
!this.expandOnHover !this.expandOnHover
); );
} }
@@ -1815,7 +1871,7 @@ @@ -1815,7 +1870,7 @@
if (node == null) { if (node == null) {
// We have a container for non-tab elements at the end of the scrollbox. // We have a container for non-tab elements at the end of the scrollbox.
@@ -302,7 +310,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
} }
node.before(tab); node.before(tab);
@@ -1910,7 +1966,7 @@ @@ -1910,7 +1965,7 @@
// There are separate "new tab" buttons for horizontal tabs toolbar, vertical tabs and // There are separate "new tab" buttons for horizontal tabs toolbar, vertical tabs and
// for when the tab strip is overflowed (which is shared by vertical and horizontal tabs); // for when the tab strip is overflowed (which is shared by vertical and horizontal tabs);
// Attach the long click popup to all of them. // Attach the long click popup to all of them.
@@ -311,7 +319,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
const newTab2 = this.newTabButton; const newTab2 = this.newTabButton;
const newTabVertical = document.getElementById( const newTabVertical = document.getElementById(
"vertical-tabs-newtab-button" "vertical-tabs-newtab-button"
@@ -2005,10 +2061,12 @@ @@ -2005,10 +2060,12 @@
_handleTabSelect(aInstant) { _handleTabSelect(aInstant) {
let selectedTab = this.selectedItem; let selectedTab = this.selectedItem;
@@ -324,7 +332,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
selectedTab._notselectedsinceload = false; selectedTab._notselectedsinceload = false;
} }
@@ -2152,6 +2210,7 @@ @@ -2152,6 +2209,7 @@
when the tab is first selected to be dragged. when the tab is first selected to be dragged.
*/ */
#updateTabStylesOnDrag(tab) { #updateTabStylesOnDrag(tab) {
@@ -332,7 +340,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
let isPinned = tab.pinned; let isPinned = tab.pinned;
let numPinned = gBrowser.pinnedTabCount; let numPinned = gBrowser.pinnedTabCount;
let allTabs = this.ariaFocusableItems; let allTabs = this.ariaFocusableItems;
@@ -2385,7 +2444,7 @@ @@ -2385,7 +2443,7 @@
return; return;
} }
@@ -341,7 +349,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
let directionX = screenX > dragData.animLastScreenX; let directionX = screenX > dragData.animLastScreenX;
let directionY = screenY > dragData.animLastScreenY; let directionY = screenY > dragData.animLastScreenY;
@@ -2394,6 +2453,8 @@ @@ -2394,6 +2452,8 @@
let { width: tabWidth, height: tabHeight } = let { width: tabWidth, height: tabHeight } =
draggedTab.getBoundingClientRect(); draggedTab.getBoundingClientRect();
@@ -350,7 +358,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
let shiftSizeX = tabWidth * movingTabs.length; let shiftSizeX = tabWidth * movingTabs.length;
let shiftSizeY = tabHeight; let shiftSizeY = tabHeight;
dragData.tabWidth = tabWidth; dragData.tabWidth = tabWidth;
@@ -2547,7 +2608,7 @@ @@ -2547,7 +2607,7 @@
} }
dragData.animDropElementIndex = newIndex; dragData.animDropElementIndex = newIndex;
@@ -359,7 +367,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
dragData.dropBefore = newIndex < tabs.length; dragData.dropBefore = newIndex < tabs.length;
// Shift background tabs to leave a gap where the dragged tab // Shift background tabs to leave a gap where the dragged tab
@@ -2580,13 +2641,18 @@ @@ -2580,13 +2640,18 @@
this.#clearDragOverCreateGroupTimer(); this.#clearDragOverCreateGroupTimer();
@@ -382,7 +390,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
if (this.#rtlMode) { if (this.#rtlMode) {
tabs.reverse(); tabs.reverse();
@@ -2597,7 +2663,7 @@ @@ -2597,7 +2662,7 @@
let screenAxis = this.verticalMode ? "screenY" : "screenX"; let screenAxis = this.verticalMode ? "screenY" : "screenX";
let size = this.verticalMode ? "height" : "width"; let size = this.verticalMode ? "height" : "width";
let translateAxis = this.verticalMode ? "translateY" : "translateX"; let translateAxis = this.verticalMode ? "translateY" : "translateX";
@@ -391,8 +399,14 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
let translateX = event.screenX - dragData.screenX; let translateX = event.screenX - dragData.screenX;
let translateY = event.screenY - dragData.screenY; let translateY = event.screenY - dragData.screenY;
@@ -2611,6 +2677,12 @@ @@ -2607,10 +2672,16 @@
let lastTab = allTabs.at(this.#rtlMode ? 0 : -1); dragData.translateY = translateY;
// Move the dragged tab based on the mouse position.
- let firstTab = allTabs.at(this.#rtlMode ? -1 : 0);
- let lastTab = allTabs.at(this.#rtlMode ? 0 : -1);
+ let firstTab = tabs.at(this.#rtlMode ? -1 : 0);
+ let lastTab = tabs.at(this.#rtlMode ? 0 : -1);
let lastMovingTab = movingTabs.at(-1); let lastMovingTab = movingTabs.at(-1);
let firstMovingTab = movingTabs[0]; let firstMovingTab = movingTabs[0];
+ if (lastMovingTab.group?.hasAttribute("split-view-group")) { + if (lastMovingTab.group?.hasAttribute("split-view-group")) {
@@ -404,7 +418,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
let endEdge = ele => ele[screenAxis] + bounds(ele)[size]; let endEdge = ele => ele[screenAxis] + bounds(ele)[size];
let lastMovingTabScreen = endEdge(lastMovingTab); let lastMovingTabScreen = endEdge(lastMovingTab);
let firstMovingTabScreen = firstMovingTab[screenAxis]; let firstMovingTabScreen = firstMovingTab[screenAxis];
@@ -2619,6 +2691,7 @@ @@ -2619,6 +2690,7 @@
// Constrain the range over which the moving tabs can move between the first and last tab // Constrain the range over which the moving tabs can move between the first and last tab
let firstBound = firstTab[screenAxis] - firstMovingTabScreen; let firstBound = firstTab[screenAxis] - firstMovingTabScreen;
let lastBound = endEdge(lastTab) - lastMovingTabScreen; let lastBound = endEdge(lastTab) - lastMovingTabScreen;
@@ -412,7 +426,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
// Center the tab under the cursor if the tab is not under the cursor while dragging // Center the tab under the cursor if the tab is not under the cursor while dragging
if ( if (
@@ -2636,6 +2709,9 @@ @@ -2636,6 +2708,9 @@
// Shift the `.tab-group-label-container` to shift the label element. // Shift the `.tab-group-label-container` to shift the label element.
item = item.parentElement; item = item.parentElement;
} }
@@ -422,7 +436,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
item.style.transform = `${translateAxis}(${translate}px)`; item.style.transform = `${translateAxis}(${translate}px)`;
} }
@@ -2773,6 +2849,9 @@ @@ -2773,6 +2848,9 @@
break; break;
} }
let element = tabs[mid]; let element = tabs[mid];
@@ -432,7 +446,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
let elementForSize = isTabGroupLabel(element) let elementForSize = isTabGroupLabel(element)
? element.parentElement ? element.parentElement
: element; : element;
@@ -2792,6 +2871,8 @@ @@ -2792,6 +2870,8 @@
}; };
let dropElement = getOverlappedElement(); let dropElement = getOverlappedElement();
@@ -441,7 +455,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
let newDropElementIndex; let newDropElementIndex;
if (dropElement) { if (dropElement) {
@@ -2856,7 +2937,7 @@ @@ -2856,7 +2936,7 @@
let shouldCreateGroupOnDrop; let shouldCreateGroupOnDrop;
let dropBefore; let dropBefore;
if (dropElement) { if (dropElement) {
@@ -450,7 +464,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
? dropElement.parentElement ? dropElement.parentElement
: dropElement; : dropElement;
@@ -2876,7 +2957,7 @@ @@ -2876,7 +2956,7 @@
? Services.prefs.getIntPref( ? Services.prefs.getIntPref(
"browser.tabs.dragDrop.moveOverThresholdPercent" "browser.tabs.dragDrop.moveOverThresholdPercent"
) / 100 ) / 100
@@ -459,7 +473,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
moveOverThreshold = Math.min(1, Math.max(0, moveOverThreshold)); moveOverThreshold = Math.min(1, Math.max(0, moveOverThreshold));
let shouldMoveOver = overlapPercent > moveOverThreshold; let shouldMoveOver = overlapPercent > moveOverThreshold;
if (logicalForward && shouldMoveOver) { if (logicalForward && shouldMoveOver) {
@@ -2908,44 +2989,21 @@ @@ -2908,44 +2988,21 @@
// If dragging a group over another group, don't make it look like it is // If dragging a group over another group, don't make it look like it is
// possible to drop the dragged group inside the other group. // possible to drop the dragged group inside the other group.
@@ -509,7 +523,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
// When dragging tab(s) over an ungrouped tab, signal to the user // When dragging tab(s) over an ungrouped tab, signal to the user
// that dropping the tab(s) will create a new tab group. // that dropping the tab(s) will create a new tab group.
shouldCreateGroupOnDrop = shouldCreateGroupOnDrop =
@@ -2955,12 +3013,6 @@ @@ -2955,12 +3012,6 @@
overlapPercent > dragOverGroupingThreshold; overlapPercent > dragOverGroupingThreshold;
if (shouldCreateGroupOnDrop) { if (shouldCreateGroupOnDrop) {
@@ -522,7 +536,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
} else { } else {
this.removeAttribute("movingtab-createGroup"); this.removeAttribute("movingtab-createGroup");
document document
@@ -2987,19 +3039,14 @@ @@ -2987,19 +3038,14 @@
dropElement = dropElementGroup; dropElement = dropElementGroup;
colorCode = undefined; colorCode = undefined;
} else if (isTabGroupLabel(dropElement)) { } else if (isTabGroupLabel(dropElement)) {
@@ -550,7 +564,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
} }
this.#setDragOverGroupColor(colorCode); this.#setDragOverGroupColor(colorCode);
this.toggleAttribute("movingtab-ungroup", !colorCode); this.toggleAttribute("movingtab-ungroup", !colorCode);
@@ -3017,19 +3064,28 @@ @@ -3017,19 +3063,28 @@
dragData.dropElement = dropElement; dragData.dropElement = dropElement;
dragData.dropBefore = dropBefore; dragData.dropBefore = dropBefore;
dragData.animDropElementIndex = newDropElementIndex; dragData.animDropElementIndex = newDropElementIndex;
@@ -581,7 +595,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
} }
item.style.transform = transform; item.style.transform = transform;
} }
@@ -3082,12 +3138,14 @@ @@ -3082,12 +3137,14 @@
); );
} }
@@ -598,7 +612,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
for (let item of this.ariaFocusableItems) { for (let item of this.ariaFocusableItems) {
if (isTabGroupLabel(item)) { if (isTabGroupLabel(item)) {
@@ -3095,6 +3153,18 @@ @@ -3095,6 +3152,18 @@
item = item.parentElement; item = item.parentElement;
} }
item.style.transform = ""; item.style.transform = "";
@@ -617,7 +631,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
item.removeAttribute("dragover-createGroup"); item.removeAttribute("dragover-createGroup");
} }
this.removeAttribute("movingtab-createGroup"); this.removeAttribute("movingtab-createGroup");
@@ -3198,7 +3268,7 @@ @@ -3198,7 +3267,7 @@
let postTransitionCleanup = () => { let postTransitionCleanup = () => {
movingTab._moveTogetherSelectedTabsData.animate = false; movingTab._moveTogetherSelectedTabsData.animate = false;
}; };
@@ -626,7 +640,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
postTransitionCleanup(); postTransitionCleanup();
} else { } else {
let onTransitionEnd = transitionendEvent => { let onTransitionEnd = transitionendEvent => {
@@ -3371,7 +3441,7 @@ @@ -3371,7 +3440,7 @@
} }
_notifyBackgroundTab(aTab) { _notifyBackgroundTab(aTab) {
@@ -635,7 +649,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
return; return;
} }
@@ -3480,7 +3550,10 @@ @@ -3480,7 +3549,10 @@
#getDragTarget(event, { ignoreSides = false } = {}) { #getDragTarget(event, { ignoreSides = false } = {}) {
let { target } = event; let { target } = event;
while (target) { while (target) {
@@ -647,7 +661,7 @@ index e47f735e4e4563c9b7537944628418d1478c068d..e8e52b56ba2eca562186512363d90e38
break; break;
} }
target = target.parentNode; target = target.parentNode;
@@ -3497,6 +3570,9 @@ @@ -3497,6 +3569,9 @@
return null; return null;
} }
} }

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

@@ -890,7 +890,10 @@
if (!group && tab?.group) { if (!group && tab?.group) {
group = tab; // So we can set isTab later group = tab; // So we can set isTab later
} }
if (gBrowser.isTab(group) && !group.hasAttribute('zen-empty-tab')) { if (
gBrowser.isTab(group) &&
!(group.hasAttribute('zen-empty-tab') && group.group === tab.group)
) {
group = group.group; group = group.group;
isTab = true; isTab = true;
} }

5
src/zen/tabs/ZenPinnedTabManager.mjs
View File

@@ -1162,7 +1162,10 @@
continue; continue;
} }
} }
const itemToAnimate = item.group?.hasAttribute('split-view-group') ? item.group : item; const itemToAnimate =
item.group?.hasAttribute('split-view-group') || gBrowser.isTabGroupLabel(item)
? item.group
: item;
itemToAnimate.style.removeProperty('--zen-folder-indent'); itemToAnimate.style.removeProperty('--zen-folder-indent');
} }
this.removeTabContainersDragoverClass(); this.removeTabContainersDragoverClass();

3
src/zen/tests/folders/browser.toml
View File

@@ -4,3 +4,6 @@
["browser_folder_create.js"] ["browser_folder_create.js"]
["browser_folder_subfolder.js"] ["browser_folder_subfolder.js"]
["browser_folder_basic_toggle.js"]
["browser_folder_issue_9885.js"]

23
src/zen/tests/folders/browser_folder_basic_toggle.js Normal file
View File

@@ -0,0 +1,23 @@
/* Any copyright is dedicated to the Public Domain.
https://creativecommons.org/publicdomain/zero/1.0/ */
'use strict';
add_task(async function test_Basic_Toggle() {
const folder = await gZenFolders.createFolder([], {
renameFolder: false,
label: 'subfolder',
});
ok(!folder.collapsed, 'Folder should not be collapsed by default');
folder.labelElement.click();
ok(folder.collapsed, 'Folder should be collapsed after clicking on it');
folder.labelElement.click();
ok(!folder.collapsed, 'Folder should be expanded after clicking on it again');
const removeEvent = BrowserTestUtils.waitForEvent(folder, 'TabGroupRemoved');
folder.delete();
await removeEvent;
});

29
src/zen/tests/folders/browser_folder_issue_9885.js Normal file
View File

@@ -0,0 +1,29 @@
/* Any copyright is dedicated to the Public Domain.
https://creativecommons.org/publicdomain/zero/1.0/ */
'use strict';
add_task(async function test_Issue_9885() {
const subfolder = await gZenFolders.createFolder([], {
renameFolder: false,
label: 'subfolder',
});
const parent = await gZenFolders.createFolder([], {
renameFolder: false,
label: 'parent',
});
parent.tabs[0].after(subfolder);
Assert.equal(parent, subfolder.group, 'Parent folder is set correctly');
ok(!subfolder.collapsed, 'Subfolder should not be collapsed by default');
ok(!parent.collapsed, 'Parent folder should not be collapsed by default');
subfolder.labelElement.click();
ok(subfolder.collapsed, 'Subfolder should be collapsed after clicking on it');
ok(!parent.collapsed, 'Parent folder should be collapsed after clicking on subfolder');
const removeEvent = BrowserTestUtils.waitForEvent(parent, 'TabGroupRemoved');
parent.delete();
await removeEvent;
});

122
src/zen/workspaces/ZenWorkspaces.mjs
View File

@@ -2398,67 +2398,73 @@ var gZenWorkspaces = new (class extends nsZenMultiWindowFeature {
} }
async onPinnedTabsResize(entries, forAnimation = false, animateContainer = false) { async onPinnedTabsResize(entries, forAnimation = false, animateContainer = false) {
if ( await new Promise((resolve) => {
!this._hasInitializedTabsStrip || requestAnimationFrame(async () => {
(this._organizingWorkspaceStrip && !forAnimation) || if (
document.documentElement.hasAttribute('zen-creating-workspace') !this._hasInitializedTabsStrip ||
) { (this._organizingWorkspaceStrip && !forAnimation) ||
return; document.documentElement.hasAttribute('zen-creating-workspace') ||
} document.documentElement.hasAttribute('customizing')
if (document.documentElement.hasAttribute('customizing')) return; ) {
// forAnimation may be of type "ResizeObserver" if it's not a boolean, just ignore it resolve();
if (typeof forAnimation !== 'boolean') { return;
forAnimation = false;
}
for (const entry of entries) {
let originalWorkspaceId = entry.target.getAttribute('zen-workspace-id');
if (!originalWorkspaceId) {
originalWorkspaceId = entry.target.closest('zen-workspace')?.id;
}
const workspacesIds = [];
if (entry.target.closest('#zen-essentials')) {
// Get all workspaces that have the same userContextId
const activeWorkspace = await this.getActiveWorkspace();
const userContextId = activeWorkspace.containerTabId;
const workspaces = this._workspaceCache.workspaces.filter(
(w) => w.containerTabId === userContextId && w.uuid !== originalWorkspaceId
);
workspacesIds.push(...workspaces.map((w) => w.uuid));
} else {
workspacesIds.push(originalWorkspaceId);
}
for (const workspaceId of workspacesIds) {
const workspaceElement = this.workspaceElement(workspaceId);
if (!workspaceElement) {
continue;
} }
const arrowScrollbox = workspaceElement.tabsContainer; // forAnimation may be of type "ResizeObserver" if it's not a boolean, just ignore it
const pinnedContainer = workspaceElement.pinnedTabsContainer; if (typeof forAnimation !== 'boolean') {
const workspaceObject = this.getWorkspaceFromId(workspaceId); forAnimation = false;
const essentialContainer = this.getEssentialsSection(workspaceObject.containerTabId);
const essentialNumChildren = essentialContainer.children.length;
let essentialHackType = 0;
if (essentialNumChildren === 6 || essentialNumChildren === 9) {
essentialHackType = 1;
} else if (essentialNumChildren % 2 === 0 && essentialNumChildren < 8) {
essentialHackType = 2;
} else if (essentialNumChildren === 5) {
essentialHackType = 3;
} }
if (essentialHackType > 0) { for (const entry of entries) {
essentialContainer.setAttribute('data-hack-type', essentialHackType); let originalWorkspaceId = entry.target.getAttribute('zen-workspace-id');
} else { if (!originalWorkspaceId) {
essentialContainer.removeAttribute('data-hack-type'); originalWorkspaceId = entry.target.closest('zen-workspace')?.id;
}
const workspacesIds = [];
if (entry.target.closest('#zen-essentials')) {
// Get all workspaces that have the same userContextId
const activeWorkspace = await this.getActiveWorkspace();
const userContextId = activeWorkspace.containerTabId;
const workspaces = this._workspaceCache.workspaces.filter(
(w) => w.containerTabId === userContextId && w.uuid !== originalWorkspaceId
);
workspacesIds.push(...workspaces.map((w) => w.uuid));
} else {
workspacesIds.push(originalWorkspaceId);
}
for (const workspaceId of workspacesIds) {
const workspaceElement = this.workspaceElement(workspaceId);
if (!workspaceElement) {
continue;
}
const arrowScrollbox = workspaceElement.tabsContainer;
const pinnedContainer = workspaceElement.pinnedTabsContainer;
const workspaceObject = this.getWorkspaceFromId(workspaceId);
const essentialContainer = this.getEssentialsSection(workspaceObject.containerTabId);
const essentialNumChildren = essentialContainer.children.length;
let essentialHackType = 0;
if (essentialNumChildren === 6 || essentialNumChildren === 9) {
essentialHackType = 1;
} else if (essentialNumChildren % 2 === 0 && essentialNumChildren < 8) {
essentialHackType = 2;
} else if (essentialNumChildren === 5) {
essentialHackType = 3;
}
if (essentialHackType > 0) {
essentialContainer.setAttribute('data-hack-type', essentialHackType);
} else {
essentialContainer.removeAttribute('data-hack-type');
}
this._updatePaddingTopOnTabs(
workspaceElement,
essentialContainer,
forAnimation,
animateContainer
);
this.updateShouldHideSeparator(arrowScrollbox, pinnedContainer);
}
resolve();
} }
this._updatePaddingTopOnTabs( });
workspaceElement, });
essentialContainer,
forAnimation,
animateContainer
);
this.updateShouldHideSeparator(arrowScrollbox, pinnedContainer);
}
}
} }
async onTabBrowserInserted(event) { async onTabBrowserInserted(event) {