Skip to content

Debug dialog: visual debuggers#2572

Merged
SpicyPete merged 10 commits into
masterfrom
debug-dialog/visual-overlays
Jul 23, 2026
Merged

Debug dialog: visual debuggers#2572
SpicyPete merged 10 commits into
masterfrom
debug-dialog/visual-overlays

Conversation

@SpicyPete

@SpicyPete SpicyPete commented Jul 22, 2026

Copy link
Copy Markdown
Contributor

Debug dialog: visual debuggers

Adds a Visual subtab to the dev-only debug dialog (⌘⇧D → General → Visual) with CSS-only overlay toggles for the whole document:

  • Grayscale — check contrast and that nothing relies on color alone
  • Element outlines — lime outline on every element to reveal layout structure and phantom wrappers
  • Squint test (blur) — judge visual hierarchy
  • 8px baseline grid — spot spacing/alignment drift
  • Disable animations — near-zero durations (completion events still fire), catches flicker and bad resting states
  • Missing test IDs — highlights interactive elements without data-testid (Playwright selector gaps)
  • A11y smells — images without alt, empty unlabeled buttons/links, positive tabindex

How it works

  • New visual-debuggers.ts module: toggles __debug-* classes on <html>, styled by a single injected <style> element.
  • State persists to sessionStorage and re-applies on reload; a fresh tab starts clean. "Disable all" resets everything.
  • Grayscale/blur filters sit on the root element specifically — root filters don't create a containing block, so fixed-position dialogs/toasts keep working.

Dev builds only — ships nothing to production.

Video

Screen.Recording.2026-07-22.at.7.32.07.AM.mov
Cleaning up debug help section
Screenshot 2026-07-22 at 9 11 25 AM Screenshot 2026-07-22 at 9 53 49 AM

@github-actions

github-actions Bot commented Jul 22, 2026

Copy link
Copy Markdown
Contributor

Clean — no registry drift, off-token colours, or ad-hoc classes

App: frontend · Scope: diff vs origin/master · Files: 7

Count
⚠️ Outdated registry components 0
🛠 Locally-modified components 0
❓ Unknown to registry 0
🎨 Off-token palette colours 0
🔢 Ad-hoc utility classes 0

Generated by lookout audit-changes.

@SpicyPete
SpicyPete merged commit ce69db1 into master Jul 23, 2026
18 checks passed
@SpicyPete
SpicyPete deleted the debug-dialog/visual-overlays branch July 23, 2026 13:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants