lighthouse 8.5.1 → 8.6.0-dev.20211016

package/flow-report/src/header.tsx

@@ -0,0 +1,88 @@
+/**
+ * @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} from 'preact';
+
+import {Util} from '../../report/renderer/util';
+import {FlowStepIcon, FlowStepThumbnail} from './common';
+import {useUIStrings} from './i18n/i18n';
+import {getModeDescription, useFlowResult} from './util';
+
+const SIDE_THUMBNAIL_HEIGHT = 80;
+const MAIN_THUMBNAIL_HEIGHT = 120;
+
+const HeaderThumbnail: FunctionComponent<{
+  reportResult: LH.ReportResult,
+  position: 'prev'|'next'|'main'
+}> =
+({reportResult, position}) => {
+  const height = position === 'main' ? MAIN_THUMBNAIL_HEIGHT : SIDE_THUMBNAIL_HEIGHT;
+  return (
+    <div className={`HeaderThumbnail HeaderThumbnail--${position}`}>
+      <FlowStepThumbnail reportResult={reportResult} height={height}/>
+      <div className="HeaderThumbnail__icon">
+        <FlowStepIcon mode={reportResult.gatherMode}/>
+      </div>
+    </div>
+  );
+};
+
+export const Header: FunctionComponent<{currentLhr: LH.FlowResult.LhrRef}> =
+({currentLhr}) => {
+  const flowResult = useFlowResult();
+  const {index} = currentLhr;
+
+  const step = flowResult.steps[index];
+  const prevStep = flowResult.steps[index - 1];
+  const nextStep = flowResult.steps[index + 1];
+
+  const strings = useUIStrings();
+  const modeDescription = getModeDescription(step.lhr.gatherMode, strings);
+
+  return (
+    <div className="Header">
+      {
+        prevStep && <>
+          {
+            flowResult.steps[index - 2] && <div className="Header__segment"/>
+          }
+          <div className="Header__prev-thumbnail">
+            <HeaderThumbnail reportResult={Util.prepareReportResult(prevStep.lhr)} position="prev"/>
+            <div className="Header__segment"/>
+          </div>
+          <a
+            className="Header__prev-title"
+            href={`#index=${index - 1}`}
+          >{prevStep.name}</a>
+        </>
+      }
+      <div className="Header__current-thumbnail">
+        <HeaderThumbnail reportResult={Util.prepareReportResult(step.lhr)} position="main"/>
+      </div>
+      <div className="Header__current-title">
+        {step.name}
+        <div className="Header__current-description">
+          {modeDescription}
+        </div>
+      </div>
+      {
+        nextStep && <>
+          <div className="Header__next-thumbnail">
+            <div className="Header__segment"/>
+            <HeaderThumbnail reportResult={Util.prepareReportResult(nextStep.lhr)} position="next"/>
+          </div>
+          <a
+            className="Header__next-title"
+            href={`#index=${index + 1}`}
+          >{nextStep.name}</a>
+          {
+            flowResult.steps[index + 2] && <div className="Header__segment"/>
+          }
+        </>
+      }
+    </div>
+  );
+};

package/flow-report/src/help-dialog.tsx

@@ -0,0 +1,120 @@
+/**
+ * @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 {useUIStrings} from './i18n/i18n';
+import {CloseIcon, NavigationIcon, SnapshotIcon, TimespanIcon} from './icons';
+
+const HelpDialogColumn: FunctionComponent<{
+  icon: JSX.Element,
+  userFriendlyModeLabel: string;
+  lighthouseOfficialModeLabel: string;
+  modeDescription: string;
+  useCaseInstruction: string;
+  useCases: string[];
+  availableCategories: string[];
+}> = (props) => {
+  const strings = useUIStrings();
+
+  return (
+    <div className="HelpDialogColumn">
+      <div className="HelpDialogColumn__legend">
+        <div className="HelpDialogColumnTimeline">
+          {props.icon}
+          <div className="HelpDialogColumnTimeline__line" />
+        </div>
+        <div className="HelpDialogColumn__legend-label">{props.userFriendlyModeLabel}</div>
+      </div>
+      <div className="HelpDialogColumn__header">
+        <div className="HelpDialogColumn__header-title">{props.lighthouseOfficialModeLabel}</div>
+        <p>{props.modeDescription}</p>
+      </div>
+      <div className="HelpDialogColumn__use-cases">
+        <p>{props.useCaseInstruction}</p>
+        <ul>
+          {props.useCases.map((useCase, i) => (
+            <li key={i}>{useCase}</li>
+          ))}
+        </ul>
+      </div>
+      <div className="HelpDialogColumn__categories">
+        <p>{strings.categories}</p>
+        <ul>
+          {props.availableCategories.map((category, i) => (
+            <li key={i}>{category}</li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export const HelpDialog: FunctionComponent<{onClose: () => void}> = ({
+  onClose,
+}) => {
+  const strings = useUIStrings();
+
+  return (
+    <div className="HelpDialog">
+      <div className="HelpDialog__title">
+        <div>{strings.helpDialogTitle}</div>
+        <div style={{flexGrow: 1}} />
+        <button className="HelpDialog__close" onClick={onClose}>
+          <CloseIcon />
+        </button>
+      </div>
+      <div className="HelpDialog__columns">
+        <HelpDialogColumn
+          icon={<NavigationIcon />}
+          userFriendlyModeLabel={strings.navigationDescription}
+          lighthouseOfficialModeLabel={strings.navigationReport}
+          modeDescription={strings.navigationLongDescription}
+          useCaseInstruction={strings.helpUseCaseInstructionNavigation}
+          useCases={[
+            strings.helpUseCaseNavigation1,
+            strings.helpUseCaseNavigation2,
+            strings.helpUseCaseNavigation3,
+          ]}
+          availableCategories={[
+            strings.categoryPerformance,
+            strings.categoryAccessibility,
+            strings.categoryBestPractices,
+            strings.categorySeo,
+            strings.categoryProgressiveWebApp,
+          ]}
+        />
+        <HelpDialogColumn
+          icon={<TimespanIcon />}
+          userFriendlyModeLabel={strings.timespanDescription}
+          lighthouseOfficialModeLabel={strings.timespanReport}
+          modeDescription={strings.timespanLongDescription}
+          useCaseInstruction={strings.helpUseCaseInstructionTimespan}
+          useCases={[strings.helpUseCaseTimespan1, strings.helpUseCaseTimespan2]}
+          availableCategories={[
+            strings.categoryPerformance,
+            strings.categoryBestPractices,
+            strings.categorySeo,
+          ]}
+        />
+        <HelpDialogColumn
+          icon={<SnapshotIcon />}
+          userFriendlyModeLabel={strings.snapshotDescription}
+          lighthouseOfficialModeLabel={strings.snapshotReport}
+          modeDescription={strings.snapshotLongDescription}
+          useCaseInstruction={strings.helpUseCaseInstructionSnapshot}
+          useCases={[strings.helpUseCaseSnapshot1, strings.helpUseCaseSnapshot2]}
+          availableCategories={[
+            strings.categoryPerformance,
+            strings.categoryAccessibility,
+            strings.categoryBestPractices,
+            strings.categorySeo,
+          ]}
+        />
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,52 @@
+/**
+ * @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 {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 strings from './localized-strings';
+
+const I18nContext = createContext<I18n<typeof UIStrings>|undefined>(undefined);
+
+export function useI18n() {
+  const i18n = useContext(I18nContext);
+  if (!i18n) throw Error('i18n was not initialized');
+  return i18n;
+}
+
+export function useUIStrings() {
+  const i18n = useI18n();
+  return i18n.strings;
+}
+
+export function useStringFormatter() {
+  const locale = useLocale();
+  return (str: string, values?: Record<string, string|number>) => {
+    return formatMessage(str, values, locale);
+  };
+}
+
+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]);
+
+  return (
+    <I18nContext.Provider value={i18n}>
+      {children}
+    </I18nContext.Provider>
+  );
+};
+
+

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

@@ -0,0 +1,11 @@
+/**
+ * @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.
+ */
+
+/** @type {Record<LH.Locale, import('./ui-strings.js').UIStringsType>} */
+// @ts-expect-error This will be replaced with the localized strings at build time.
+const strings = {};
+
+export default strings;

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

@@ -0,0 +1,134 @@
+/**
+ * @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.
+ */
+
+/** @typedef {typeof UIStrings} UIStringsType */
+
+/* eslint-disable max-len */
+
+export const UIStrings = {
+  /** Description of a report that evaluates a web page as it loads, but before the user interacts with it. */
+  navigationDescription: 'Page load',
+  /** Description of a report that evaluates a web page over a period of time where a user could have interacted with the page. */
+  timespanDescription: 'User interactions',
+  /** Description of a report that evaluates the state of a web page at a single point in time. */
+  snapshotDescription: 'Captured state of page',
+  /** Long-form description of a report that evaluates a web page as it loads, but before the user interacts with it. */
+  navigationLongDescription: 'Navigation reports analyze a single page load, exactly like the original Lighthouse reports.',
+  /** Long-form description of a report that evaluates a web page over a period of time where a user could have interacted with the page. */
+  timespanLongDescription: 'Timespan reports analyze an arbitrary period of time, typically containing user interactions.',
+  /** Long-form description of a report that evaluates the state of a web page at a single point in time. */
+  snapshotLongDescription: 'Snapshot reports analyze the page in a particular state, typically after user interactions.',
+  /** Label for a report that evaluates a page navigation. */
+  navigationReport: 'Navigation report',
+  /** Label for a report that evaluates a period of time where a user could have interacted with the page. */
+  timespanReport: 'Timespan report',
+  /** Label for a report that evaluates the state of a web page at a single point in time. */
+  snapshotReport: 'Snapshot report',
+  /** Title of a home page that summarizes and links to the other pages. */
+  summary: 'Summary',
+  /** Title of a report section lists and links to multiple sub-reports. */
+  allReports: 'All Reports',
+  /** Default title of a Lighthouse report over a user flow. "User Flow" refers to a series of user interactions on a page that a site developer wants to test. "Lighthouse" is a product name https://developers.google.com/web/tools/lighthouse. */
+  title: 'Lighthouse User Flow Report',
+  /** Label for a list of Lighthouse categories. */
+  categories: 'Categories',
+  /** Title of the Performance category of audits. Equivalent to 'Web performance', this term is inclusive of all web page speed and loading optimization topics. Also used as a label of a score gauge; try to limit to 20 characters. */
+  categoryPerformance: 'Performance',
+  /** Title of the Accessibility category of audits. This section contains audits focused on making web content accessible to all users. Also used as a label of a score gauge; try to limit to 20 characters. */
+  categoryAccessibility: 'Accessibility',
+  /** Title of the Best Practices category of audits. This is displayed at the top of a list of audits focused on topics related to following web development best practices and accepted guidelines. Also used as a label of a score gauge; try to limit to 20 characters. */
+  categoryBestPractices: 'Best Practices',
+  /** Title of the Search Engine Optimization (SEO) category of audits. This is displayed at the top of a list of audits focused on topics related to optimizing a website for indexing by search engines. Also used as a label of a score gauge; try to limit to 20 characters. */
+  categorySeo: 'SEO',
+  /** Title of the Progressive Web Application (PWA) category of audits. This is displayed at the top of a list of audits focused on topics related to whether or not a site is a progressive web app, e.g. responds offline, uses a service worker, is on https, etc. Also used as a label of a score gauge. */
+  categoryProgressiveWebApp: 'Progressive Web App',
+  /** Label for a report evaluating a web page. Label indicates that the report refers to the desktop version of the site. */
+  desktop: 'Desktop',
+  /** Label for a report evaluating a web page. Label indicates that the report refers to the mobile version of the site. */
+  mobile: 'Mobile',
+  /** Rating indicating that a report category is good/passing. */
+  ratingPass: 'Good',
+  /** Rating indicating that a report category is average or needs improvement. */
+  ratingAverage: 'Average',
+  /** Rating indicating that a report category is poor/failing. */
+  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. */
+  helpLabel: 'Understanding Flows',
+  /** Title for a dialog that contains explanations on how to interpret the Lighthouse flow report. */
+  helpDialogTitle: 'Understanding the Lighthouse Flow Report',
+  /** Label for a list of example use cases for a mode in lighthouse that evaluates a web page as it loads, but before the user interacts with it. */
+  helpUseCaseInstructionNavigation: 'Use Navigation reports to...',
+  /** Label for a list of example use cases for a mode in lighthouse that evaluates a web page over a period of time where a user could have interacted with the page. */
+  helpUseCaseInstructionTimespan: 'Use Timespan reports to...',
+  /** Label for a list of example use cases for a mode in lighthouse that evaluates the state of a web page at a single point in time. */
+  helpUseCaseInstructionSnapshot: 'Use Snapshot reports to...',
+  /** Example use case for how Lighthouse can be applied in practice. Appears in a list with other examples. */
+  helpUseCaseNavigation1: 'Obtain a Lighthouse Performance score.',
+  /** Example use case for how Lighthouse can be applied in practice. Appears in a list with other examples. */
+  helpUseCaseNavigation2: 'Measure page load Performance metrics such as Largest Contentful Paint and Speed Index.',
+  /** Example use case for how Lighthouse can be applied in practice. Appears in a list with other examples. */
+  helpUseCaseNavigation3: 'Assess Progressive Web App capabilities.',
+  /** Example use case for how Lighthouse can be applied in practice. Appears in a list with other examples. */
+  helpUseCaseTimespan1: 'Measure layout shifts and JavaScript execution time on a series of interactions.',
+  /** Example use case for how Lighthouse can be applied in practice. Appears in a list with other examples. */
+  helpUseCaseTimespan2: 'Discover performance opportunities to improve the experience for long-lived pages and single-page applications.',
+  /** Example use case for how Lighthouse can be applied in practice. Appears in a list with other examples. */
+  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}
+  }`,
+};

package/flow-report/src/icons.tsx

@@ -79,6 +79,23 @@ export const SnapshotIcon: FunctionComponent = () => {
   );
 };
 
+export const CloseIcon: FunctionComponent = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24px"
+      viewBox="0 0 24 24"
+      width="24px"
+      fill="currentColor"
+      role="img"
+      aria-label="Icon representing a close action"
+    >
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z" />
+    </svg>
+  );
+};
+
 export const EnvIcon: FunctionComponent = () => {
   return (
     <svg width="15" height="12" viewBox="0 0 15 12" fill="none" role="img">
@@ -98,9 +115,9 @@ export const CpuIcon: FunctionComponent = () => {
 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>
+      <rect width="18" height="2" fill="currentColor"></rect>
+      <rect y="5" width="18" height="2" fill="currentColor"></rect>
+      <rect y="10" width="18" height="2" fill="currentColor"></rect>
     </svg>
   );
 };

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

@@ -5,15 +5,17 @@
  */
 
 import {FunctionComponent} from 'preact';
-import {useMemo} from 'preact/hooks';
 
 import {Separator} from '../common';
+import {useI18n, useUIStrings} from '../i18n/i18n';
 import {CpuIcon, EnvIcon, SummaryIcon} from '../icons';
-import {classNames, useCurrentLhr, useFlowResult, useLocale} from '../util';
+import {classNames, useCurrentLhr, useFlowResult} from '../util';
 import {SidebarFlow} from './flow';
 
 export const SidebarSummary: FunctionComponent = () => {
   const currentLhr = useCurrentLhr();
+  const strings = useUIStrings();
+
   const url = new URL(location.href);
   url.hash = '#';
   return (
@@ -25,12 +27,14 @@ export const SidebarSummary: FunctionComponent = () => {
       <div className="SidebarSummary__icon">
         <SummaryIcon/>
       </div>
-      <div className="SidebarSummary__label">Summary</div>
+      <div className="SidebarSummary__label">{strings.summary}</div>
     </a>
   );
 };
 
 const SidebarRuntimeSettings: FunctionComponent<{settings: LH.ConfigSettings}> = ({settings}) => {
+  const strings = useUIStrings();
+
   return (
     <div className="SidebarRuntimeSettings">
       <div className="SidebarRuntimeSettings__item">
@@ -38,8 +42,7 @@ const SidebarRuntimeSettings: FunctionComponent<{settings: LH.ConfigSettings}> =
           <EnvIcon/>
         </div>
         {
-          `${settings.formFactor === 'desktop' ? 'Desktop' : 'Mobile'} | ` +
-          `${settings.screenEmulation.height}x${settings.screenEmulation.width}px`
+          settings.formFactor === 'desktop' ? strings.desktop : strings.mobile
         }
       </div>
       <div className="SidebarRuntimeSettings__item">
@@ -55,19 +58,11 @@ const SidebarRuntimeSettings: FunctionComponent<{settings: LH.ConfigSettings}> =
 };
 
 export const SidebarHeader: FunctionComponent<{title: string, date: string}> = ({title, date}) => {
-  const locale = useLocale();
-  const formatter = useMemo(() => {
-    const options: Intl.DateTimeFormatOptions = {
-      month: 'short', day: 'numeric', year: 'numeric',
-      hour: 'numeric', minute: 'numeric', timeZoneName: 'short',
-    };
-    return new Intl.DateTimeFormat(locale, options);
-  }, [locale]);
-  const dateString = useMemo(() => formatter.format(new Date(date)), [date, formatter]);
+  const i18n = useI18n();
   return (
     <div className="SidebarHeader">
       <div className="SidebarHeader__title">{title}</div>
-      <div className="SidebarHeader__date">{dateString}</div>
+      <div className="SidebarHeader__date">{i18n.formatDateTime(date)}</div>
     </div>
   );
 };
@@ -77,7 +72,7 @@ export const Sidebar: FunctionComponent = () => {
   const firstLhr = flowResult.steps[0].lhr;
   return (
     <div className="Sidebar">
-      <SidebarHeader title="Lighthouse User Flow Report" date={firstLhr.fetchTime}/>
+      <SidebarHeader title={flowResult.name} date={firstLhr.fetchTime}/>
       <Separator/>
       <SidebarSummary/>
       <Separator/>

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

@@ -9,34 +9,48 @@ import {FunctionComponent} from 'preact';
 import {Util} from '../../../report/renderer/util';
 import {Separator} from '../common';
 import {CategoryScore} from '../wrappers/category-score';
+import {useStringFormatter, useUIStrings} from '../i18n/i18n';
 
-const GATHER_MODE_LABELS: Record<LH.Result.GatherMode, string> = {
-  'navigation': 'Navigation report',
-  'timespan': 'Timespan report',
-  'snapshot': 'Snapshot report',
-};
+import type {UIStringsType} from '../i18n/ui-strings';
 
-const RATING_LABELS: Record<string, string> = {
-  'pass': 'Good',
-  'fail': 'Poor',
-  'average': 'Average',
-  'error': 'Error',
-};
+function getGatherModeLabel(gatherMode: LH.Result.GatherMode, strings: UIStringsType) {
+  switch (gatherMode) {
+    case 'navigation': return strings.navigationReport;
+    case 'timespan': return strings.timespanReport;
+    case 'snapshot': return strings.snapshotReport;
+  }
+}
+
+function getCategoryRating(rating: string, strings: UIStringsType) {
+  switch (rating) {
+    case 'pass': return strings.ratingPass;
+    case 'average': return strings.ratingAverage;
+    case 'fail': return strings.ratingFail;
+    case 'error': return strings.ratingError;
+  }
+}
 
 export const SummaryTooltip: FunctionComponent<{
   category: LH.ReportResult.Category,
   gatherMode: LH.Result.GatherMode
 }> = ({category, gatherMode}) => {
-  const {numPassed, numAudits, totalWeight} = Util.calculateCategoryFraction(category);
+  const strings = useUIStrings();
+  const str_ = useStringFormatter();
+  const {
+    numPassed,
+    numPassableAudits,
+    numInformative,
+    totalWeight,
+  } = Util.calculateCategoryFraction(category);
 
   const displayAsFraction = Util.shouldDisplayAsFraction(gatherMode);
   const rating = displayAsFraction ?
-    Util.calculateRating(numPassed / numAudits) :
+    Util.calculateRating(numPassed / numPassableAudits) :
     Util.calculateRating(category.score);
 
   return (
     <div className="SummaryTooltip">
-      <div className="SummaryTooltip__title">{GATHER_MODE_LABELS[gatherMode]}</div>
+      <div className="SummaryTooltip__title">{getGatherModeLabel(gatherMode, strings)}</div>
       <Separator/>
       <div className="SummaryTooltip__category">
         <div className="SummaryTooltip__category-title">
@@ -44,11 +58,8 @@ export const SummaryTooltip: FunctionComponent<{
         </div>
         {
           totalWeight !== 0 &&
-            <div
-              className={`SummaryTooltip__rating SummaryTooltip__rating--${rating}`}
-              data-testid="SummaryTooltip__rating"
-            >
-              <span>{RATING_LABELS[rating]}</span>
+            <div className={`SummaryTooltip__rating SummaryTooltip__rating--${rating}`}>
+              <span>{getCategoryRating(rating, strings)}</span>
               {
                 !displayAsFraction && category.score && <>
                   <span> · </span>
@@ -59,8 +70,15 @@ export const SummaryTooltip: FunctionComponent<{
         }
       </div>
       <div className="SummaryTooltip__fraction">
-        {`${numPassed} audits passed / ${numAudits} audits run`}
+        <span>{str_(strings.passedAuditCount, {numPassed})}</span>
+        <span> / </span>
+        <span>{str_(strings.passableAuditCount, {numPassableAudits})}</span>
       </div>
+      {numInformative !== 0 &&
+        <div className="SummaryTooltip__informative">
+          {str_(strings.informativeAuditCount, {numInformative})}
+        </div>
+      }
     </div>
   );
 };
@@ -82,10 +100,7 @@ export const SummaryCategory: FunctionComponent<{
             />
             <SummaryTooltip category={category} gatherMode={gatherMode}/>
           </div> :
-          <div
-            className="SummaryCategory__null"
-            data-testid="SummaryCategory__null"
-          />
+          <div className="SummaryCategory__null" data-testid="SummaryCategory__null"/>
       }
     </div>
   );