Bug 1926582 - Rename things related to moving multiselected tabs together to avoid confusion with tab groups. r=dwalker,jswinarton,tabbrowser-reviewers
authorDã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 id42258
push usertszentpeteri@mozilla.com
push dateFri, 25 Oct 2024 04:10:43 +0000 (8 months ago)
treeherdermozilla-central@be024277429a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdwalker, jswinarton, tabbrowser-reviewers
bugs1926582
milestone133.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
Bug 1926582 - Rename things related to moving multiselected tabs together to avoid confusion with tab groups. r=dwalker,jswinarton,tabbrowser-reviewers Differential Revision: https://phabricator.services.mozilla.com/D226640
browser/components/tabbrowser/content/tabs.js
--- 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;