feat(forms): open the field from an error summary entry by erkamyaman · Pull Request #272 · pangular-inspector/devtools

erkamyaman · 2026-10-10T23:20:15Z

What and why

The Forms tab's Error summary listed each error as plain text. To read a failing field's details you had to find its row in the Fields table yourself, often after clearing a filter that hid it.

Each summary entry is now a button, named for what it does (for example "Show field name: Name is required required"). Activating it:

switches to the Fields view,
clears the path filter, and then the chips, only when they hide the field's row,
opens the field's details the same way a row click does,
scrolls the row into view and moves focus to the details heading.

The inspectors/forms docs page describes the behaviour.

How it was verified

pnpm commit:check: 1 commit message OK
pnpm format:check: all files use Prettier code style
pnpm typecheck: passes, no TS or NG errors
pnpm test:panel: 29 files, 166 tests passed, including 2 new tests. The first sets a path filter, a Dirty chip and the Timeline tab, clicks an entry, and checks the Fields tab, the open field path, the cleared filter and chips, the pressed row and focus on the details heading. The second checks that a filter that already shows the field is kept.
Docs updated (apps/docs/src/content/inspectors/forms.md) and pnpm docs:build passes
pnpm extension:build: extension/ui rebuilt and committed
Browser axe check:
- scripts/panel-axe.mjs on the installed Chromium 1194 (the pinned one used by pnpm test:axe could not launch): every panel tab and view clean in dark and light.
- Forms tab against the live demo (/examples/forms, Signal Forms signup), dark and light: summary open, entry used by keyboard (Enter) after setting a hiding filter and the Lint tab. Result: Fields tab selected, filter cleared, row pressed, focus on the details heading.
- No horizontal overflow at 1280px or 360px.
- One light-theme color-contrast hit (see notes); it also happens when opening the row by clicking it on main.

Screenshots

None attached.

Notes for reviewers

The change avoids the armed, snapshot and fieldPath declarations and the "missing" note that fix: reset stale selections and armed actions when the inspected page changes #253 edits. It only adds showField() after closeField() and an injector field, so merging with fix: reset stale selections and armed actions when the inspected page changes #253 should be simple.
Known issue, not introduced here: in the light theme the INVALID badge on a selected row in the Fields table is 4.15:1 (needs 4.5:1), because the --accent-soft row tint sits behind it. It happens whenever an invalid field is opened, including by clicking its row. Left for a separate change.
The error summary is only filled for Signal Forms, so this feature only shows there.

Generated by Claude Code

Summary by CodeRabbit

New Features
- Selecting an entry in the Forms error summary now opens the corresponding field in the Fields view and focuses its details. Filters that hide the field are cleared as needed.

The error summary listed each error as plain text, so reading the details of a failing field meant finding its row in the Fields table by hand, often after clearing a filter that hid it. Each entry is now a button named after what it does ("Show field name: ..."). It switches to the Fields view, clears the path filter and then the chips only when they hide the row, opens the field's details like a row click, scrolls the row into view and moves focus to the details heading. Docs describe the behaviour, and panel tests cover the tab, the open field, the cleared filter and chips, a filter that is kept, and focus. The extension bundle is rebuilt.

cloudflare-workers-and-pages · 2026-10-10T23:20:22Z

🚀 Deploying Preview to Cloudflare 🚀

Preview Deployments by commit

Status	Deployment URL	Commit	Updated (UTC)	See this deployment's details
Build: In progress 🔵 View logs ↗		`e970e64`	2026-10-11T02:02:43.568Z	View logs ↗
Build: Failed ❌ View logs ↗		`8529874`	2026-10-10T23:08:55.197Z	View logs ↗

coderabbitai · 2026-10-10T23:20:32Z

Note

Currently processing new changes in this PR. This may take a few minutes, please wait...

⚙️ Run configuration

Configuration used: defaults
Review profile: CHILL
Plan: Advanced
Run ID: 1060fb29-7250-4d4d-8819-7541b004e72a

📥 Commits

Reviewing files that changed from the base of the PR and between 8529874 and e970e64.

⛔ Files ignored due to path filters (1)

extension/ui/assets/index-Dww7i1XJ.js is excluded by !**/assets/index-[0-9a-z_-][0-9a-z_-][0-9a-z_-][0-9a-z_-][0-9a-z_-][0-9a-z_-][0-9a-z_-][0-9a-z_-].js

📒 Files selected for processing (4)

app/src/__tests__/forms-panels.test.ts
app/src/pages/forms-inspector.ts
extension/ui/assets/browser-agent-rpc-BXhoSh1z-DcEPjPwJ.js
extension/ui/index.html

 ___________________________________________________________________________________________________________________________________
< Don't use manual procedures. A shell script or batch file will execute the same instructions, in the same order, time after time. >
 -----------------------------------------------------------------------------------------------------------------------------------
  \
   \   \
        \ /\
        ( )
      .( o ).

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults
Review profile: CHILL
Plan: Advanced
Run ID: b8c8ddd4-5afc-4047-8051-b28054a7320c

📥 Commits

Reviewing files that changed from the base of the PR and between f245551 and 8529874.

⛔ Files ignored due to path filters (1)

extension/ui/assets/index-8SY5CsLt.js is excluded by !**/assets/index-[0-9a-z_-][0-9a-z_-][0-9a-z_-][0-9a-z_-][0-9a-z_-][0-9a-z_-][0-9a-z_-][0-9a-z_-].js

📒 Files selected for processing (5)

app/src/__tests__/forms-panels.test.ts
app/src/pages/forms-inspector.ts
apps/docs/src/content/inspectors/forms.md
extension/ui/assets/browser-agent-rpc-BXhoSh1z-CkdxYjJF.js
extension/ui/index.html

Limit details: You’ve used all 10 included reviews currently available.

📝 Walkthrough

Walkthrough

Selecting an error-summary entry opens its field in the Fields view. FormsInspector clears filters as needed, selects the field, and focuses its details. Tests, documentation, and extension asset references are also updated.

Changes

Forms field navigation

Layer / File(s)	Summary
Error-summary field navigation `app/src/pages/forms-inspector.ts`, `app/src/__tests__/forms-panels.test.ts`, `apps/docs/src/content/inspectors/forms.md`, `extension/ui/assets/browser-agent-rpc-BXhoSh1z-CkdxYjJF.js`, `extension/ui/index.html`	Error-summary entries call `showField`, which switches to the Fields tab, clears the path filter and then chips only if needed to show the field, and selects it. After rendering, the field row scrolls into view and its heading receives focus, with the table as a fallback. Tests cover filter handling and focus. The documentation describes the navigation, and the extension UI references the updated asset.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Feature

Merge Risk: ⚪ Minimal · up to 85298

The Forms navigation change is ready to merge after normal checks; no actionable merge-blocking issue remains.

Pre-merge checks | 4 | 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage		Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 4 functions across 3 files. (2 skipped: 2 …	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check		Check skipped - CodeRabbit’s high-level summary is enabled.
Title check		The title clearly and concisely describes the main change: opening the corresponding field from an error-summary entry.
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 4 functions across 3 files. (2 skipped: 2 unsupported.)

Fix all pre-merge checks with AI

✨ Finishing Touches

📝 Generate docstrings

Commit to this branch
Create a new PR

🧪 Generate unit tests (beta)

Commit to this branch
Create a new PR

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

_{Comment @coderabbitai help to get the list of available commands.}

erkamyaman · 2026-10-10T23:20:43Z

The "Workers Builds: angular-devtools" check fails here the same way it fails on every open PR right now (#244 to #271 included), including PRs that do not touch the docs site. Its logs are only on the Cloudflare dashboard, so the cause can't be seen or fixed from this branch. The repo's own checks for this change (format, typecheck, panel tests, docs build, extension build, commit check) pass locally.

Generated by Claude Code

…-links # Conflicts: # app/src/__tests__/forms-panels.test.ts # extension/ui/assets/browser-agent-rpc-BXhoSh1z-C_twCiPD.js # extension/ui/assets/browser-agent-rpc-BXhoSh1z-CkdxYjJF.js # extension/ui/assets/browser-agent-rpc-BXhoSh1z-D6F3uQZn.js # extension/ui/assets/index-8SY5CsLt.js # extension/ui/assets/index-BEfrZ0QX.js # extension/ui/assets/index-DbNGREg7.js # extension/ui/index.html

erkamyaman requested a review from santoshyadavdev as a code owner October 10, 2026 23:20

github-actions Bot added area: panel The devtools panel app (app/) area: extension The Chrome extension area: docs The documentation site labels Oct 10, 2026

This was referenced Oct 10, 2026

feat(http): show TransferState keys and edit an entry in SSR overrides #273

Merged

fix(ui): give status pills an opaque background so selection tints keep contrast #274

Merged

erkamyaman merged commit 339bf57 into main Oct 11, 2026

erkamyaman deleted the forms/error-summary-links branch October 11, 2026 02:02

Navigation Menu

Repository navigation

feat(forms): open the field from an error summary entry - #272

feat(forms): open the field from an error summary entry#272
erkamyaman merged 2 commits into
mainfrom
forms/error-summary-links

erkamyaman commented Oct 10, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

cloudflare-workers-and-pages Bot commented Oct 10, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Oct 10, 2026 •

edited

Loading

Walkthrough

Changes

❌ Failed checks (1 warning)

Uh oh!

erkamyaman commented Oct 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

erkamyaman commented Oct 10, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What and why

How it was verified

Screenshots

Notes for reviewers

Summary by CodeRabbit

Uh oh!

cloudflare-workers-and-pages Bot commented Oct 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 Deploying Preview to Cloudflare 🚀

Preview Deployments by commit

Uh oh!

coderabbitai Bot commented Oct 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

❌ Failed checks (1 warning)

Uh oh!

erkamyaman commented Oct 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

erkamyaman commented Oct 10, 2026 •

edited by coderabbitai Bot

Loading

cloudflare-workers-and-pages Bot commented Oct 10, 2026 •

edited

Loading

coderabbitai Bot commented Oct 10, 2026 •

edited

Loading