Report redesign for v5

[connorjclark]

Design reference: https://yuinchien.github.io/sandbox/lighthouse/

Task breakdown

• gauges
• • light fill color (report(redesign): new gauges, score scale, category headers, variables #8121)
• • bigger (report(redesign): new gauges, score scale, category headers, variables #8121)
• • separator removed between normal categories and the PWA (report(redesign): new gauges, score scale, category headers, variables #8121)
• • plugin icon (report: plugin badge for plugin score gauges #8307)
• • gauge order: default, pwa, plugins (report(redesign): order gauges - default, pwa, plugins #8529)
• score scale (report(redesign): new gauges, score scale, category headers, variables #8121, report(redesign): adjust score scale to match new design #8590)
• • center
• • round border
• • reverse order
• opportunities
• • hide savings estimate bar in mobile (report(redesign): hide sparkline in mobile #8562)
• audit results
• • sections have a line separator (report(redesign): new gauges, score scale, category headers, variables #8121)
• • category description is centered and larger (report(redesign): new gauges, score scale, category headers, variables #8121)
• • bold audit group title with inline description (report(redesign): score icons, audit group headers, colors #8222 report(redesign): inline display text. bold audit header text #8592)
• • remove audit result numbering (report(redesign): score icons, audit group headers, colors #8222)
• • change audit count to be grouped with title (report(redesign): score icons, audit group headers, colors #8222)
• move score icons to the left (in metrics, opportunities, audit results) (report(redesign): score icons, audit group headers, colors #8222)
• colors (report(redesign): score icons, audit group headers, colors #8222)
• icons
• • use simple shapes for score icons (report(redesign): score icons, audit group headers, colors #8222)
• • green PWA icons (report(redesign): pwa icons #8532)
• • remove icons from audit group headers (report(redesign): remove icons from non-pwa group headings #8329)
• • doublecheck gray circle for resource summary audit (all informative)
• fonts
• metric description toggle
• whitespace (report(redesign): misc whitespace and color changes #8531, report(redesign): various whitespace adjustments (DRAFT) #8591)
• remove old lighthouse header (report: sticky topbar #8300)
• sticky topbar
• • LH icon in top left (report: sticky topbar #8300)
• • followed by url (report: sticky topbar #8300)
• • score gauge sticky header
• • • appears when scrolling past score scale (report(redesign): add sticky scores header #8524)
• • • current category in view is underlined (report(redesign): add sticky scores header #8524)
• • • clicking category scrolls to it (report(redesign): smooth scroll on category gauge click #8720)
• dark mode
• • styles (report(redesign): dark theme #8425)
• • persist
• clients
• • Devtools
• • PSI
• runtime settings (report(redesign): runtime settings footer #8229)
• • alternating background colors for rows
• • style like a table
• browser compatibility (report(redesign): fix browser compatability issues #8653)
• • stable Firefox
• • stable Safari
• • Edge 17/18
• cleanup

Likely punting till after I/O

• logo
• run config
• error messaging
• fireworks (report(redesign): fireworks #8660)
• full bleed thumbnail images (report: full bleed image thumbnails #9238)

High-level overview

Before:

After: