lighthouse 8.6.0 → 9.0.0

package/report/test/renderer/util-test.js

@@ -155,6 +155,28 @@ describe('util helpers', () => {
         const preparedResult = Util.prepareReportResult(clonedSampleResult);
         assert.deepStrictEqual(preparedResult.audits, sampleResult.audits);
       });
+
+      it('corrects performance category without hidden group', () => {
+        const clonedSampleResult = JSON.parse(JSON.stringify(sampleResult));
+
+        clonedSampleResult.lighthouseVersion = '8.6.0';
+        delete clonedSampleResult.categoryGroups['hidden'];
+        for (const auditRef of clonedSampleResult.categories['performance'].auditRefs) {
+          if (auditRef.group === 'hidden') {
+            delete auditRef.group;
+          } else if (!auditRef.group) {
+            auditRef.group = 'diagnostics';
+          }
+        }
+        assert.notDeepStrictEqual(clonedSampleResult.categories, sampleResult.categories);
+        assert.notDeepStrictEqual(clonedSampleResult.categoryGroups, sampleResult.categoryGroups);
+
+        // Original audit results should be restored.
+        const clonedPreparedResult = Util.prepareReportResult(clonedSampleResult);
+        const preparedResult = Util.prepareReportResult(sampleResult);
+        assert.deepStrictEqual(clonedPreparedResult.categories, preparedResult.categories);
+        assert.deepStrictEqual(clonedPreparedResult.categoryGroups, preparedResult.categoryGroups);
+      });
     });
 
     it('appends stack pack descriptions to auditRefs', () => {
@@ -401,10 +423,10 @@ describe('util helpers', () => {
       const category = {
         id: 'performance',
         auditRefs: [
-          {weight: 3, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
-          {weight: 2, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
-          {weight: 0, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
-          {weight: 1, result: {score: 0, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
+          {weight: 3, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'metrics'},
+          {weight: 2, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'metrics'},
+          {weight: 0, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'metrics'},
+          {weight: 1, result: {score: 0, scoreDisplayMode: 'binary'}, group: 'metrics'},
         ],
       };
       const fraction = Util.calculateCategoryFraction(category);
@@ -416,14 +438,14 @@ describe('util helpers', () => {
       });
     });
 
-    it('ignores manual audits, N/A audits, and performance audits with no group', () => {
+    it('ignores manual audits, N/A audits, and hidden audits', () => {
       const category = {
         id: 'performance',
         auditRefs: [
-          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
-          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}},
-          {weight: 1, result: {score: 0, scoreDisplayMode: 'manual'}, group: 'diagnostics'},
-          {weight: 1, result: {score: 0, scoreDisplayMode: 'notApplicable'}, group: 'diagnostics'},
+          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'metrics'},
+          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'hidden'},
+          {weight: 1, result: {score: 0, scoreDisplayMode: 'manual'}, group: 'metrics'},
+          {weight: 1, result: {score: 0, scoreDisplayMode: 'notApplicable'}, group: 'metrics'},
         ],
       };
       const fraction = Util.calculateCategoryFraction(category);
@@ -435,32 +457,14 @@ describe('util helpers', () => {
       });
     });
 
-    it('does not ignore audits with no group in non-performance category', () => {
-      const category = {
-        id: 'seo',
-        auditRefs: [
-          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
-          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}},
-          {weight: 1, result: {score: 0, scoreDisplayMode: 'manual'}, group: 'diagnostics'},
-        ],
-      };
-      const fraction = Util.calculateCategoryFraction(category);
-      expect(fraction).toEqual({
-        numPassableAudits: 2,
-        numPassed: 2,
-        numInformative: 0,
-        totalWeight: 2,
-      });
-    });
-
     it('tracks informative audits separately', () => {
       const category = {
         id: 'performance',
         auditRefs: [
-          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
-          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'diagnostics'},
-          {weight: 0, result: {score: 1, scoreDisplayMode: 'informative'}, group: 'diagnostics'},
-          {weight: 1, result: {score: 0, scoreDisplayMode: 'informative'}, group: 'diagnostics'},
+          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'metrics'},
+          {weight: 1, result: {score: 1, scoreDisplayMode: 'binary'}, group: 'metrics'},
+          {weight: 0, result: {score: 1, scoreDisplayMode: 'informative'}, group: 'metrics'},
+          {weight: 1, result: {score: 0, scoreDisplayMode: 'informative'}, group: 'metrics'},
         ],
       };
       const fraction = Util.calculateCategoryFraction(category);

package/report/test-assets/faux-psi-template.html

@@ -66,7 +66,6 @@
 }
 
 .tab-panel {
-  padding: 30px 0;
   border-top: 1px solid #ccc;
 }
 
@@ -92,10 +91,7 @@ body {
 <body >
   <noscript>PSI requires JavaScript. Please enable.</noscript>
 
-  <div class="element-screenshots-container"></div>
-
-
-  <div class="tabset lh-vars lh-root">
+  <div class="tabset">
 
     <input type="radio" name="tabset" id="tab1" aria-controls="mobile" checked>
     <label for="tab1">Mobile</label>
@@ -104,13 +100,9 @@ body {
     <label for="tab2">Desktop</label>
 
     <div class="tab-panels">
-      <section id="mobile" class="tab-panel">
-        <main></main>
-      </section>
+      <section id="mobile" class="tab-panel"></section>
 
-      <section id="desktop" class="tab-panel">
-        <main></main>
-      </section>
+      <section id="desktop" class="tab-panel"></section>
 
     </div>
   </div>

package/report/test-assets/faux-psi.js

@@ -5,9 +5,13 @@
  */
 'use strict';
 
-/** @fileoverview This file is a glorified call of prepareLabData. */
+/** @fileoverview This file exercises two LH reports within the same DOM. */
 
-/** @typedef {import('../clients/psi.js').PrepareLabDataResult} PrepareLabDataResult */
+/** @typedef {import('../clients/bundle.js')} lighthouseRenderer */
+
+/** @type {lighthouseRenderer} */
+// @ts-expect-error
+const lighthouseRenderer = window['report'];
 
 (async function __initPsiReports__() {
   // @ts-expect-error
@@ -22,22 +26,23 @@
   for (const [tabId, lhr] of Object.entries(lhrs)) {
     await distinguishLHR(lhr, tabId);
 
-    // @ts-expect-error
-    const pldd = /** @type {PrepareLabDataResult} */ (window.prepareLabData(lhr, document));
-    const {scoreGaugeEl, perfCategoryEl,
-      finalScreenshotDataUri, scoreScaleEl, installFeatures} = pldd;
-
-    const container = document.querySelector(`#${tabId} main`);
+    const container = document.querySelector(`section#${tabId}`);
     if (!container) throw new Error('Unexpected DOM. Bailing.');
-    container.append(scoreGaugeEl);
-    container.append(scoreScaleEl);
-    if (finalScreenshotDataUri) {
-      const imgEl = document.createElement('img');
-      imgEl.src = finalScreenshotDataUri;
-      container.append(imgEl);
+
+    try {
+      const reportRootEl = lighthouseRenderer.renderReport(lhr, {
+        omitTopbar: true,
+        disableAutoDarkModeAndFireworks: true,
+      });
+      // TODO: display warnings if appropriate.
+      for (const el of reportRootEl.querySelectorAll('.lh-warnings')) {
+        el.setAttribute('hidden', 'true');
+      }
+      container.append(reportRootEl);
+    } catch (e) {
+      console.error(e);
+      container.textContent = 'Error: LHR failed to render.';
     }
-    container.append(perfCategoryEl);
-    installFeatures(container);
   }
 })();
 
@@ -49,7 +54,6 @@
  * @param {string} tabId
  */
 async function distinguishLHR(lhr, tabId) {
-  lhr.categories.performance.title += ` ${tabId}`; // for easier identification
   if (tabId === 'desktop') {
     lhr.categories.performance.score = 0.81;
   }
@@ -78,15 +82,15 @@ async function decorateScreenshot(datauri, tabId) {
     img.src = datauri;
   });
   const c = document.createElement('canvas');
-  c.width = img.width;
-  c.height = img.height;
+  c.width = tabId === 'desktop' ? 280 : img.width;
+  c.height = tabId === 'desktop' ? 194 : img.height;
 
   const ctx = c.getContext('2d');
   if (!ctx) throw new Error();
-  ctx.drawImage(img, 0, 0);
-  ctx.font = `${img.width / 2}px serif`;
+  ctx.drawImage(img, 0, 0, c.width, c.height);
+  ctx.font = `${c.width / 2}px serif`;
   ctx.textAlign = 'center';
   ctx.globalAlpha = 0.7;
-  ctx.fillText(tabId === 'mobile' ? '📱' : '💻', img.width / 2, Math.min(img.height / 2, 700));
+  ctx.fillText(tabId === 'mobile' ? '📱' : '💻', c.width / 2, Math.min(c.height / 2, 700));
   return c.toDataURL();
 }

package/report/types/html-renderer.d.ts

@@ -8,6 +8,7 @@ import AuditDetails from '../../types/lhr/audit-details';
 import {FormattedIcu as FormattedIcu_, IcuMessage as IcuMessage_} from '../../types/lhr/i18n';
 import LHResult from '../../types/lhr/lhr';
 import ReportResult_ from './report-result';
+import Renderer_ from './report-renderer';
 import * as Settings from '../../types/lhr/settings';
 import Treemap_ from '../../types/lhr/treemap';
 
@@ -16,6 +17,7 @@ declare global {
   module LH {
     export import Result = LHResult;
     export import ReportResult = ReportResult_;
+    export import Renderer = Renderer_;
     export import Locale = Settings.Locale;
     export type IcuMessage = IcuMessage_;
     export type FormattedIcu<T> = FormattedIcu_<T>;

package/report/types/report-renderer.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @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 { Result as AuditResult } from "../../types/lhr/audit-result";
+
+declare module Renderer {
+  function renderReport(lhr: AuditResult, options?: Options): HTMLElement;
+
+  interface Options {
+    /**
+     * Don't automatically apply dark-mode to dark based on (prefers-color-scheme: dark). (DevTools and PSI don't want this.)
+     * Also, the fireworks easter-egg will want to flip to dark, so this setting will also disable chance of fireworks. */
+    disableAutoDarkModeAndFireworks?: boolean;
+
+    /** Disable the topbar UI component */
+    omitTopbar?: boolean;
+  }
+}
+
+export default Renderer;

package/shared/localization/format.js

@@ -7,26 +7,26 @@
 
 const fs = require('fs');
 
-const MessageFormat = require('intl-messageformat').default;
+const MessageFormat = require('intl-messageformat');
 const {isObjectOfUnknownValues, isObjectOrArrayOfUnknownValues} = require('../type-verifiers.js');
 
 /** Contains available locales with messages. May be an empty object if bundled. */
-const LOCALE_MESSAGES = require('./locales.js');
+/** @type {import('./locales')} */
+// @ts-expect-error TODO(esmodules): remove when file is es modules.
+const LOCALE_MESSAGES = require('./locales.js').default || 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.
+ * When bundled, these will be inlined by `inline-fs`.
  * These locales are considered the "canonical" locales. We support other locales which
  * are simply aliases to one of these. ex: es-AR (alias) -> es-419 (canonical)
  */
-let CANONICAL_LOCALES = ['__availableLocales__'];
-// TODO: need brfs in gh-pages-app. For now, above is replaced, see build-i18n.module.js
-if (fs.readdirSync) {
-  CANONICAL_LOCALES = fs.readdirSync(__dirname + '/locales/')
-    .filter(basename => basename.endsWith('.json') && !basename.endsWith('.ctc.json'))
-    .map(locale => locale.replace('.json', ''))
-    .sort();
-}
+const CANONICAL_LOCALES = fs.readdirSync(__dirname + '/locales/')
+  .filter(basename => basename.endsWith('.json') && !basename.endsWith('.ctc.json'))
+  .map(locale => locale.replace('.json', ''))
+  .sort();
 
 /** @typedef {import('intl-messageformat-parser').Element} MessageElement */
 /** @typedef {import('intl-messageformat-parser').ArgumentElement} ArgumentElement */
@@ -95,7 +95,7 @@ function collectAllCustomElementsFromICU(icuElements, seenElementsById = new Map
  * Returns a copy of the `values` object, with the values formatted based on how
  * they will be used in their icuMessage, e.g. KB or milliseconds. The original
  * object is unchanged.
- * @param {MessageFormat} messageFormatter
+ * @param {MessageFormat.IntlMessageFormat} messageFormatter
  * @param {Readonly<Record<string, string | number>>} values
  * @param {string} lhlMessage Used for clear error logging.
  * @return {Record<string, string | number>}
@@ -169,11 +169,14 @@ 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;
 
-  const formatter = new MessageFormat(message, localeForMessageFormat, formats);
+  // This package is not correctly bundled by Rollup.
+  /** @type {typeof MessageFormat.IntlMessageFormat} */
+  const MessageFormatCtor = MessageFormat.IntlMessageFormat || MessageFormat;
+  const formatter = new MessageFormatCtor(message, localeForMessageFormat, formats);
 
   // Preformat values for the message format like KB and milliseconds.
   const valuesForMessageFormat = _preformatValues(formatter, values, message);
@@ -189,19 +192,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 +214,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 +355,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 +394,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 +408,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 +440,7 @@ function getIcuMessageIdParts(i18nMessageId) {
 }
 
 module.exports = {
+  DEFAULT_LOCALE,
   _formatPathAsString,
   collectAllCustomElementsFromICU,
   isIcuMessage,
@@ -415,7 +449,7 @@ module.exports = {
   replaceIcuMessages,
   hasLocale,
   registerLocaleData,
-  _formatMessage,
+  formatMessage,
   getIcuMessageIdParts,
   getAvailableLocales,
   getCanonicalLocales,