Bug 1692840 - Add "Open a New Tab" at the top of the tabstrip context menu. r=Gijs

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

browser/base/content/browser.js

@@ -6337,6 +6337,10 @@ function onViewToolbarsPopupShowing(aEvent, aInsertPoint) {
   let menuSeparator = document.getElementById("toolbarItemsMenuSeparator");
   menuSeparator.hidden = false;
 
+  document.getElementById(
+    "toolbarNavigatorItemsMenuSeparator"
+  ).hidden = !showTabStripItems;
+
   if (
     !CustomizationHandler.isCustomizing() &&
     CustomizableUI.isSpecialWidget(toolbarItem?.id || "")

browser/base/content/browser.xhtml

@@ -131,6 +131,9 @@
     <menupopup id="tabContextMenu"
                onpopupshowing="if (event.target == this) TabContextMenu.updateContextMenu(this);"
                onpopuphidden="if (event.target == this) TabContextMenu.contextTab = null;">
+      <menuitem id="context_openANewTab" data-lazy-l10n-id="tab-context-open-a-new-tab"
+                oncommand="gBrowser.addAdjacentNewTab(TabContextMenu.contextTab)"/>
+      <menuseparator/>
       <menuitem id="context_reloadTab" data-lazy-l10n-id="reload-tab"
                 oncommand="gBrowser.reloadTab(TabContextMenu.contextTab);"/>
       <menuitem id="context_reloadSelectedTabs" data-lazy-l10n-id="reload-tabs" hidden="true"
@@ -457,6 +460,11 @@
                 data-lazy-l10n-id="toolbar-context-menu-remove-from-toolbar"
                 contexttype="toolbaritem"
                 class="customize-context-removeFromToolbar"/>
+      <menuitem id="toolbar-context-openANewTab"
+                contexttype="tabbar"
+                command="cmd_newNavigatorTab"
+                data-lazy-l10n-id="toolbar-context-menu-open-a-new-tab"/>
+      <menuseparator id="toolbarNavigatorItemsMenuSeparator"/>
       <menuitem id="toolbar-context-reloadSelectedTab"
                 contexttype="tabbar"
                 oncommand="gBrowser.reloadMultiSelectedTabs();"

browser/base/content/tabbrowser.js

@@ -2522,6 +2522,21 @@
       return this.addTab(aURI, params);
     },
 
+    addAdjacentNewTab(tab) {
+      Services.obs.notifyObservers(
+        {
+          wrappedJSObject: new Promise(resolve => {
+            this.selectedTab = this.addTrustedTab(BROWSER_NEW_TAB_URL, {
+              index: tab._tPos + 1,
+              userContextId: tab.userContextId,
+            });
+            resolve(this.selectedBrowser);
+          }),
+        },
+        "browser-open-newtab-start"
+      );
+    },
+
     /**
      * Must only be used sparingly for content that came from Chrome context
      * If in doubt use addWebTab

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

@@ -9,6 +9,7 @@ support-files =
 
 [browser_accessibility_indicator.js]
 skip-if = (verify && debug && (os == 'linux')) || (os == 'win' && processor == 'aarch64')
+[browser_addAdjacentNewTab.js]
 [browser_addTab_index.js]
 [browser_allow_process_switches_despite_related_browser.js]
 [browser_audioTabIcon.js]

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

@@ -0,0 +1,55 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+add_task(async function() {
+  await SpecialPowers.pushPrefEnv({
+    // Ensure we can wait for about:newtab to load.
+    set: [["browser.newtab.preload", false]],
+  });
+
+  const tab1 = await addTab();
+  const tab2 = await addTab();
+  const tab3 = await addTab();
+
+  const menuItemOpenANewTab = document.getElementById("context_openANewTab");
+
+  await BrowserTestUtils.switchTab(gBrowser, tab2);
+
+  is(tab1._tPos, 1, "First tab");
+  is(tab2._tPos, 2, "Second tab");
+  is(tab3._tPos, 3, "Third tab");
+
+  updateTabContextMenu(tab2);
+  is(menuItemOpenANewTab.hidden, false, "Open a new Tab is visible");
+
+  const newTabPromise = BrowserTestUtils.waitForNewTab(gBrowser);
+
+  // Open the tab context menu.
+  const contextMenu = document.getElementById("tabContextMenu");
+  // The TabContextMenu initializes its strings only on a focus or mouseover event.
+  // Calls focus event on the TabContextMenu early in the test.
+  gBrowser.selectedTab.focus();
+  const popupShownPromise = BrowserTestUtils.waitForEvent(
+    contextMenu,
+    "popupshown"
+  );
+  EventUtils.synthesizeMouseAtCenter(gBrowser.selectedTab, {
+    type: "contextmenu",
+    button: 2,
+  });
+  await popupShownPromise;
+
+  EventUtils.synthesizeMouseAtCenter(menuItemOpenANewTab, {});
+
+  let newTab = await newTabPromise;
+
+  is(tab1._tPos, 1, "First tab");
+  is(tab2._tPos, 2, "Second tab");
+  is(newTab._tPos, 3, "Third tab");
+  is(tab3._tPos, 4, "Fourth tab");
+
+  BrowserTestUtils.removeTab(tab1);
+  BrowserTestUtils.removeTab(tab2);
+  BrowserTestUtils.removeTab(tab3);
+  BrowserTestUtils.removeTab(newTab);
+});

browser/components/customizableui/test/browser_customization_context_menus.js

@@ -65,6 +65,8 @@ add_task(async function tabstrip_context() {
   let closedTabsAvailable = SessionStore.getClosedTabCount(window) == 0;
   info("Closed tabs: " + closedTabsAvailable);
   let expectedEntries = [
+    ["#toolbar-context-openANewTab", true],
+    ["---"],
     ["#toolbar-context-reloadSelectedTab", true],
     ["#toolbar-context-bookmarkSelectedTab", true],
     ["#toolbar-context-selectAllTabs", true],

browser/locales/en-US/browser/tabContextMenu.ftl

@@ -2,6 +2,9 @@
 # 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/.
 
+tab-context-open-a-new-tab =
+    .label = Open a New Tab
+    .accesskey = O
 reload-tab =
     .label = Reload Tab
     .accesskey = R

browser/locales/en-US/browser/toolbarContextMenu.ftl

@@ -2,6 +2,9 @@
 # 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/.
 
+toolbar-context-menu-open-a-new-tab =
+    .label = Open a New Tab
+    .accesskey = O
 toolbar-context-menu-reload-selected-tab =
     .label = Reload Selected Tab
     .accesskey = R