lighthouse 8.6.0-dev.20211013 → 8.6.0-dev.20211017

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

@@ -7,6 +7,7 @@
 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';
@@ -25,6 +26,13 @@ export function useUIStrings() {
   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, {

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,28 @@ 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}
+  }`,
 };

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

@@ -9,7 +9,7 @@ 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 {useStringFormatter, useUIStrings} from '../i18n/i18n';
 
 import type {UIStringsType} from '../i18n/ui-strings';
 
@@ -35,6 +35,7 @@ export const SummaryTooltip: FunctionComponent<{
   gatherMode: LH.Result.GatherMode
 }> = ({category, gatherMode}) => {
   const strings = useUIStrings();
+  const str_ = useStringFormatter();
   const {
     numPassed,
     numPassableAudits,
@@ -69,18 +70,14 @@ export const SummaryTooltip: FunctionComponent<{
         }
       </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>
       }
     </div>
   );

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

@@ -11,7 +11,7 @@ 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, useUIStrings} from '../i18n/i18n';
 
 const DISPLAYED_CATEGORIES = ['performance', 'accessibility', 'best-practices', 'seo'];
 const THUMBNAIL_WIDTH = 50;
@@ -108,6 +108,7 @@ const SummaryFlow: FunctionComponent = () => {
 export const SummaryHeader: FunctionComponent = () => {
   const flowResult = useFlowResult();
   const strings = useUIStrings();
+  const str_ = useStringFormatter();
 
   let numNavigation = 0;
   let numTimespan = 0;
@@ -126,11 +127,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 (

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

@@ -44,7 +44,8 @@ describe('SummaryTooltip', () => {
 
     expect(root.getByText('Average')).toBeTruthy();
     expect(() => root.getByText(/^[0-9]+$/)).toThrow();
-    expect(root.getByText('2 audits passed / 3 passable audits')).toBeTruthy();
+    expect(root.getByText('2 audits passed')).toBeTruthy();
+    expect(root.getByText('3 passable audits')).toBeTruthy();
   });
 
   it('renders tooltip without rating', async () => {
@@ -65,7 +66,8 @@ describe('SummaryTooltip', () => {
 
     expect(() => root.getByText(/^(Average|Good|Poor)$/)).toThrow();
     expect(() => root.getByText(/^[0-9]+$/)).toThrow();
-    expect(root.getByText('2 audits passed / 3 passable audits')).toBeTruthy();
+    expect(root.getByText('2 audits passed')).toBeTruthy();
+    expect(root.getByText('3 passable audits')).toBeTruthy();
   });
 
   it('renders scored category tooltip with score', async () => {
@@ -86,7 +88,8 @@ describe('SummaryTooltip', () => {
 
     expect(root.getByText('Good')).toBeTruthy();
     expect(root.getByText('100')).toBeTruthy();
-    expect(root.getByText('2 audits passed / 3 passable audits')).toBeTruthy();
+    expect(root.getByText('2 audits passed')).toBeTruthy();
+    expect(root.getByText('3 passable audits')).toBeTruthy();
   });
 
   it('renders informative audit count if any', async () => {
@@ -107,7 +110,8 @@ describe('SummaryTooltip', () => {
 
     expect(root.getByText('Good')).toBeTruthy();
     expect(root.getByText('100')).toBeTruthy();
-    expect(root.getByText('2 audits passed / 2 passable audits')).toBeTruthy();
-    expect(root.getByText('1 informative audits')).toBeTruthy();
+    expect(root.getByText('2 audits passed')).toBeTruthy();
+    expect(root.getByText('2 passable audits')).toBeTruthy();
+    expect(root.getByText('1 informative audit')).toBeTruthy();
   });
 });

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

@@ -34,7 +34,7 @@ describe('SummaryHeader', () => {
     const lhrCounts = root.getByText(/·/);
     expect(root.getByText('Summary')).toBeTruthy();
     expect(lhrCounts.textContent).toEqual(
-      '2 navigation reports · 1 timespan reports · 1 snapshot reports'
+      '2 navigation reports · 1 timespan report · 1 snapshot report'
     );
   });
 });

package/flow-report/tsconfig.json

@@ -14,6 +14,7 @@
   "references": [
     {"path": "../types/lhr/"},
     {"path": "../report"},
+    {"path": "../shared"},
   ],
   "include": [
     "**/*.js",

package/lighthouse-core/config/config-helpers.js

@@ -283,6 +283,7 @@ function resolveSettings(settingsJson = {}, overrides = undefined) {
   // If a locale is requested in flags or settings, use it. A typical CLI run will not have one,
   // however `lookupLocale` will always determine which of our supported locales to use (falling
   // back if necessary).
+  // TODO: could do more work to sniff out the user's locale
   const locale = i18n.lookupLocale((overrides && overrides.locale) || settingsJson.locale);
 
   // Fill in missing settings with defaults

package/lighthouse-core/lib/i18n/i18n.js

@@ -12,9 +12,11 @@ const lookupClosestLocale = require('lookup-closest-locale');
 const {getAvailableLocales} = require('../../../shared/localization/format.js');
 const log = require('lighthouse-logger');
 const {LH_ROOT} = require('../../../root.js');
-const {isIcuMessage, _formatMessage} = require('../../../shared/localization/format.js');
-
-const DEFAULT_LOCALE = 'en';
+const {
+  isIcuMessage,
+  formatMessage,
+  DEFAULT_LOCALE,
+} = require('../../../shared/localization/format.js');
 
 const UIStrings = {
   /** Used to show the duration in milliseconds that something lasted. The `{timeInMs}` placeholder will be replaced with the time duration, shown in milliseconds (e.g. 63 ms) */
@@ -118,23 +120,32 @@ const UIStrings = {
  * - supported locales in Intl formatters
  *
  * If `locale` isn't provided or one could not be found, DEFAULT_LOCALE is returned.
+ *
+ * By default any of the locales Lighthouse has strings for can be returned, but this
+ * can be overriden with `possibleLocales`, useful e.g. when Lighthouse is bundled and
+ * only DEFAULT_LOCALE is available, but `possibleLocales` can be used to select a
+ * locale available to be downloaded on demand.
  * @param {string|string[]=} locales
+ * @param {Array<string>=} possibleLocales
  * @return {LH.Locale}
  */
-function lookupLocale(locales) {
-  // If Node was built with `--with-intl=none`, `Intl` won't exist.
+function lookupLocale(locales, possibleLocales) {
+  // TODO: lookupLocale may need to be split into two functions, one that canonicalizes
+  // locales and one that looks up the best locale filename for a given locale.
+  // e.g. `en-IE` is canonical, but uses `en-GB.json`. See TODO in locales.js
+
   if (typeof Intl !== 'object') {
+    // If Node was built with `--with-intl=none`, `Intl` won't exist.
     throw new Error('Lighthouse must be run in Node with `Intl` support. See https://nodejs.org/api/intl.html for help');
   }
 
-  // TODO: could do more work to sniff out the user's locale
   const canonicalLocales = Intl.getCanonicalLocales(locales);
 
   // Filter by what's available in this runtime.
   const availableLocales = Intl.NumberFormat.supportedLocalesOf(canonicalLocales);
 
   // Get available locales and transform into object to match `lookupClosestLocale`'s API.
-  const localesWithMessages = getAvailableLocales();
+  const localesWithMessages = possibleLocales || getAvailableLocales();
   const localesWithmessagesObj = /** @type {Record<LH.Locale, LhlMessages>} */ (
     Object.fromEntries(localesWithMessages.map(l => [l, {}])));
 
@@ -182,7 +193,7 @@ function createIcuMessageFn(filename, fileStrings) {
     return {
       i18nId,
       values,
-      formattedDefault: _formatMessage(message, values, DEFAULT_LOCALE),
+      formattedDefault: formatMessage(message, values, DEFAULT_LOCALE),
     };
   };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "8.6.0-dev.20211013",
+  "version": "8.6.0-dev.20211017",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {

package/shared/localization/format.js

@@ -13,6 +13,8 @@ const {isObjectOfUnknownValues, isObjectOrArrayOfUnknownValues} = require('../ty
 /** Contains available locales with messages. May be an empty object if bundled. */
 const LOCALE_MESSAGES = require('./locales.js');
 
+const DEFAULT_LOCALE = 'en-US';
+
 /**
  * The locale tags for the localized messages available to Lighthouse on disk.
  * When bundled, these will be inlined by brfs.
@@ -169,7 +171,7 @@ function _preformatValues(messageFormatter, values, lhlMessage) {
  * @param {LH.Locale} locale
  * @return {string}
  */
-function _formatMessage(message, values = {}, locale) {
+function formatMessage(message, values = {}, locale) {
   // When using accented english, force the use of a different locale for number formatting.
   const localeForMessageFormat = (locale === 'en-XA' || locale === 'en-XL') ? 'de-DE' : locale;
 
@@ -189,19 +191,21 @@ function _formatMessage(message, values = {}, locale) {
  * @return {string}
  */
 function _localizeIcuMessage(icuMessage, locale) {
-  const localeMessages = LOCALE_MESSAGES[locale];
-  if (!localeMessages) throw new Error(`Unsupported locale '${locale}'`);
+  const localeMessages = _getLocaleMessages(locale);
   const localeMessage = localeMessages[icuMessage.i18nId];
 
-  // Fall back to the default (usually the original english message) if we couldn't find a
-  // message in the specified locale. This could be because of string drift between
-  // Lighthouse versions or because new strings haven't been updated yet. Better to have
-  // an english message than no message at all; in some cases it won't even matter.
+  // Use the DEFAULT_LOCALE fallback (usually the original english message) if we couldn't
+  // find a message in the specified locale. Possible reasons:
+  //  - string drift between Lighthouse versions
+  //  - in a bundle stripped of locale files but running in the DEFAULT_LOCALE
+  //  - new strings haven't been updated yet in a local dev run
+  // Better to have an english message than no message at all; in some cases it
+  // won't even matter.
   if (!localeMessage) {
     return icuMessage.formattedDefault;
   }
 
-  return _formatMessage(localeMessage.message, icuMessage.values, locale);
+  return formatMessage(localeMessage.message, icuMessage.values, locale);
 }
 
 /**
@@ -209,9 +213,10 @@ function _localizeIcuMessage(icuMessage, locale) {
  * @return {Record<string, string>}
  */
 function getRendererFormattedStrings(locale) {
-  const localeMessages = LOCALE_MESSAGES[locale];
-  if (!localeMessages) throw new Error(`Unsupported locale '${locale}'`);
+  const localeMessages = _getLocaleMessages(locale);
 
+  // If `localeMessages` is empty in the bundled and DEFAULT_LOCALE case, this
+  // will be empty and the report will fall back to the util UIStrings for these.
   const icuMessageIds = Object.keys(localeMessages).filter(f => f.startsWith('report/'));
   /** @type {Record<string, string>} */
   const strings = {};
@@ -349,12 +354,38 @@ function replaceIcuMessages(inputObject, locale) {
   return icuMessagePaths;
 }
 
+/**
+ * Returns the locale messages for the given `locale`, if they exist.
+ * Throws if an unsupported locale.
+ *
+ * NOTE: If DEFAULT_LOCALE is requested and this is inside a bundle with locale
+ * messages stripped, an empty object will be returned. Default fallbacks will need to handle that case.
+ * @param {LH.Locale} locale
+ * @return {import('./locales').LhlMessages}
+ */
+function _getLocaleMessages(locale) {
+  const localeMessages = LOCALE_MESSAGES[locale];
+  if (!localeMessages) {
+    if (locale === DEFAULT_LOCALE) {
+      // If the default locale isn't in LOCALE_MESSAGES, this is likely executing
+      // in a bundle. Let the caller use the fallbacks available.
+      return {};
+    }
+    throw new Error(`Unsupported locale '${locale}'`);
+  }
+
+  return localeMessages;
+}
+
 /**
  * Returns whether the `requestedLocale` can be used.
  * @param {LH.Locale} requestedLocale
  * @return {boolean}
  */
 function hasLocale(requestedLocale) {
+  // The default locale is always supported through `IcuMessage.formattedDefault`.
+  if (requestedLocale === DEFAULT_LOCALE) return true;
+
   const hasIntlSupport = Intl.NumberFormat.supportedLocalesOf([requestedLocale]).length > 0;
   const hasMessages = Boolean(LOCALE_MESSAGES[requestedLocale]);
 
@@ -362,8 +393,9 @@ function hasLocale(requestedLocale) {
 }
 
 /**
- * Returns a list of canonical locales (each of which may have aliases, but those would
- * only show in getAvailableLocales)
+ * Returns a list of canonical locales, as defined by the existent message files.
+ * In practice, each of these may have aliases in the full list returned by
+ * `getAvailableLocales()`.
  * TODO: create a CanonicalLocale type
  * @return {Array<string>}
  */
@@ -375,13 +407,13 @@ function getCanonicalLocales() {
  * Returns a list of available locales.
  *  - if full build, this includes all canonical locales, aliases, and any locale added
  *      via `registerLocaleData`.
- *  - if bundled and locale messages have been stripped (locales.js shimmed), this includes no
- *      locales (perhaps available in a separate bundle), and perhaps any locales
- *      from `registerLocaleData`.
+ *  - if bundled and locale messages have been stripped (locales.js shimmed), this includes
+ *      only DEFAULT_LOCALE and any locales from `registerLocaleData`.
  * @return {Array<LH.Locale>}
  */
 function getAvailableLocales() {
-  return /** @type {Array<LH.Locale>} */ (Object.keys(LOCALE_MESSAGES).sort());
+  const localesWithMessages = new Set([...Object.keys(LOCALE_MESSAGES), DEFAULT_LOCALE]);
+  return /** @type {Array<LH.Locale>} */ ([...localesWithMessages].sort());
 }
 
 /**
@@ -407,6 +439,7 @@ function getIcuMessageIdParts(i18nMessageId) {
 }
 
 module.exports = {
+  DEFAULT_LOCALE,
   _formatPathAsString,
   collectAllCustomElementsFromICU,
   isIcuMessage,
@@ -415,7 +448,7 @@ module.exports = {
   replaceIcuMessages,
   hasLocale,
   registerLocaleData,
-  _formatMessage,
+  formatMessage,
   getIcuMessageIdParts,
   getAvailableLocales,
   getCanonicalLocales,

package/shared/localization/locales/en-US.json

@@ -59,6 +59,9 @@
   "flow-report/src/i18n/ui-strings.js | helpUseCaseTimespan2": {
     "message": "Discover performance opportunities to improve the experience for long-lived pages and single-page applications."
   },
+  "flow-report/src/i18n/ui-strings.js | informativeAuditCount": {
+    "message": "{numInformative, plural,\n    =1 {{numInformative} informative audit}\n    other {{numInformative} informative audits}\n  }"
+  },
   "flow-report/src/i18n/ui-strings.js | mobile": {
     "message": "Mobile"
   },
@@ -71,6 +74,15 @@
   "flow-report/src/i18n/ui-strings.js | navigationReport": {
     "message": "Navigation report"
   },
+  "flow-report/src/i18n/ui-strings.js | navigationReportCount": {
+    "message": "{numNavigation, plural,\n    =1 {{numNavigation} navigation report}\n    other {{numNavigation} navigation reports}\n  }"
+  },
+  "flow-report/src/i18n/ui-strings.js | passableAuditCount": {
+    "message": "{numPassableAudits, plural,\n    =1 {{numPassableAudits} passable audit}\n    other {{numPassableAudits} passable audits}\n  }"
+  },
+  "flow-report/src/i18n/ui-strings.js | passedAuditCount": {
+    "message": "{numPassed, plural,\n    =1 {{numPassed} audit passed}\n    other {{numPassed} audits passed}\n  }"
+  },
   "flow-report/src/i18n/ui-strings.js | ratingAverage": {
     "message": "Average"
   },
@@ -95,6 +107,9 @@
   "flow-report/src/i18n/ui-strings.js | snapshotReport": {
     "message": "Snapshot report"
   },
+  "flow-report/src/i18n/ui-strings.js | snapshotReportCount": {
+    "message": "{numSnapshot, plural,\n    =1 {{numSnapshot} snapshot report}\n    other {{numSnapshot} snapshot reports}\n  }"
+  },
   "flow-report/src/i18n/ui-strings.js | summary": {
     "message": "Summary"
   },
@@ -107,6 +122,9 @@
   "flow-report/src/i18n/ui-strings.js | timespanReport": {
     "message": "Timespan report"
   },
+  "flow-report/src/i18n/ui-strings.js | timespanReportCount": {
+    "message": "{numTimespan, plural,\n    =1 {{numTimespan} timespan report}\n    other {{numTimespan} timespan reports}\n  }"
+  },
   "flow-report/src/i18n/ui-strings.js | title": {
     "message": "Lighthouse User Flow Report"
   },

package/shared/localization/locales/en-XL.json

@@ -59,6 +59,9 @@
   "flow-report/src/i18n/ui-strings.js | helpUseCaseTimespan2": {
     "message": "D̂íŝćôv́êŕ p̂ér̂f́ôŕm̂án̂ćê óp̂ṕôŕt̂ún̂ít̂íêś t̂ó îḿp̂ŕôv́ê t́ĥé êx́p̂ér̂íêńĉé f̂ór̂ ĺôńĝ-ĺîv́êd́ p̂áĝéŝ án̂d́ ŝín̂ǵl̂é-p̂áĝé âṕp̂ĺîćât́îón̂ś."
   },
+  "flow-report/src/i18n/ui-strings.js | informativeAuditCount": {
+    "message": "{numInformative, plural,\n    =1 {{numInformative} îńf̂ór̂ḿât́îv́ê áûd́ît́}\n    other {{numInformative} îńf̂ór̂ḿât́îv́ê áûd́ît́ŝ}\n  }"
+  },
   "flow-report/src/i18n/ui-strings.js | mobile": {
     "message": "M̂ób̂íl̂é"
   },
@@ -71,6 +74,15 @@
   "flow-report/src/i18n/ui-strings.js | navigationReport": {
     "message": "N̂áv̂íĝát̂íôń r̂ép̂ór̂t́"
   },
+  "flow-report/src/i18n/ui-strings.js | navigationReportCount": {
+    "message": "{numNavigation, plural,\n    =1 {{numNavigation} n̂áv̂íĝát̂íôń r̂ép̂ór̂t́}\n    other {{numNavigation} n̂áv̂íĝát̂íôń r̂ép̂ór̂t́ŝ}\n  }"
+  },
+  "flow-report/src/i18n/ui-strings.js | passableAuditCount": {
+    "message": "{numPassableAudits, plural,\n    =1 {{numPassableAudits} p̂áŝśâb́l̂é âúd̂ít̂}\n    other {{numPassableAudits} ṕâśŝáb̂ĺê áûd́ît́ŝ}\n  }"
+  },
+  "flow-report/src/i18n/ui-strings.js | passedAuditCount": {
+    "message": "{numPassed, plural,\n    =1 {{numPassed} âúd̂ít̂ ṕâśŝéd̂}\n    other {{numPassed} áûd́ît́ŝ ṕâśŝéd̂}\n  }"
+  },
   "flow-report/src/i18n/ui-strings.js | ratingAverage": {
     "message": "Âv́êŕâǵê"
   },
@@ -95,6 +107,9 @@
   "flow-report/src/i18n/ui-strings.js | snapshotReport": {
     "message": "Ŝńâṕŝh́ôt́ r̂ép̂ór̂t́"
   },
+  "flow-report/src/i18n/ui-strings.js | snapshotReportCount": {
+    "message": "{numSnapshot, plural,\n    =1 {{numSnapshot} ŝńâṕŝh́ôt́ r̂ép̂ór̂t́}\n    other {{numSnapshot} ŝńâṕŝh́ôt́ r̂ép̂ór̂t́ŝ}\n  }"
+  },
   "flow-report/src/i18n/ui-strings.js | summary": {
     "message": "Ŝúm̂ḿâŕŷ"
   },
@@ -107,6 +122,9 @@
   "flow-report/src/i18n/ui-strings.js | timespanReport": {
     "message": "T̂ím̂éŝṕâń r̂ép̂ór̂t́"
   },
+  "flow-report/src/i18n/ui-strings.js | timespanReportCount": {
+    "message": "{numTimespan, plural,\n    =1 {{numTimespan} t̂ím̂éŝṕâń r̂ép̂ór̂t́}\n    other {{numTimespan} t̂ím̂éŝṕâń r̂ép̂ór̂t́ŝ}\n  }"
+  },
   "flow-report/src/i18n/ui-strings.js | title": {
     "message": "L̂íĝh́t̂h́ôúŝé Ûśêŕ F̂ĺôẃ R̂ép̂ór̂t́"
   },

package/shared/localization/locales.js

@@ -12,6 +12,12 @@
  * Google locale inheritance rules: https://goto.google.com/ccssm
  * CLDR language aliases: https://www.unicode.org/cldr/charts/latest/supplemental/aliases.html
  * CLDR locale inheritance: https://github.com/unicode-cldr/cldr-core/blob/master/supplemental/parentLocales.json
+ *
+ * For Lighthouse bundles that shouldn't include locale data, the recommended pattern
+ * is to replace the default export of this file with `{}` so that no locale messages
+ * are included. Strings will work normally through the IcuMessage.formattedDefault
+ * fallback, and locale messages can be added on demand (e.g. dynamically fetched)
+ * through `format.registerLocaleData()`.
  */
 
 // TODO(paulirish): Centralize locale inheritance (combining this & i18n.lookupLocale()), adopt cldr parentLocale rules.

package/shared/test/localization/format-test.js

@@ -9,10 +9,54 @@ const path = require('path');
 
 const format = require('../../localization/format.js');
 const i18n = require('../../../lighthouse-core/lib/i18n/i18n.js');
+const constants = require('../../../lighthouse-core/config/constants.js');
+const locales = require('../../localization/locales.js');
 
 /* eslint-env jest */
 
 describe('format', () => {
+  describe('DEFAULT_LOCALE', () => {
+    it('is the same as the default config locale', () => {
+      expect(format.DEFAULT_LOCALE).toBe(constants.defaultSettings.locale);
+    });
+  });
+
+  describe('#getAvailableLocales', () => {
+    it('has all the available locales', () => {
+      const availableLocales = format.getAvailableLocales();
+      for (const locale of ['en', 'es', 'ru', 'zh']) {
+        expect(availableLocales).toContain(locale);
+      }
+
+      const rawLocales = Object.keys(locales).sort();
+      expect(availableLocales.sort()).toEqual(rawLocales);
+    });
+
+    it('contains the default locale', () => {
+      expect(format.getAvailableLocales()).toContain(format.DEFAULT_LOCALE);
+    });
+  });
+
+  describe('#getCanonicalLocales', () => {
+    it('contains some canonical locales', () => {
+      const canonicalLocales = format.getCanonicalLocales();
+      for (const locale of ['en-US', 'es', 'ru', 'zh']) {
+        expect(canonicalLocales).toContain(locale);
+      }
+    });
+
+    it('is a subset of the available locales', () => {
+      const canonicalLocales = format.getCanonicalLocales();
+      const availableLocales = format.getAvailableLocales();
+
+      for (const canonicalLocale of canonicalLocales) {
+        expect(availableLocales).toContain(canonicalLocale);
+      }
+
+      expect(canonicalLocales.length).toBeLessThan(availableLocales.length);
+    });
+  });
+
   describe('#_formatPathAsString', () => {
     it('handles simple paths', () => {
       expect(format._formatPathAsString(['foo'])).toBe('foo');