Bug 1397755 - Use touch density for all tabs list with touch r=dao

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

--HG--
extra : moz-landing-system : lando

browser/base/content/browser-allTabsMenu.js

@@ -135,10 +135,14 @@ var gTabsPanel = {
     return isElementVisible(this.allTabsButton);
   },
 
-  showAllTabsPanel() {
+  showAllTabsPanel(event) {
     this.init();
     if (this.canOpen) {
-      PanelUI.showSubView(this.kElements.allTabsView, this.allTabsButton);
+      PanelUI.showSubView(
+        this.kElements.allTabsView,
+        this.allTabsButton,
+        event
+      );
     }
   },
 
@@ -147,7 +151,7 @@ var gTabsPanel = {
     PanelMultiView.hidePopup(this.allTabsView.closest("panel"));
   },
 
-  showHiddenTabsPanel() {
+  showHiddenTabsPanel(event) {
     this.init();
     if (!this.canOpen) {
       return;
@@ -162,7 +166,7 @@ var gTabsPanel = {
       },
       { once: true }
     );
-    this.showAllTabsPanel();
+    this.showAllTabsPanel(event);
   },
 
   searchTabs() {

browser/base/content/browser-menubar.inc

@@ -266,7 +266,7 @@
                 <menuitem id="historyRestoreLastSession"
                           command="Browser:RestoreLastSession" data-l10n-id="menu-history-restore-last-session"/>
                 <menuitem id="hiddenTabsMenu"
-                          oncommand="gTabsPanel.showHiddenTabsPanel();"
+                          oncommand="gTabsPanel.showHiddenTabsPanel(event);"
                           hidden="true" data-l10n-id="menu-history-hidden-tabs"/>
                 <menu id="historyUndoMenu"
                       disabled="true" data-l10n-id="menu-history-undo-menu">

browser/base/content/browser.xhtml

@@ -759,7 +759,7 @@
             <toolbarbutton id="alltabs-button"
                            class="toolbarbutton-1 chromeclass-toolbar-additional tabs-alltabs-button"
                            badged="true"
-                           oncommand="gTabsPanel.showAllTabsPanel();"
+                           oncommand="gTabsPanel.showAllTabsPanel(event);"
                            label="&listAllTabs.label;"
                            tooltiptext="&listAllTabs.label;"
                            removable="false"/>

browser/base/content/test/touch/browser_menu_touch.js

@@ -144,3 +144,16 @@ add_task(async function test_overflow_panel_touch() {
 
   CustomizableUI.reset();
 });
+
+// Test the list all tabs menu.
+add_task(async function test_list_all_tabs_touch() {
+  // Force the menu button to be shown.
+  let tabs = document.getElementById("tabbrowser-tabs");
+  if (!tabs.hasAttribute("overflow")) {
+    tabs.setAttribute("overflow", true);
+    registerCleanupFunction(() => tabs.removeAttribute("overflow"));
+  }
+
+  let target = document.getElementById("alltabs-button");
+  await openAndCheckCustomizationUIMenu(target);
+});