Compare: easier regression spotting and accessible-by-default UX#163
Merged
Conversation
The result page used to be a wall of numbers and a stack of filmstrip rails — knowing whether anything actually regressed meant scanning the page-x-ray table column-by-column and squinting at two parallel filmstrips. The aim of this change is "the regressions announce themselves" before you scroll. Page-x-ray gets a Δ column (red regressions, green improvements, grey "no change", with sign + percent), per-section header colours so the long metric list breaks into obvious groups, and an "Only differences" chip in the column header that hides no-change rows entirely. The CPU "time spent by category" and "events" disclosure rows are now proper sub-tables with their own Δ column so a recalculate-style regression reads the same way as a regression in total bytes. The filmstrip is now a single rail of columns, HAR1 stacked over HAR2 at the same timestamp, padded onto a 100 ms grid so each cell maps to a real on-disk frame whenever the page is actually changing. HAR1 cells get a blue left-edge stripe and a blue "1" badge; HAR2 cells get orange and a "2" badge — distinct enough to be readable without consulting the legend, and colour-blind friendly. Columns where the two HARs disagree on visual progress get a tinted border (amber for small gaps, red for large), so "HAR2 was still blank at 800 ms" jumps out. Arrow keys move focus between cells; mouse-drag scrolls the rail. Final-screenshot captures grow to ~460 px wide (was 200 px) and clicking any thumbnail — capture or filmstrip frame — opens it in an in-page lightbox instead of kicking the user to a new tab. The Visual Progress chart gets vertical guide lines at FVC, FCP, LCP and Speed Index for each HAR, colour-coded per metric (HAR1 solid, HAR2 dashed) so a regressed LCP shows up as two orange lines drifting apart. The Waterfall card gets a "Side by side" toggle that swaps the blend-overlay for a 2-column grid; useful when the question is "which row belongs to which HAR?" rather than "what moved?". Accessibility baseline: skip-to-content link, universal :focus-visible ring, <main> and <nav> landmarks, table caption, ARIA labels on every interactive control, alt text on capture images, and prefers-reduced-motion honoured. Co-authored-by: Claude Opus 4.7 (1M context) noreply@anthropic.co
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The result page used to be a wall of numbers and a stack of
filmstrip rails — knowing whether anything actually regressed
meant scanning the page-x-ray table column-by-column and squinting
at two parallel filmstrips. The aim of this change is "the
regressions announce themselves" before you scroll.
Page-x-ray gets a Δ column (red regressions, green improvements,
grey "no change", with sign + percent), per-section header
colours so the long metric list breaks into obvious groups, and
an "Only differences" chip in the column header that hides
no-change rows entirely. The CPU "time spent by category" and
"events" disclosure rows are now proper sub-tables with their
own Δ column so a recalculate-style regression reads the same way
as a regression in total bytes.
The filmstrip is now a single rail of columns, HAR1 stacked over
HAR2 at the same timestamp, padded onto a 100 ms grid so each
cell maps to a real on-disk frame whenever the page is actually
changing. HAR1 cells get a blue left-edge stripe and a blue "1"
badge; HAR2 cells get orange and a "2" badge — distinct enough
to be readable without consulting the legend, and colour-blind
friendly. Columns where the two HARs disagree on visual progress
get a tinted border (amber for small gaps, red for large), so
"HAR2 was still blank at 800 ms" jumps out. Arrow keys move
focus between cells; mouse-drag scrolls the rail.
Final-screenshot captures grow to ~460 px wide (was 200 px) and
clicking any thumbnail — capture or filmstrip frame — opens it
in an in-page lightbox instead of kicking the user to a new tab.
The Visual Progress chart gets vertical guide lines at FVC, FCP,
LCP and Speed Index for each HAR, colour-coded per metric (HAR1
solid, HAR2 dashed) so a regressed LCP shows up as two orange
lines drifting apart.
The Waterfall card gets a "Side by side" toggle that swaps the
blend-overlay for a 2-column grid; useful when the question is
"which row belongs to which HAR?" rather than "what moved?".
Accessibility baseline: skip-to-content link, universal
and landmarks, table:focus-visible ring,
caption, ARIA labels on every interactive control, alt text on
capture images, and prefers-reduced-motion honoured.
Co-authored-by: Claude Opus 4.7 (1M context) noreply@anthropic.co