gh-13767: fix special key shortcuts displaying incorrectly until page reload (gh-13768)

The problem was that `input.value` was getting the raw shortcut and not
really converting it to the normalized displayable string.
There was no method to just get the `displayString` for a shortcut
without creating a new one, so I put that logic into
`gZenZenKeyboardShortcutsManager`. The static function in `KeyShortcut`
class is just to reduce code duplication.

fixes: #13767

src/browser/components/preferences/zen-settings.js

@@ -1124,7 +1124,7 @@ var gZenCKSSettings = {
     this._hasSafed = false;
     input.classList.remove(`${ZEN_CKS_INPUT_FIELD_CLASS}-invalid`);
     input.classList.remove(`${ZEN_CKS_INPUT_FIELD_CLASS}-not-set`);
-    input.value = modifiers.toDisplayString() + shortcut;
+    input.value = modifiers.toDisplayString() + gZenKeyboardShortcutsManager.getKeyDisplay(shortcut);
     this._latestValidKey = shortcut;
   },
 };

src/zen/kbs/ZenKeyboardShortcuts.mjs

@@ -553,16 +553,15 @@ class KeyShortcut {
     };
   }
 
-  toDisplayString() {
-    let str = this.#modifiers.toDisplayString();
-
-    if (this.#key) {
-      str += this.#key.toUpperCase();
-    } else if (this.#keycode) {
+  static keyToDisplayString(key, keycode) {
+    let str = "";
+    if (key) {
+      str += key.toUpperCase();
+    } else if (keycode) {
       // Get the key from the value
-      for (let [key, value] of Object.entries(KEYCODE_MAP)) {
-        if (value == this.#keycode) {
-          const normalizedKey = key.toLowerCase();
+      for (let [k, value] of Object.entries(KEYCODE_MAP)) {
+        if (value == keycode) {
+          const normalizedKey = k.toLowerCase();
           switch (normalizedKey) {
             case "arrowleft":
               str += "←";
@@ -591,9 +590,17 @@ class KeyShortcut {
           break;
         }
       }
-    } else {
+    }
+    return str;
+  }
+
+  toDisplayString() {
+    if (!this.#key && !this.#keycode) {
       return "";
     }
+
+    let str = this.#modifiers.toDisplayString();
+    str += KeyShortcut.keyToDisplayString(this.#key, this.#keycode);
     return str;
   }
 
@@ -1541,4 +1548,22 @@ window.gZenKeyboardShortcutsManager = {
     }
     return null;
   },
+
+  getKeyDisplay(shortcut) {
+    if (shortcut == "") {
+      return "";
+    }
+
+    let key = shortcut;
+    let keycode = "";
+    for (let kc of Object.keys(KEYCODE_MAP)) {
+      if (kc == shortcut.toUpperCase()) {
+        keycode = KEYCODE_MAP[kc];
+        key = "";
+        break;
+      }
+    }
+
+    return KeyShortcut.keyToDisplayString(key, keycode);
+  },
 };