Bug 1908412 - add API for adding tabs to a group. r=dao,tabbrowser-reviewers

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

browser/components/tabbrowser/content/tab.js

@@ -320,6 +320,13 @@
       return this.querySelector(".tab-close-button");
     }
 
+    get group() {
+      if (this.parentElement.tagName == "tab-group") {
+        return this.parentElement;
+      }
+      return null;
+    }
+
     updateLastAccessed(aDate) {
       this._lastAccessed = this.selected ? Infinity : aDate || Date.now();
     }

browser/components/tabbrowser/content/tabbrowser.js

@@ -850,7 +850,6 @@
       if (this.tabContainer.verticalMode) {
         let wasFocused = document.activeElement == this.selectedTab;
         let oldPosition = aTab._tPos;
-        this.tabContainer._invalidateCachedTabs();
         this.verticalPinnedTabsContainer.appendChild(aTab);
         this._updateAfterMoveTabTo(aTab, oldPosition, wasFocused);
       } else {
@@ -873,7 +872,6 @@
         // the moving of a tab from the vertical pinned tabs container
         // and back into arrowscrollbox.
         aTab.removeAttribute("pinned");
-        this.tabContainer._invalidateCachedTabs();
         this.tabContainer.arrowScrollbox.prepend(aTab);
         this._updateAfterMoveTabTo(aTab, oldPosition, wasFocused);
       } else {
@@ -2930,6 +2928,7 @@
       group.color = color;
       group.label = label;
       this.tabContainer.appendChild(group);
+      return group;
     },
 
     _determineURIToLoad(uriString, createLazyBrowser) {
@@ -5331,13 +5330,29 @@
         neighbor.after(aTab);
       }
 
-      // We want to clear _allTabs after moving nodes because the order of
-      // vertical tabs may have changed.
-      this.tabContainer._invalidateCachedTabs();
       this._updateAfterMoveTabTo(aTab, oldPosition, wasFocused);
     },
 
+    moveTabToGroup(aTab, aGroup) {
+      if (aTab.pinned) {
+        return;
+      }
+      if (aTab.group && aTab.group.id === aGroup.id) {
+        return;
+      }
+      let wasFocused = document.activeElement == this.selectedTab;
+      aGroup.appendChild(aTab);
+
+      // pass -1 to oldPosition because a move occurred even if position
+      // hasn't changed
+      this._updateAfterMoveTabTo(aTab, -1, wasFocused);
+    },
+
     _updateAfterMoveTabTo(aTab, oldPosition, wasFocused = null) {
+      // We want to clear _allTabs after moving nodes because the order of
+      // vertical tabs may have changed.
+      this.tabContainer._invalidateCachedTabs();
+
       this._updateTabsAfterInsert();
 
       if (wasFocused) {

browser/components/tabbrowser/content/tabgroup.js

@@ -57,6 +57,21 @@
     set label(val) {
       this.setAttribute("label", val);
     }
+
+    get tabs() {
+      return Array.from(this.children).filter(node => node.matches("tab"));
+    }
+
+    /**
+     * add tabs to the group
+     *
+     * @param tabs array of tabs to add
+     */
+    addTabs(tabs) {
+      for (let tab of tabs) {
+        gBrowser.moveTabToGroup(tab, this);
+      }
+    }
   }
 
   customElements.define("tab-group", MozTabbrowserTabGroup);

browser/components/tabbrowser/content/tabs.js

@@ -1139,6 +1139,13 @@
       // remove arrowScrollbox periphery element
       children.pop();
 
+      // explode tab groups
+      Array.from(children).forEach((node, index) => {
+        if (node.tagName == "tab-group") {
+          children.splice(index, 1, ...node.tabs);
+        }
+      });
+
       let allChildren = [...verticalPinnedTabsContainer.children, ...children];
       this._allTabs = allChildren;
       return allChildren;

browser/components/tabbrowser/test/browser/tabs/browser.toml

@@ -317,6 +317,8 @@ skip-if = ["true"] # Bug 1616418 Bug 1549985
 
 ["browser_tab_a11y_description.js"]
 
+["browser_tab_groups.js"]
+
 ["browser_tab_label_during_reload.js"]
 
 ["browser_tab_label_picture_in_picture.js"]

browser/components/tabbrowser/test/browser/tabs/browser_tab_groups.js

@@ -0,0 +1,18 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+add_task(async function test_tabGroups() {
+  let group = gBrowser.addTabGroup("blue", "test");
+
+  Assert.ok(group.id, "group has id");
+
+  let tab1 = BrowserTestUtils.addTab(gBrowser, "about:blank");
+  group.addTabs([tab1]);
+
+  Assert.ok(group.tabs.includes(tab1), "tab1 is in group");
+
+  // TODO add API to remove group
+  BrowserTestUtils.removeTab(tab1);
+  group.remove();
+});