Skip to content

feat: add native DOM hover highlight#18

Merged
jevin98 merged 1 commit into
mainfrom
codex/native-hover-debugger-overlay
May 15, 2026
Merged

feat: add native DOM hover highlight#18
jevin98 merged 1 commit into
mainfrom
codex/native-hover-debugger-overlay

Conversation

@jevin98

@jevin98 jevin98 commented May 15, 2026

Copy link
Copy Markdown
Owner

What changed

  • Added a Chrome debugger/CDP overlay highlighter for DOM diff source/target hover rows.
  • Captured selected DOM metadata, including inspect id, DOM path, and inspected tab id.
  • Limited hover highlighting to DOM nodes selected in the current inspected tab.
  • Prepared the debugger overlay after two local elements are selected, so the first hover is not interrupted by Chrome's debugging notice.
  • Added localized tooltip copy and README documentation for the required Chrome debugger permission.
  • Added unit coverage for inspected element resolution, debugger overlay behavior, stale hover cancellation, cross-tab filtering, and tooltip behavior.

Why

  • Users need a direct way to map each source/target column in the CSS diff table back to the real DOM node on the inspected page.
  • The diff table can show many CSS properties, and without page-side feedback it is easy to lose track of which page element each side represents.
  • Native page highlighting makes the comparison workflow closer to Chrome's built-in element inspection interaction.

User impact

  • Users can hover a DOM line or CSS value cell in the diff table and immediately see the corresponding DOM node highlighted in the inspected page.
  • Users do not need to switch back to the Elements panel or reselect nodes just to confirm which element a diff column represents.
  • Chrome may show a debugger permission warning or a browser-level debugging notice because the feature uses Chrome's debugger API.
  • If the debugger permission is unavailable, CSS comparison still works, but native page hover highlighting is unavailable.

Developer impact

  • The hover highlight path now uses CDP Overlay.highlightNode / Overlay.hideHighlight instead of mutating DevTools selection with inspect().
  • Selected element data now carries inspect metadata used by the overlay highlighter.
  • The debugger session is attached and enabled after local selections are ready, then detached on clear/remove/unmount.
  • Tests cover the main overlay states and guard against stale async hover requests drawing an old highlight.

Root cause

  • Not applicable. This is a feature PR.

Validation

  • pnpm exec eslint . --fix
  • pnpm test:unit
  • pnpm compile
  • pnpm exec wxt prepare
  • pnpm build:chrome
  • pnpm build:firefox
  • pnpm build:edge
  • After rebase onto origin/main: pnpm test:unit, pnpm compile, pnpm build:chrome

@jevin98 jevin98 force-pushed the codex/native-hover-debugger-overlay branch from 96fb99d to c7a3801 Compare May 15, 2026 06:55
@jevin98 jevin98 merged commit 344557d into main May 15, 2026
1 check passed
@jevin98 jevin98 deleted the codex/native-hover-debugger-overlay branch May 15, 2026 09:46
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.

1 participant