Bug 1971382 - allow dropping tabs into collapsed tab groups r=jswinarton,dao,desktop-theme-reviewers,tabbrowser-reviewers

Dragging a tab(s) and hovering it over a collapsed tab group label for a short duration will highlight the dragged tab(s) and the collapsed tab group label in order to indicate that dropping the tab(s) will put it into the group. Since the dragged tab is always the active tab, dropping the moving tab(s) into the collapsed tab group will cause the collapsed tab group to enter the "collapsed-but-with-active-tab" state.

If the active tab is in a collapsed tab group and you try to drag it, dropping the tab right away will drop it after the tab group. In order to "cancel" the operation and return the active tab to its prior position in the collapsed tab group, the user should drag the active tab back over the tab group label and hover over it until it highlights.

This patch leverages the approach of the "create group" functionality + visuals when hovering an ungrouped tab(s) over another. I made the functionality + visuals a bit more generic by referring to it as "grouping" behavior.

If tab group A is collapsed and contains the active tab, and if the user starts dragging tab group B, then the "overflow counter" of tab group A will disappear for the duration of the drag operation. It would be possible to keep that element visible, but it would require opting that element into all of the drag-drop animation logic. That's too large of a change to include in this patch.

Tab selection/tab activation can now cause a tab to appear or disappear if it's in a collapsed tab group, so the <tabs> element's cache of visible tab strip items needs to be updated if that happens.

Differential Revision: https://phabricator.services.mozilla.com/D256745

Author: apostrophest

browser/components/tabbrowser/content/tab.js

@@ -82,7 +82,7 @@
     static get inheritedAttributes() {
       return {
         ".tab-background":
-          "selected=visuallyselected,fadein,multiselected,dragover-createGroup",
+          "selected=visuallyselected,fadein,multiselected,dragover-groupTarget",
         ".tab-group-line": "selected=visuallyselected,multiselected",
         ".tab-loading-burst": "pinned,bursting,notselectedsinceload",
         ".tab-content":
@@ -225,7 +225,9 @@
 
     get visible() {
       return (
-        this.isOpen && !this.hidden && (!this.group?.collapsed || this.selected)
+        this.isOpen &&
+        !this.hidden &&
+        (!this.group || this.group.isTabVisibleInGroup(this))
       );
     }
 

browser/components/tabbrowser/content/tabbrowser.js

@@ -184,6 +184,7 @@
       window.addEventListener("framefocusrequested", this);
       window.addEventListener("activate", this);
       window.addEventListener("deactivate", this);
+      window.addEventListener("TabGroupCollapse", this);
       window.addEventListener("TabGroupCreateByUser", this);
       window.addEventListener("TabGrouped", this);
       window.addEventListener("TabUngrouped", this);
@@ -7244,6 +7245,11 @@
           }
           break;
         }
+        case "TabGroupCollapse":
+          aEvent.target.tabs.forEach(tab => {
+            this.removeFromMultiSelectedTabs(tab);
+          });
+          break;
         case "TabGroupCreateByUser":
           this.tabGroupMenu.openCreateModal(aEvent.target);
           break;

browser/components/tabbrowser/content/tabgroup.js

@@ -160,16 +160,18 @@
           } else {
             let tabs = this.tabs;
             let tabCount = tabs.length;
+            let hasActiveTab = false;
             tabs.forEach((tab, index) => {
               if (tab.selected) {
-                this.hasActiveTab = true;
+                hasActiveTab = true;
               }
 
               // Renumber tabs so that a11y tools can tell users that a given
               // tab is "2 of 7" in the group, for example.
               tab.setAttribute("aria-posinset", index + 1);
               tab.setAttribute("aria-setsize", tabCount);
             });
+            this.hasActiveTab = hasActiveTab;
 
             // When a group containing the active tab is collapsed,
             // the overflow count displays the number of additional tabs
@@ -257,10 +259,16 @@
       this.setAttribute("id", val);
     }
 
+    /**
+     * @returns {boolean}
+     */
     get hasActiveTab() {
       return this.hasAttribute("hasactivetab");
     }
 
+    /**
+     * @param {boolean} val
+     */
     set hasActiveTab(val) {
       this.toggleAttribute("hasactivetab", val);
     }
@@ -370,10 +378,27 @@
       }
     }
 
+    /**
+     * @returns {MozTabbrowserTab[]}
+     */
     get tabs() {
       return Array.from(this.children).filter(node => node.matches("tab"));
     }
 
+    /**
+     * @param {MozTabbrowserTab} tab
+     * @returns {boolean}
+     */
+    isTabVisibleInGroup(tab) {
+      if (this.isBeingDragged) {
+        return false;
+      }
+      if (this.collapsed && !tab.selected) {
+        return false;
+      }
+      return true;
+    }
+
     /**
      * @returns {MozTextLabel}
      */
@@ -392,6 +417,20 @@
       this.#wasCreatedByAdoption = value;
     }
 
+    /**
+     * @returns {boolean}
+     */
+    get isBeingDragged() {
+      return this.hasAttribute("movingtabgroup");
+    }
+
+    /**
+     * @param {boolean} val
+     */
+    set isBeingDragged(val) {
+      this.toggleAttribute("movingtabgroup", val);
+    }
+
     /**
      * add tabs to the group
      *
@@ -502,6 +541,9 @@
       }
     }
 
+    /**
+     * @param {CustomEvent} event
+     */
     on_TabSelect(event) {
       const { previousTab } = event.detail;
       this.hasActiveTab = event.target.group === this;