Bug 953217 - Make middle-clicking in the Tab Manager list close the associated tab. r=dao

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

browser/base/content/test/tabs/browser.ini

@@ -153,6 +153,7 @@ skip-if =
 [browser_tab_a11y_description.js]
 [browser_tab_label_during_reload.js]
 [browser_tab_label_picture_in_picture.js]
+[browser_tab_manager_close.js]
 [browser_tab_manager_drag.js]
 [browser_tab_manager_keyboard_access.js]
 [browser_tab_manager_visibility.js]

browser/base/content/test/tabs/browser_tab_manager_close.js

@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const URL1 = "data:text/plain,tab1";
+const URL2 = "data:text/plain,tab2";
+const URL3 = "data:text/plain,tab3";
+const URL4 = "data:text/plain,tab4";
+const URL5 = "data:text/plain,tab5";
+
+/**
+ * Tests that middle-clicking on a tab in the Tab Manager will close it.
+ */
+add_task(async function test_tab_manager_close() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["browser.tabs.tabmanager.enabled", true]],
+  });
+
+  let win = await BrowserTestUtils.openNewWindowWithFlushedCacheForMozSupports();
+  win.gTabsPanel.init();
+  await addTabTo(win.gBrowser, URL1);
+  await addTabTo(win.gBrowser, URL2);
+  await addTabTo(win.gBrowser, URL3);
+  await addTabTo(win.gBrowser, URL4);
+  await addTabTo(win.gBrowser, URL5);
+
+  let button = win.document.getElementById("alltabs-button");
+  let allTabsView = win.document.getElementById("allTabsMenu-allTabsView");
+  let allTabsPopupShownPromise = BrowserTestUtils.waitForEvent(
+    allTabsView,
+    "ViewShown"
+  );
+  button.click();
+  await allTabsPopupShownPromise;
+
+  let list = win.document.getElementById("allTabsMenu-allTabsView-tabs");
+  while (win.gBrowser.tabs.length > 1) {
+    let row = list.lastElementChild;
+    let tabClosing = BrowserTestUtils.waitForTabClosing(row.tab);
+    EventUtils.synthesizeMouseAtCenter(row, { button: 1 }, win);
+    await tabClosing;
+    Assert.ok(true, "Closed a tab with middle-click.");
+  }
+  await BrowserTestUtils.closeWindow(win);
+});

browser/modules/TabsList.jsm

@@ -89,6 +89,9 @@ class TabsListBase {
       case "drop":
         this._onDrop(event);
         break;
+      case "click":
+        this._onClick(event);
+        break;
     }
   }
 
@@ -140,6 +143,8 @@ class TabsListBase {
     this.gBrowser.tabContainer.addEventListener("TabMove", this);
     this.gBrowser.tabContainer.addEventListener("TabPinned", this);
 
+    this.containerNode.addEventListener("click", this);
+
     if (this.dropIndicator) {
       this.containerNode.addEventListener("dragstart", this);
       this.containerNode.addEventListener("dragover", this);
@@ -155,6 +160,8 @@ class TabsListBase {
     this.gBrowser.tabContainer.removeEventListener("TabMove", this);
     this.gBrowser.tabContainer.removeEventListener("TabPinned", this);
 
+    this.containerNode.removeEventListener("click", this);
+
     if (this.dropIndicator) {
       this.containerNode.removeEventListener("dragstart", this);
       this.containerNode.removeEventListener("dragover", this);
@@ -367,7 +374,7 @@ class TabsPanel extends TabsListBase {
   }
 
   _onDragStart(event) {
-    const row = this._getDragTargetRow(event);
+    const row = this._getTargetRowFromEvent(event);
     if (!row) {
       return;
     }
@@ -377,12 +384,8 @@ class TabsPanel extends TabsListBase {
     });
   }
 
-  _getDragTargetRow(event) {
-    let row = event.target;
-    while (row && row.localName !== "toolbaritem") {
-      row = row.parentNode;
-    }
-    return row;
+  _getTargetRowFromEvent(event) {
+    return event.target.closest("toolbaritem");
   }
 
   _isMovingTabs(event) {
@@ -467,7 +470,7 @@ class TabsPanel extends TabsListBase {
   }
 
   _updateDropTarget(event) {
-    const row = this._getDragTargetRow(event);
+    const row = this._getTargetRowFromEvent(event);
     if (!row) {
       return false;
     }
@@ -530,4 +533,17 @@ class TabsPanel extends TabsListBase {
       this.dropIndicator.collapsed = true;
     }
   }
+
+  _onClick(event) {
+    if (event.button == 1) {
+      const row = this._getTargetRowFromEvent(event);
+      if (!row) {
+        return;
+      }
+
+      this.gBrowser.removeTab(row.tab, {
+        animate: true,
+      });
+    }
+  }
 }