UI screenshot harness for before/after images #326

Closed
opened 2026-10-07 20:43:28 -04:00 by Salastil · 1 comment
Owner

For the v1.0 UI pass, every change gets a before/after image (and short videos for motion).

Add scripts/ui-shots.mjs, built like scripts/ui-check.mjs: an isolated copy of the app (scratch HOME/XDG, its own daemon and runtime dir, never the user's), a fake IRC server with several days of history, mentions, replies, multi-line text and join/part lines.

Discord-only surfaces (guild rail, voice panel, reactions, embeds) are filled in by test-only state injection: main reads MOHO_UI_SHOTS=1 and passes a flag via additionalArguments (like POPOUT_FLAG); only then does the renderer expose window.__mohoShots.patch(state). Never active in a normal launch.

Captures a fixed list of scenes at 1280×800; records motion with CDP Page.startScreencast + ffmpeg; writes to ~/.local/share/moho-dev/ui-shots/{before,after}/; --compare writes a side-by-side HTML page.

Part of the v1.0 UI pass.

For the v1.0 UI pass, every change gets a before/after image (and short videos for motion). **Add `scripts/ui-shots.mjs`**, built like `scripts/ui-check.mjs`: an isolated copy of the app (scratch HOME/XDG, its own daemon and runtime dir, never the user's), a fake IRC server with several days of history, mentions, replies, multi-line text and join/part lines. Discord-only surfaces (guild rail, voice panel, reactions, embeds) are filled in by **test-only state injection**: main reads `MOHO_UI_SHOTS=1` and passes a flag via `additionalArguments` (like `POPOUT_FLAG`); only then does the renderer expose `window.__mohoShots.patch(state)`. Never active in a normal launch. Captures a fixed list of scenes at 1280×800; records motion with CDP `Page.startScreencast` + ffmpeg; writes to `~/.local/share/moho-dev/ui-shots/{before,after}/`; `--compare` writes a side-by-side HTML page. _Part of the v1.0 UI pass._
Salastil added this to the v1.0 milestone 2026-10-07 20:43:28 -04:00
Salastil added the feature label 2026-10-07 20:43:28 -04:00
Author
Owner

Finished: 88375ba. npm run shots -- --out <name> builds and captures 19 scenes (16 pictures, 3 recordings) into ~/.local/share/moho-dev/ui-shots/<name>/; node scripts/ui-shots.mjs --compare before after writes the side-by-side page. The baseline is captured as before.

Finished: [88375ba](https://git.salastil.com/Salastil/moho/commit/88375ba48511fc57a920d300c5ac34dacf8967b3). `npm run shots -- --out <name>` builds and captures 19 scenes (16 pictures, 3 recordings) into `~/.local/share/moho-dev/ui-shots/<name>/`; `node scripts/ui-shots.mjs --compare before after` writes the side-by-side page. The baseline is captured as `before`.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: Salastil/moho#326