fxcss shot

fxcss shot --out shots/before

Captures the standard set of views as PNGs: browser window, focused address bar, find bar and the window-modal dialog in light and dark, then playing and muted audio tab indicators, container tabs, an overflowing tab strip, a private window, compact density, the sidebar, right-to-left chrome, and customize mode.

Audio views set Firefox's playing and muted tab attributes directly. They test the appearance of those indicators without requiring a sound device or playing a tone. CI also verifies that CSS targeting each state changes its screenshot.

The dialog view is the quit-confirmation prompt (commonDialog), opened for real. It is its own chrome document, painted from different rules than the window around it, which is why themes break it without noticing — a dark theme whose dialog body renders white shows up here and nowhere else.

The captures land flat in --out, one file per view (shots/before/light-01-window.png); --url captures go to <out>/live/. This is the directory to publish from if you want plain screenshots — fxcss compare writes a different shape, below.

fxcss shot --out shots --variants all

--variants also captures one view per optional stylesheet the theme ships (custom/, optional/, variants/…), each loaded on its own and removed again — so tabs-swapclose or compact-tabs are checked by CI without a separate install. Name specific ones (--variants a,b) or take them all.

Browser states it captures

fxcss shot renders a standard set of views, so a change is judged against the states people actually use rather than one idle window: light and dark, the focused address bar, find bar, modal dialog, audio and muted tabs, container tabs, an overflowing tab strip, a private window, compact density, right-to-left chrome, Customize mode — and three that a theme is most likely to have never been tested in:

• Sidebar — bookmarks and history. Both panels, with their trees expanded, because a fresh profile shows them collapsed and a collapsed panel has almost nothing in it to style.
• Vertical tabs. Firefox 133+ does not restyle the tab strip here, it moves it: #tabbrowser-tabs leaves #TabsToolbar for #vertical-tabs, so every #TabsToolbar > … rule a theme owns silently stops matching while its unscoped .tabbrowser-tab rules keep applying horizontal geometry to a vertical column. Older builds without vertical tabs skip the view.
• Customised toolbar. The nav bar with widgets moved into it — by default including the new tab button, which is the rearrangement plenty of theme READMEs ask users to make by hand and which nothing could test until now.

Set your own arrangement with --toolbar, on shot, watch or try:

fxcss watch --toolbar "new-tab-button>nav-bar, -downloads-button"
fxcss shot  --toolbar "home-button>nav-bar@0" --out shots/

widget>area moves a widget (optionally @position), -widget removes one. Areas are nav-bar, TabsToolbar, PersonalToolbar, vertical-tabs, unified-extensions-area. A widget id Firefox does not recognise is reported rather than ignored — Firefox itself accepts any string and then quietly renders nothing.

Some states depend on the Firefox build; unavailable states are reported and skipped rather than treated as captured.