feat(forms): add path and type filters and a visible event limit to the timeline by erkamyaman · Pull Request #264 · pangular-inspector/devtools

erkamyaman · 2026-10-10T22:46:23Z

What and why

The forms timeline could only be filtered by origin, and it showed the last 100 events without saying so. On a busy form the event you wanted was hard to find, and older events disappeared from the list with no hint that more existed.

This adds to the Timeline view of the Forms inspector:

A field path filter. It matches any part of the path, ignoring case, and Escape clears it.
An Event type select with "All types" plus the types present, in the same order as the type enum of the form-history agent tool.
Both combine with the existing origin filter, so an event shows only when it passes all three.
A count next to the filters. When the list is cut it says "Showing the latest 100 of N events", or "N matching events" when filtered.
An empty state with a Clear filters button when the filters hide every event. It resets all three filters and moves focus back to the path input.

The Timeline section of apps/docs/src/content/inspectors/forms.md describes the filters and the limit note.

How it was verified

pnpm commit:check: 1 commit message OK
pnpm format:check: all files pass
pnpm typecheck: passes (exit 0); no diagnostics in forms-timeline.ts
pnpm test:panel: 30 files, 171 tests passed. The 7 new tests in forms-timeline.test.ts cover labels, type options, path substring matching and Escape, path, type and origin combined, the cut note with and without filters, Clear filters resetting all three and focusing the input, and the no-events state.
Docs updated and pnpm docs:build passes
pnpm extension:build: extension/ui rebuilt and committed
Browser axe check:
- pnpm test:axe could not launch its pinned Chromium, so the same scripts/panel-axe.mjs ran against the installed Chromium. All 29 panel views pass, Forms included, in dark and light.
- Targeted run on the Angular Travel demo (/examples/forms, 24 real events), Forms Timeline in dark and light, at 1280px and 360px. Axe ran on the list, with the type select open, with no matches, and after Clear filters: 0 violations, and no horizontal overflow at either width. Focus returns to the path input after Clear filters.

Notes for reviewers

Path matching differs from the agent tool: the panel filter matches any part of the path, ignoring case, because that is easier when typing. form-history matches a path exactly or anything under it (path or path.). Type and origin work the same way in both.
Two limit notes: the "latest 100" note is about how many rows the list renders. The existing app-limit-note above the timeline still reports events the page dropped because of limits.formTimeline.
No overlap with fix: reset stale selections and armed actions when the inspected page changes #253: only forms-timeline.ts changed in the panel. forms-inspector.ts is untouched, and the new tests live in their own file.

Summary by CodeRabbit

New Features
- Filter the forms timeline by field-path text, event type, and origin. Path searches ignore case, while events must match all selected filters.
- View the latest 100 matching events, with counts showing how many match.
- Clear all filters when no events match.
Documentation
- Updated the forms inspector guide with timeline filtering and result-limit details.

…he timeline The forms timeline could only be filtered by origin, and it showed the last 100 events without saying so. On a busy form the event you are looking for was hard to find, and older events disappeared from the list with no hint that more existed. Add a field path filter (case-insensitive substring, Escape clears it) and an event type select listing the types present, combined with the origin filter, the same way the form-history agent tool combines its path, type and origin arguments. A count next to the filters says "Showing the latest 100 of N events" when the list is cut, and an empty state with Clear filters appears when the filters hide every event. Update the timeline section of the forms inspector docs and rebuild extension/ui.

coderabbitai · 2026-10-10T22:46:40Z

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: d983c903-d20e-47fe-9b14-0aecbe3b8dec

📥 Commits

Reviewing files that changed from the base of the PR and between 4859aeb and 70eaaf6.

⛔ Files ignored due to path filters (1)

extension/ui/assets/index-B4-Q9-Lj.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-timeline.test.ts
app/src/pages/forms-timeline.ts
extension/ui/assets/browser-agent-rpc-BXhoSh1z-Ca92cyCz.js
extension/ui/index.html

 ______________________________________________________
< Review complete: I laughed, I cried, I filed issues. >
 ------------------------------------------------------
  \
   \   \
        \ /\
        ( )
      .( 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: db428482-75ab-4651-bd4a-bb19f86d999b

📥 Commits

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

⛔ Files ignored due to path filters (1)

extension/ui/assets/index-DY8jaI-m.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-timeline.test.ts
app/src/pages/forms-timeline.ts
apps/docs/src/content/inspectors/forms.md
extension/ui/assets/browser-agent-rpc-BXhoSh1z-DjrWw-na.js
extension/ui/index.html

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 0 remain after this review.

📝 Walkthrough

Walkthrough

FormsTimeline adds field-path and event-type filters alongside the origin filter. It displays the latest 100 matching events, reports matching counts, and provides a clear-filters action when no events match. Tests and documentation cover the updated behavior.

Changes

Forms timeline filtering

Layer / File(s)	Summary
Filter state and event matching `app/src/pages/forms-timeline.ts`	The timeline adds type options and path, type, and origin matching. It shows the latest 100 matches in newest-first order, reports matching counts, and resets all filters through `clearFilters()`.
Filter controls and validation `app/src/pages/forms-timeline.ts`, `app/src/__tests__/forms-timeline.test.ts`, `apps/docs/src/content/inspectors/forms.md`, `extension/ui/index.html`, `extension/ui/assets/browser-agent-rpc-*.js`	The timeline adds path search, a type selector, count display, and a clear-filters action for empty results. Tests and documentation cover these changes. The extension UI references the updated JavaScript bundle.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Feature

Merge Risk: ⚪ Minimal · up to 4859a

The timeline changes appear mergeable after normal checks; the extension bundle reference is valid.

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 10 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 summarizes the main changes: path and type filters and the visible event limit for the Forms timeline.
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 10 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.}

cloudflare-workers-and-pages · 2026-10-10T22:47:25Z

🚀 Deploying Preview to Cloudflare 🚀

Preview Deployments by commit

Status	Deployment URL	Commit	Updated (UTC)	See this deployment's details
Build: Failed ❌ View logs ↗		`4859aeb`	2026-10-10T22:47:21.119Z	View logs ↗

The visible count changes with every recorded event, and its live region made screen readers read it out while the user typed in the app. A separate status now updates only when a filter changes.

# Conflicts: # extension/ui/assets/browser-agent-rpc-BXhoSh1z-433J4Mmg.js # extension/ui/assets/browser-agent-rpc-BXhoSh1z-C_twCiPD.js # extension/ui/assets/browser-agent-rpc-BXhoSh1z-DjrWw-na.js # extension/ui/assets/index-BEfrZ0QX.js # extension/ui/assets/index-DECmX_2_.js # extension/ui/assets/index-DY8jaI-m.js # extension/ui/index.html

erkamyaman requested a review from santoshyadavdev as a code owner October 10, 2026 22:46

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

erkamyaman mentioned this pull request Oct 10, 2026

fix(pipes): tell apart no page, unused pipe and no calls in explain-pipe #265

Merged

5 of 8 tasks

erkamyaman added 2 commits October 11, 2026 01:59

fix(forms): announce the timeline count only when a filter changes

cc88e22

The visible count changes with every recorded event, and its live region made screen readers read it out while the user typed in the app. A separate status now updates only when a filter changes.

erkamyaman merged commit 9418339 into main Oct 11, 2026

erkamyaman deleted the forms/timeline-filters branch October 11, 2026 02:00

Navigation Menu

Repository navigation

feat(forms): add path and type filters and a visible event limit to the timeline - #264

feat(forms): add path and type filters and a visible event limit to the timeline#264
erkamyaman merged 3 commits into
mainfrom
forms/timeline-filters

erkamyaman commented Oct 10, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Oct 10, 2026 •

edited

Loading

Walkthrough

Changes

❌ Failed checks (1 warning)

Uh oh!

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

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

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

Uh oh!

What and why

How it was verified

Notes for reviewers

Summary by CodeRabbit

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!

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

🚀 Deploying Preview to Cloudflare 🚀

Preview Deployments by commit

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

erkamyaman commented Oct 10, 2026 •

edited

Loading

coderabbitai Bot commented Oct 10, 2026 •

edited

Loading