docs: Update keyboard shortcuts to always show "Fn" key option.

Previously, these were only shown for Mac OS users and replaced
the "Home", "End", "PgUp" and "PgDn" shortcuts. But as this really
depends on the keyboard the user is using (there are Mac keyboards
with the above keys), we instead show both options in our web app
and help center documentation on keyboard shortcuts.

The tooltip for the "Scroll to bottom" button will now always show
"End" for all users. Previously, it showed a "Fn" key option for
Mac users.

Fixes #31815.

help/keyboard-shortcuts.md

@@ -69,19 +69,21 @@ in the Zulip app to add more to your repertoire as needed.
 
 ## Scrolling
 
-* **Last message**: <kbd>End</kbd> or <kbd>Shift</kbd> + <kbd>G</kbd> —
-  Also marks all messages in the current view as read.
+* **Last message**: <kbd>End</kbd> or <kbd>Fn</kbd> + <kbd class="arrow-key">→</kbd>
+  or <kbd>Shift</kbd> + <kbd>G</kbd> — Also marks all messages in the current view
+  as read.
 
-* **First message**: <kbd>Home</kbd>
+* **First message**: <kbd>Home</kbd> or <kbd>Fn</kbd> + <kbd class="arrow-key">←</kbd>
 
 * **Previous message**: <kbd class="arrow-key">↑</kbd> or <kbd>K</kbd>
 
 * **Next message**: <kbd class="arrow-key">↓</kbd> or <kbd>J</kbd>
 
-* **Scroll up**: <kbd>PgUp</kbd> or <kbd>Shift</kbd> + <kbd>K</kbd>
+* **Scroll up**: <kbd>PgUp</kbd> or <kbd>Fn</kbd> + <kbd class="arrow-key">↑</kbd>
+  or <kbd>Shift</kbd> + <kbd>K</kbd>
 
-* **Scroll down**: <kbd>PgDn</kbd>, <kbd>Shift</kbd> + <kbd>J</kbd>, or
-  <kbd>Spacebar</kbd>
+* **Scroll down**: <kbd>PgDn</kbd> or <kbd>Fn</kbd> + <kbd class="arrow-key">↓</kbd>
+  or <kbd>Shift</kbd> + <kbd>J</kbd> or <kbd>Spacebar</kbd>
 
 ## Navigation
 

tools/linter_lib/custom_check.py

@@ -161,12 +161,6 @@ js_rules = RuleList(
                 "web/tests/",
                 "web/src/billing/",
             },
-            "exclude_line": {
-                (
-                    "web/src/common.ts",
-                    '$(this).before($("<kbd>").text("Fn"), $("<span>").text(" + ").contents());',
-                ),
-            },
         },
         {
             "pattern": r"""report.success\(["']""",

web/src/common.ts

@@ -14,16 +14,10 @@ export function phrase_match(query: string, phrase: string): boolean {
 const keys_map = new Map([
     ["Backspace", "Delete"],
     ["Enter", "Return"],
-    ["Home", "←"],
-    ["End", "→"],
-    ["PgUp", "↑"],
-    ["PgDn", "↓"],
     ["Ctrl", "⌘"],
     ["Alt", "⌥"],
 ]);
 
-const fn_shortcuts = new Set(["Home", "End", "PgUp", "PgDn"]);
-
 export function has_mac_keyboard(): boolean {
     // eslint-disable-next-line @typescript-eslint/no-deprecated
     return /mac/i.test(navigator.platform);
@@ -39,11 +33,6 @@ export function adjust_mac_kbd_tags(kbd_elem_class: string): void {
     $(kbd_elem_class).each(function () {
         let key_text = $(this).text();
 
-        if (fn_shortcuts.has(key_text)) {
-            $(this).before($("<kbd>").text("Fn"), $("<span>").text(" + ").contents());
-            $(this).addClass("arrow-key");
-        }
-
         // We use data-mac-key attribute to override the default key in case
         // of exceptions. Currently, there are 2 shortcuts (for navigating back
         // and forth in browser history) which need `Cmd` instead of the expected
@@ -81,10 +70,6 @@ export function adjust_mac_hotkey_hints(hotkeys: string[]): void {
         if (replace_key !== undefined) {
             hotkeys[index] = replace_key;
         }
-
-        if (fn_shortcuts.has(hotkey)) {
-            hotkeys.unshift("Fn");
-        }
     }
 }
 

web/templates/keyboard_shortcuts.hbs

@@ -108,19 +108,19 @@
                 </tr>
                 <tr>
                     <td class="definition">{{t 'Scroll up' }}</td>
-                    <td><span class="hotkey"><kbd>PgUp</kbd> or <kbd>Shift</kbd> + <kbd>K</kbd></span></td>
+                    <td><span class="hotkey"><kbd>PgUp</kbd> or <kbd>Fn</kbd> + <kbd class="arrow-key">↑</kbd> or <kbd>Shift</kbd> + <kbd>K</kbd></span></td>
                 </tr>
                 <tr>
                     <td class="definition">{{t 'Scroll down' }}</td>
-                    <td><span class="hotkey"><kbd>PgDn</kbd> or <kbd>Shift</kbd> + <kbd>J</kbd> or <kbd>Space</kbd></span></td>
+                    <td><span class="hotkey"><kbd>PgDn</kbd> or <kbd>Fn</kbd> + <kbd class="arrow-key">↓</kbd> or <kbd>Shift</kbd> + <kbd>J</kbd> or <kbd>Space</kbd></span></td>
                 </tr>
                 <tr>
                     <td class="definition">{{t 'Last message' }}</td>
-                    <td><span class="hotkey"><kbd>End</kbd> or <kbd>Shift</kbd> + <kbd>G</kbd></span></td>
+                    <td><span class="hotkey"><kbd>End</kbd> or <kbd>Fn</kbd> + <kbd class="arrow-key">→</kbd> or <kbd>Shift</kbd> + <kbd>G</kbd></span></td>
                 </tr>
                 <tr>
                     <td class="definition">{{t 'First message' }}</td>
-                    <td><span class="hotkey"><kbd>Home</kbd></span></td>
+                    <td><span class="hotkey"><kbd>Home</kbd >or <kbd>Fn</kbd> + <kbd class="arrow-key">←</kbd></span></td>
                 </tr>
             </table>
         </div>

web/tests/common.test.js

@@ -42,10 +42,6 @@ run_test("adjust_mac_kbd_tags mac", ({override}) => {
     const keys_to_test_mac = new Map([
         ["Backspace", "Delete"],
         ["Enter", "Return"],
-        ["Home", "←"],
-        ["End", "→"],
-        ["PgUp", "↑"],
-        ["PgDn", "↓"],
         ["Ctrl", "⌘"],
         ["Alt", "⌥"],
         ["#stream_name", "#stream_name"],
@@ -55,8 +51,6 @@ run_test("adjust_mac_kbd_tags mac", ({override}) => {
         ["data-mac-following-key", "data-mac-following-key"],
     ]);
 
-    const fn_shortcuts = new Set(["Home", "End", "PgUp", "PgDn"]);
-
     override(navigator, "platform", "MacIntel");
     $("<span>").contents = () => $("<contents-stub>");
 
@@ -67,12 +61,6 @@ run_test("adjust_mac_kbd_tags mac", ({override}) => {
         const test_item = {};
         const $stub = $.create("hotkey_" + key_no);
         $stub.text(old_key);
-        assert.equal($stub.hasClass("arrow-key"), false);
-        if (fn_shortcuts.has(old_key)) {
-            $stub.before = ($elem) => {
-                assert.equal($elem.selector, "<kbd>");
-            };
-        }
         if (old_key === "data-mac-following-key") {
             $stub.attr("data-mac-following-key", "⌥");
             $stub.after = ($plus, $elem) => {
@@ -83,7 +71,6 @@ run_test("adjust_mac_kbd_tags mac", ({override}) => {
         }
         test_item.$stub = $stub;
         test_item.mac_key = mac_key;
-        test_item.adds_arrow_key = fn_shortcuts.has(old_key);
         test_items.push(test_item);
         key_no += 1;
     }
@@ -96,7 +83,6 @@ run_test("adjust_mac_kbd_tags mac", ({override}) => {
 
     for (const test_item of test_items) {
         assert.equal(test_item.$stub.text(), test_item.mac_key);
-        assert.equal(test_item.$stub.hasClass("arrow-key"), test_item.adds_arrow_key);
     }
 });
 
@@ -115,10 +101,6 @@ run_test("adjust_mac_hotkey_hints mac expected", ({override}) => {
     const keys_to_test_mac = new Map([
         [["Backspace"], ["Delete"]],
         [["Enter"], ["Return"]],
-        [["Home"], ["Fn", "←"]],
-        [["End"], ["Fn", "→"]],
-        [["PgUp"], ["Fn", "↑"]],
-        [["PgDn"], ["Fn", "↓"]],
         [["Ctrl"], ["⌘"]],
     ]);