Skip to content

feat(devtools): add a command palette to search and jump across devtools - #8835

Open
Aejkatappaja wants to merge 4 commits into
QwikDev:mainfrom
Aejkatappaja:feat/command-palette
Open

feat(devtools): add a command palette to search and jump across devtools#8835
Aejkatappaja wants to merge 4 commits into
QwikDev:mainfrom
Aejkatappaja:feat/command-palette

Conversation

@Aejkatappaja

@Aejkatappaja Aejkatappaja commented Jul 15, 2026

Copy link
Copy Markdown
Member

What

Implements the Global Command Palette / Quick Search feature for the DevTools overlay: a Cmd/Ctrl+K palette to search and jump anywhere without leaving the keyboard.

Demo

CleanShot.2026-07-15.at.1.41.16.mp4

Acceptance criteria

  1. Open with a shortcut: Cmd/Ctrl+K opens the palette as an overlay above the content, Esc closes it (the palette first, then the panel), focus lands in the search input.
  2. Search across panels: typing filters in real time across Tabs, Components, Routes, and Packages, grouped by category. Up/Down navigate, Enter activates. Vite-only sources are excluded in contexts that lack them.
  3. Jump to a tab: selecting a tab result sets the active sidebar tab and closes the palette; the active tab is marked.
  4. Jump to a component: selecting a component opens the tree, expands its ancestors, scrolls it into view, and highlights it (both the overlay Render Tree and the extension tree share the reveal helper).
  5. Recent and suggested actions: the empty state lists recent selections (persisted across sessions) plus common actions (toggle theme, clear performance, clear recent searches, customize tabs). A clear-recents action is included.
  6. Styling and accessibility: matches the DevTools glass design, traps focus while open, de-emphasizes the background, and exposes dialog/listbox/option roles with aria-activedescendant.

Notes / follow-ups (not in this PR)

  • The palette is wired into the Vite overlay for now. Mounting it in the standalone browser extension panel is a follow-up (the source-exclusion logic is already context-aware, so it is ready for it).
  • Reveal is signal-driven in the shared Tree (controlled expansion + a revealNode signal). HookTree's element-pick flow still uses its own DOM-based expandAndScrollToNode; routing it through the same reveal signal is a follow-up (it also carries a highlight flash and shares the hook-tree-left container with other handlers).
  • A panel-wide focus trap (independent of the palette) is a separate follow-up.

Verification

  • tsc on the devtools UI passes (0 errors), no as casts.
  • command-palette.unit.ts covers sources, context exclusion, filtering, grouping, and recents (persist / cap / de-dupe / resolve-and-drop-stale).
  • eslint (incl. eslint-plugin-qwik) passes on the touched files.
  • Exercised through the Qwik optimizer in the docs host: open/close, live grouped search, keyboard nav, jump to tab/route/package/component with reveal, empty-state recents + actions, theme toggle, clear performance, persistence across reload.

@Aejkatappaja
Aejkatappaja requested a review from a team as a code owner July 15, 2026 01:03
@changeset-bot

changeset-bot Bot commented Jul 15, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 8c32a5c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@qwik.dev/devtools Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@pkg-pr-new

pkg-pr-new Bot commented Jul 15, 2026

Copy link
Copy Markdown

Open in StackBlitz

@qwik.dev/core

npm i https://pkg.pr.new/QwikDev/qwik/@qwik.dev/core@8835

@qwik.dev/router

npm i https://pkg.pr.new/QwikDev/qwik/@qwik.dev/router@8835

eslint-plugin-qwik

npm i https://pkg.pr.new/QwikDev/qwik/eslint-plugin-qwik@8835

create-qwik

npm i https://pkg.pr.new/QwikDev/qwik/create-qwik@8835

@qwik.dev/optimizer

npm i https://pkg.pr.new/QwikDev/qwik/@qwik.dev/optimizer@8835

@qwik.dev/devtools

npm i https://pkg.pr.new/QwikDev/qwik/@qwik.dev/devtools@8835

commit: 8c32a5c

@github-actions

github-actions Bot commented Jul 15, 2026

Copy link
Copy Markdown
Contributor
built with Refined Cloudflare Pages Action

⚡ Cloudflare Pages Deployment

Name Status Preview Last Commit
qwik-docs ✅ Ready (View Log) Visit Preview 62480fa

Comment thread packages/devtools/ui/src/components/Tree/reveal.ts Outdated
@Aejkatappaja
Aejkatappaja requested a review from wmertens July 15, 2026 11:43
@wmertens
wmertens changed the base branch from build/v2 to main July 16, 2026 14:50
@JerryWu1234

Copy link
Copy Markdown
Contributor

@wmertens done

);
});

export const IconMagnifyingGlass = component$((props: IconProps) => {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

how do you think we create a icon library in the future? because it wouldn't be good all icons in the project

@Aejkatappaja Aejkatappaja Jul 21, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Yes totally agree !

an icon package make sense, i'll add a card in the project board

if (container) {
// Wait for the expansion animation to settle before scrolling to the final position.
const scrollDelay = (props.animate ?? true) ? (props.animationDuration ?? 200) + 50 : 0;
setTimeout(() => {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

@Varixo Is there any other idea about using settimeout

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants