diff --git a/frontend/src/ts/components/layout/footer/Keytips.tsx b/frontend/src/ts/components/layout/footer/Keytips.tsx
index 3c703888f71f..c5377d3eba01 100644
--- a/frontend/src/ts/components/layout/footer/Keytips.tsx
+++ b/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 (
@@ -36,8 +37,20 @@ export function Keytips(): JSXElement {
}
/>
- {commandKey()} or {modifierKey} + shift{" "}
- + p - command line
+
+ {commandKey()} - command line
+ >
+ }
+ else={
+ <>
+ {commandKey()} or {modifierKey} +{" "}
+ shift + p - command line
+ >
+ }
+ />
);
diff --git a/frontend/src/ts/components/pages/AboutPage.tsx b/frontend/src/ts/components/pages/AboutPage.tsx
index f14caf161fb8..3c2d0eeb6f7a 100644
--- a/frontend/src/ts/components/pages/AboutPage.tsx
+++ b/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 {
You can use tab and enter (or just{" "}
tab if you have quick tab mode enabled) to restart the
- typing test. Open the command line by pressing ctrl/cmd +{" "}
- shift + p or esc - there you can
- access all the functionality you need without touching your mouse.
+ typing test. Open the command line by pressing{" "}
+ {commandKey()}}
+ else={
+ <>
+ {getCommandLineModifierKeyLabel()} + shift{" "}
+ + p or {commandKey()}
+ >
+ }
+ />{" "}
+ - there you can access all the functionality you need without touching
+ your mouse.
diff --git a/frontend/src/ts/pages/settings.ts b/frontend/src/ts/pages/settings.ts
index 3cf3e11f6bc2..8e7dd0f76b94 100644
--- a/frontend/src/ts/pages/settings.ts
+++ b/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 (${commandKey} or ${modifierKey} + shift + p)`);
+ command line (${commandLineKeybind})`);
if (
customLayoutFluidSelect !== undefined &&
diff --git a/frontend/src/ts/utils/shortcuts.ts b/frontend/src/ts/utils/shortcuts.ts
new file mode 100644
index 000000000000..8607d4012060
--- /dev/null
+++ b/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 `${commandKey}`;
+ }
+
+ return `${commandKey} or ${getCommandLineModifierKeyLabel()} + shift + p`;
+}