lighthouse 8.6.0 → 9.0.0

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

@@ -7,32 +7,68 @@
 import {createContext, FunctionComponent} from 'preact';
 import {useContext, useMemo} from 'preact/hooks';
 
+import {formatMessage} from '../../../shared/localization/format';
 import {I18n} from '../../../report/renderer/i18n';
 import {UIStrings} from './ui-strings';
-import {useLocale} from '../util';
+import {useFlowResult} from '../util';
 import strings from './localized-strings';
+import {Util} from '../../../report/renderer/util';
 
-const I18nContext = createContext<I18n<typeof UIStrings>|undefined>(undefined);
+const I18nContext = createContext(new I18n('en-US', {...Util.UIStrings, ...UIStrings}));
 
-export function useI18n() {
-  const i18n = useContext(I18nContext);
-  if (!i18n) throw Error('i18n was not initialized');
-  return i18n;
+function useLhrLocale() {
+  const flowResult = useFlowResult();
+  const firstLhr = flowResult.steps[0].lhr;
+  const locale = firstLhr.configSettings.locale;
+
+  if (flowResult.steps.some(step => step.lhr.configSettings.locale !== locale)) {
+    console.warn('LHRs have inconsistent locales');
+  }
+
+  return {
+    locale,
+    lhrStrings: firstLhr.i18n.rendererFormattedStrings,
+  };
+}
+
+function useI18n() {
+  return useContext(I18nContext);
 }
 
-export function useUIStrings() {
+function useLocalizedStrings() {
   const i18n = useI18n();
   return i18n.strings;
 }
 
-export const I18nProvider: FunctionComponent = ({children}) => {
-  const locale = useLocale();
-  const i18n = useMemo(() => new I18n(locale, {
-    // Set missing renderer strings to default (english) values.
-    ...UIStrings,
-    // `strings` is generated in build/build-report.js
-    ...strings[locale],
-  }), [locale]);
+function useStringFormatter() {
+  const {locale} = useLhrLocale();
+  return (str: string, values?: Record<string, string|number>) => {
+    return formatMessage(str, values, locale);
+  };
+}
+
+const I18nProvider: FunctionComponent = ({children}) => {
+  const {locale, lhrStrings} = useLhrLocale();
+
+  const i18n = useMemo(() => {
+    const i18n = new I18n(locale, {
+      // Set any missing lhr strings to default (english) values.
+      ...Util.UIStrings,
+      // Preload with strings from the first lhr.
+      // Used for legacy report components imported into the flow report.
+      ...lhrStrings,
+      // Set any missing flow strings to default (english) values.
+      ...UIStrings,
+      // `strings` is generated in build/build-report.js
+      ...strings[locale],
+    });
+
+    // Initialize renderer util i18n for strings rendered in wrapped components.
+    // TODO: Don't attach global i18n to `Util`.
+    Util.i18n = i18n;
+
+    return i18n;
+  }, [locale, lhrStrings]);
 
   return (
     <I18nContext.Provider value={i18n}>
@@ -41,4 +77,9 @@ export const I18nProvider: FunctionComponent = ({children}) => {
   );
 };
 
-
+export {
+  useI18n,
+  useLocalizedStrings,
+  useStringFormatter,
+  I18nProvider,
+};

package/flow-report/src/i18n/ui-strings.js

@@ -57,6 +57,30 @@ export const UIStrings = {
   ratingFail: 'Poor',
   /** Rating indicating that a report category rating could not be calculated because of an error. */
   ratingError: 'Error',
+  /**
+   * @description Label indicating the number of Lighthouse reports that evaluate a web page as it loads.
+   * @example {2} numNavigation
+   */
+  navigationReportCount: `{numNavigation, plural,
+    =1 {{numNavigation} navigation report}
+    other {{numNavigation} navigation reports}
+  }`,
+  /**
+   * @description Label indicating the number of Lighthouse reports that evaluate a web page over a period of time.
+   * @example {2} numTimespan
+   */
+  timespanReportCount: `{numTimespan, plural,
+    =1 {{numTimespan} timespan report}
+    other {{numTimespan} timespan reports}
+  }`,
+  /**
+   * @description Label indicating the number of Lighthouse reports that evaluate a web page at a single point in time.
+   * @example {2} numSnapshot
+   */
+  snapshotReportCount: `{numSnapshot, plural,
+    =1 {{numSnapshot} snapshot report}
+    other {{numSnapshot} snapshot reports}
+  }`,
   /** Label for a button that saves a Lighthouse report to disk. */
   save: 'Save',
   /** Label for a button that toggles the help modal with explanations on how to interpret the Lighthouse flow report. */
@@ -83,4 +107,30 @@ export const UIStrings = {
   helpUseCaseSnapshot1: 'Find accessibility issues in single page applications or complex forms.',
   /** Example use case for how Lighthouse can be applied in practice. Appears in a list with other examples. */
   helpUseCaseSnapshot2: 'Evaluate best practices of menus and UI elements hidden behind interaction.',
+  /**
+   * @description Label indicating the number of Lighthouse audits that passed.
+   * @example {2} numPassed
+   */
+  passedAuditCount: `{numPassed, plural,
+    =1 {{numPassed} audit passed}
+    other {{numPassed} audits passed}
+  }`,
+  /**
+   * @description Label indicating the number of Lighthouse audits that are possible to pass for a page.
+   * @example {2} numPassableAudits
+   */
+  passableAuditCount: `{numPassableAudits, plural,
+    =1 {{numPassableAudits} passable audit}
+    other {{numPassableAudits} passable audits}
+  }`,
+  /**
+   * @description Label indicating the number of Lighthouse audits that are informative.
+   * @example {2} numInformative
+   */
+  informativeAuditCount: `{numInformative, plural,
+    =1 {{numInformative} informative audit}
+    other {{numInformative} informative audits}
+  }`,
+  /** Label for a list of Lighthouse audits that are the most impactful. */
+  highestImpact: 'Highest impact',
 };

package/flow-report/src/icons.tsx

@@ -8,7 +8,7 @@ import {FunctionComponent} from 'preact';
 
 /* eslint-disable max-len */
 
-export const SummaryIcon: FunctionComponent = () => {
+const SummaryIcon: FunctionComponent = () => {
   return (
     <svg width="14" viewBox="0 0 18 16" fill="none" role="img">
       <path fill-rule="evenodd" clip-rule="evenodd" d="M0 2C0 1.17 0.67 0.5 1.5 0.5C2.33 0.5 3 1.17 3 2C3 2.83 2.33 3.5 1.5 3.5C0.67 3.5 0 2.83 0 2ZM0 8C0 7.17 0.67 6.5 1.5 6.5C2.33 6.5 3 7.17 3 8C3 8.83 2.33 9.5 1.5 9.5C0.67 9.5 0 8.83 0 8ZM1.5 12.5C0.67 12.5 0 13.18 0 14C0 14.82 0.68 15.5 1.5 15.5C2.32 15.5 3 14.82 3 14C3 13.18 2.33 12.5 1.5 12.5ZM18 15H5V13H18V15ZM5 9H18V7H5V9ZM5 3V1H18V3H5Z" fill="currentColor"/>
@@ -16,7 +16,7 @@ export const SummaryIcon: FunctionComponent = () => {
   );
 };
 
-export const NavigationIcon: FunctionComponent = () => {
+const NavigationIcon: FunctionComponent = () => {
   return (
     <svg
       width="16"
@@ -36,7 +36,7 @@ export const NavigationIcon: FunctionComponent = () => {
   );
 };
 
-export const TimespanIcon: FunctionComponent = () => {
+const TimespanIcon: FunctionComponent = () => {
   return (
     <svg
       width="16"
@@ -60,7 +60,7 @@ export const TimespanIcon: FunctionComponent = () => {
   );
 };
 
-export const SnapshotIcon: FunctionComponent = () => {
+const SnapshotIcon: FunctionComponent = () => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -79,7 +79,7 @@ export const SnapshotIcon: FunctionComponent = () => {
   );
 };
 
-export const CloseIcon: FunctionComponent = () => {
+const CloseIcon: FunctionComponent = () => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -96,7 +96,7 @@ export const CloseIcon: FunctionComponent = () => {
   );
 };
 
-export const EnvIcon: FunctionComponent = () => {
+const EnvIcon: FunctionComponent = () => {
   return (
     <svg width="15" height="12" viewBox="0 0 15 12" fill="none" role="img">
       <path fill-rule="evenodd" clip-rule="evenodd" d="M3.33317 2.00008H13.9998V0.666748H3.33317C2.59984 0.666748 1.99984 1.26675 1.99984 2.00008V9.33341H0.666504V11.3334H7.99984V9.33341H3.33317V2.00008ZM13.9998 3.33341H9.99984C9.63317 3.33341 9.33317 3.63341 9.33317 4.00008V10.6667C9.33317 11.0334 9.63317 11.3334 9.99984 11.3334H13.9998C14.3665 11.3334 14.6665 11.0334 14.6665 10.6667V4.00008C14.6665 3.63341 14.3665 3.33341 13.9998 3.33341ZM10.6665 9.33341H13.3332V4.66675H10.6665V9.33341Z" fill="currentColor"/>
@@ -104,7 +104,15 @@ export const EnvIcon: FunctionComponent = () => {
   );
 };
 
-export const CpuIcon: FunctionComponent = () => {
+const NetworkIcon: FunctionComponent = () => {
+  return (
+    <svg width="16" height="11" viewBox="0 0 16 11" fill="none" role="img">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M0.666687 3.26663L2.00002 4.59997C3.92002 2.67997 6.52669 1.87997 9.02002 2.18663L9.81335 0.399966C6.59335 -0.173367 3.16002 0.779966 0.666687 3.26663ZM10.6 0.599966C10.4867 0.599966 10.3867 0.659966 10.3267 0.753299L10.28 0.853299L6.82669 8.61996C6.72002 8.8133 6.65335 9.02663 6.65335 9.25996C6.65335 9.99996 7.25335 10.6 7.99335 10.6C8.63335 10.6 9.17335 10.1466 9.30002 9.53996L9.30669 9.51997L10.9334 0.933299C10.9334 0.746633 10.7867 0.599966 10.6 0.599966ZM15.3334 3.26663L14 4.59997C13.1867 3.78663 12.2534 3.17997 11.2534 2.76663L11.6067 0.886633C12.9667 1.38663 14.24 2.1733 15.3334 3.26663ZM11.3334 7.26663L12.6667 5.9333C12.1334 5.39997 11.5334 4.98663 10.8934 4.6733L10.5267 6.61997C10.8067 6.79997 11.08 7.0133 11.3334 7.26663ZM4.66669 7.26663L3.33335 5.9333C4.67335 4.5933 6.45335 3.95997 8.20669 4.0133L7.35335 5.9333C6.37335 6.0733 5.42002 6.5133 4.66669 7.26663Z" fill="currentColor"/>
+    </svg>
+  );
+};
+
+const CpuIcon: FunctionComponent = () => {
   return (
     <svg width="16" height="16" viewBox="0 0 16 16" fill="none" role="img">
       <path fill-rule="evenodd" clip-rule="evenodd" d="M15.5 7.16667V5.5H13.8333V3.83333C13.8333 2.91667 13.0833 2.16667 12.1667 2.16667H10.5V0.5H8.83333V2.16667H7.16667V0.5H5.5V2.16667H3.83333C2.91667 2.16667 2.16667 2.91667 2.16667 3.83333V5.5H0.5V7.16667H2.16667V8.83333H0.5V10.5H2.16667V12.1667C2.16667 13.0833 2.91667 13.8333 3.83333 13.8333H5.5V15.5H7.16667V13.8333H8.83333V15.5H10.5V13.8333H12.1667C13.0833 13.8333 13.8333 13.0833 13.8333 12.1667V10.5H15.5V8.83333H13.8333V7.16667H15.5ZM10.5 5.5H5.5V10.5H10.5V5.5ZM3.83333 12.1667H12.1667V3.83333H3.83333V12.1667Z" fill="currentColor"/>
@@ -112,7 +120,7 @@ export const CpuIcon: FunctionComponent = () => {
   );
 };
 
-export const HamburgerIcon: FunctionComponent = () => {
+const HamburgerIcon: FunctionComponent = () => {
   return (
     <svg viewBox="0 0 18 12" width="18" height="12" role="img">
       <rect width="18" height="2" fill="currentColor"></rect>
@@ -122,3 +130,23 @@ export const HamburgerIcon: FunctionComponent = () => {
   );
 };
 
+const InfoIcon: FunctionComponent = () => {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M13 7C13 10.3137 10.3137 13 7 13C3.68629 13 1 10.3137 1 7C1 3.68629 3.68629 1 7 1C10.3137 1 13 3.68629 13 7ZM14 7C14 10.866 10.866 14 7 14C3.13401 14 0 10.866 0 7C0 3.13401 3.13401 0 7 0C10.866 0 14 3.13401 14 7ZM7.66658 11H6.33325V9.66667H7.66658V11ZM4.33325 5.66667C4.33325 4.19333 5.52659 3 6.99992 3C8.47325 3 9.66658 4.19333 9.66658 5.66667C9.66658 6.52194 9.1399 6.98221 8.62709 7.43036C8.1406 7.85551 7.66658 8.26975 7.66658 9H6.33325C6.33325 7.78582 6.96133 7.30439 7.51355 6.88112C7.94674 6.54907 8.33325 6.25281 8.33325 5.66667C8.33325 4.93333 7.73325 4.33333 6.99992 4.33333C6.26658 4.33333 5.66658 4.93333 5.66658 5.66667H4.33325Z" fill="currentColor"/>
+    </svg>
+  );
+};
+
+export {
+  SummaryIcon,
+  NavigationIcon,
+  TimespanIcon,
+  SnapshotIcon,
+  CloseIcon,
+  EnvIcon,
+  NetworkIcon,
+  CpuIcon,
+  HamburgerIcon,
+  InfoIcon,
+};

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

@@ -7,7 +7,7 @@
 import {FunctionComponent} from 'preact';
 
 import {FlowSegment} from '../common';
-import {classNames, useCurrentLhr, useFlowResult} from '../util';
+import {classNames, useHashState, useFlowResult} from '../util';
 import {Separator} from '../common';
 
 const SidebarFlowStep: FunctionComponent<{
@@ -41,7 +41,7 @@ const SidebarFlowSeparator: FunctionComponent = () => {
 
 export const SidebarFlow: FunctionComponent = () => {
   const flowResult = useFlowResult();
-  const currentLhr = useCurrentLhr();
+  const hashState = useHashState();
 
   return (
     <div className="SidebarFlow">
@@ -61,7 +61,7 @@ export const SidebarFlow: FunctionComponent = () => {
               mode={lhr.gatherMode}
               href={url.href}
               label={name}
-              isCurrent={index === (currentLhr && currentLhr.index)}
+              isCurrent={index === (hashState && hashState.index)}
             />
           </>;
         })

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

@@ -6,22 +6,23 @@
 
 import {FunctionComponent} from 'preact';
 
+import {Util} from '../../../report/renderer/util';
 import {Separator} from '../common';
-import {useI18n, useUIStrings} from '../i18n/i18n';
-import {CpuIcon, EnvIcon, SummaryIcon} from '../icons';
-import {classNames, useCurrentLhr, useFlowResult} from '../util';
+import {useI18n, useLocalizedStrings} from '../i18n/i18n';
+import {CpuIcon, EnvIcon, NetworkIcon, SummaryIcon} from '../icons';
+import {classNames, useHashState, useFlowResult} from '../util';
 import {SidebarFlow} from './flow';
 
-export const SidebarSummary: FunctionComponent = () => {
-  const currentLhr = useCurrentLhr();
-  const strings = useUIStrings();
+const SidebarSummary: FunctionComponent = () => {
+  const hashState = useHashState();
+  const strings = useLocalizedStrings();
 
   const url = new URL(location.href);
   url.hash = '#';
   return (
     <a
       href={url.href}
-      className={classNames('SidebarSummary', {'Sidebar--current': currentLhr === null})}
+      className={classNames('SidebarSummary', {'Sidebar--current': hashState === null})}
       data-testid="SidebarSummary"
     >
       <div className="SidebarSummary__icon">
@@ -32,20 +33,33 @@ export const SidebarSummary: FunctionComponent = () => {
   );
 };
 
-const SidebarRuntimeSettings: FunctionComponent<{settings: LH.ConfigSettings}> = ({settings}) => {
-  const strings = useUIStrings();
+const SidebarRuntimeSettings: FunctionComponent<{settings: LH.ConfigSettings}> =
+({settings}) => {
+  const strings = useLocalizedStrings();
+  const env = Util.getEmulationDescriptions(settings);
 
   return (
     <div className="SidebarRuntimeSettings">
-      <div className="SidebarRuntimeSettings__item">
+      <div className="SidebarRuntimeSettings__item" title={strings.runtimeSettingsDevice}>
         <div className="SidebarRuntimeSettings__item--icon">
           <EnvIcon/>
         </div>
         {
-          settings.formFactor === 'desktop' ? strings.desktop : strings.mobile
+          env.deviceEmulation
         }
       </div>
-      <div className="SidebarRuntimeSettings__item">
+      <div
+        className="SidebarRuntimeSettings__item"
+        title={strings.runtimeSettingsNetworkThrottling}
+      >
+        <div className="SidebarRuntimeSettings__item--icon">
+          <NetworkIcon/>
+        </div>
+        {
+          env.summary
+        }
+      </div>
+      <div className="SidebarRuntimeSettings__item" title={strings.runtimeSettingsCPUThrottling}>
         <div className="SidebarRuntimeSettings__item--icon">
           <CpuIcon/>
         </div>
@@ -57,7 +71,7 @@ const SidebarRuntimeSettings: FunctionComponent<{settings: LH.ConfigSettings}> =
   );
 };
 
-export const SidebarHeader: FunctionComponent<{title: string, date: string}> = ({title, date}) => {
+const SidebarHeader: FunctionComponent<{title: string, date: string}> = ({title, date}) => {
   const i18n = useI18n();
   return (
     <div className="SidebarHeader">
@@ -67,7 +81,7 @@ export const SidebarHeader: FunctionComponent<{title: string, date: string}> = (
   );
 };
 
-export const Sidebar: FunctionComponent = () => {
+const Sidebar: FunctionComponent = () => {
   const flowResult = useFlowResult();
   const firstLhr = flowResult.steps[0].lhr;
   return (
@@ -82,3 +96,10 @@ export const Sidebar: FunctionComponent = () => {
     </div>
   );
 };
+
+export {
+  SidebarSummary,
+  SidebarRuntimeSettings,
+  SidebarHeader,
+  Sidebar,
+};

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

@@ -9,10 +9,15 @@ import {FunctionComponent} from 'preact';
 import {Util} from '../../../report/renderer/util';
 import {Separator} from '../common';
 import {CategoryScore} from '../wrappers/category-score';
-import {useUIStrings} from '../i18n/i18n';
+import {useI18n, useStringFormatter, useLocalizedStrings} from '../i18n/i18n';
+import {Markdown} from '../wrappers/markdown';
 
 import type {UIStringsType} from '../i18n/ui-strings';
 
+const MAX_TOOLTIP_AUDITS = 2;
+
+type ScoredAuditRef = LH.ReportResult.AuditRef & {result: {score: number}};
+
 function getGatherModeLabel(gatherMode: LH.Result.GatherMode, strings: UIStringsType) {
   switch (gatherMode) {
     case 'navigation': return strings.navigationReport;
@@ -30,11 +35,73 @@ function getCategoryRating(rating: string, strings: UIStringsType) {
   }
 }
 
-export const SummaryTooltip: FunctionComponent<{
+function getScoreToBeGained(audit: ScoredAuditRef): number {
+  return audit.weight * (1 - audit.result.score);
+}
+
+function getOverallSavings(audit: LH.ReportResult.AuditRef): number {
+  return (
+    audit.result.details &&
+    audit.result.details.type === 'opportunity' &&
+    audit.result.details.overallSavingsMs
+  ) || 0;
+}
+
+const SummaryTooltipAudit: FunctionComponent<{audit: LH.ReportResult.AuditRef}> = ({audit}) => {
+  const rating = Util.calculateRating(audit.result.score, audit.result.scoreDisplayMode);
+  return (
+    <div className={`SummaryTooltipAudit SummaryTooltipAudit--${rating}`}>
+      <Markdown text={audit.result.title}/>
+    </div>
+  );
+};
+
+const SummaryTooltipAudits: FunctionComponent<{category: LH.ReportResult.Category}> =
+({category}) => {
+  const strings = useLocalizedStrings();
+
+  function isRelevantAudit(audit: LH.ReportResult.AuditRef): audit is ScoredAuditRef {
+    return audit.result.score !== null &&
+      // Metrics should not be displayed in this group.
+      audit.group !== 'metrics' &&
+      // Audits in performance group "hidden" should not be counted.
+      (audit.group !== 'hidden' || category.id !== 'performance') &&
+      // We don't want unweighted audits except for opportunities with potential savings.
+      (audit.weight > 0 || getOverallSavings(audit) > 0) &&
+      // Passing audits should never be high impact.
+      !Util.showAsPassed(audit.result);
+  }
+
+  const audits = category.auditRefs
+    .filter(isRelevantAudit)
+    .sort((a, b) => {
+      // Remaining score should always be 0 for perf opportunities because weight is 0.
+      // In that case, we want to sort by `overallSavingsMs`.
+      const remainingScoreA = getScoreToBeGained(a);
+      const remainingScoreB = getScoreToBeGained(b);
+      if (remainingScoreA !== remainingScoreB) return remainingScoreB - remainingScoreA;
+      return getOverallSavings(b) - getOverallSavings(a);
+    })
+    .splice(0, MAX_TOOLTIP_AUDITS);
+  if (!audits.length) return null;
+
+  return (
+    <div className="SummaryTooltipAudits">
+      <div className="SummaryTooltipAudits__title">{strings.highestImpact}</div>
+      {
+        audits.map(audit => <SummaryTooltipAudit key={audit.id} audit={audit}/>)
+      }
+    </div>
+  );
+};
+
+const SummaryTooltip: FunctionComponent<{
   category: LH.ReportResult.Category,
-  gatherMode: LH.Result.GatherMode
-}> = ({category, gatherMode}) => {
-  const strings = useUIStrings();
+  gatherMode: LH.Result.GatherMode,
+  url: string,
+}> = ({category, gatherMode, url}) => {
+  const strings = useLocalizedStrings();
+  const str_ = useStringFormatter();
   const {
     numPassed,
     numPassableAudits,
@@ -42,14 +109,17 @@ export const SummaryTooltip: FunctionComponent<{
     totalWeight,
   } = Util.calculateCategoryFraction(category);
 
+  const i18n = useI18n();
   const displayAsFraction = Util.shouldDisplayAsFraction(gatherMode);
-  const rating = displayAsFraction ?
-    Util.calculateRating(numPassed / numPassableAudits) :
-    Util.calculateRating(category.score);
+  const score = displayAsFraction ?
+    numPassed / numPassableAudits :
+    category.score;
+  const rating = score === null ? 'error' : Util.calculateRating(score);
 
   return (
     <div className="SummaryTooltip">
       <div className="SummaryTooltip__title">{getGatherModeLabel(gatherMode, strings)}</div>
+      <div className="SummaryTooltip__url">{url}</div>
       <Separator/>
       <div className="SummaryTooltip__category">
         <div className="SummaryTooltip__category-title">
@@ -60,37 +130,35 @@ export const SummaryTooltip: FunctionComponent<{
             <div className={`SummaryTooltip__rating SummaryTooltip__rating--${rating}`}>
               <span>{getCategoryRating(rating, strings)}</span>
               {
-                !displayAsFraction && category.score && <>
+                !displayAsFraction && category.score !== null && <>
                   <span> · </span>
-                  <span>{category.score * 100}</span>
+                  <span>{i18n.formatNumber(category.score * 100)}</span>
                 </>
               }
             </div>
         }
       </div>
       <div className="SummaryTooltip__fraction">
-        {
-          // TODO(FLOW-I18N): Placeholder format.
-          `${numPassed} audits passed / ${numPassableAudits} passable audits`
-        }
+        <span>{str_(strings.passedAuditCount, {numPassed})}</span>
+        <span> / </span>
+        <span>{str_(strings.passableAuditCount, {numPassableAudits})}</span>
       </div>
-      {
-        // TODO(FLOW-I18N): Placeholder format.
-        numInformative ?
-          <div className="SummaryTooltip__informative">
-            {`${numInformative} informative audits`}
-          </div> :
-          null
+      {numInformative !== 0 &&
+        <div className="SummaryTooltip__informative">
+          {str_(strings.informativeAuditCount, {numInformative})}
+        </div>
       }
+      <SummaryTooltipAudits category={category}/>
     </div>
   );
 };
 
-export const SummaryCategory: FunctionComponent<{
+const SummaryCategory: FunctionComponent<{
   category: LH.ReportResult.Category|undefined,
   href: string,
   gatherMode: LH.Result.GatherMode,
-}> = ({category, href, gatherMode}) => {
+  finalUrl: string,
+}> = ({category, href, gatherMode, finalUrl}) => {
   return (
     <div className="SummaryCategory">
       {
@@ -101,10 +169,15 @@ export const SummaryCategory: FunctionComponent<{
               href={href}
               gatherMode={gatherMode}
             />
-            <SummaryTooltip category={category} gatherMode={gatherMode}/>
+            <SummaryTooltip category={category} gatherMode={gatherMode} url={finalUrl}/>
           </div> :
           <div className="SummaryCategory__null" data-testid="SummaryCategory__null"/>
       }
     </div>
   );
 };
+
+export {
+  SummaryTooltip,
+  SummaryCategory,
+};

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

@@ -11,13 +11,13 @@ import {FlowSegment, FlowStepThumbnail, Separator} from '../common';
 import {getModeDescription, useFlowResult} from '../util';
 import {Util} from '../../../report/renderer/util';
 import {SummaryCategory} from './category';
-import {useUIStrings} from '../i18n/i18n';
+import {useStringFormatter, useLocalizedStrings} from '../i18n/i18n';
 
 const DISPLAYED_CATEGORIES = ['performance', 'accessibility', 'best-practices', 'seo'];
-const THUMBNAIL_WIDTH = 50;
+const THUMBNAIL_WIDTH = 40;
 
 const SummaryNavigationHeader: FunctionComponent<{lhr: LH.Result}> = ({lhr}) => {
-  const strings = useUIStrings();
+  const strings = useLocalizedStrings();
 
   return (
     <div className="SummaryNavigationHeader" data-testid="SummaryNavigationHeader">
@@ -44,13 +44,13 @@ const SummaryNavigationHeader: FunctionComponent<{lhr: LH.Result}> = ({lhr}) =>
 /**
  * The div should behave like a JSX <>...</>. This still allows us to identify "rows" with CSS selectors.
  */
-export const SummaryFlowStep: FunctionComponent<{
+const SummaryFlowStep: FunctionComponent<{
   lhr: LH.Result,
   label: string,
   hashIndex: number,
 }> = ({lhr, label, hashIndex}) => {
   const reportResult = useMemo(() => Util.prepareReportResult(lhr), [lhr]);
-  const strings = useUIStrings();
+  const strings = useLocalizedStrings();
   const modeDescription = getModeDescription(lhr.gatherMode, strings);
 
   return (
@@ -63,7 +63,7 @@ export const SummaryFlowStep: FunctionComponent<{
             <Separator/>
           </div>
       }
-      <FlowStepThumbnail reportResult={reportResult} width={THUMBNAIL_WIDTH}/>
+      <FlowStepThumbnail lhr={lhr} width={THUMBNAIL_WIDTH}/>
       <FlowSegment mode={lhr.gatherMode}/>
       <div className="SummaryFlowStep__label">
         <div className="SummaryFlowStep__mode">{modeDescription}</div>
@@ -76,6 +76,7 @@ export const SummaryFlowStep: FunctionComponent<{
             category={reportResult.categories[c]}
             href={`#index=${hashIndex}&anchor=${c}`}
             gatherMode={lhr.gatherMode}
+            finalUrl={lhr.finalUrl}
           />
         ))
       }
@@ -105,9 +106,10 @@ const SummaryFlow: FunctionComponent = () => {
   );
 };
 
-export const SummaryHeader: FunctionComponent = () => {
+const SummaryHeader: FunctionComponent = () => {
   const flowResult = useFlowResult();
-  const strings = useUIStrings();
+  const strings = useLocalizedStrings();
+  const str_ = useStringFormatter();
 
   let numNavigation = 0;
   let numTimespan = 0;
@@ -126,11 +128,10 @@ export const SummaryHeader: FunctionComponent = () => {
     }
   }
 
-  // TODO(FLOW-I18N): Placeholder format.
   const subtitleCounts = [];
-  if (numNavigation) subtitleCounts.push(`${numNavigation} navigation reports`);
-  if (numTimespan) subtitleCounts.push(`${numTimespan} timespan reports`);
-  if (numSnapshot) subtitleCounts.push(`${numSnapshot} snapshot reports`);
+  if (numNavigation) subtitleCounts.push(str_(strings.navigationReportCount, {numNavigation}));
+  if (numTimespan) subtitleCounts.push(str_(strings.timespanReportCount, {numTimespan}));
+  if (numSnapshot) subtitleCounts.push(str_(strings.snapshotReportCount, {numSnapshot}));
   const subtitle = subtitleCounts.join(' · ');
 
   return (
@@ -150,8 +151,8 @@ const SummarySectionHeader: FunctionComponent = ({children}) => {
   );
 };
 
-export const Summary: FunctionComponent = () => {
-  const strings = useUIStrings();
+const Summary: FunctionComponent = () => {
+  const strings = useLocalizedStrings();
 
   return (
     <div className="Summary" data-testid="Summary">
@@ -162,3 +163,9 @@ export const Summary: FunctionComponent = () => {
     </div>
   );
 };
+
+export {
+  SummaryFlowStep,
+  SummaryHeader,
+  Summary,
+};