Bug 1685779 - Add Alt/Command + Left Arrow keyboard shortcut to Back button tooltip. r=Gijs,masayuki,fluent-reviewers,flod

We disabled Backspace as a keyboard shortcut to go back one page (bug 1041377). We can use the Back and Forward buttons' tooltips to advertise the other shortcuts users can use instead of Backspace (like we do on the Reload button's tooltip).

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

browser/base/content/browser-context.inc

@@ -5,12 +5,14 @@
 
       <menugroup id="context-navigation">
         <menuitem id="context-back"
-                  data-l10n-id="main-context-menu-back"
+                  data-l10n-id="main-context-menu-back-2"
+                  data-l10n-args='{"shortcut":""}'
                   class="menuitem-iconic"
                   command="Browser:BackOrBackDuplicate"
                   onclick="checkForMiddleClick(this, event);"/>
         <menuitem id="context-forward"
-                  data-l10n-id="main-context-menu-forward"
+                  data-l10n-id="main-context-menu-forward-2"
+                  data-l10n-args='{"shortcut":""}'
                   class="menuitem-iconic"
                   command="Browser:ForwardOrForwardDuplicate"
                   onclick="checkForMiddleClick(this, event);"/>

browser/base/content/browser.js

@@ -1966,6 +1966,26 @@ var gBrowserInit = {
       SetClickAndHoldHandlers();
     }
 
+    function initBackForwardButtonTooltip(tooltipId, l10nId, shortcutId) {
+      let shortcut = document.getElementById(shortcutId);
+      shortcut = ShortcutUtils.prettifyShortcut(shortcut);
+
+      let tooltip = document.getElementById(tooltipId);
+      document.l10n.setAttributes(tooltip, l10nId, { shortcut });
+    }
+
+    initBackForwardButtonTooltip(
+      "back-button-tooltip-description",
+      "navbar-tooltip-back-2",
+      "goBackKb"
+    );
+
+    initBackForwardButtonTooltip(
+      "forward-button-tooltip-description",
+      "navbar-tooltip-forward-2",
+      "goForwardKb"
+    );
+
     PlacesToolbarHelper.init();
 
     ctrlTab.readPref();

browser/base/content/browser.xhtml

@@ -619,12 +619,12 @@
     <tooltip id="tabbrowser-tab-tooltip" onpopupshowing="gBrowser.createTooltip(event);"/>
 
     <tooltip id="back-button-tooltip">
-      <description class="tooltip-label" data-l10n-id="navbar-tooltip-back"/>
+      <description id="back-button-tooltip-description" class="tooltip-label"/>
       <description class="tooltip-label" data-l10n-id="navbar-tooltip-instruction"/>
     </tooltip>
 
     <tooltip id="forward-button-tooltip">
-      <description class="tooltip-label" data-l10n-id="navbar-tooltip-forward"/>
+      <description id="forward-button-tooltip-description" class="tooltip-label"/>
       <description class="tooltip-label" data-l10n-id="navbar-tooltip-instruction"/>
     </tooltip>
 
@@ -1761,7 +1761,7 @@
       <toolbartabstop/>
       <hbox id="nav-bar-customization-target" flex="1">
         <toolbarbutton id="back-button" class="toolbarbutton-1 chromeclass-toolbar-additional"
-                       data-l10n-id="toolbar-button-back"
+                       data-l10n-id="toolbar-button-back-2"
                        removable="false" overflows="false"
                        keepbroadcastattributeswhencustomizing="true"
                        command="Browser:BackOrBackDuplicate"
@@ -1769,7 +1769,7 @@
                        tooltip="back-button-tooltip"
                        context="backForwardMenu"/>
         <toolbarbutton id="forward-button" class="toolbarbutton-1 chromeclass-toolbar-additional"
-                       data-l10n-id="toolbar-button-forward"
+                       data-l10n-id="toolbar-button-forward-2"
                        removable="false" overflows="false"
                        keepbroadcastattributeswhencustomizing="true"
                        command="Browser:ForwardOrForwardDuplicate"

browser/base/content/nsContextMenu.js

@@ -431,6 +431,31 @@ class nsContextMenu {
 
     this.showItem("context-reload", stopReloadItem == "reload");
     this.showItem("context-stop", stopReloadItem == "stop");
+
+    function initBackForwardMenuItemTooltip(menuItemId, l10nId, shortcutId) {
+      let shortcut = document.getElementById(shortcutId);
+      if (shortcut) {
+        shortcut = ShortcutUtils.prettifyShortcut(shortcut);
+      } else {
+        // Sidebar doesn't have navigation buttons or shortcuts, but we still
+        // want to format the menu item tooltip to remove "$shortcut" string.
+        shortcut = "";
+      }
+      let menuItem = document.getElementById(menuItemId);
+      document.l10n.setAttributes(menuItem, l10nId, { shortcut });
+    }
+
+    initBackForwardMenuItemTooltip(
+      "context-back",
+      "main-context-menu-back-2",
+      "goBackKb"
+    );
+
+    initBackForwardMenuItemTooltip(
+      "context-forward",
+      "main-context-menu-forward-2",
+      "goForwardKb"
+    );
   }
 
   initLeaveDOMFullScreenItems() {

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

@@ -10,29 +10,33 @@ navbar-tooltip-instruction =
 
 ## Back
 
-main-context-menu-back =
-    .tooltiptext = Go back one page
+# Variables
+#   $shortcut (String) - A keyboard shortcut for the Go Back command.
+main-context-menu-back-2 =
+    .tooltiptext = Go back one page ({ $shortcut })
     .aria-label = Back
     .accesskey = B
 
-navbar-tooltip-back =
-    .value = { main-context-menu-back.tooltiptext }
+navbar-tooltip-back-2 =
+    .value = { main-context-menu-back-2.tooltiptext }
 
-toolbar-button-back =
-    .label = { main-context-menu-back.aria-label }
+toolbar-button-back-2 =
+    .label = { main-context-menu-back-2.aria-label }
 
 ## Forward
 
-main-context-menu-forward =
-    .tooltiptext = Go forward one page
+# Variables
+#   $shortcut (String) - A keyboard shortcut for the Go Forward command.
+main-context-menu-forward-2 =
+    .tooltiptext = Go forward one page ({ $shortcut })
     .aria-label = Forward
     .accesskey = F
 
-navbar-tooltip-forward =
-    .value = { main-context-menu-forward.tooltiptext }
+navbar-tooltip-forward-2 =
+    .value = { main-context-menu-forward-2.tooltiptext }
 
-toolbar-button-forward =
-    .label = { main-context-menu-forward.aria-label }
+toolbar-button-forward-2 =
+    .label = { main-context-menu-forward-2.aria-label }
 
 ## Reload
 

toolkit/modules/ShortcutUtils.jsm

@@ -123,6 +123,15 @@ var ShortcutUtils = {
     let key;
     if (keyCode) {
       keyCode = keyCode.toUpperCase();
+      if (AppConstants.platform == "macosx") {
+        // Return fancy Unicode symbols for some keys.
+        switch (keyCode) {
+          case "VK_LEFT":
+            return "\u2190"; // U+2190 LEFTWARDS ARROW
+          case "VK_RIGHT":
+            return "\u2192"; // U+2192 RIGHTWARDS ARROW
+        }
+      }
       try {
         let bundle = keyCode == "VK_RETURN" ? PlatformKeys : Keys;
         // Some keys might not exist in the locale file, which will throw.