1685779 - Change Back button tooltip to mention Alt+Left Arrow (Cmd+Left Arrow) keyboard shortcut

Status: VERIFIED FIXED

(Firefox :: Keyboard Navigation, enhancement)

Description

[Chris Peterson [:cpeterson]]

This was a suggestion from bug 1041377 comment 39. I will need to consult with the UX team to determine the new tooltip string.

For comparison:

Browser	Back Button's Tooltip	Forward Button's Tooltip
Firefox 84	Go back one page	Go forward one page
Chrome	Click to go back, hold to see history	Click to go forward, hold to see history
Edge on Windows	Click to go back (Alt + Left arrow), hold to see history	Click to go forward (Alt + Right arrow), hold to see history
Edge on macOS	Click to go back (⌘[), hold to see history	Click to go forward (⌘]), hold to see history
IE11	<page title> (Alt+Left)	page title (Alt+Right)
Safari (macOS)	Show the previous page	Show the next page

Comment 1

[Laurence "GreenReaper" Parry]

Thanks, you beat me to filing this. I noticed that that the reload button already has it: "Reload current page (Ctrl+R)" on Windows. I imagine it says ⌘-R there on MacOS. [Also found Bug 43180 from the SeaMonkey days which suggested inclusion of the page titles you'd end up on, though nowadays that's just a right-click away.]

Comment 2

[Chris Peterson [:cpeterson]]

Meridel, I listed in my comment 0 above the current Back button tooltips for Firefox, Chrome, Edge, IE11, and Safari for comparison.

For Firefox on Windows and Linux, I propose:

Go back one page (Alt + Left arrow)

IE11's tooltip says Alt+Left. Edge's tooltip adds the word "arrow", lowercase. I can't find a precedent in Windows Firefox to determine whether to describe arrow keys as "Left", "Left arrow" (or capitalized "Left Arrow"), or using a symbol like "Alt + ⬅".

macOS is trickier. Windows and Linux have only one shortcut to go back one page: Alt + Left arrow. Firefox on macOS (and Safari and Chrome on macOS) have two: ⌘⬅ (Command + Left arrow) and ⌘[ (Command + Left bracket). Should the macOS tooltip include both shortcuts? Safari and Chrome on macOS list only ⌘[ in their "History > Back" menu item, though both shortcuts work. So ⌘[ seems to be the preferred shortcut on macOS even though ⌘⬅ seems more intuitive.

Some options for Firefox on macOS:

Go back one page (⌘[)
Go back one page (⌘⬅)
Go back one page (⌘[ or ⌘⬅)
Go back one page (⌘⬅ or ⌘[)

I think the left parenthesis ) after ⌘[ is confusing. It looks like the parenthesis might be part of the keyboard shortcut! :) However, Edge's tooltip on macOS does use (⌘[).

Comment 3

[Chris Peterson [:cpeterson]]

Attachment: Bug 1685779 - Add Alt/Command + Left Arrow keyboard shortcut to Back button tooltip. r=Gijs,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).

macOS has two shortcuts to go back (Command + Left square bracket or Command + Left arrow) while Windows and Linux have just one (Alt + Left arrow).

Comment 4

[Chris Peterson [:cpeterson]]

Masayuki, as module owner for Firefox's Global Key Bindings, do you have an opinion on whether the Back button tooltip should list both macOS keyboard shortcuts for navigating back one (⌘[ and ⌘⬅) or just one?

Comment 5

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

I do not have opinion for that, in my understanding, shortcut keys are not shown in tooltip on macOS basically (See both Safari and Chrome on macOS). However, we do it for reload button etc. So, I do not mind it (and personally, I love showing it as a Windows user). So, I think that showing both shortcut keys is fine.

Comment 6

[Chris Peterson [:cpeterson]]

(In reply to Masayuki Nakano [:masayuki] (he/him)(JST, +0900)(Got a cold, working slower) from comment #5)

I do not have opinion for that, in my understanding, shortcut keys are not shown in tooltip on macOS basically (See both Safari and Chrome on macOS). However, we do it for reload button etc. So, I do not mind it (and personally, I love showing it as a Windows user). So, I think that showing both shortcut keys is fine.

Thanks!

FWIW, Microsoft Edge on macOS does show the shortcut in its Back button tooltip: "Click to go back (⌘[), hold to see history".

Comment 7

[Meridel [:meridel]]

Thanks for bringing this to my attention. We are currently inconsistent in our inclusion of shortcuts in tooltlips: for example, we include the keyboard shortcut in the Reload tooltip, but not in the Home tooltip. I am going to sync up with my design system colleagues to figure out how we want to treat tooltips moving forward, including updates to the Back/Forward tooltips.

Comment 8

[Chris Peterson [:cpeterson]]

No need to track for firefox86. I will try to land patches in firefox87.

Comment 9

[Chris Peterson [:cpeterson]]

Attachment: Back_button_tooltip_macOS.png

Screenshot of my prototype Back button tooltip on macOS.

Comment 10

[Chris Peterson [:cpeterson]]

Attachment: Back_button_tooltip_Windows.jpg

Screenshot of my prototype Back button tooltip on Windows.

Comment 11

[Chris Peterson [:cpeterson]]

Attachment: Bug 1685779 - Remove unused and unneeded aNoCloverLeaf hack from prettifyShortcut. r?Gijs

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f75cebb7533d
Remove unused and unneeded aNoCloverLeaf hack from prettifyShortcut. r=Gijs

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/73c1995ff098
Add Alt/Command + Left Arrow keyboard shortcut to Back button tooltip. r=Gijs,masayuki,fluent-reviewers,flod

Comment 14

[Natalia Csoregi [:nataliaCs]]

Backed out for failures on browser_ext_menus_replace_menu.js

backout: https://hg.mozilla.org/integration/autoland/rev/8d74b191312b79ed33e21b470191333ea6a60f41

push: https://treeherder.mozilla.org/jobs?repo=autoland&revision=73c1995ff0981ef89b651be864a79333fcd273c1&test_paths=browser%2Fcomponents%2Fextensions%2Ftest%2Fbrowser%2Fbrowser.ini&group_state=expanded&selectedTaskRun=HKlF8uUFRi-D983YEaJ00Q.0

failure log: https://treeherder.mozilla.org/logviewer?job_id=328344025&repo=autoland&lineNumber=11613

[task 2021-01-30T22:08:25.090Z] 22:08:25 INFO - TEST-PASS | browser/components/extensions/test/browser/browser_ext_menus_replace_menu.js | Function threw, expecting error to match /Unexpected property "someInvalidParameter"/, got "Type error for parameter contextOptions (Unexpected property "someInvalidParameter") for menus.overrideContext.": overrideContext should be available and the parameters be validated. -
[task 2021-01-30T22:08:25.091Z] 22:08:25 INFO - Expecting menu without items to appear and be updated after menus.refresh()
[task 2021-01-30T22:08:25.091Z] 22:08:25 INFO - Buffered messages finished
[task 2021-01-30T22:08:25.093Z] 22:08:25 INFO - TEST-UNEXPECTED-FAIL | browser/components/extensions/test/browser/browser_ext_menus_replace_menu.js | uncaught exception - TypeError: can't access property "getAttribute", aElemKey is null at prettifyShortcut@resource://gre/modules/ShortcutUtils.jsm:55:22
[task 2021-01-30T22:08:25.093Z] 22:08:25 INFO - initBackForwardMenuItemTooltip@chrome://browser/content/nsContextMenu.js:437:32
[task 2021-01-30T22:08:25.093Z] 22:08:25 INFO - initNavigationItems@chrome://browser/content/nsContextMenu.js:443:35
[task 2021-01-30T22:08:25.094Z] 22:08:25 INFO - initItems@chrome://browser/content/nsContextMenu.js:324:10
[task 2021-01-30T22:08:25.094Z] 22:08:25 INFO - nsContextMenu@chrome://browser/content/nsContextMenu.js:171:10
[task 2021-01-30T22:08:25.096Z] 22:08:25 INFO - onpopupshowing@chrome://browser/content/webext-panels.xhtml:1:119
[task 2021-01-30T22:08:25.096Z] 22:08:25 INFO - openContextMenu@chrome://browser/content/nsContextMenu.js:94:9
[task 2021-01-30T22:08:25.096Z] 22:08:25 INFO - receiveMessage@resource:///actors/ContextMenuParent.jsm:23:9
[task 2021-01-30T22:08:25.096Z] 22:08:25 INFO -
[task 2021-01-30T22:08:25.096Z] 22:08:25 INFO - Stack trace:
[task 2021-01-30T22:08:25.096Z] 22:08:25 INFO - chrome://mochikit/content/tests/SimpleTest/SimpleTest.js:simpletestOnerror:2112
[task 2021-01-30T22:08:25.096Z] 22:08:25 INFO - chrome://browser/content/nsContextMenu.js:openContextMenu:94
[task 2021-01-30T22:08:25.096Z] 22:08:25 INFO - resource:///actors/ContextMenuParent.jsm:receiveMessage:23
[task 2021-01-30T22:08:25.096Z] 22:08:25 INFO - GECKO(1531) | JavaScript error: resource://gre/modules/ShortcutUtils.jsm, line 55: TypeError: can't access property "getAttribute", aElemKey is null
[task 2021-01-30T22:08:25.096Z] 22:08:25 INFO - Not taking screenshot here: see the one that was previously logged

Comment 15

[Cristian Brindusan [:cbrindusan]]

https://hg.mozilla.org/mozilla-central/rev/f75cebb7533d

Comment 16

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9cb2464b80de
Add Alt/Command + Left Arrow keyboard shortcut to Back button tooltip. r=Gijs,masayuki,fluent-reviewers,flod

Comment 17

[Chris Peterson [:cpeterson]]

My patch failed the browser_ext_menus_replace_menu.js test because the test opens a web page in a sidebar. AFAICT, sidebars don't allow page navigation, so they have no toolbar buttons, keyboard shortcuts, or context menu items for back/forward navigation. My patch failed to handle the case where the keyboard shortcut (element) is null. Even without a shortcut or back/forward menu items, we still need to format the (unused) back/forward tooltips to avoid an L10n runtime warning about a resource string containing an unexpanded "$shortcut" variable.

Comment 18

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/9cb2464b80de