Skip to content

feat(trace-viewer): webm-based film strip - #42319

Merged
Pavel Feldman (pavelfeldman) merged 1 commit into
microsoft:mainfrom
pavelfeldman:video-film-strip
Aug 20, 2026
Merged

Pavel Feldman (pavelfeldman) merged 1 commit into
microsoft:mainfrom
pavelfeldman:video-film-strip

Conversation

@pavelfeldman

@pavelfeldman Pavel Feldman (pavelfeldman) commented Aug 19, 2026 •

Copy link
Copy Markdown
Member

A new trace event, {type: 'video', file, width, height, timestampOrigin}, points at a video file bundled in the trace zip. The viewer decodes it in the browser at load time — an offscreen <video> seek-stepped at 2 thumbnails per second, capped at 120 — and renders the same film strip lanes and hover preview that screencast-frame JPEGs drive, progressively as thumbnails land.

timestampOrigin maps the video's own clock onto the trace timeline, so a sparse recording (frames only where the screen changed) still lines up with the actions.

A new trace event, {type: 'video', file, width, height,
timestampOrigin}, points at a video bundled in the trace zip. The
viewer decodes it in the browser at load time — an offscreen <video>
seek-stepped at 2 thumbnails per second, capped at 120 — and renders
the same film strip lanes and hover preview that screencast-frame
JPEGs drive, progressively as thumbnails land. timestampOrigin maps
the video's own clock onto the trace timeline, so a sparse recording
(frames only where the screen changed) still lines up with actions.

Recorders that capture the screen as compressed video can now bundle
one webm instead of hundreds of JPEG frames; the screenshot-based
strip is unchanged and the two can coexist in one trace.

const cache = new Map<string, CacheEntry>();

const maxThumbnails = 120;

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should this depend on the filmstrip width?

@github-actions

Copy link
Copy Markdown
Contributor

Test results for "tests 1"

21 flaky ⚠️ [chromium-library] › library/global-fetch.spec.ts:293 › should return security details from response `@frozen-time-library-chromium-linux`
⚠️ [chromium-library] › library/har.spec.ts:639 › should have security details `@frozen-time-library-chromium-linux`
⚠️ [chromium-library] › library/global-fetch.spec.ts:293 › should return security details from response `@chromium-ubuntu-22.04-arm-node20`
⚠️ [chromium-library] › library/har.spec.ts:639 › should have security details `@chromium-ubuntu-22.04-arm-node20`
⚠️ [chromium-library] › library/video.spec.ts:294 › screencast › should capture navigation `@chromium-ubuntu-22.04-arm-node20`
⚠️ [chromium-library] › library/video.spec.ts:664 › screencast › should capture full viewport `@chromium-ubuntu-22.04-arm-node20`
⚠️ [chromium-library] › library/global-fetch.spec.ts:293 › should return security details from response `@realtime-time-library-chromium-linux`
⚠️ [chromium-library] › library/har.spec.ts:639 › should have security details `@realtime-time-library-chromium-linux`
⚠️ [chromium-library] › library/global-fetch.spec.ts:293 › should return security details from response `@chromium-ubuntu-22.04-node24`
⚠️ [chromium-library] › library/har.spec.ts:639 › should have security details `@chromium-ubuntu-22.04-node24`
⚠️ [chromium-library] › library/global-fetch.spec.ts:293 › should return security details from response `@chromium-ubuntu-22.04-node20`
⚠️ [chromium-library] › library/har.spec.ts:639 › should have security details `@chromium-ubuntu-22.04-node20`
⚠️ [chromium-library] › library/global-fetch.spec.ts:293 › should return security details from response `@chromium-ubuntu-22.04-node22`
⚠️ [chromium-library] › library/har.spec.ts:639 › should have security details `@chromium-ubuntu-22.04-node22`
⚠️ [chromium-library] › library/video.spec.ts:736 › screencast › should work with video+trace `@chromium-ubuntu-22.04-node22`
⚠️ [firefox-library] › library/global-fetch.spec.ts:293 › should return security details from response `@firefox-ubuntu-22.04-node20`
⚠️ [firefox-library] › library/har.spec.ts:639 › should have security details `@firefox-ubuntu-22.04-node20`
⚠️ [firefox-library] › library/heap.spec.ts:223 › should not leak workers `@firefox-ubuntu-22.04-node20`
⚠️ [firefox-page] › page/page-emulate-media.spec.ts:144 › should keep reduced motion and color emulation after reload `@firefox-ubuntu-22.04-node20`
⚠️ [webkit-library] › library/global-fetch.spec.ts:293 › should return security details from response `@webkit-ubuntu-22.04-node20`
⚠️ [webkit-library] › library/har.spec.ts:639 › should have security details `@webkit-ubuntu-22.04-node20`

51199 passed, 1233 skipped


Merge workflow run.

@github-actions

Copy link
Copy Markdown
Contributor

Test results for "MCP"

3 failed
❌ [chrome] › mcp/config.spec.ts:203 › chromiumSandbox › --sandbox enables the sandbox @mcp-ubuntu-latest-chrome
❌ [firefox] › mcp/cli-core.spec.ts:43 › click button @mcp-windows-latest-firefox
❌ [firefox] › mcp/cli-core.spec.ts:57 › click link @mcp-windows-latest-firefox

8107 passed, 1341 skipped


Merge workflow run.

@github-actions

Copy link
Copy Markdown
Contributor

Hi, I'm the Playwright bot and I took a first look at the CI failures here.

🟢 Green — the failures are pre-existing flakes, this PR is clear

The three failures are all in MCP tests (config.spec.ts, cli-core.spec.ts), and this PR only touches the trace-viewer film strip and the isomorphic trace model — none of which the MCP flow exercises. Each failing test also flips verdict across many runs on unrelated SHAs.

Details

Overall: The tests 1 report had 0 failures (21 flaky, all rescued on retry). The MCP report had 3 failures. The diff is confined to packages/trace/, packages/isomorphic/trace/, and packages/trace-viewer/src/ui/ (new videoThumbnails.ts + filmStrip.tsx). No product code path the MCP tools drive is reachable from that change.

Pre-existing flake / infra

  • [chrome] › mcp/config.spec.ts:203 › chromiumSandbox › --sandbox enables the sandbox — flake. In the test-results DB this test flips verdict: failed 7 of 32 runs (~22%), passed the other 25, on SHAs unrelated to this PR. Sandbox enablement has nothing to do with trace-viewer video thumbnails.

  • [firefox] › mcp/cli-core.spec.ts:57 › click link (windows) — flake. Failed 17 of 718 runs, passed the rest, across many unrelated SHAs.

  • [firefox] › mcp/cli-core.spec.ts:43 › click button (windows) — flake. Failed 4 of 718 runs, passed the rest, across many unrelated SHAs. Both cli-core failures are Windows-Firefox only, in code this PR doesn't touch.

Triaged by the Playwright bot - agent run

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.

2 participants