Bug 1944016 - Add new strings to tab context menu for switching to/from vertical tabs r=sidebar-reviewers,fluent-reviewers,tabbrowser-reviewers,dao,bolsson,nsharpley

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

browser/base/content/main-popupset.inc.xhtml

@@ -100,6 +100,8 @@
     <menuitem id="context_fullscreenExit"
               contexttype="fullscreen"
               data-lazy-l10n-id="full-screen-exit"/>
+    <menuseparator/>
+    <menuitem id="context_toggleVerticalTabs" data-lazy-l10n-id="tab-context-enable-vertical-tabs"/>
   </menupopup>
 
   <menupopup id="open-tab-group-context-menu">

browser/base/content/main-popupset.js

@@ -104,6 +104,9 @@ document.addEventListener(
         case "context_fullscreenExit":
           BrowserCommands.fullScreen();
           break;
+        case "context_toggleVerticalTabs":
+          SidebarController.toggleVerticalTabs();
+          break;
 
         // == open-tab-group-context-menu ==
         case "open-tab-group-context-menu_moveToNewWindow":

browser/components/sidebar/browser-sidebar.js

@@ -521,6 +521,16 @@ var SidebarController = {
     this.uiStateInitialized = true;
   },
 
+  /**
+   * Toggle the vertical tabs preference.
+   */
+  toggleVerticalTabs() {
+    Services.prefs.setBoolPref(
+      "sidebar.verticalTabs",
+      !this.sidebarVerticalTabsEnabled
+    );
+  },
+
   /**
    * The handler for Services.obs.addObserver.
    */

browser/components/sidebar/tests/browser/browser_sidebar_context_menu.js

@@ -149,3 +149,41 @@ add_task(async function test_sidebar_extension_context_menu() {
   await extension.unload();
   await BrowserTestUtils.closeWindow(win);
 });
+
+add_task(async function test_toggle_vertical_tabs_from_tab_strip() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["sidebar.verticalTabs", false]],
+  });
+
+  info("Enable vertical tabs from the tab strip.");
+  const tabContextMenu = document.getElementById("tabContextMenu");
+  const toggleMenuItem = document.getElementById("context_toggleVerticalTabs");
+  await openAndWaitForContextMenu(tabContextMenu, gBrowser.selectedTab, () => {
+    Assert.deepEqual(
+      document.l10n.getAttributes(toggleMenuItem),
+      { id: "tab-context-enable-vertical-tabs", args: null },
+      "Context menu item indicates that it enables vertical tabs."
+    );
+    toggleMenuItem.click();
+  });
+  await TestUtils.waitForCondition(
+    () => gBrowser.tabContainer.verticalMode,
+    "Vertical tabs are enabled."
+  );
+
+  info("Disable vertical tabs from the tab strip.");
+  await openAndWaitForContextMenu(tabContextMenu, gBrowser.selectedTab, () => {
+    Assert.deepEqual(
+      document.l10n.getAttributes(toggleMenuItem),
+      { id: "tab-context-disable-vertical-tabs", args: null },
+      "Context menu item indicates that it disables vertical tabs."
+    );
+    toggleMenuItem.click();
+  });
+  await TestUtils.waitForCondition(
+    () => !gBrowser.tabContainer.verticalMode,
+    "Vertical tabs are disabled."
+  );
+
+  await SpecialPowers.popPrefEnv();
+});

browser/components/tabbrowser/content/tabbrowser.js

@@ -8470,6 +8470,17 @@ var TabContextMenu = {
         : "close-tabs-to-the-end"
     );
 
+    // Update context menu item for "Turn (on/off) Vertical Tabs".
+    const toggleVerticalTabsItem = document.getElementById(
+      "context_toggleVerticalTabs"
+    );
+    document.l10n.setAttributes(
+      toggleVerticalTabsItem,
+      gBrowser.tabContainer?.verticalMode
+        ? "tab-context-disable-vertical-tabs"
+        : "tab-context-enable-vertical-tabs"
+    );
+
     // Disable "Close Tabs to the Left/Right" if there are no tabs
     // preceding/following it.
     let noTabsToStart = !gBrowser._getTabsToTheStartFrom(this.contextTab)

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

@@ -91,6 +91,10 @@ tab-context-close-duplicate-tabs =
 tab-context-share-url =
     .label = Share
     .accesskey = h
+tab-context-enable-vertical-tabs =
+    .label = Turn on Vertical Tabs
+tab-context-disable-vertical-tabs =
+    .label = Turn off Vertical Tabs
 
 ## Variables:
 ##  $tabCount (Number): the number of tabs that are affected by the action.