Bug 1929898 - Implement pause on drag and drop to create tab group. r=sthompson

Differential Revision: https://phabricator.services.mozilla.com/D228570
This commit is contained in:
Dão Gottwald
2024-11-12 16:54:20 +00:00
parent c335e5f456
commit c40a1cb421
2 changed files with 30 additions and 10 deletions

View File

@@ -40,6 +40,7 @@
static observedAttributes = ["orient"];
#maxTabsPerRow;
#dragOverCreateGroupTimer;
constructor() {
super();
@@ -2238,18 +2239,15 @@
}
// If dragging over an ungrouped tab, present the UI for creating a
// new tab group on drop.
this.#clearDragOverCreateGroupTimer();
if (
groupDropIndex in this.allTabs &&
!this.allTabs[groupDropIndex].group
) {
dragData.groupDropIndex = groupDropIndex;
this.toggleAttribute("movingtab-createGroup", true);
this.removeAttribute("movingtab-ungroup");
this.allTabs[groupDropIndex].toggleAttribute(
"dragover-createGroup",
true
this.#dragOverCreateGroupTimer = setTimeout(
() => this.#triggerDragOverCreateGroup(dragData, groupDropIndex),
Services.prefs.getIntPref("browser.tabs.groups.dragOverDelayMS")
);
this.#setDragOverGroupColor(dragData.tabGroupCreationColor);
} else {
this.removeAttribute("movingtab-createGroup");
}
@@ -2278,6 +2276,26 @@
}
}
#triggerDragOverCreateGroup(dragData, groupDropIndex) {
this.#clearDragOverCreateGroupTimer();
dragData.groupDropIndex = groupDropIndex;
this.toggleAttribute("movingtab-createGroup", true);
this.removeAttribute("movingtab-ungroup");
this.allTabs[groupDropIndex].toggleAttribute(
"dragover-createGroup",
true
);
this.#setDragOverGroupColor(dragData.tabGroupCreationColor);
}
#clearDragOverCreateGroupTimer() {
if (this.#dragOverCreateGroupTimer) {
clearTimeout(this.#dragOverCreateGroupTimer);
this.#dragOverCreateGroupTimer = 0;
}
}
#setDragOverGroupColor(groupColorCode) {
if (!groupColorCode) {
this.style.removeProperty("--dragover-tab-group-color");
@@ -2304,16 +2322,17 @@
return;
}
this.removeAttribute("movingtab");
gNavToolbox.removeAttribute("movingtab");
for (let tab of this.visibleTabs) {
tab.style.transform = "";
tab.removeAttribute("dragover-createGroup");
}
this.removeAttribute("movingtab");
this.removeAttribute("movingtab-createGroup");
this.removeAttribute("movingtab-ungroup");
this.#setDragOverGroupColor(null);
gNavToolbox.removeAttribute("movingtab");
this.#clearDragOverCreateGroupTimer();
this._handleTabSelect();
}