Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
d1rshan wants to merge 1 commit into
base: master
Choose a base branch
from
+38 −14
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 16 additions & 6 deletions frontend/src/ts/components/layout/footer/Keytips.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,8 @@ 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 = userAgent.includes("firefox");
const modifierKey = userAgent.includes("mac") && !isFirefox ? "cmd" : "ctrl";

const commandKey = (): string =>
getConfig.quickRestart === "esc" ? "tab" : "esc";
Comment on lines 8 to 13
Copy link

Copilot AI Mar 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isFirefox/modifierKey user-agent parsing is duplicated across this PR (also in settings.ts/AboutPage.tsx). Consider extracting a small shared helper (e.g., utils/browser or utils/shortcuts) so future browser/platform tweaks only need changing in one place.

Copilot uses AI. Check for mistakes.
Expand All @@ -36,8 +34,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>
);
Expand Down
22 changes: 19 additions & 3 deletions frontend/src/ts/components/pages/AboutPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,11 @@ import { H2, H3 } from "../common/Headers";

export function AboutPage(): JSXElement {
const isOpen = () => getActivePage() === "about";
const isFirefox = window.navigator.userAgent
.toLowerCase()
.includes("firefox");
Comment on lines 21 to +25
Copy link

Copilot AI Mar 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Browser detection via window.navigator.userAgent.toLowerCase().includes("firefox") is now repeated in multiple UI files in this PR. Consider centralizing it in a shared helper to avoid drift/inconsistent behavior over time.

Suggested change
export function AboutPage(): JSXElement {
const isOpen = () => getActivePage() === "about";
const isFirefox = window.navigator.userAgent
.toLowerCase()
.includes("firefox");
const isFirefoxBrowser = (): boolean =>
typeof window !== "undefined" &&
window.navigator.userAgent.toLowerCase().includes("firefox");
export function AboutPage(): JSXElement {
const isOpen = () => getActivePage() === "about";
const isFirefox = isFirefoxBrowser();

Copilot uses AI. Check for mistakes.
const commandKey = (): string =>
getConfig.quickRestart === "esc" ? "tab" : "esc";

const contributors = useQuery(() => ({
...getContributorsQueryOptions(),
Expand Down Expand Up @@ -203,9 +208,20 @@ 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{" "}
<Show
when={isFirefox}
fallback={
<>
<kbd>ctrl/cmd</kbd> + <kbd>shift</kbd> + <kbd>p</kbd> or{" "}
<kbd>{commandKey()}</kbd>
</>
}
>
<kbd>{commandKey()}</kbd>
</Show>{" "}
- there you can access all the functionality you need without touching
your mouse.
</p>
</section>
<section>
Expand Down
8 changes: 3 additions & 5 deletions frontend/src/ts/pages/settings.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -724,15 +724,13 @@ export async function update(
CustomBackgroundFilter.updateUI();

const userAgent = window.navigator.userAgent.toLowerCase();
const modifierKey =
userAgent.includes("mac") && !userAgent.includes("firefox")
? "cmd"
: "ctrl";
const isFirefox = userAgent.includes("firefox");
const modifierKey = userAgent.includes("mac") && !isFirefox ? "cmd" : "ctrl";

const commandKey = Config.quickRestart === "esc" ? "tab" : "esc";
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 (${isFirefox ? `<kbd>${commandKey}</kbd>` : `<kbd>${commandKey}</kbd> or <kbd>${modifierKey}</kbd> + <kbd>shift</kbd> + <kbd>p</kbd>`})`);
Comment on lines 731 to +733
Copy link

Copilot AI Mar 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The setHtml template literal now contains a nested ternary with nested template literals, which is hard to scan/maintain. Consider building the shortcut hint string in a variable first, then interpolating it into the final setHtml call.

Copilot uses AI. Check for mistakes.

if (
customLayoutFluidSelect !== undefined &&
Expand Down
Loading