lighthouse 8.4.0 → 8.5.0-dev.20210921

package/changelog.md

@@ -1,3 +1,82 @@
+<a name="8.5.0"></a>
+# 8.5.0 (2021-09-21)
+[Full Changelog](https://github.com/GoogleChrome/lighthouse/compare/v8.4.0...v8.5.0)
+
+We expect this release to ship in the DevTools of [Chrome 96](https://chromiumdash.appspot.com/schedule), and to PageSpeed Insights within 2 weeks.
+
+## New Contributors
+
+Thanks to our new contributors 👽🐷🐰🐯🐻!
+
+Konstantin Popov @KonstHardy
+Can Umay @canumay
+
+## Core
+
+* lazy-lcp: fix failureTitle in lcp-lazy-loaded ([#13049](https://github.com/GoogleChrome/lighthouse/pull/13049))
+* tracing: remove cpu_profiler.hires ([#13056](https://github.com/GoogleChrome/lighthouse/pull/13056))
+* tsc: add base tsconfig for config inheritance ([#13072](https://github.com/GoogleChrome/lighthouse/pull/13072))
+* make main tsc compile cacheable ([#13069](https://github.com/GoogleChrome/lighthouse/pull/13069))
+
+## ⛏️👷 Fraggle Rock
+
+  Support for auditing user flows ([#11313](https://github.com/GoogleChrome/lighthouse/issues/11313))
+
+* cleanup driver on run completion ([#13062](https://github.com/GoogleChrome/lighthouse/pull/13062))
+* setup emulation and throttling for timespans ([#13058](https://github.com/GoogleChrome/lighthouse/pull/13058))
+* support additionalTraceCategories ([#13030](https://github.com/GoogleChrome/lighthouse/pull/13030))
+* add support for plugins ([#13028](https://github.com/GoogleChrome/lighthouse/pull/13028))
+* move GatherContext to baseArtifacts ([#13033](https://github.com/GoogleChrome/lighthouse/pull/13033))
+* preserve traces on failed page load ([#13027](https://github.com/GoogleChrome/lighthouse/pull/13027))
+* move HostUserAgent/FormFactor back to base artifacts ([#12969](https://github.com/GoogleChrome/lighthouse/pull/12969))
+* use devtools throttling by default in timespan mode ([#13013](https://github.com/GoogleChrome/lighthouse/pull/13013))
+* collect OOPIF network data ([#12992](https://github.com/GoogleChrome/lighthouse/pull/12992))
+* flow: summary sections ([#13086](https://github.com/GoogleChrome/lighthouse/pull/13086))
+* flow: topbar ([#13065](https://github.com/GoogleChrome/lighthouse/pull/13065))
+
+## CLI
+
+* convert to ES modules ([#13045](https://github.com/GoogleChrome/lighthouse/pull/13045))
+
+## Report
+
+* make metric value more prominent in table ([#13036](https://github.com/GoogleChrome/lighthouse/pull/13036))
+* 3p-filter: drop for/id as elements are already nested ([#13067](https://github.com/GoogleChrome/lighthouse/pull/13067))
+* add gatherMode option to category score ([#13029](https://github.com/GoogleChrome/lighthouse/pull/13029))
+* add fractional category scores ([#13009](https://github.com/GoogleChrome/lighthouse/pull/13009))
+
+## Deps
+
+* update to latest @rollup/plugin-typescript ([#13075](https://github.com/GoogleChrome/lighthouse/pull/13075))
+* snyk: update snyk snapshot ([#13019](https://github.com/GoogleChrome/lighthouse/pull/13019))
+
+## Clients
+
+* lr: bundle smokehouse as commonjs ([#13074](https://github.com/GoogleChrome/lighthouse/pull/13074))
+* add canonical link to viewer and treemap ([#13032](https://github.com/GoogleChrome/lighthouse/pull/13032))
+
+## Docs
+
+* readme: add Peyk to the list of integrations ([#13055](https://github.com/GoogleChrome/lighthouse/pull/13055))
+
+## Tests
+
+* add FR integration scenarios ([#13092](https://github.com/GoogleChrome/lighthouse/pull/13092))
+* update SVGOMG expectations ([#13088](https://github.com/GoogleChrome/lighthouse/pull/13088))
+* restore use of latest node 16 in CI ([#13079](https://github.com/GoogleChrome/lighthouse/pull/13079))
+* eslint: trailing commas for import/export ([#13059](https://github.com/GoogleChrome/lighthouse/pull/13059))
+* smokehouse: add flag for test sharding ([#13047](https://github.com/GoogleChrome/lighthouse/pull/13047))
+* smokehouse: convert to ES modules ([#13046](https://github.com/GoogleChrome/lighthouse/pull/13046))
+* fix flaky robots smoke failure ([#13031](https://github.com/GoogleChrome/lighthouse/pull/13031))
+* smoke: upload smokehouse artifacts on failure ([#13010](https://github.com/GoogleChrome/lighthouse/pull/13010))
+
+## Misc
+
+* build: fix minifyFileTransform stream bug in Node 16 ([#13073](https://github.com/GoogleChrome/lighthouse/pull/13073))
+* fix typo in lighthouse-treemap/app/src/main.js ([#13076](https://github.com/GoogleChrome/lighthouse/pull/13076))
+* proto: add i18n.icuMessagePaths ([#13068](https://github.com/GoogleChrome/lighthouse/pull/13068))
+* remove all FR-COMPAT todos ([#13023](https://github.com/GoogleChrome/lighthouse/pull/13023))
+
 <a name="8.4.0"></a>
 # 8.4.0 (2021-09-08)
 [Full Changelog](https://github.com/GoogleChrome/lighthouse/compare/v8.3.0...v8.4.0)

package/flow-report/assets/styles.css

@@ -8,8 +8,10 @@
   --app-font-size: 12px;
   --base-spacing: 16px;
   --category-summary-font-size: 18px;
+  --double-base-spacing: calc(var(--base-spacing) * 2);
   --gather-mode-icon-size: 16px;
   --half-base-spacing: calc(var(--base-spacing) / 2);
+  --separator-color: var(--color-gray-300);
   --sidebar-flow-step-navigation-font-size: 14px;
   --sidebar-selected-bg-color: #DDEEFF;
   --sidebar-summary-font-size: 14px;
@@ -17,18 +19,58 @@
   --summary-flow-step-label-font-size: 16px;
   --summary-subtitle-font-size: 16px;
   --summary-title-font-size: 32px;
+  --topbar-title-font-size: 14px;
 }
 
 .App {
   display: grid;
-  grid-template-areas: "side report";
+  grid-template-areas:
+    "topbar topbar"
+    "sidebar content";
   grid-template-columns: min-content auto;
+  grid-template-rows: min-content auto;
   height: 100vh;
   max-width: 100vw;
   font-size: var(--app-font-size);
 }
+.App--collapsed {
+  grid-template-columns: 0px auto;
+}
+.App--collapsed .Sidebar {
+  display: none;
+}
+
+.Topbar {
+  grid-area: topbar;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--separator-color);
+}
+
+.Topbar__menu {
+  padding: var(--base-spacing);
+  cursor: pointer;
+  display: flex;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.Topbar__logo {
+  display: flex;
+  margin-right: var(--half-base-spacing);
+}
+
+.Topbar__title {
+  font-size: var(--topbar-title-font-size);
+  font-weight: bold;
+}
 
 .Content {
+  grid-area: content;
   overflow-y: auto;
 }
 
@@ -48,59 +90,15 @@
   background-color: var(--color-blue-A700);
 }
 
-.CategoryRatio {
-  justify-self: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--category-summary-font-size);
-  min-height: var(--gauge-circle-size);
-  min-width: var(--gauge-circle-size);
-  text-decoration: none;
-}
-.CategoryRatio::before {
-  content: '';
-  height: var(--score-icon-size);
-  width: var(--score-icon-size);
-  margin: var(--score-icon-margin);
-}
-.CategoryRatio--pass {
-  color: var(--color-pass);
-}
-.CategoryRatio--pass::before {
-  background-color: var(--color-pass);
-  border-radius: 50%;
-}
-.CategoryRatio--average {
-  color: var(--color-average);
-}
-.CategoryRatio--average::before {
-  background-color: var(--color-average);
-}
-.CategoryRatio--fail {
-  color: var(--color-fail);
-}
-.CategoryRatio--fail::before {
-  border-left: calc(var(--score-icon-size) / 2) solid transparent;
-  border-right: calc(var(--score-icon-size) / 2) solid transparent;
-  border-bottom: var(--score-icon-size) solid var(--color-fail);
-}
-.CategoryRatio--null {
-  color: var(--color-gray-700);
-}
-.CategoryRatio--null::before {
-  border-radius: 50%;
-  border: 2px solid var(--color-gray-700);
-}
-
 .Separator {
   height: 1px;
   width: 100%;
-  background-color: var(--color-gray-300);
+  background-color: var(--separator-color);
 }
 
 .Sidebar {
-  border-right: 1px solid var(--color-gray-300);
+  grid-area: sidebar;
+  border-right: 1px solid var(--separator-color);
 }
 .Sidebar a {
   color: var(--color-gray-800);
@@ -192,14 +190,21 @@
 }
 
 .Summary {
-  margin: 0 auto;
-  min-width: var(--report-width);
-  width: max-content;
-  max-width: 90%;
+  display: grid;
+  grid-template-columns: minmax(5%, 1fr) auto minmax(5%, 1fr);
+  justify-content: start;
+  width: 100%;
+}
+.Summary > * {
+  grid-column: 2;
+}
+.Summary > .Separator {
+  grid-column: 1 / span 3;
 }
 
 .SummaryHeader {
-  margin: var(--base-spacing) 0;
+  margin: calc(var(--base-spacing) * 3) 0px;
+  width: 100%;
 }
 
 .SummaryHeader__title {
@@ -211,12 +216,26 @@
   font-size: var(--summary-subtitle-font-size);
 }
 
+.SummarySectionHeader {
+  margin-top: var(--double-base-spacing);
+}
+
+.SummarySectionHeader__content {
+  margin: var(--base-spacing) 0px;
+}
+
 .SummaryFlow {
   width: 100%;
+  max-width: max-content;
   display: grid;
   grid-auto-rows: min-content;
   grid-template-columns: min-content min-content 4fr 1fr 1fr 1fr 1fr;
   align-items: center;
+  margin: var(--base-spacing) 0px;
+}
+.SummaryFlow .lh-fraction__content {
+  padding: 0px;
+  min-width: unset;
 }
 
 /* Hide top segment of sidebar flow */
@@ -259,11 +278,18 @@
 }
 
 .SummaryFlowStep__label {
+  grid-column: 3;
+  margin: var(--half-base-spacing);
+}
+
+.SummaryFlowStep__mode {
+  color: var(--color-gray-700);
+}
+
+.SummaryFlowStep__link {
   font-size: var(--summary-flow-step-label-font-size);
   color: var(--color-gray-800);
   text-decoration: underline;
-  grid-column: 3;
-  margin: var(--half-base-spacing);
 }
 
 .SummaryCategory {
@@ -282,7 +308,8 @@
   align-items: center;
   justify-content: center;
   padding: var(--half-base-spacing);
-  background-color: var(--color-gray-200);
+  background-color: var(--color-gray-100);
+  border-top: 1px solid var(--color-gray-300);
   text-align: center;
 }
 .SummaryNavigationHeader__url {
@@ -290,14 +317,11 @@
   text-align: left;
 }
 
-.SummaryFlowStep__divider {
+.SummaryFlowStep__separator {
   display: contents;
 }
-
-.SummaryFlowStep__divider--line {
+.SummaryFlowStep__separator > .Separator {
   grid-column-end: span 5;
-  height: 1px;
-  background-color: var(--color-gray-300);
 }
 
 .SummaryCategory__null {

package/flow-report/src/app.tsx

@@ -5,12 +5,14 @@
  */
 
 import {FunctionComponent} from 'preact';
+import {useState} from 'preact/hooks';
 
 import {ReportRendererProvider} from './wrappers/report-renderer';
 import {Sidebar} from './sidebar/sidebar';
 import {Summary} from './summary/summary';
-import {FlowResultContext, useCurrentLhr} from './util';
+import {classNames, FlowResultContext, useCurrentLhr} from './util';
 import {Report} from './wrappers/report';
+import {Topbar} from './topbar';
 
 const Content: FunctionComponent = () => {
   const currentLhr = useCurrentLhr();
@@ -27,10 +29,12 @@ const Content: FunctionComponent = () => {
 };
 
 export const App: FunctionComponent<{flowResult: LH.FlowResult}> = ({flowResult}) => {
+  const [collapsed, setCollapsed] = useState(false);
   return (
     <FlowResultContext.Provider value={flowResult}>
       <ReportRendererProvider>
-        <div className="App">
+        <div className={classNames('App', {'App--collapsed': collapsed})}>
+          <Topbar onMenuClick={() => setCollapsed(c => !c)} />
           <Sidebar/>
           <Content/>
         </div>

package/flow-report/src/common.tsx

@@ -6,49 +6,8 @@
 
 import {FunctionComponent} from 'preact';
 
-import {Util} from '../../report/renderer/util';
 import {NavigationIcon, SnapshotIcon, TimespanIcon} from './icons';
 
-/**
- * Summarizes the category as a ratio of passed audits to total audits.
- * The rating color and icon are calculated from the passed/total ratio, not the category score.
- * A category will be given a null rating and color if none of its audits are weighted.
- */
-export const CategoryRatio: FunctionComponent<{
-  category: LH.ReportResult.Category,
-  audits: LH.Result['audits'],
-  href: string,
-}> = ({category, audits, href}) => {
-  const numAudits = category.auditRefs.length;
-
-  let numPassed = 0;
-  let totalWeight = 0;
-  for (const auditRef of category.auditRefs) {
-    totalWeight += auditRef.weight;
-    const audit = audits[auditRef.id];
-    if (!audit) {
-      console.warn(`Could not find score for audit '${auditRef.id}', treating as failed.`);
-      continue;
-    }
-    if (Util.showAsPassed(audit)) numPassed++;
-  }
-
-  const ratio = numPassed / numAudits;
-  let rating = Util.calculateRating(ratio);
-
-  // If none of the available audits can affect the score, a rating isn't useful.
-  // The flow report should display the ratio with neutral icon and coloring in this case.
-  if (totalWeight === 0) {
-    rating = 'null';
-  }
-
-  return (
-    <a href={href} className={`CategoryRatio CategoryRatio--${rating}`} data-testid="CategoryRatio">
-      {`${numPassed}/${numAudits}`}
-    </a>
-  );
-};
-
 export const Separator: FunctionComponent = () => {
   return <div className="Separator" role="separator"></div>;
 };

package/flow-report/src/icons.tsx

@@ -94,3 +94,14 @@ export const CpuIcon: FunctionComponent = () => {
     </svg>
   );
 };
+
+export const HamburgerIcon: FunctionComponent = () => {
+  return (
+    <svg viewBox="0 0 18 12" width="18" height="12" role="img">
+      <rect width="18" height="2"></rect>
+      <rect y="5" width="18" height="2"></rect>
+      <rect y="10" width="18" height="2"></rect>
+    </svg>
+  );
+};
+

package/flow-report/src/summary/summary.tsx

@@ -7,14 +7,18 @@
 import {FunctionComponent} from 'preact';
 import {useMemo} from 'preact/hooks';
 
-import {Gauge} from '../wrappers/gauge';
-import {FlowSegment} from '../common';
-import {CategoryRatio} from '../common';
+import {FlowSegment, Separator} from '../common';
 import {getScreenDimensions, getScreenshot, useDerivedStepNames, useFlowResult} from '../util';
 import {Util} from '../../../report/renderer/util';
+import {CategoryScore} from '../wrappers/category-score';
 
 const DISPLAYED_CATEGORIES = ['performance', 'accessibility', 'best-practices', 'seo'];
 const THUMBNAIL_WIDTH = 50;
+const MODE_DESCRIPTIONS: Record<LH.Result.GatherMode, string> = {
+  'navigation': 'Page load',
+  'timespan': 'User interactions',
+  'snapshot': 'Captured state of page',
+};
 
 const SummaryNavigationHeader: FunctionComponent<{url: string}> = ({url}) => {
   return (
@@ -30,27 +34,19 @@ const SummaryNavigationHeader: FunctionComponent<{url: string}> = ({url}) => {
 };
 
 const SummaryCategory: FunctionComponent<{
-  gatherMode: LH.Result.GatherMode,
-  audits: LH.ReportResult['audits'],
   category: LH.ReportResult.Category|undefined,
   href: string,
-}> = ({gatherMode, audits, category, href}) => {
+  gatherMode: LH.Result.GatherMode,
+}> = ({category, href, gatherMode}) => {
   return (
     <div className="SummaryCategory">
       {
         category ?
-          (
-            gatherMode === 'navigation' ?
-            <Gauge
-              category={category}
-              href={href}
-            /> :
-            <CategoryRatio
-              category={category}
-              audits={audits}
-              href={href}
-            />
-          ) :
+          <CategoryScore
+            category={category}
+            href={href}
+            gatherMode={gatherMode}
+          /> :
           <div
             className="SummaryCategory__null"
             data-testid="SummaryCategory__null"
@@ -68,7 +64,6 @@ export const SummaryFlowStep: FunctionComponent<{
   label: string,
   hashIndex: number,
 }> = ({lhr, label, hashIndex}) => {
-  // TODO(FR-COMPAT): Store report results globally.
   const reportResult = useMemo(() => Util.prepareReportResult(lhr), [lhr]);
 
   const screenshot = reportResult.gatherMode !== 'timespan' ? getScreenshot(reportResult) : null;
@@ -82,9 +77,9 @@ export const SummaryFlowStep: FunctionComponent<{
       {
         lhr.gatherMode === 'navigation' || hashIndex === 0 ?
           <SummaryNavigationHeader url={lhr.finalUrl}/> :
-          <div className="SummaryFlowStep__divider">
+          <div className="SummaryFlowStep__separator">
             <FlowSegment/>
-            <div className="SummaryFlowStep__divider--line"/>
+            <Separator/>
           </div>
       }
       <img
@@ -94,15 +89,17 @@ export const SummaryFlowStep: FunctionComponent<{
         style={{width: THUMBNAIL_WIDTH, maxHeight: thumbnailHeight}}
       />
       <FlowSegment mode={lhr.gatherMode}/>
-      <a className="SummaryFlowStep__label" href={`#index=${hashIndex}`}>{label}</a>
+      <div className="SummaryFlowStep__label">
+        <div className="SummaryFlowStep__mode">{MODE_DESCRIPTIONS[lhr.gatherMode]}</div>
+        <a className="SummaryFlowStep__link" href={`#index=${hashIndex}`}>{label}</a>
+      </div>
       {
         DISPLAYED_CATEGORIES.map(c => (
           <SummaryCategory
             key={c}
-            gatherMode={reportResult.gatherMode}
             category={reportResult.categories[c]}
-            audits={reportResult.audits}
             href={`#index=${hashIndex}&anchor=${c}`}
+            gatherMode={lhr.gatherMode}
           />
         ))
       }
@@ -153,7 +150,6 @@ export const SummaryHeader: FunctionComponent = () => {
     }
   }
 
-  // TODO(FR-COMPAT): Pluralize UI strings.
   const subtitleCounts = [];
   if (numNavigation) subtitleCounts.push(`${numNavigation} navigation reports`);
   if (numTimespan) subtitleCounts.push(`${numTimespan} timespan reports`);
@@ -168,10 +164,21 @@ export const SummaryHeader: FunctionComponent = () => {
   );
 };
 
+const SummarySectionHeader: FunctionComponent = ({children}) => {
+  return (
+    <div className="SummarySectionHeader">
+      <div className="SummarySectionHeader__content">{children}</div>
+      <Separator/>
+    </div>
+  );
+};
+
 export const Summary: FunctionComponent = () => {
   return (
     <div className="Summary" data-testid="Summary">
       <SummaryHeader/>
+      <Separator/>
+      <SummarySectionHeader>ALL REPORTS</SummarySectionHeader>
       <SummaryFlow/>
     </div>
   );

package/flow-report/src/topbar.tsx

@@ -0,0 +1,60 @@
+/**
+ * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import {FunctionComponent, JSX} from 'preact';
+
+import {HamburgerIcon} from './icons';
+
+/* eslint-disable max-len */
+const Logo: FunctionComponent = () => {
+  return (
+    <svg height="24" width="24" viewBox="0 0 24 24" role="img">
+      <defs>
+        <linearGradient x1="57.456%" y1="13.086%" x2="18.259%" y2="72.322%" id="Topbar__logo--a">
+          <stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
+          <stop stop-color="#262626" stop-opacity="0" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="Topbar__logo--b">
+          <stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
+          <stop stop-color="#262626" stop-opacity="0" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="58.764%" y1="65.756%" x2="36.939%" y2="50.14%" id="Topbar__logo--c">
+          <stop stop-color="#262626" stop-opacity=".1" offset="0%"/>
+          <stop stop-color="#262626" stop-opacity="0" offset="100%"/>
+        </linearGradient>
+        <linearGradient x1="41.635%" y1="20.358%" x2="72.863%" y2="85.424%" id="Topbar__logo--d">
+          <stop stop-color="#FFF" stop-opacity=".1" offset="0%"/>
+          <stop stop-color="#FFF" stop-opacity="0" offset="100%"/>
+        </linearGradient>
+      </defs>
+      <g fill="none" fill-rule="evenodd">
+        <path d="M12 3l4.125 2.625v3.75H18v2.25h-1.688l1.5 9.375H6.188l1.5-9.375H6v-2.25h1.875V5.648L12 3zm2.201 9.938L9.54 14.633 9 18.028l5.625-2.062-.424-3.028zM12.005 5.67l-1.88 1.207v2.498h3.75V6.86l-1.87-1.19z" fill="#F44B21"/>
+        <path fill="#FFF" d="M14.201 12.938L9.54 14.633 9 18.028l5.625-2.062z"/>
+        <path d="M6 18c-2.042 0-3.95-.01-5.813 0l1.5-9.375h4.326L6 18z" fill="url(#Topbar__logo--a)" fill-rule="nonzero" transform="translate(6 3)"/>
+        <path fill="#FFF176" fill-rule="nonzero" d="M13.875 9.375v-2.56l-1.87-1.19-1.88 1.207v2.543z"/>
+        <path fill="url(#Topbar__logo--b)" fill-rule="nonzero" d="M0 6.375h6v2.25H0z" transform="translate(6 3)"/>
+        <path fill="url(#Topbar__logo--c)" fill-rule="nonzero" d="M6 6.375H1.875v-3.75L6 0z" transform="translate(6 3)"/>
+        <path fill="url(#Topbar__logo--d)" fill-rule="nonzero" d="M6 0l4.125 2.625v3.75H12v2.25h-1.688l1.5 9.375H.188l1.5-9.375H0v-2.25h1.875V2.648z" transform="translate(6 3)"/>
+      </g>
+    </svg>
+  );
+};
+/* eslint-enable max-len */
+
+export const Topbar: FunctionComponent<{onMenuClick: JSX.MouseEventHandler<HTMLDivElement>}> =
+({onMenuClick}) => {
+  return (
+    <div className="Topbar">
+      <div className="Topbar__menu" onClick={onMenuClick} role="button">
+        <HamburgerIcon/>
+      </div>
+      <div className="Topbar__logo">
+        <Logo/>
+      </div>
+      <div className="Topbar__title">Lighthouse User Flow Report</div>
+    </div>
+  );
+};

package/flow-report/src/util.ts

@@ -135,7 +135,6 @@ export function useDerivedStepNames() {
     let numTimespan = 1;
     let numSnapshot = 1;
 
-    // TODO(FR-COMPAT): Override with a provided step name.
     return flowResult.lhrs.map((lhr, index) => {
       const shortUrl = shortenUrl(lhr.finalUrl);
 

package/flow-report/src/wrappers/{gauge.tsx → category-score.tsx}

@@ -9,17 +9,23 @@ import {useEffect, useLayoutEffect, useRef} from 'preact/hooks';
 
 import {useReportRenderer} from './report-renderer';
 
-export const Gauge: FunctionComponent<{category: LH.ReportResult.Category, href: string}> =
-({category, href}) => {
+export const CategoryScore: FunctionComponent<{
+  category: LH.ReportResult.Category,
+  href: string,
+  gatherMode: LH.Result.GatherMode,
+}> = ({category, href, gatherMode}) => {
   const {categoryRenderer} = useReportRenderer();
   const ref = useRef<HTMLDivElement>(null);
 
   useLayoutEffect(() => {
-    const el = categoryRenderer.renderScoreGauge(category, {});
+    const el = categoryRenderer.renderCategoryScore(category, {}, {gatherMode});
 
     // Category label is displayed in the navigation header.
-    const label = el.querySelector('.lh-gauge__label');
+    const label = el.querySelector('.lh-gauge__label,.lh-fraction__label');
     if (label) label.remove();
+    // Background is displayed in individual reports, but not on the summary page.
+    const bg = el.querySelector('.lh-fraction__background');
+    if (bg) bg.remove();
 
     if (ref.current) ref.current.append(el);
     return () => {
@@ -35,6 +41,6 @@ export const Gauge: FunctionComponent<{category: LH.ReportResult.Category, href:
   }, [href]);
 
   return (
-    <div ref={ref} data-testid="Gauge"/>
+    <div ref={ref} data-testid="CategoryScore"/>
   );
 };

package/flow-report/test/summary/summary-test.tsx

@@ -62,7 +62,7 @@ describe('SummaryFlowStep', () => {
     const screenshot = root.getByTestId('SummaryFlowStep__screenshot') as HTMLImageElement;
     expect(screenshot.src).toMatch(/data:image\/jpeg;base64/);
 
-    const gauges = root.getAllByTestId('Gauge');
+    const gauges = root.getAllByTestId('CategoryScore');
     expect(gauges).toHaveLength(4);
 
     const links = root.getAllByRole('link') as HTMLAnchorElement[];
@@ -90,7 +90,7 @@ describe('SummaryFlowStep', () => {
     expect(screenshot.src).toBeFalsy();
 
     expect(root.getByTestId('SummaryCategory__null'));
-    const gauges = root.getAllByTestId('CategoryRatio');
+    const gauges = root.getAllByTestId('CategoryScore');
     expect(gauges).toHaveLength(3);
 
     const links = root.getAllByRole('link') as HTMLAnchorElement[];
@@ -117,7 +117,7 @@ describe('SummaryFlowStep', () => {
     const screenshot = root.getByTestId('SummaryFlowStep__screenshot') as HTMLImageElement;
     expect(screenshot.src).toMatch(/data:image\/jpeg;base64/);
 
-    const gauges = root.getAllByTestId('CategoryRatio');
+    const gauges = root.getAllByTestId('CategoryScore');
     expect(gauges).toHaveLength(4);
 
     const links = root.getAllByRole('link') as HTMLAnchorElement[];