lighthouse 9.5.0-dev.20220330 → 9.5.0-dev.20220402

package/lighthouse-cli/test/smokehouse/lighthouse-runners/devtools.js

@@ -38,13 +38,15 @@ async function spawnAndLog(logs, command, args) {
     spawnHandle.on('error', (error) => {
       logs.push(`ERROR: ${error.toString()}`);
     });
+    spawnHandle.stdout.setEncoding('utf8');
     spawnHandle.stdout.on('data', data => {
       process.stdout.write(data);
-      logs.push(`STDOUT: ${data.toString()}`);
+      logs.push(`STDOUT: ${data}`);
     });
+    spawnHandle.stderr.setEncoding('utf8');
     spawnHandle.stderr.on('data', data => {
       process.stderr.write(data);
-      logs.push(`STDERR: ${data.toString()}`);
+      logs.push(`STDERR: ${data}`);
     });
   });
   await promise;

package/lighthouse-core/audits/preload-lcp-image.js

@@ -17,8 +17,8 @@ const UIStrings = {
   /** Title of a lighthouse audit that tells a user to preload an image in order to improve their LCP time. */
   title: 'Preload Largest Contentful Paint image',
   /** Description of a lighthouse audit that tells a user to preload an image in order to improve their LCP time.  */
-  description: 'Preload the image used by ' +
-    'the LCP element in order to improve your LCP time. [Learn more](https://web.dev/optimize-lcp/#preload-important-resources).',
+  description: 'If the LCP element is dynamically added to the page, you should preload the ' +
+    'image in order to improve LCP. [Learn more](https://web.dev/optimize-lcp/#preload-important-resources).',
 };
 
 const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);

package/lighthouse-core/audits/script-treemap-data.js

@@ -148,10 +148,10 @@ class ScriptTreemapDataAudit extends Audit {
    * Returns nodes where the first level of nodes are URLs.
    * Every external script has a node.
    * All inline scripts are combined into a single node.
-   * If a script has a source map, that node will be set by makeNodeFromSourceMapData.
+   * If a script has a source map, that node will be created by makeScriptNode.
    *
    * Example return result:
-     - index.html (inlines scripts)
+     - index.html (inline scripts)
      - main.js
      - - webpack://
      - - - react.js
@@ -165,43 +165,18 @@ class ScriptTreemapDataAudit extends Audit {
   static async makeNodes(artifacts, context) {
     /** @type {LH.Treemap.Node[]} */
     const nodes = [];
-
-    let inlineScriptLength = 0;
-    for (const script of artifacts.Scripts) {
-      // Combine so that inline scripts show up as a single root node.
-      if (script.url === artifacts.URL.finalUrl) {
-        inlineScriptLength += (script.content || '').length;
-      }
-    }
-    if (inlineScriptLength) {
-      const name = artifacts.URL.finalUrl;
-      nodes.push({
-        name,
-        resourceBytes: inlineScriptLength,
-      });
-    }
-
+    /** @type {Map<string, LH.Treemap.Node>} */
+    const htmlNodesByFrameId = new Map();
     const bundles = await JsBundles.request(artifacts, context);
     const duplicationByPath = await ModuleDuplication.request(artifacts, context);
 
     for (const script of artifacts.Scripts) {
-      if (script.url === artifacts.URL.finalUrl) continue; // Handled above.
+      if (script.scriptLanguage !== 'JavaScript') continue;
 
       const name = script.url;
       const bundle = bundles.find(bundle => script.scriptId === bundle.script.scriptId);
-      const scriptCoverage = /** @type {Omit<LH.Crdp.Profiler.ScriptCoverage, "url"> | undefined} */
+      const scriptCoverage = /** @type {LH.Artifacts['JsUsage'][string] | undefined} */
         (artifacts.JsUsage[script.scriptId]);
-      if (!bundle && !scriptCoverage) {
-        // No bundle and no coverage information, so simply make a single node
-        // detailing how big the script is.
-
-        nodes.push({
-          name,
-          resourceBytes: script.length || 0,
-        });
-        continue;
-      }
-
       const unusedJavascriptSummary = scriptCoverage ?
         await UnusedJavaScriptSummary.request(
           {scriptId: script.scriptId, scriptCoverage, bundle}, context) :
@@ -259,7 +234,31 @@ class ScriptTreemapDataAudit extends Audit {
         };
       }
 
-      nodes.push(node);
+      // If this is an inline script, place the node inside a top-level (aka depth-one) node.
+      // Also separate each iframe / the main page's inline scripts into their own top-level nodes.
+      const isInlineHtmlScript = script.startColumn || script.startLine;
+      if (isInlineHtmlScript) {
+        let htmlNode = htmlNodesByFrameId.get(script.executionContextAuxData.frameId);
+        if (!htmlNode) {
+          htmlNode = {
+            name,
+            resourceBytes: 0,
+            unusedBytes: undefined,
+            children: [],
+          };
+          htmlNodesByFrameId.set(script.executionContextAuxData.frameId, htmlNode);
+          nodes.push(htmlNode);
+        }
+        htmlNode.resourceBytes += node.resourceBytes;
+        if (node.unusedBytes) htmlNode.unusedBytes = (htmlNode.unusedBytes || 0) + node.unusedBytes;
+        node.name = script.content ?
+          '(inline) ' + script.content.trimStart().substring(0, 15) + '…' :
+          '(inline)';
+        htmlNode.children?.push(node);
+      } else {
+        // Non-inline scripts each have their own top-level node.
+        nodes.push(node);
+      }
     }
 
     return nodes;

package/lighthouse-core/fraggle-rock/gather/runner-helpers.js

@@ -15,7 +15,6 @@
  * @property {LH.Gatherer.GatherMode} gatherMode
  * @property {Map<string, LH.ArbitraryEqualityMap>} computedCache
  * @property {LH.Config.Settings} settings
- * @property {string} url
  */
 
 /** @typedef {Record<string, Promise<any>>} IntermediateArtifacts */
@@ -75,7 +74,6 @@ async function collectPhaseArtifacts(options) {
     gatherMode,
     computedCache,
     settings,
-    url,
   } = options;
   const priorPhase = phaseToPriorPhase[phase];
   const priorPhaseArtifacts = (priorPhase && artifactState[priorPhase]) || {};
@@ -92,7 +90,6 @@ async function collectPhaseArtifacts(options) {
         : /** @type {Dependencies} */ ({});
 
       return gatherer[phase]({
-        url,
         gatherMode,
         driver,
         baseArtifacts,

package/lighthouse-core/fraggle-rock/gather/snapshot-runner.js

@@ -46,7 +46,6 @@ async function snapshotGather(options) {
       const artifactDefinitions = config.artifacts || [];
       const artifactState = getEmptyArtifactState();
       await collectPhaseArtifacts({
-        url,
         phase: 'getArtifact',
         gatherMode: 'snapshot',
         driver,

package/lighthouse-core/fraggle-rock/gather/timespan-runner.js

@@ -37,7 +37,6 @@ async function startTimespanGather(options) {
   const artifactState = getEmptyArtifactState();
   /** @type {Omit<import('./runner-helpers.js').CollectPhaseArtifactOptions, 'phase'>} */
   const phaseOptions = {
-    url: initialUrl,
     driver,
     artifactDefinitions,
     artifactState,
@@ -54,7 +53,6 @@ async function startTimespanGather(options) {
   return {
     async endTimespanGather() {
       const finalUrl = await driver.url();
-      phaseOptions.url = finalUrl;
 
       const runnerOptions = {config, computedCache};
       const artifacts = await Runner.gather(

package/lighthouse-core/gather/connections/cri.js

@@ -88,6 +88,7 @@ class CriConnection extends Connection {
         path: '/json/' + command,
       }, response => {
         let data = '';
+        response.setEncoding('utf8');
         response.on('data', chunk => {
           data += chunk;
         });

package/lighthouse-core/gather/gatherers/seo/robots-txt.js

@@ -46,7 +46,8 @@ class RobotsTxt extends FRGatherer {
       });
     }
 
-    const robotsUrl = new URL('/robots.txt', passContext.url).href;
+    const {finalUrl} = passContext.baseArtifacts.URL;
+    const robotsUrl = new URL('/robots.txt', finalUrl).href;
     await passContext.driver.fetcher.enable();
     return passContext.driver.fetcher.fetchResource(robotsUrl)
       .catch(err => ({status: null, content: null, errorMessage: err.message}));

package/lighthouse-core/gather/gatherers/web-app-manifest.js

@@ -94,8 +94,8 @@ class WebAppManifest extends FRGatherer {
    */
   getArtifact(context) {
     const driver = context.driver;
-
-    return WebAppManifest.getWebAppManifest(driver.defaultSession, context.url);
+    const {finalUrl} = context.baseArtifacts.URL;
+    return WebAppManifest.getWebAppManifest(driver.defaultSession, finalUrl);
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "9.5.0-dev.20220330",
+  "version": "9.5.0-dev.20220402",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {
@@ -89,8 +89,8 @@
     "compile-proto": "protoc --python_out=./ ./proto/lighthouse-result.proto && mv ./proto/*_pb2.py ./proto/scripts || (echo \"❌ Install protobuf ≥ 3.7.1 to compile the proto file.\" && false)",
     "build-proto-roundtrip": "mkdir -p .tmp && cross-env PROTOCOL_BUFFERS_PYTHON_IMPLEMENTATION_VERSION=2 python proto/scripts/json_roundtrip_via_proto.py",
     "static-server": "node lighthouse-cli/test/fixtures/static-server.js",
-    "serve-dist": "cd dist && python -m SimpleHTTPServer",
-    "serve-gh-pages": "cd dist/gh-pages && python -m SimpleHTTPServer",
+    "serve-dist": "cd dist && python3 -m http.server",
+    "serve-gh-pages": "cd dist/gh-pages && python3 -m http.server",
     "serve-treemap": "yarn serve-gh-pages",
     "serve-viewer": "yarn serve-gh-pages",
     "flow-report": "yarn build-report --flow && node ./lighthouse-core/scripts/build-test-flow-report.js"
@@ -203,7 +203,7 @@
     "robots-parser": "^3.0.0",
     "semver": "^5.3.0",
     "speedline-core": "^1.4.3",
-    "third-party-web": "^0.12.7",
+    "third-party-web": "^0.15.0",
     "ws": "^7.0.0",
     "yargs": "^17.3.1",
     "yargs-parser": "^21.0.0"

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

@@ -1272,7 +1272,7 @@
     "message": "Fonts with `font-display: optional` are preloaded"
   },
   "lighthouse-core/audits/preload-lcp-image.js | description": {
-    "message": "Preload the image used by the LCP element in order to improve your LCP time. [Learn more](https://web.dev/optimize-lcp/#preload-important-resources)."
+    "message": "If the LCP element is dynamically added to the page, you should preload the image in order to improve LCP. [Learn more](https://web.dev/optimize-lcp/#preload-important-resources)."
   },
   "lighthouse-core/audits/preload-lcp-image.js | title": {
     "message": "Preload Largest Contentful Paint image"

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

@@ -1272,7 +1272,7 @@
     "message": "F̂ón̂t́ŝ ẃît́ĥ `font-display: optional` ár̂é p̂ŕêĺôád̂éd̂"
   },
   "lighthouse-core/audits/preload-lcp-image.js | description": {
-    "message": "P̂ŕêĺôád̂ t́ĥé îḿâǵê úŝéd̂ b́ŷ t́ĥé L̂ĆP̂ él̂ém̂én̂t́ îń ôŕd̂ér̂ t́ô ím̂ṕr̂óv̂é ŷóûŕ L̂ĆP̂ t́îḿê. [Ĺêár̂ń m̂ór̂é](https://web.dev/optimize-lcp/#preload-important-resources)."
+    "message": "Îf́ t̂h́ê ĹĈṔ êĺêḿêńt̂ íŝ d́ŷńâḿîćâĺl̂ý âd́d̂éd̂ t́ô t́ĥé p̂áĝé, ŷóû śĥóûĺd̂ ṕr̂él̂óâd́ t̂h́ê ím̂áĝé îń ôŕd̂ér̂ t́ô ím̂ṕr̂óv̂é L̂ĆP̂. [Ĺêár̂ń m̂ór̂é](https://web.dev/optimize-lcp/#preload-important-resources)."
   },
   "lighthouse-core/audits/preload-lcp-image.js | title": {
     "message": "P̂ŕêĺôád̂ Ĺâŕĝéŝt́ Ĉón̂t́êńt̂f́ûĺ P̂áîńt̂ ím̂áĝé"

package/types/gatherer.d.ts

@@ -47,8 +47,6 @@ declare module Gatherer {
 
   /** The limited context interface shared between pre and post Fraggle Rock Lighthouse. */
   interface FRTransitionalContext<TDependencies extends DependencyKey = DefaultDependenciesKey> {
-    /** The URL of the page that is currently active. Might be `about:blank` in the before phases */
-    url: string;
     /** The gather mode Lighthouse is currently in. */
     gatherMode: GatherMode;
     /** The connection to the page being analyzed. */