feat(styles): computed CSS, box model rects, visibility, batch, diffs, named snapshots

[jitterbox]

Fully implements feature request #86.

feat(styles): add computed CSS tools, box model rects, visibility, batch, diffs, and named snapshots

Why

LLMs need deterministic layout/style truth to diagnose visibility, overlap, and cascade issues. Computed styles and box metrics enable reliable assertions and before/after comparisons in CI or HMR flows.

What’s included

• New tools (CDP-backed):
  • get_computed_styles (optional properties, includeSources)
  • get_computed_styles_batch
  • get_box_model (content/padding/border/margin quads + explicit rects; client/bounding; DPR-rounded)
  • get_visibility (reasons: display:none, visibility:hidden|collapse, opacity:0, zero-size, off-viewport, clip-path)
  • diff_computed_styles (A vs B)
  • save_computed_styles_snapshot and diff_computed_styles_snapshot
• Implementation details:
  • Uses CDP: CSS.getComputedStyleForNode, CSS.getMatchedStylesForNode, DOM.getBoxModel, Page.getLayoutMetrics
  • Winner hints for rules via getMatchedStylesForNode (best-effort)
  • Robust node mapping with DOM.requestNode; warm DOM agent
  • Numeric quad handling with computed rects; DPR rounding

Tests & docs

• Unit-style tests for all new tools: tests/tools/styles.test.ts
• MCP e2e coverage: tests/e2e.styles.test.ts
• Live validation done via chrome_devtools_local
• Regenerated docs: npm run docs (33 tools total)

Notes

• No new dependencies; follows existing tool/response patterns (defineTool, zod schemas, fenced JSON).
• protocolTimeout raised to reduce flakiness during e2e.

Example

• Verify a button’s display and size:
  • get_computed_styles → display
  • get_box_model → contentRect.width/height ≥ 44×44 DPR-rounded
  • get_visibility → isVisible without reasons

Please review; happy to adjust naming, output shape, or visibility heuristics.

[google-cla]

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

[wycats]

This is the first feature I looked for when I learned about the Chrome Devtools MCP. It would make the process of iterating on subtle CSS cascades with AI massively more efficient. Can't wait!