lighthouse 10.0.2 → 10.1.0-dev.20230323

package/core/audits/prioritize-lcp-image.js

@@ -319,7 +319,7 @@ class PrioritizeLcpImage extends Audit {
       {key: 'wastedMs', valueType: 'timespanMs', label: str_(i18n.UIStrings.columnWastedMs)},
     ];
     const details = Audit.makeOpportunityDetails(headings, results,
-      {overallSavingsMs: wastedMs});
+      {overallSavingsMs: wastedMs, sortedBy: ['wastedMs']});
 
     // If LCP element was an image and had valid network records (regardless of
     // if it should be preloaded), it will be found first in the `initiatorPath`.

package/core/audits/seo/tap-targets.js

@@ -28,7 +28,7 @@ const UIStrings = {
   /** Descriptive title of a Lighthouse audit that provides detail on whether tap targets (like buttons and links) on a page are big enough so they can easily be tapped on a mobile device. This descriptive title is shown when tap targets are not easy to tap on. */
   failureTitle: 'Tap targets are not sized appropriately',
   /** Description of a Lighthouse audit that tells the user why buttons and links need to be big enough and what 'big enough' means. This is displayed after a user expands the section to see more. No character length limits. The last sentence starting with 'Learn' becomes link text to additional documentation. */
-  description: 'Interactive elements like buttons and links should be large enough (48x48px), and have enough space around them, to be easy enough to tap without overlapping onto other elements. [Learn more about tap targets](https://developer.chrome.com/docs/lighthouse/seo/tap-targets/).',
+  description: 'Interactive elements like buttons and links should be large enough (48x48px), or have enough space around them, to be easy enough to tap without overlapping onto other elements. [Learn more about tap targets](https://developer.chrome.com/docs/lighthouse/seo/tap-targets/).',
   /** Label of a table column that identifies tap targets (like buttons and links) that have failed the audit and aren't easy to tap on. */
   tapTargetHeader: 'Tap Target',
   /** Label of a table column that identifies a tap target (like a link or button) that overlaps with another tap target. */

package/core/audits/third-party-summary.js

@@ -243,12 +243,15 @@ class ThirdPartySummary extends Audit {
       };
     }
 
+    const details = Audit.makeTableDetails(headings, results,
+      {...overallSummary, isEntityGrouped: true});
+
     return {
       score: Number(overallSummary.wastedMs <= PASS_THRESHOLD_IN_MS),
       displayValue: str_(UIStrings.displayValue, {
         timeInMs: overallSummary.wastedMs,
       }),
-      details: Audit.makeTableDetails(headings, results, overallSummary),
+      details,
     };
   }
 }

package/core/audits/timing-budget.js

@@ -164,7 +164,8 @@ class TimingBudget extends Audit {
     ];
 
     return {
-      details: Audit.makeTableDetails(headers, this.tableItems(budget, summary)),
+      details: Audit.makeTableDetails(headers, this.tableItems(budget, summary),
+      {sortedBy: ['overBudget']}),
       score: 1,
     };
   }

package/core/audits/uses-rel-preconnect.js

@@ -234,7 +234,7 @@ class UsesRelPreconnectAudit extends Audit {
     ];
 
     const details = Audit.makeOpportunityDetails(headings, results,
-      {overallSavingsMs: maxWasted});
+      {overallSavingsMs: maxWasted, sortedBy: ['wastedMs']});
 
     return {
       score: ByteEfficiencyAudit.scoreForWastedMs(maxWasted),

package/core/audits/uses-rel-preload.js

@@ -240,7 +240,7 @@ class UsesRelPreloadAudit extends Audit {
       {key: 'wastedMs', valueType: 'timespanMs', label: str_(i18n.UIStrings.columnWastedMs)},
     ];
     const details = Audit.makeOpportunityDetails(headings, results,
-      {overallSavingsMs: wastedMs});
+      {overallSavingsMs: wastedMs, sortedBy: ['wastedMs']});
 
     return {
       score: ByteEfficiencyAudit.scoreForWastedMs(wastedMs),

package/core/audits/valid-source-maps.js

@@ -19,7 +19,7 @@ const UIStrings = {
   description: 'Source maps translate minified code to the original source code. This helps ' +
     'developers debug in production. In addition, Lighthouse is able to provide further ' +
     'insights. Consider deploying source maps to take advantage of these benefits. ' +
-    '[Learn more about source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps).',
+    '[Learn more about source maps](https://developer.chrome.com/docs/devtools/javascript/source-maps/).',
   /** Label for a column in a data table. Entries will be URLs to JavaScript source maps. */
   columnMapURL: 'Map URL',
   /** Label for a possible error message indicating that a source map for a large, first-party JavaScript script is missing. */

package/core/audits/work-during-interaction.js

@@ -193,7 +193,7 @@ class WorkDuringInteraction extends Audit {
     ];
 
     return {
-      table: Audit.makeTableDetails(headings, items),
+      table: Audit.makeTableDetails(headings, items, {sortedBy: ['total']}),
       phases,
     };
   }

package/core/computed/metrics/cumulative-layout-shift.d.ts

@@ -13,17 +13,16 @@ declare const CumulativeLayoutShiftComputed: typeof CumulativeLayoutShift & {
         totalCumulativeLayoutShift: number;
     }>;
 };
-/** @typedef {{ts: number, isMainFrame: boolean, weightedScore: number}} LayoutShiftEvent */
 declare class CumulativeLayoutShift {
     /**
      * Returns all LayoutShift events that had no recent input.
      * Only a `weightedScore` per event is returned. For non-main-frame events, this is
      * the only score that matters. For main-frame events, `weighted_score_delta === score`.
      * @see https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/layout/layout_shift_tracker.cc;l=492-495;drc=de3b3a8a8839269c6b44403fa38a13a1ed12fed5
-     * @param {LH.TraceEvent[]} traceEvents
+     * @param {LH.Artifacts.ProcessedTrace} processedTrace
      * @return {Array<LayoutShiftEvent>}
      */
-    static getLayoutShiftEvents(traceEvents: LH.TraceEvent[]): Array<LayoutShiftEvent>;
+    static getLayoutShiftEvents(processedTrace: LH.Artifacts.ProcessedTrace): Array<LayoutShiftEvent>;
     /**
      * Calculates cumulative layout shifts per cluster (session) of LayoutShift
      * events -- where a new cluster is created when there's a gap of more than
@@ -50,4 +49,5 @@ declare class CumulativeLayoutShift {
         totalCumulativeLayoutShift: number;
     }>;
 }
+import { ProcessedTrace } from "../processed-trace.js";
 //# sourceMappingURL=cumulative-layout-shift.d.ts.map

package/core/computed/metrics/cumulative-layout-shift.js

@@ -9,16 +9,18 @@ import {ProcessedTrace} from '../processed-trace.js';
 
 /** @typedef {{ts: number, isMainFrame: boolean, weightedScore: number}} LayoutShiftEvent */
 
+const RECENT_INPUT_WINDOW = 500;
+
 class CumulativeLayoutShift {
   /**
    * Returns all LayoutShift events that had no recent input.
    * Only a `weightedScore` per event is returned. For non-main-frame events, this is
    * the only score that matters. For main-frame events, `weighted_score_delta === score`.
    * @see https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/layout/layout_shift_tracker.cc;l=492-495;drc=de3b3a8a8839269c6b44403fa38a13a1ed12fed5
-   * @param {LH.TraceEvent[]} traceEvents
+   * @param {LH.Artifacts.ProcessedTrace} processedTrace
    * @return {Array<LayoutShiftEvent>}
    */
-  static getLayoutShiftEvents(traceEvents) {
+  static getLayoutShiftEvents(processedTrace) {
     const layoutShiftEvents = [];
 
     // Chromium will set `had_recent_input` if there was recent user input, which
@@ -26,9 +28,20 @@ class CumulativeLayoutShift {
     // Lighthouse changes the emulation size. This results in the first few shift
     // events having `had_recent_input` set, so ignore it for those events.
     // See https://bugs.chromium.org/p/chromium/issues/detail?id=1094974.
-    let ignoreHadRecentInput = true;
+    let mustRespectHadRecentInput = false;
+
+    // Even if emulation was applied before navigating, Chrome will issue a viewport
+    // change event after a navigation starts which is treated as an interaction when
+    // deciding the `had_recent_input` flag. Anything within 500ms of this event should
+    // always be counted for CLS regardless of the `had_recent_input` flag.
+    // See https://bugs.chromium.org/p/chromium/issues/detail?id=1302667
+    let viewportChangeTs = processedTrace.timestamps.timeOrigin;
+    const firstViewportEvent = processedTrace.frameEvents.find(event => event.name === 'viewport');
+    if (firstViewportEvent) {
+      viewportChangeTs = firstViewportEvent.ts;
+    }
 
-    for (const event of traceEvents) {
+    for (const event of processedTrace.frameTreeEvents) {
       if (event.name !== 'LayoutShift' ||
           !event.args.data ||
           event.args.data.is_main_frame === undefined) {
@@ -42,11 +55,10 @@ class CumulativeLayoutShift {
       }
 
       if (event.args.data.had_recent_input) {
-        // `had_recent_input` events aren't used unless currently ignoring.
-        if (!ignoreHadRecentInput) continue;
+        const timing = (event.ts - viewportChangeTs) / 1000;
+        if (timing > RECENT_INPUT_WINDOW || mustRespectHadRecentInput) continue;
       } else {
-        // After a false `had_recent_input`, stop ignoring property.
-        ignoreHadRecentInput = false;
+        mustRespectHadRecentInput = true;
       }
 
       layoutShiftEvents.push({
@@ -106,7 +118,7 @@ class CumulativeLayoutShift {
     const processedTrace = await ProcessedTrace.request(trace, context);
 
     const allFrameShiftEvents =
-        CumulativeLayoutShift.getLayoutShiftEvents(processedTrace.frameTreeEvents);
+        CumulativeLayoutShift.getLayoutShiftEvents(processedTrace);
     const mainFrameShiftEvents = allFrameShiftEvents.filter(e => e.isMainFrame);
 
     // The original Cumulative Layout Shift metric, the sum of all main-frame shift events.

package/core/computed/unused-css.js

@@ -7,6 +7,7 @@
 import {makeComputedArtifact} from './computed-artifact.js';
 import {ByteEfficiencyAudit} from '../audits/byte-efficiency/byte-efficiency-audit.js';
 import {NetworkRecords} from './network-records.js';
+import {Util} from '../../shared/util.js';
 
 const PREVIEW_LENGTH = 100;
 
@@ -87,8 +88,7 @@ class UnusedCSS {
    * @return {string}
    */
   static determineContentPreview(content) {
-    let preview = (content || '')
-        .slice(0, PREVIEW_LENGTH * 5)
+    let preview = Util.truncate(content || '', PREVIEW_LENGTH * 5, '')
         .replace(/( {2,}|\t)+/g, '  ') // remove leading indentation if present
         .replace(/\n\s+}/g, '\n}') // completely remove indentation of closing braces
         .trim(); // trim the leading whitespace
@@ -101,16 +101,17 @@ class UnusedCSS {
           firstRuleStart > firstRuleEnd ||
           firstRuleStart > PREVIEW_LENGTH) {
         // We couldn't determine the first rule-set or it's not within the preview
-        preview = preview.slice(0, PREVIEW_LENGTH) + '...';
+        preview = Util.truncate(preview, PREVIEW_LENGTH);
       } else if (firstRuleEnd < PREVIEW_LENGTH) {
         // The entire first rule-set fits within the preview
-        preview = preview.slice(0, firstRuleEnd + 1) + ' ...';
+        preview = preview.slice(0, firstRuleEnd + 1) + ' …';
       } else {
         // The first rule-set doesn't fit within the preview, just show as many as we can
-        const lastSemicolonIndex = preview.slice(0, PREVIEW_LENGTH).lastIndexOf(';');
+        const truncated = Util.truncate(preview, PREVIEW_LENGTH, '');
+        const lastSemicolonIndex = truncated.lastIndexOf(';');
         preview = lastSemicolonIndex < firstRuleStart ?
-            preview.slice(0, PREVIEW_LENGTH) + '... } ...' :
-            preview.slice(0, lastSemicolonIndex + 1) + ' ... } ...';
+            truncated + '… } …' :
+            preview.slice(0, lastSemicolonIndex + 1) + ' … } …';
       }
     }
 

package/core/config/lr-mobile-config.js

@@ -17,17 +17,6 @@ const config = {
       'bf-cache',
     ],
   },
-  audits: [
-    'metrics/first-contentful-paint-3g',
-  ],
-  categories: {
-    // TODO(bckenny): type extended Config where e.g. category.title isn't required
-    performance: /** @type {LH.Config.CategoryJson} */({
-      auditRefs: [
-        {id: 'first-contentful-paint-3g', weight: 0},
-      ],
-    }),
-  },
 };
 
 export default config;

package/core/gather/driver/prepare.js

@@ -167,10 +167,23 @@ async function prepareTargetForTimespanMode(driver, settings) {
     disableThrottling: false,
     blockedUrlPatterns: undefined,
   });
+  await warmUpIntlSegmenter(driver);
 
   log.timeEnd(status);
 }
 
+/**
+ * Ensure the `Intl.Segmenter` created in `pageFunctions.truncate` is cached by v8 before
+ * recording the trace begins.
+ *
+ * @param {LH.Gatherer.FRTransitionalDriver} driver
+ */
+async function warmUpIntlSegmenter(driver) {
+  await driver.executionContext.evaluate(pageFunctions.truncate, {
+    args: ['aaa', 2],
+  });
+}
+
 /**
  * Prepares a target to be analyzed in navigation mode by enabling protocol domains, emulation, and new document
  * handlers for global APIs or error handling.
@@ -197,6 +210,8 @@ async function prepareTargetForNavigationMode(driver, settings) {
     await shimRequestIdleCallbackOnNewDocument(driver, settings);
   }
 
+  await warmUpIntlSegmenter(driver);
+
   log.timeEnd(status);
 }
 

package/core/gather/gatherers/image-elements.js

@@ -84,6 +84,7 @@ function getHTMLImages(allElements) {
       isPicture,
       loading: element.loading,
       isInShadowDOM: element.getRootNode() instanceof ShadowRoot,
+      fetchPriority: element.fetchPriority,
       // @ts-expect-error - getNodeDetails put into scope via stringification
       node: getNodeDetails(element),
     };

package/core/gather/gatherers/link-elements.js

@@ -70,6 +70,7 @@ function getLinkElementsInDOM() {
       crossOrigin: link.crossOrigin,
       hrefRaw,
       source,
+      fetchPriority: link.fetchPriority,
       // @ts-expect-error - put into scope via stringification
       node: getNodeDetails(link),
     });
@@ -134,6 +135,7 @@ class LinkElements extends FRGatherer {
           as: link.as || '',
           crossOrigin: getCrossoriginFromHeader(link.crossorigin),
           source: 'headers',
+          fetchPriority: link.fetchpriority,
           node: null,
         });
       }

package/core/lib/asset-saver.js

@@ -7,7 +7,6 @@
 import fs from 'fs';
 import path from 'path';
 import stream from 'stream';
-import util from 'util';
 
 import log from 'lighthouse-logger';
 
@@ -18,15 +17,6 @@ import {NetworkAnalysis} from '../computed/network-analysis.js';
 import {LoadSimulator} from '../computed/load-simulator.js';
 import {LighthouseError} from '../lib/lh-error.js';
 
-const {promisify} = util;
-
-// Rollup does not support `promisfy` or `stream.pipeline`. Bundled files
-// don't need anything in this file except for `stringifyReplacer`, so a check for
-// truthiness before using is enough.
-// TODO: Can remove promisify(pipeline) in Node 15.
-// https://nodejs.org/api/stream.html#streams-promises-api
-const pipeline = promisify && promisify(stream.pipeline);
-
 const optionsFilename = 'options.json';
 const artifactsFilename = 'artifacts.json';
 const traceSuffix = '.trace.json';
@@ -349,7 +339,7 @@ async function saveTrace(traceData, traceFilename) {
   const traceIter = traceJsonGenerator(traceData);
   const writeStream = fs.createWriteStream(traceFilename);
 
-  return pipeline(traceIter, writeStream);
+  return stream.promises.pipeline(traceIter, writeStream);
 }
 
 /**
@@ -361,7 +351,7 @@ async function saveTrace(traceData, traceFilename) {
 function saveDevtoolsLog(devtoolsLog, devtoolLogFilename) {
   const writeStream = fs.createWriteStream(devtoolLogFilename);
 
-  return pipeline(function* () {
+  return stream.promises.pipeline(function* () {
     yield* arrayOfObjectsJsonGenerator(devtoolsLog);
     yield '\n';
   }, writeStream);

package/core/lib/i18n/i18n.d.ts

@@ -57,7 +57,7 @@ export namespace UIStrings {
  * 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
+ * can be overridden 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

package/core/lib/i18n/i18n.js

@@ -123,7 +123,7 @@ const UIStrings = {
  * 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
+ * can be overridden 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

package/core/lib/lighthouse-compatibility.js

@@ -81,6 +81,23 @@ function upgradeLhrForCompatibility(lhr) {
         }
       }
 
+      // In 10.0, third-party-summary deprecated entity: LinkValue and switched to entity name string
+      if (audit.id === 'third-party-summary') {
+        if (audit.details.type === 'opportunity' || audit.details.type === 'table') {
+          const {headings, items} = audit.details;
+          if (headings[0].valueType === 'link') {
+            // Apply upgrade only if we are dealing with an older version (valueType=link marker).
+            headings[0].valueType = 'text';
+            for (const item of items) {
+              if (typeof item.entity === 'object' && item.entity.type === 'link') {
+                item.entity = item.entity.text;
+              }
+            }
+            audit.details.isEntityGrouped = true;
+          }
+        }
+      }
+
       // TODO: convert printf-style displayValue.
       // Added:   #5099, v3
       // Removed: #6767, v4

package/core/lib/network-request.js

@@ -225,7 +225,7 @@ class NetworkRequest {
     this.isSecure = UrlUtils.isSecureScheme(this.parsedURL.scheme);
 
     this.rendererStartTime = data.timestamp * 1000;
-    // Expected to be overriden with better value in `_recomputeTimesWithResourceTiming`.
+    // Expected to be overridden with better value in `_recomputeTimesWithResourceTiming`.
     this.networkRequestTime = this.rendererStartTime;
 
     this.requestMethod = data.request.method;

package/core/lib/page-functions.d.ts

@@ -10,16 +10,12 @@ export namespace pageFunctions {
     export { isPositionFixed };
     export { wrapRequestIdleCallback };
     export { getBoundingClientRect };
+    export { truncate };
 }
 /**
  * `typed-query-selector`'s CSS selector parser.
  */
 export type ParseSelector<T extends string> = import('typed-query-selector/parser').ParseSelector<T>;
-/**
- * @license Copyright 2018 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.
- */
 /**
  * @fileoverview
  * Helper functions that are passed by `toString()` by Driver to be evaluated in target page.
@@ -65,6 +61,9 @@ declare function getElementsInDocument<T extends string>(selector: T): import("t
  * @return {string}
  */
 declare function getOuterHTMLSnippet(element: Element | ShadowRoot, ignoreAttrs?: Array<string> | undefined, snippetCharacterLimit?: number): string;
+declare namespace getOuterHTMLSnippet {
+    function toString(): string;
+}
 /**
  * Computes a memory/CPU performance benchmark index to determine rough device class.
  * @see https://github.com/GoogleChrome/lighthouse/issues/9085
@@ -125,6 +124,9 @@ declare function getNodeSelector(element: Element): string;
  * @return {string | null}
  */
 declare function getNodeLabel(element: Element): string | null;
+declare namespace getNodeLabel {
+    function toString(): string;
+}
 /**
  * This function checks if an element or an ancestor of an element is `position:fixed`.
  * In addition we ensure that the element is capable of behaving as a `position:fixed`
@@ -145,5 +147,15 @@ declare function wrapRequestIdleCallback(cpuSlowdownMultiplier: number): void;
  * @return {LH.Artifacts.Rect}
  */
 declare function getBoundingClientRect(element: Element): LH.Artifacts.Rect;
+/**
+ *
+ * @param {string} string
+ * @param {number} characterLimit
+ * @return {string}
+ */
+declare function truncate(string: string, characterLimit: number): string;
+declare namespace truncate {
+    function toString(): string;
+}
 export {};
 //# sourceMappingURL=page-functions.d.ts.map

package/core/lib/page-functions.js

@@ -4,6 +4,8 @@
  * 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 {Util} from '../../shared/util.js';
+
 /**
  * @fileoverview
  * Helper functions that are passed by `toString()` by Driver to be evaluated in target page.
@@ -132,10 +134,9 @@ function getOuterHTMLSnippet(element, ignoreAttrs = [], snippetCharacterLimit =
       }
 
       // Elide attribute value if too long.
-      if (attributeValue.length > ATTRIBUTE_CHAR_LIMIT) {
-        attributeValue = attributeValue.slice(0, ATTRIBUTE_CHAR_LIMIT - 1) + '…';
-        dirty = true;
-      }
+      const truncatedString = truncate(attributeValue, ATTRIBUTE_CHAR_LIMIT);
+      if (truncatedString !== attributeValue) dirty = true;
+      attributeValue = truncatedString;
 
       if (dirty) {
         // Style attributes can be blocked by the CSP if they are set via `setAttribute`.
@@ -372,22 +373,6 @@ function isPositionFixed(element) {
  * @return {string | null}
  */
 function getNodeLabel(element) {
-  // Inline so that audits that import getNodeLabel don't
-  // also need to import truncate
-  /**
-   * @param {string} str
-   * @param {number} maxLength
-   * @return {string}
-   */
-  function truncate(str, maxLength) {
-    if (str.length <= maxLength) {
-      return str;
-    }
-    // Take advantage of string iterator multi-byte character awareness.
-    // Regular `.slice` will ignore unicode character boundaries and lead to malformed text.
-    return Array.from(str).slice(0, maxLength - 1).join('') + '…';
-  }
-
   const tagName = element.tagName.toLowerCase();
   // html and body content is too broad to be useful, since they contain all page content
   if (tagName !== 'html' && tagName !== 'body') {
@@ -518,14 +503,47 @@ function getNodeDetails(element) {
   return details;
 }
 
+/**
+ *
+ * @param {string} string
+ * @param {number} characterLimit
+ * @return {string}
+ */
+function truncate(string, characterLimit) {
+  return Util.truncate(string, characterLimit);
+}
+
+/** @type {string} */
+const truncateRawString = truncate.toString();
+truncate.toString = () => `function truncate(string, characterLimit) {
+  const Util = { ${Util.truncate} };
+  return (${truncateRawString})(string, characterLimit);
+}`;
+
+/** @type {string} */
+const getNodeLabelRawString = getNodeLabel.toString();
+getNodeLabel.toString = () => `function getNodeLabel(element) {
+  ${truncate};
+  return (${getNodeLabelRawString})(element);
+}`;
+
+/** @type {string} */
+const getOuterHTMLSnippetRawString = getOuterHTMLSnippet.toString();
+// eslint-disable-next-line max-len
+getOuterHTMLSnippet.toString = () => `function getOuterHTMLSnippet(element, ignoreAttrs = [], snippetCharacterLimit = 500) {
+  ${truncate};
+  return (${getOuterHTMLSnippetRawString})(element, ignoreAttrs, snippetCharacterLimit);
+}`;
+
 /** @type {string} */
 const getNodeDetailsRawString = getNodeDetails.toString();
 getNodeDetails.toString = () => `function getNodeDetails(element) {
+  ${truncate};
   ${getNodePath};
   ${getNodeSelector};
   ${getBoundingClientRect};
-  ${getOuterHTMLSnippet};
-  ${getNodeLabel};
+  ${getOuterHTMLSnippetRawString};
+  ${getNodeLabelRawString};
   return (${getNodeDetailsRawString})(element);
 }`;
 
@@ -541,4 +559,5 @@ export const pageFunctions = {
   isPositionFixed,
   wrapRequestIdleCallback,
   getBoundingClientRect,
+  truncate,
 };

package/core/lib/tracehouse/trace-processor.d.ts

@@ -179,6 +179,14 @@ export class TraceProcessor {
      * @return {evt is LCPCandidateEvent}
      */
     static isLCPCandidateEvent(evt: LH.TraceEvent): evt is LCPCandidateEvent;
+    /**
+     * The associated frame ID is set in different locations for different trace events.
+     * This function checks all known locations for the frame ID and returns `undefined` if it's not found.
+     *
+     * @param {LH.TraceEvent} evt
+     * @return {string|undefined}
+     */
+    static getFrameId(evt: LH.TraceEvent): string | undefined;
     /**
      * Returns the maximum LCP event across all frames in `events`.
      * Sets `invalidated` flag if LCP of every frame is invalidated.

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

@@ -506,14 +506,22 @@ class TraceProcessor {
     const pidToTid = new Map();
 
     for (const pid of new Set(mainFramePids)) {
-      // While renderer tids are generally predictable, we'll doublecheck it
-      const threadNameEvt = keyEvents.find(e =>
+      const threadEvents = keyEvents.filter(e =>
         e.cat === '__metadata' &&
         e.pid === pid &&
         e.ph === 'M' &&
-        e.name === 'thread_name' &&
-        e.args.name === 'CrRendererMain'
+        e.name === 'thread_name'
       );
+
+      // While renderer tids are generally predictable, we'll doublecheck it
+      let threadNameEvt = threadEvents.find(e => e.args.name === 'CrRendererMain');
+
+      // `CrRendererMain` can be missing if chrome is launched with the `--single-process` flag.
+      // In this case, page tasks will be run in the browser thread.
+      if (!threadNameEvt) {
+        threadNameEvt = threadEvents.find(e => e.args.name === 'CrBrowserMain');
+      }
+
       const tid = threadNameEvt?.tid;
 
       if (!tid) {
@@ -559,6 +567,19 @@ class TraceProcessor {
     );
   }
 
+  /**
+   * The associated frame ID is set in different locations for different trace events.
+   * This function checks all known locations for the frame ID and returns `undefined` if it's not found.
+   *
+   * @param {LH.TraceEvent} evt
+   * @return {string|undefined}
+   */
+  static getFrameId(evt) {
+    return evt.args?.data?.frame ||
+      evt.args.data?.frameID ||
+      evt.args.frame;
+  }
+
   /**
    * Returns the maximum LCP event across all frames in `events`.
    * Sets `invalidated` flag if LCP of every frame is invalidated.
@@ -704,13 +725,13 @@ class TraceProcessor {
     // Filter to just events matching the main frame ID, just to make sure.
     /** @param {LH.TraceEvent} e */
     function associatedToMainFrame(e) {
-      const frameId = e.args?.data?.frame || e.args.frame;
+      const frameId = TraceProcessor.getFrameId(e);
       return frameId === mainFrameInfo.frameId;
     }
 
     /** @param {LH.TraceEvent} e */
     function associatedToAllFrames(e) {
-      const frameId = e.args?.data?.frame || e.args.frame;
+      const frameId = TraceProcessor.getFrameId(e);
       return frameId ? inspectedTreeFrameIds.includes(frameId) : false;
     }
     const frameEvents = keyEvents.filter(e => associatedToMainFrame(e));

package/core/lib/url-utils.js

@@ -138,7 +138,7 @@ class UrlUtils {
   static elideDataURI(url) {
     try {
       const parsed = new URL(url);
-      return parsed.protocol === 'data:' ? url.slice(0, 100) : url;
+      return parsed.protocol === 'data:' ? Util.truncate(url, 100) : url;
     } catch (e) {
       return url;
     }

package/core/runner.js

@@ -170,6 +170,7 @@ class Runner {
       // Reduce payload size in LHR JSON by omitting whats falsy.
       if (entity === classifiedEntities.firstParty) shortEntity.isFirstParty = true;
       if (entity.isUnrecognized) shortEntity.isUnrecognized = true;
+      if (entity.category) shortEntity.category = entity.category;
       entities.push(shortEntity);
     }