lighthouse 9.3.1-dev.20220213 → 9.4.0

package/report/renderer/report-ui-features.js

@@ -70,12 +70,13 @@ export class ReportUIFeatures {
     this._setupThirdPartyFilter();
     this._setupElementScreenshotOverlay(this._dom.rootEl);
 
-    let turnOffTheLights = false;
     // Do not query the system preferences for DevTools - DevTools should only apply dark theme
     // if dark is selected in the settings panel.
-    const disableDarkMode = this._dom.isDevTools() || this._opts.disableAutoDarkModeAndFireworks;
+    // TODO: set `disableDarkMode` in devtools and delete this special case.
+    const disableDarkMode = this._dom.isDevTools() ||
+      this._opts.disableDarkMode || this._opts.disableAutoDarkModeAndFireworks;
     if (!disableDarkMode && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      turnOffTheLights = true;
+      toggleDarkTheme(this._dom, true);
     }
 
     // Fireworks!
@@ -85,13 +86,12 @@ export class ReportUIFeatures {
       const cat = lhr.categories[id];
       return cat && cat.score === 1;
     });
-    if (scoresAll100 && !this._opts.disableAutoDarkModeAndFireworks) {
-      turnOffTheLights = true;
+    const disableFireworks =
+      this._opts.disableFireworks || this._opts.disableAutoDarkModeAndFireworks;
+    if (scoresAll100 && !disableFireworks) {
       this._enableFireworks();
-    }
-
-    if (turnOffTheLights) {
-      toggleDarkTheme(this._dom, true);
+      // If dark mode is allowed, force it on because it looks so much better.
+      if (!disableDarkMode) toggleDarkTheme(this._dom, true);
     }
 
     // Show the metric descriptions by default when there is an error.
@@ -345,13 +345,15 @@ export class ReportUIFeatures {
   }
 
   /**
-   * DevTools uses its own file manager to download files, so it redefines this function.
-   * Wrapper is necessary so DevTools can still override this function.
-   *
    * @param {Blob|File} blob
    */
   _saveFile(blob) {
-    const filename = getLhrFilenamePrefix(this.json);
-    this._dom.saveFile(blob, filename);
+    const ext = blob.type.match('json') ? '.json' : '.html';
+    const filename = getLhrFilenamePrefix(this.json) + ext;
+    if (this._opts.onSaveFileOverride) {
+      this._opts.onSaveFileOverride(blob, filename);
+    } else {
+      this._dom.saveFile(blob, filename);
+    }
   }
 }

package/report/renderer/topbar-features.js

@@ -199,7 +199,11 @@ export class TopbarFeatures {
   }
 
   _print() {
-    self.print();
+    if (this._reportUIFeatures._opts.onPrintOverride) {
+      this._reportUIFeatures._opts.onPrintOverride(this._dom.rootEl);
+    } else {
+      self.print();
+    }
   }
 
   /**

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

@@ -46,7 +46,8 @@ async function renderLHReport() {
 
       const reportRootEl = lighthouseRenderer.renderReport(lhr, {
         omitTopbar: true,
-        disableAutoDarkModeAndFireworks: true,
+        disableFireworks: true,
+        disableDarkMode: true,
       });
       // TODO: display warnings if appropriate.
       for (const el of reportRootEl.querySelectorAll('.lh-warnings--toplevel')) {

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

@@ -12,8 +12,16 @@ declare module Renderer {
 
   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. */
+     * Disables automatically applying dark mode based on `prefers-color-scheme: dark`. Dark mode can still
+     * be manually applied by assigning the class `lh-dark` to the report element.
+     */
+    disableDarkMode?: boolean;
+    /** Disables the fireworks animation that plays when all core categories have a 100 score. */
+    disableFireworks?: boolean;
+    /**
+     * Disable dark mode and fireworks.
+     * @deprecated Use `disableDarkMode` and `disableFireworks` instead.
+     */
     disableAutoDarkModeAndFireworks?: boolean;
 
     /** Disable the topbar UI component */
@@ -27,6 +35,10 @@ declare module Renderer {
     onPageAnchorRendered?: (link: HTMLAnchorElement) => void;
     /** If defined, `Save as HTML` option is shown in dropdown menu. */
     getStandaloneReportHTML?: () => string;
+    /** If defined, renderer will call this instead of `self.print()` */
+    onPrintOverride?: (rootEl: HTMLElement) => Promise<void>;
+    /** If defined, renderer will call this instead of using a `<a download>.click()>` to trigger a JSON/HTML download. Blob will be either json or html. */
+    onSaveFileOverride?: (blob: Blob, suggestedFilename: string) => Promise<void>;
     /**
      * If defined, adds a `View Trace` button to the report, and calls this callback when clicked.
      * The callback should do something to present the user with a visualization of the trace

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

@@ -1668,7 +1668,7 @@
     "message": "Best practices"
   },
   "lighthouse-core/config/default-config.js | a11yCategoryDescription": {
-    "message": "These checks highlight opportunities to [improve the accessibility of your web app](https://developers.google.com/web/fundamentals/accessibility). Only a subset of accessibility issues can be automatically detected so manual testing is also encouraged."
+    "message": "These checks highlight opportunities to [improve the accessibility of your web app](https://web.dev/lighthouse-accessibility/). Only a subset of accessibility issues can be automatically detected so manual testing is also encouraged."
   },
   "lighthouse-core/config/default-config.js | a11yCategoryManualDescription": {
     "message": "These items address areas which an automated testing tool cannot cover. Learn more in our guide on [conducting an accessibility review](https://developers.google.com/web/fundamentals/accessibility/how-to-review)."

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

@@ -1668,7 +1668,7 @@
     "message": "B̂éŝt́ p̂ŕâćt̂íĉéŝ"
   },
   "lighthouse-core/config/default-config.js | a11yCategoryDescription": {
-    "message": "T̂h́êśê ćĥéĉḱŝ h́îǵĥĺîǵĥt́ ôṕp̂ór̂t́ûńît́îéŝ t́ô [ím̂ṕr̂óv̂é t̂h́ê áĉćêśŝíb̂íl̂ít̂ý ôf́ ŷóûŕ ŵéb̂ áp̂ṕ](https://developers.google.com/web/fundamentals/accessibility). Ôńl̂ý â śûb́ŝét̂ óf̂ áĉćêśŝíb̂íl̂ít̂ý îśŝúêś ĉán̂ b́ê áût́ôḿât́îćâĺl̂ý d̂ét̂éĉt́êd́ ŝó m̂án̂úâĺ t̂éŝt́îńĝ íŝ ál̂śô én̂ćôúr̂áĝéd̂."
+    "message": "T̂h́êśê ćĥéĉḱŝ h́îǵĥĺîǵĥt́ ôṕp̂ór̂t́ûńît́îéŝ t́ô [ím̂ṕr̂óv̂é t̂h́ê áĉćêśŝíb̂íl̂ít̂ý ôf́ ŷóûŕ ŵéb̂ áp̂ṕ](https://web.dev/lighthouse-accessibility/). Ôńl̂ý â śûb́ŝét̂ óf̂ áĉćêśŝíb̂íl̂ít̂ý îśŝúêś ĉán̂ b́ê áût́ôḿât́îćâĺl̂ý d̂ét̂éĉt́êd́ ŝó m̂án̂úâĺ t̂éŝt́îńĝ íŝ ál̂śô én̂ćôúr̂áĝéd̂."
   },
   "lighthouse-core/config/default-config.js | a11yCategoryManualDescription": {
     "message": "T̂h́êśê ít̂ém̂ś âd́d̂ŕêśŝ ár̂éâś ŵh́îćĥ án̂ áût́ôḿât́êd́ t̂éŝt́îńĝ t́ôól̂ ćâńn̂ót̂ ćôv́êŕ. L̂éâŕn̂ ḿôŕê ín̂ óûŕ ĝúîd́ê ón̂ [ćôńd̂úĉt́îńĝ án̂ áĉćêśŝíb̂íl̂ít̂ý r̂év̂íêẃ](https://developers.google.com/web/fundamentals/accessibility/how-to-review)."

package/types/artifacts.d.ts

@@ -139,8 +139,8 @@ export interface GathererArtifacts extends PublicGathererArtifacts,LegacyBaseArt
   Fonts: Artifacts.Font[];
   /** Information on poorly sized font usage and the text affected by it. */
   FontSize: Artifacts.FontSize;
-  /** All the form elements in the page and formless inputs. */
-  FormElements: Artifacts.Form[];
+  /** All the input elements, including associated form and label elements. */
+  Inputs: {inputs: Artifacts.InputElement[]; forms: Artifacts.FormElement[]; labels: Artifacts.LabelElement[]};
   /** Screenshot of the entire page (rather than just the above the fold content). */
   FullPageScreenshot: Artifacts.FullPageScreenshot | null;
   /** Information about event listeners registered on the global object. */
@@ -787,22 +787,22 @@ declare module Artifacts {
     observedSpeedIndexTs: number;
   }
 
-  interface Form {
-    /** If attributes is missing that means this is a formless set of elements. */
-    attributes?: {
-      id: string;
-      name: string;
-      autocomplete: string;
-    };
-    node: NodeDetails | null;
-    inputs: Array<FormInput>;
-    labels: Array<FormLabel>;
+  interface FormElement {
+    id: string;
+    name: string;
+    autocomplete: string;
+    node: NodeDetails;
   }
 
   /** Attributes collected for every input element in the inputs array from the forms interface. */
-  interface FormInput {
+  interface InputElement {
+    /** If set, the parent form is the index into the associated FormElement array. Otherwise, the input element has no parent form. */
+    parentFormIndex?: number;
+    /** Array of indices into associated LabelElement array. */
+    labelIndices: number[];
     id: string;
     name: string;
+    type: string;
     placeholder?: string;
     autocomplete: {
       property: string;
@@ -813,7 +813,7 @@ declare module Artifacts {
   }
 
   /** Attributes collected for every label element in the labels array from the forms interface */
-  interface FormLabel {
+  interface LabelElement {
     for: string;
     node: NodeDetails;
   }

package/types/parse-cache-control/index.d.ts

@@ -12,6 +12,7 @@ declare module 'parse-cache-control' {
     'no-cache'?: boolean;
     'no-store'?: boolean;
     'private'?: boolean;
+    'stale-while-revalidate'?: boolean;
   }
 
   function ParseCacheControl(headers?: string): CacheHeaders | null;