lighthouse 9.5.0-dev.20220423 → 9.5.0-dev.20220426

package/lighthouse-cli/cli-flags.js

@@ -177,7 +177,7 @@ function getFlags(manualArgv, options = {}) {
         },
         'enable-error-reporting': {
           type: 'boolean',
-          describe: 'Enables error reporting, overriding any saved preference. --no-enable-error-reporting will do the opposite. More: https://git.io/vFFTO',
+          describe: 'Enables error reporting, overriding any saved preference. --no-enable-error-reporting will do the opposite. More: https://github.com/GoogleChrome/lighthouse/blob/master/docs/error-reporting.md',
         },
         'gather-mode': {
           alias: 'G',

package/lighthouse-core/audits/deprecations.js

@@ -66,7 +66,6 @@ class Deprecations extends Audit {
       deprecations = artifacts.InspectorIssues.deprecationIssue
         // TODO: translate these strings.
         // see https://github.com/GoogleChrome/lighthouse/issues/13895
-        // @ts-expect-error: .type hasn't released to npm yet
         .filter(deprecation => !deprecation.type || deprecation.type === 'Untranslated')
         .map(deprecation => {
           const {scriptId, url, lineNumber, columnNumber} = deprecation.sourceCodeLocation;

package/lighthouse-core/audits/dobetterweb/doctype.js

@@ -19,12 +19,14 @@ const UIStrings = {
     '[Learn more](https://web.dev/doctype/).',
   /** Explanatory message stating that the document has no doctype. */
   explanationNoDoctype: 'Document must contain a doctype',
+  /** Explanatory message stating that the document has wrong doctype */
+  explanationWrongDoctype: 'Document contains a doctype that triggers quirks-mode',
   /** Explanatory message stating that the publicId field is not empty. */
   explanationPublicId: 'Expected publicId to be an empty string',
   /** Explanatory message stating that the systemId field is not empty. */
   explanationSystemId: 'Expected systemId to be an empty string',
   /** Explanatory message stating that the doctype is set, but is not "html" and is therefore invalid. */
-  explanationBadDoctype: 'Doctype name must be the lowercase string `html`',
+  explanationBadDoctype: 'Doctype name must be the string `html`',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
@@ -56,9 +58,10 @@ class Doctype extends Audit {
     }
 
     // only set constants once we know there is a doctype
-    const doctypeName = artifacts.Doctype.name.trim();
+    const doctypeName = artifacts.Doctype.name;
     const doctypePublicId = artifacts.Doctype.publicId;
     const doctypeSystemId = artifacts.Doctype.systemId;
+    const compatMode = artifacts.Doctype.documentCompatMode;
 
     if (doctypePublicId !== '') {
       return {
@@ -74,17 +77,25 @@ class Doctype extends Audit {
       };
     }
 
-    /* Note that the value for name is case sensitive,
-       and must be the string `html`. For details see:
-       https://html.spec.whatwg.org/multipage/parsing.html#the-initial-insertion-mode */
-    if (doctypeName === 'html') {
+    /* Note that the casing of this property is normalized to be lowercase.
+       see: https://html.spec.whatwg.org/#doctype-name-state */
+    if (doctypeName !== 'html') {
       return {
-        score: 1,
+        score: 0,
+        explanation: str_(UIStrings.explanationBadDoctype),
       };
-    } else {
+    }
+
+    // Catch-all for any quirks-mode situations the above checks didn't get.
+    // https://github.com/GoogleChrome/lighthouse/issues/10030
+    if (compatMode === 'BackCompat') {
       return {
         score: 0,
-        explanation: str_(UIStrings.explanationBadDoctype),
+        explanation: str_(UIStrings.explanationWrongDoctype),
+      };
+    } else {
+      return {
+        score: 1,
       };
     }
   }

package/lighthouse-core/gather/gatherers/accessibility.js

@@ -12,9 +12,6 @@ const axeLibSource = require('../../lib/axe.js').source;
 const pageFunctions = require('../../lib/page-functions.js');
 
 /**
- * This is run in the page, not Lighthouse itself.
- * axe.run returns a promise which fulfills with a results object
- * containing any violations.
  * @return {Promise<LH.Artifacts.Accessibility>}
  */
 /* c8 ignore start */
@@ -38,8 +35,11 @@ async function runA11yChecks() {
         'wcag2aa',
       ],
     },
+    // resultTypes doesn't limit the output of the axeResults object. Instead, if it's defined,
+    // some expensive element identification is done only for the respective types. https://github.com/dequelabs/axe-core/blob/f62f0cf18f7b69b247b0b6362cf1ae71ffbf3a1b/lib/core/reporters/helpers/process-aggregate.js#L61-L97
     resultTypes: ['violations', 'inapplicable'],
     rules: {
+      // Consider http://go/prcpg for expert review of the aXe rules.
       'tabindex': {enabled: true},
       'accesskeys': {enabled: true},
       'heading-order': {enabled: true},
@@ -60,6 +60,12 @@ async function runA11yChecks() {
       // https://github.com/dequelabs/axe-core/issues/2958
       'nested-interactive': {enabled: false},
       'frame-focusable-content': {enabled: false},
+      'aria-roledescription': {enabled: false},
+      'scrollable-region-focusable': {enabled: false},
+      // TODO(paulirish): create audits and enable these 3.
+      'input-button-name': {enabled: false},
+      'role-img-alt': {enabled: false},
+      'select-name': {enabled: false},
     },
   });
 
@@ -70,7 +76,8 @@ async function runA11yChecks() {
   return {
     violations: axeResults.violations.map(createAxeRuleResultArtifact),
     incomplete: axeResults.incomplete.map(createAxeRuleResultArtifact),
-    notApplicable: axeResults.inapplicable.map(result => ({id: result.id})),
+    notApplicable: axeResults.inapplicable.map(result => ({id: result.id})), // FYI: inapplicable => notApplicable!
+    passes: axeResults.passes.map(result => ({id: result.id})),
     version: axeResults.testEngine.version,
   };
 }
@@ -150,6 +157,11 @@ class Accessibility extends FRGatherer {
     supportedModes: ['snapshot', 'navigation'],
   };
 
+  static pageFns = {
+    runA11yChecks,
+    createAxeRuleResultArtifact,
+  };
+
   /**
    * @param {LH.Gatherer.FRTransitionalContext} passContext
    * @return {Promise<LH.Artifacts.Accessibility>}

package/lighthouse-core/gather/gatherers/dobetterweb/doctype.js

@@ -12,7 +12,8 @@ const FRGatherer = require('../../../fraggle-rock/gather/base-gatherer.js');
 /**
  * Get and return `name`, `publicId`, `systemId` from
  * `document.doctype`
- * @return {{name: string, publicId: string, systemId: string} | null}
+ * and `compatMode` from `document` to check `quirks-mode`
+ * @return {{name: string, publicId: string, systemId: string, documentCompatMode: string} | null}
  */
 function getDoctype() {
   // An example of this is warnerbros.com/archive/spacejam/movie/jam.htm
@@ -20,8 +21,9 @@ function getDoctype() {
     return null;
   }
 
+  const documentCompatMode = document.compatMode;
   const {name, publicId, systemId} = document.doctype;
-  return {name, publicId, systemId};
+  return {name, publicId, systemId, documentCompatMode};
 }
 
 class Doctype extends FRGatherer {

package/lighthouse-core/lib/tracehouse/trace-processor.js

@@ -612,39 +612,59 @@ class TraceProcessor {
     // Find the inspected frame
     const mainFrameIds = this.findMainFrameIds(keyEvents);
 
-    const frames = keyEvents
+    /** @type {Map<string, {id: string, url: string, parent?: string}>} */
+    const framesById = new Map();
+
+    // Begin collection of frame tree information with TracingStartedInBrowser,
+    // which should be present even without navigations.
+    const tracingStartedFrames = keyEvents
+        .find(e => e.name === 'TracingStartedInBrowser')?.args?.data?.frames;
+    if (tracingStartedFrames) {
+      for (const frame of tracingStartedFrames) {
+        framesById.set(frame.frame, {
+          id: frame.frame,
+          url: frame.url,
+          parent: frame.parent,
+        });
+      }
+    }
+
+    // Update known frames if FrameCommittedInBrowser events come in, typically
+    // with updated `url`, as well as pid, etc. Some traces (like timespans) may
+    // not have any committed frames.
+    keyEvents
       .filter(/** @return {evt is FrameCommittedEvent} */ evt => {
         return Boolean(
           evt.name === 'FrameCommittedInBrowser' &&
           evt.args.data?.frame &&
           evt.args.data.url
         );
-      })
-      .map(evt => {
-        return {
+      }).forEach(evt => {
+        framesById.set(evt.args.data.frame, {
           id: evt.args.data.frame,
           url: evt.args.data.url,
           parent: evt.args.data.parent,
-        };
+        });
       });
+    const frames = [...framesById.values()];
     const frameIdToRootFrameId = this.resolveRootFrames(frames);
 
     // Filter to just events matching the main frame ID, just to make sure.
     const frameEvents = keyEvents.filter(e => e.args.frame === mainFrameIds.frameId);
 
     // Filter to just events matching the main frame ID or any child frame IDs.
-    // In practice, there should always be FrameCommittedInBrowser events to define the frame tree.
-    // Unfortunately, many test traces do not include FrameCommittedInBrowser events due to minification.
-    // This ensures there is always a minimal frame tree and events so those tests don't fail.
     let frameTreeEvents = [];
     if (frameIdToRootFrameId.has(mainFrameIds.frameId)) {
       frameTreeEvents = keyEvents.filter(e => {
         return e.args.frame && frameIdToRootFrameId.get(e.args.frame) === mainFrameIds.frameId;
       });
     } else {
+      // In practice, there should always be TracingStartedInBrowser/FrameCommittedInBrowser events to
+      // define the frame tree. Unfortunately, many test traces do not that frame info due to minification.
+      // This ensures there is always a minimal frame tree and events so those tests don't fail.
       log.warn(
         'trace-of-tab',
-        'frameTreeEvents may be incomplete, make sure the trace has FrameCommittedInBrowser events'
+        'frameTreeEvents may be incomplete, make sure the trace has frame events'
       );
       frameIdToRootFrameId.set(mainFrameIds.frameId, mainFrameIds.frameId);
       frameTreeEvents = frameEvents;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "9.5.0-dev.20220423",
+  "version": "9.5.0-dev.20220426",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {
@@ -139,7 +139,7 @@
     "cpy": "^8.1.2",
     "cross-env": "^7.0.2",
     "csv-validator": "^0.0.3",
-    "devtools-protocol": "0.0.975298",
+    "devtools-protocol": "0.0.995287",
     "es-main": "^1.0.2",
     "eslint": "^8.4.1",
     "eslint-config-google": "^0.14.0",
@@ -210,8 +210,8 @@
     "yargs-parser": "^21.0.0"
   },
   "resolutions": {
-    "puppeteer/**/devtools-protocol": "0.0.975298",
-    "puppeteer-core/**/devtools-protocol": "0.0.975298"
+    "puppeteer/**/devtools-protocol": "0.0.995287",
+    "puppeteer-core/**/devtools-protocol": "0.0.995287"
   },
   "repository": "GoogleChrome/lighthouse",
   "keywords": [

package/readme.md

@@ -99,7 +99,7 @@ Configuration:
   --screenEmulation              Sets screen emulation parameters. See also --preset. Use --screenEmulation.disabled to disable. Otherwise set these 4 parameters individually: --screenEmulation.mobile --screenEmulation.width=360 --screenEmulation.height=640 --screenEmulation.deviceScaleFactor=2
   --emulatedUserAgent            Sets useragent emulation  [string]
   --max-wait-for-load            The timeout (in milliseconds) to wait before the page is considered done loading and the run should continue. WARNING: Very high values can lead to large traces and instability  [number]
-  --enable-error-reporting       Enables error reporting, overriding any saved preference. --no-enable-error-reporting will do the opposite. More: https://git.io/vFFTO  [boolean]
+  --enable-error-reporting       Enables error reporting, overriding any saved preference. --no-enable-error-reporting will do the opposite. More: https://github.com/GoogleChrome/lighthouse/blob/master/docs/error-reporting.md  [boolean]
   --gather-mode, -G              Collect artifacts from a connected browser and save to disk. (Artifacts folder path may optionally be provided). If audit-mode is not also enabled, the run will quit early.
   --audit-mode, -A               Process saved artifacts from disk. (Artifacts folder path may be provided, otherwise defaults to ./latest-run/)
   --only-audits                  Only run the specified audits  [array]

package/report/test/renderer/performance-category-renderer-test.js

@@ -328,7 +328,7 @@ Array [
       }
     });
 
-    it('uses null if the metric is missing its value', () => {
+    it('uses null if the metric\'s value is undefined', () => {
       const categoryClone = JSON.parse(JSON.stringify(category));
       const lcp = categoryClone.auditRefs.find(audit => audit.id === 'largest-contentful-paint');
       lcp.result.numericValue = undefined;
@@ -336,6 +336,16 @@ Array [
       const href = renderer._getScoringCalculatorHref(categoryClone.auditRefs);
       expect(href).toContain('LCP=null');
     });
+
+    it('uses null if the metric\'s value is null (LR)', () => {
+      const categoryClone = JSON.parse(JSON.stringify(category));
+      const lcp = categoryClone.auditRefs.find(audit => audit.id === 'largest-contentful-paint');
+      // In LR, we think there might be some case where undefined becomes null, but we can't prove it.
+      lcp.result.numericValue = null;
+      lcp.result.score = null;
+      const href = renderer._getScoringCalculatorHref(categoryClone.auditRefs);
+      expect(href).toContain('LCP=null');
+    });
   });
 
   // This is done all in CSS, but tested here.

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

@@ -777,7 +777,7 @@
     "message": "Specifying a doctype prevents the browser from switching to quirks-mode. [Learn more](https://web.dev/doctype/)."
   },
   "lighthouse-core/audits/dobetterweb/doctype.js | explanationBadDoctype": {
-    "message": "Doctype name must be the lowercase string `html`"
+    "message": "Doctype name must be the string `html`"
   },
   "lighthouse-core/audits/dobetterweb/doctype.js | explanationNoDoctype": {
     "message": "Document must contain a doctype"
@@ -788,6 +788,9 @@
   "lighthouse-core/audits/dobetterweb/doctype.js | explanationSystemId": {
     "message": "Expected systemId to be an empty string"
   },
+  "lighthouse-core/audits/dobetterweb/doctype.js | explanationWrongDoctype": {
+    "message": "Document contains a doctype that triggers quirks-mode"
+  },
   "lighthouse-core/audits/dobetterweb/doctype.js | failureTitle": {
     "message": "Page lacks the HTML doctype, thus triggering quirks-mode"
   },

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

@@ -777,7 +777,7 @@
     "message": "Ŝṕêćîf́ŷín̂ǵ â d́ôćt̂ýp̂é p̂ŕêv́êńt̂ś t̂h́ê b́r̂óŵśêŕ f̂ŕôḿ ŝẃît́ĉh́îńĝ t́ô q́ûír̂ḱŝ-ḿôd́ê. [Ĺêár̂ń m̂ór̂é](https://web.dev/doctype/)."
   },
   "lighthouse-core/audits/dobetterweb/doctype.js | explanationBadDoctype": {
-    "message": "D̂óĉt́ŷṕê ńâḿê ḿûśt̂ b́ê t́ĥé l̂óŵér̂ćâśê śt̂ŕîńĝ `html`"
+    "message": "D̂óĉt́ŷṕê ńâḿê ḿûśt̂ b́ê t́ĥé ŝt́r̂ín̂ǵ `html`"
   },
   "lighthouse-core/audits/dobetterweb/doctype.js | explanationNoDoctype": {
     "message": "D̂óĉúm̂én̂t́ m̂úŝt́ ĉón̂t́âín̂ á d̂óĉt́ŷṕê"
@@ -788,6 +788,9 @@
   "lighthouse-core/audits/dobetterweb/doctype.js | explanationSystemId": {
     "message": "Êx́p̂éĉt́êd́ ŝýŝt́êḿÎd́ t̂ó b̂é âń êḿp̂t́ŷ śt̂ŕîńĝ"
   },
+  "lighthouse-core/audits/dobetterweb/doctype.js | explanationWrongDoctype": {
+    "message": "D̂óĉúm̂én̂t́ ĉón̂t́âín̂ś â d́ôćt̂ýp̂é t̂h́ât́ t̂ŕîǵĝér̂ś q̂úîŕk̂ś-m̂ód̂é"
+  },
   "lighthouse-core/audits/dobetterweb/doctype.js | failureTitle": {
     "message": "P̂áĝé l̂áĉḱŝ t́ĥé ĤT́M̂Ĺ d̂óĉt́ŷṕê, t́ĥúŝ t́r̂íĝǵêŕîńĝ q́ûír̂ḱŝ-ḿôd́ê"
   },

package/types/artifacts.d.ts

@@ -238,6 +238,7 @@ declare module Artifacts {
   interface Accessibility {
     violations: Array<AxeRuleResult>;
     notApplicable: Array<Pick<AxeRuleResult, 'id'>>;
+    passes: Array<Pick<AxeRuleResult, 'id'>>;
     incomplete: Array<AxeRuleResult>;
     version: string;
   }
@@ -251,6 +252,7 @@ declare module Artifacts {
     name: string;
     publicId: string;
     systemId: string;
+    documentCompatMode: string;
   }
 
   interface DOMStats {
@@ -960,6 +962,7 @@ export interface TraceEvent {
       documentLoaderURL?: string;
       frames?: {
         frame: string;
+        url: string;
         parent?: string;
         processId?: number;
       }[];