author | Dão Gottwald <dao@mozilla.com> |
Thu, 24 Oct 2024 14:12:27 +0000 (8 months ago) | |
changeset 759487 | 408b339111751d78d4fba892a104d3a52c6ca331 |
parent 759486 | bd84d99137f7164f902707523b7d837eeeb0a60d |
child 759488 | dbb81c54b34e5a4be5a19000614224a51a79f2f4 |
push id | 42258 |
push user | tszentpeteri@mozilla.com |
push date | Fri, 25 Oct 2024 04:10:43 +0000 (8 months ago) |
treeherder | mozilla-central@be024277429a [default view] [failures only] |
perfherder | [talos] [build metrics] [platform microbench] (compared to previous push) |
reviewers | dwalker, jswinarton, tabbrowser-reviewers |
bugs | 1926582 |
milestone | 133.0a1 |
first release with | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
last release without | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
--- a/browser/components/tabbrowser/content/tabs.js +++ b/browser/components/tabbrowser/content/tabs.js @@ -587,17 +587,17 @@ // Set the cursor to an arrow during tab drags. dt.mozCursor = "default"; // Set the tab as the source of the drag, which ensures we have a stable // node to deliver the `dragend` event. See bug 1345473. dt.addElement(tab); if (tab.multiselected) { - this._groupSelectedTabs(tab); + this.#moveTogetherSelectedTabs(tab); } // Create a canvas to which we capture the current tab. // Until canvas is HiDPI-aware (bug 780362), we need to scale the desired // canvas size (in CSS pixels) to the window's backing resolution in order // to get a full-resolution drag image for use on HiDPI displays. let scale = window.devicePixelRatio; let canvas = this._dndCanvas; @@ -736,25 +736,25 @@ let draggedTab = event.dataTransfer.mozGetDataAt(TAB_DROP_TYPE, 0); if ( (effects == "move" || effects == "copy") && this == draggedTab.container && !draggedTab._dragData.fromTabList ) { ind.hidden = true; - if (!this._isGroupTabsAnimationOver()) { - // Wait for grouping tabs animation to finish + if (this.#isAnimatingMoveTogetherSelectedTabs()) { + // Wait for moving selected tabs together animation to finish. return; } - this._finishGroupSelectedTabs(draggedTab); + this._finishMoveTogetherSelectedTabs(draggedTab); if (effects == "move") { // Pinned tabs in expanded vertical mode are on a grid format and require - // different logic to drag and drop + // different logic to drag and drop. if (this.#isContainerVerticalPinnedExpanded(draggedTab)) { this.#animateExpandedPinnedTabMove(event); return; } this._animateTabMove(event); return; } } @@ -836,17 +836,17 @@ if (dt.mozTypesAt(0)[0] == TAB_DROP_TYPE) { // tab copy or move draggedTab = dt.mozGetDataAt(TAB_DROP_TYPE, 0); // not our drop then if (!draggedTab) { return; } movingTabs = draggedTab._dragData.movingTabs; - draggedTab.container._finishGroupSelectedTabs(draggedTab); + draggedTab.container._finishMoveTogetherSelectedTabs(draggedTab); } this._tabDropIndicator.hidden = true; event.stopPropagation(); if (draggedTab && dropEffect == "copy") { // copy the dropped tab (wherever it's from) let newIndex = this._getDropIndex(event); let draggedTabCopy; @@ -1063,17 +1063,17 @@ // Prevent this code from running if a tabdrop animation is // running since calling _finishAnimateTabMove would clear // any CSS transition that is running. if (draggedTab.hasAttribute("tabdrop-samewindow")) { return; } - this._finishGroupSelectedTabs(draggedTab); + this._finishMoveTogetherSelectedTabs(draggedTab); this._finishAnimateTabMove(); if ( dt.mozUserCancelled || dt.dropEffect != "none" || this._isCustomizing ) { delete draggedTab._dragData; @@ -2153,25 +2153,24 @@ this.removeAttribute("movingtab-createGroup"); this.#setDragOverGroupColor(null); gNavToolbox.removeAttribute("movingtab"); this._handleTabSelect(); } /** - * Regroup all selected tabs around the - * tab in param + * Move together all selected tabs around the tab in param. */ - _groupSelectedTabs(tab) { + #moveTogetherSelectedTabs(tab) { let draggedTabPos = tab._tPos; let selectedTabs = gBrowser.selectedTabs; let animate = !gReduceMotion; - tab.groupingTabsData = { + tab._moveTogetherSelectedTabsData = { finished: !animate, }; let addAnimationData = ( movingTab, movingTabNewIndex, isBeforeSelectedTab = true ) => { @@ -2184,24 +2183,24 @@ } let movingTabSize = movingTab.getBoundingClientRect()[ this.verticalMode ? "height" : "width" ]; let shift = (movingTabNewIndex - movingTabOldIndex) * movingTabSize; - movingTab.groupingTabsData.animate = true; - movingTab.toggleAttribute("tab-grouping", true); + movingTab._moveTogetherSelectedTabsData.animate = true; + movingTab.toggleAttribute("multiselected-move-together", true); - movingTab.groupingTabsData.translatePos = shift; + movingTab._moveTogetherSelectedTabsData.translatePos = shift; let postTransitionCleanup = () => { - movingTab.groupingTabsData.newIndex = movingTabNewIndex; - movingTab.groupingTabsData.animate = false; + movingTab._moveTogetherSelectedTabsData.newIndex = movingTabNewIndex; + movingTab._moveTogetherSelectedTabsData.animate = false; }; if (gReduceMotion) { postTransitionCleanup(); } else { let onTransitionEnd = transitionendEvent => { if ( transitionendEvent.propertyName != "transform" || transitionendEvent.originalTarget != movingTab @@ -2232,40 +2231,39 @@ } if (middleTab.multiselected) { // Skip because this selected tab should // be shifted towards the dragged Tab. continue; } - if ( - !middleTab.groupingTabsData || - !middleTab.groupingTabsData.translatePos - ) { - middleTab.groupingTabsData = { translatePos: 0 }; + if (!middleTab._moveTogetherSelectedTabsData?.translatePos) { + middleTab._moveTogetherSelectedTabsData = { translatePos: 0 }; } if (isBeforeSelectedTab) { - middleTab.groupingTabsData.translatePos -= movingTabSize; + middleTab._moveTogetherSelectedTabsData.translatePos -= + movingTabSize; } else { - middleTab.groupingTabsData.translatePos += movingTabSize; + middleTab._moveTogetherSelectedTabsData.translatePos += + movingTabSize; } - middleTab.toggleAttribute("tab-grouping", true); + middleTab.toggleAttribute("multiselected-move-together", true); } }; // Animate left or top selected tabs let insertAtPos = draggedTabPos - 1; for (let i = selectedTabs.indexOf(tab) - 1; i > -1; i--) { let movingTab = selectedTabs[i]; insertAtPos = newIndex(movingTab, insertAtPos); if (animate) { - movingTab.groupingTabsData = {}; + movingTab._moveTogetherSelectedTabsData = {}; addAnimationData(movingTab, insertAtPos, true); } else { gBrowser.moveTabTo(movingTab, insertAtPos); } insertAtPos--; } // Animate right or bottom selected tabs @@ -2274,84 +2272,94 @@ let i = selectedTabs.indexOf(tab) + 1; i < selectedTabs.length; i++ ) { let movingTab = selectedTabs[i]; insertAtPos = newIndex(movingTab, insertAtPos); if (animate) { - movingTab.groupingTabsData = {}; + movingTab._moveTogetherSelectedTabsData = {}; addAnimationData(movingTab, insertAtPos, false); } else { gBrowser.moveTabTo(movingTab, insertAtPos); } insertAtPos++; } // Slide the relevant tabs to their new position. for (let t of this.visibleTabs) { - if (t.groupingTabsData && t.groupingTabsData.translatePos) { + if (t._moveTogetherSelectedTabsData?.translatePos) { let translatePos = - (this.#rtlMode ? -1 : 1) * t.groupingTabsData.translatePos; + (this.#rtlMode ? -1 : 1) * + t._moveTogetherSelectedTabsData.translatePos; t.style.transform = `translate${ this.verticalMode ? "Y" : "X" }(${translatePos}px)`; } } function newIndex(aTab, index) { // Don't allow mixing pinned and unpinned tabs. if (aTab.pinned) { return Math.min(index, gBrowser.pinnedTabCount - 1); } return Math.max(index, gBrowser.pinnedTabCount); } } - _finishGroupSelectedTabs(tab) { - if (!tab.groupingTabsData || tab.groupingTabsData.finished) { + _finishMoveTogetherSelectedTabs(tab) { + if ( + !tab._moveTogetherSelectedTabsData || + tab._moveTogetherSelectedTabsData.finished + ) { return; } - tab.groupingTabsData.finished = true; + tab._moveTogetherSelectedTabsData.finished = true; let selectedTabs = gBrowser.selectedTabs; let tabIndex = selectedTabs.indexOf(tab); // Moving left or top tabs for (let i = tabIndex - 1; i > -1; i--) { let movingTab = selectedTabs[i]; - if (movingTab.groupingTabsData.newIndex) { - gBrowser.moveTabTo(movingTab, movingTab.groupingTabsData.newIndex); + if (movingTab._moveTogetherSelectedTabsData.newIndex) { + gBrowser.moveTabTo( + movingTab, + movingTab._moveTogetherSelectedTabsData.newIndex + ); } } // Moving right or bottom tabs for (let i = tabIndex + 1; i < selectedTabs.length; i++) { let movingTab = selectedTabs[i]; - if (movingTab.groupingTabsData.newIndex) { - gBrowser.moveTabTo(movingTab, movingTab.groupingTabsData.newIndex); + if (movingTab._moveTogetherSelectedTabsData.newIndex) { + gBrowser.moveTabTo( + movingTab, + movingTab._moveTogetherSelectedTabsData.newIndex + ); } } for (let t of this.visibleTabs) { t.style.transform = ""; - t.removeAttribute("tab-grouping"); - delete t.groupingTabsData; + t.removeAttribute("multiselected-move-together"); + delete t._moveTogetherSelectedTabsData; } } - _isGroupTabsAnimationOver() { + #isAnimatingMoveTogetherSelectedTabs() { for (let tab of gBrowser.selectedTabs) { - if (tab.groupingTabsData && tab.groupingTabsData.animate) { - return false; + if (tab._moveTogetherSelectedTabsData?.animate) { + return true; } } - return true; + return false; } handleEvent(aEvent) { switch (aEvent.type) { case "mouseout": // If the "related target" (the node to which the pointer went) is not // a child of the current document, the mouse just left the window. let relatedTarget = aEvent.relatedTarget;