fix(command-line): hide Ctrl/Cmd + Shift + P hint on Firefox (@d1rshan)

frontend/src/ts/components/layout/footer/Keytips.tsx

@@ -2,17 +2,18 @@ import { JSXElement, Show } from "solid-js";
 
 import { getConfig } from "../../../config/store";
 import { getFocus } from "../../../states/core";
+import {
+  getCommandLineKeyLabel,
+  getCommandLineModifierKeyLabel,
+  isFirefoxBrowser,
+} from "../../../utils/shortcuts";
 import { Conditional } from "../../common/Conditional";
 
 export function Keytips(): JSXElement {
-  const userAgent = window.navigator.userAgent.toLowerCase();
-  const modifierKey =
-    userAgent.includes("mac") && !userAgent.includes("firefox")
-      ? "cmd"
-      : "ctrl";
-
+  const isFirefox = isFirefoxBrowser();
+  const modifierKey = getCommandLineModifierKeyLabel();
   const commandKey = (): string =>
-    getConfig.quickRestart === "esc" ? "tab" : "esc";
+    getCommandLineKeyLabel(getConfig.quickRestart);
 
   return (
     <Show when={getConfig.showKeyTips}>
@@ -36,8 +37,20 @@ export function Keytips(): JSXElement {
           }
         />
         <br />
-        <kbd>{commandKey()}</kbd> or <kbd>{modifierKey}</kbd> + <kbd>shift</kbd>{" "}
-        + <kbd>p</kbd> - command line
+        <Conditional
+          if={isFirefox}
+          then={
+            <>
+              <kbd>{commandKey()}</kbd> - command line
+            </>
+          }
+          else={
+            <>
+              <kbd>{commandKey()}</kbd> or <kbd>{modifierKey}</kbd> +{" "}
+              <kbd>shift</kbd> + <kbd>p</kbd> - command line
+            </>
+          }
+        />
       </div>
     </Show>
   );

frontend/src/ts/components/pages/AboutPage.tsx

@@ -12,14 +12,23 @@ import { getActivePage } from "../../states/core";
 import { showModal } from "../../states/modals";
 import { getTheme } from "../../states/theme";
 import { getNumberWithMagnitude } from "../../utils/numbers";
+import {
+  getCommandLineKeyLabel,
+  getCommandLineModifierKeyLabel,
+  isFirefoxBrowser,
+} from "../../utils/shortcuts";
 import AsyncContent from "../common/AsyncContent";
 import { Button } from "../common/Button";
 import { ChartJs } from "../common/ChartJs";
+import { Conditional } from "../common/Conditional";
 import { Fa } from "../common/Fa";
 import { H2, H3 } from "../common/Headers";
 
 export function AboutPage(): JSXElement {
   const isOpen = () => getActivePage() === "about";
+  const isFirefox = isFirefoxBrowser();
+  const commandKey = (): string =>
+    getCommandLineKeyLabel(getConfig.quickRestart);
 
   const contributors = useQuery(() => ({
     ...getContributorsQueryOptions(),
@@ -203,9 +212,19 @@ export function AboutPage(): JSXElement {
         <p>
           You can use <kbd>tab</kbd> and <kbd>enter</kbd> (or just{" "}
           <kbd>tab</kbd> if you have quick tab mode enabled) to restart the
-          typing test. Open the command line by pressing <kbd>ctrl/cmd</kbd> +{" "}
-          <kbd>shift</kbd> + <kbd>p</kbd> or <kbd>esc</kbd> - there you can
-          access all the functionality you need without touching your mouse.
+          typing test. Open the command line by pressing{" "}
+          <Conditional
+            if={isFirefox}
+            then={<kbd>{commandKey()}</kbd>}
+            else={
+              <>
+                <kbd>{getCommandLineModifierKeyLabel()}</kbd> + <kbd>shift</kbd>{" "}
+                + <kbd>p</kbd> or <kbd>{commandKey()}</kbd>
+              </>
+            }
+          />{" "}
+          - there you can access all the functionality you need without touching
+          your mouse.
         </p>
       </section>
       <section>

frontend/src/ts/pages/settings.ts

@@ -52,6 +52,7 @@ import { authEvent } from "../events/auth";
 import * as FpsLimitSection from "../elements/settings/fps-limit-section";
 import { qs, qsa, qsr, onDOMReady } from "../utils/dom";
 import { showPopup } from "../modals/simple-modals-base";
+import { getCommandLineKeybindHtml } from "../utils/shortcuts";
 
 let settingsInitialized = false;
 
@@ -723,16 +724,10 @@ export async function update(
 
   CustomBackgroundFilter.updateUI();
 
-  const userAgent = window.navigator.userAgent.toLowerCase();
-  const modifierKey =
-    userAgent.includes("mac") && !userAgent.includes("firefox")
-      ? "cmd"
-      : "ctrl";
-
-  const commandKey = Config.quickRestart === "esc" ? "tab" : "esc";
+  const commandLineKeybind = getCommandLineKeybindHtml(Config.quickRestart);
   qs(".pageSettings .tip")?.setHtml(`
     tip: You can also change all these settings quickly using the
-    command line (<kbd>${commandKey}</kbd> or <kbd>${modifierKey}</kbd> + <kbd>shift</kbd> + <kbd>p</kbd>)`);
+    command line (${commandLineKeybind})`);
 
   if (
     customLayoutFluidSelect !== undefined &&

frontend/src/ts/utils/shortcuts.ts

@@ -0,0 +1,33 @@
+import type { Config } from "@monkeytype/schemas/configs";
+
+export function isFirefoxBrowser(): boolean {
+  if (typeof window === "undefined") return false;
+
+  return window.navigator.userAgent.toLowerCase().includes("firefox");
+}
+
+export function getCommandLineModifierKeyLabel(): string {
+  if (typeof window === "undefined") return "ctrl";
+
+  const userAgent = window.navigator.userAgent.toLowerCase();
+
+  return userAgent.includes("mac") && !isFirefoxBrowser() ? "cmd" : "ctrl";
+}
+
+export function getCommandLineKeyLabel(
+  quickRestart: Config["quickRestart"],
+): string {
+  return quickRestart === "esc" ? "tab" : "esc";
+}
+
+export function getCommandLineKeybindHtml(
+  quickRestart: Config["quickRestart"],
+): string {
+  const commandKey = getCommandLineKeyLabel(quickRestart);
+
+  if (isFirefoxBrowser()) {
+    return `<kbd>${commandKey}</kbd>`;
+  }
+
+  return `<kbd>${commandKey}</kbd> or <kbd>${getCommandLineModifierKeyLabel()}</kbd> + <kbd>shift</kbd> + <kbd>p</kbd>`;
+}