lighthouse 12.5.1 → 12.6.0

package/report/renderer/crc-details-renderer.js

@@ -14,46 +14,26 @@ import {Globals} from './report-globals.js';
 /** @typedef {import('./dom.js').DOM} DOM */
 /** @typedef {import('./details-renderer.js').DetailsRenderer} DetailsRenderer */
 /**
- * @typedef CRCSegment
- * @property {LH.Audit.Details.SimpleCriticalRequestNode[string]} node
+ * @typedef NetworkSegment
+ * @property {LH.Audit.Details.SimpleCriticalRequestNode[string]|LH.Audit.Details.NetworkNode[string]} node
  * @property {boolean} isLastChild
  * @property {boolean} hasChildren
- * @property {number} startTime
- * @property {number} transferSize
  * @property {boolean[]} treeMarkers
  */
 
 class CriticalRequestChainRenderer {
-  /**
-   * Create render context for critical-request-chain tree display.
-   * @param {LH.Audit.Details.SimpleCriticalRequestNode} tree
-   * @return {{tree: LH.Audit.Details.SimpleCriticalRequestNode, startTime: number, transferSize: number}}
-   */
-  static initTree(tree) {
-    let startTime = 0;
-    const rootNodes = Object.keys(tree);
-    if (rootNodes.length > 0) {
-      const node = tree[rootNodes[0]];
-      startTime = node.request.startTime;
-    }
-
-    return {tree, startTime, transferSize: 0};
-  }
-
   /**
    * Helper to create context for each critical-request-chain node based on its
    * parent. Calculates if this node is the last child, whether it has any
    * children itself and what the tree looks like all the way back up to the root,
    * so the tree markers can be drawn correctly.
-   * @param {LH.Audit.Details.SimpleCriticalRequestNode} parent
+   * @param {LH.Audit.Details.SimpleCriticalRequestNode|LH.Audit.Details.NetworkNode} parent
    * @param {string} id
-   * @param {number} startTime
-   * @param {number} transferSize
    * @param {Array<boolean>=} treeMarkers
    * @param {boolean=} parentIsLastChild
-   * @return {CRCSegment}
+   * @return {NetworkSegment}
    */
-  static createSegment(parent, id, startTime, transferSize, treeMarkers, parentIsLastChild) {
+  static createSegment(parent, id, treeMarkers, parentIsLastChild) {
     const node = parent[id];
     const siblings = Object.keys(parent);
     const isLastChild = siblings.indexOf(id) === (siblings.length - 1);
@@ -71,8 +51,6 @@ class CriticalRequestChainRenderer {
       node,
       isLastChild,
       hasChildren,
-      startTime,
-      transferSize: transferSize + node.request.transferSize,
       treeMarkers: newTreeMarkers,
     };
   }
@@ -80,15 +58,42 @@ class CriticalRequestChainRenderer {
   /**
    * Creates the DOM for a tree segment.
    * @param {DOM} dom
-   * @param {CRCSegment} segment
+   * @param {NetworkSegment} segment
    * @param {DetailsRenderer} detailsRenderer
    * @return {Node}
    */
   static createChainNode(dom, segment, detailsRenderer) {
     const chainEl = dom.createComponent('crcChain');
 
+    // This can be either the duration or the chain end time depending on the detail type.
+    let nodeTiming;
+    let nodeTransferSize;
+    let nodeUrl;
+    let alwaysShowTiming;
+    let highlightLongest;
+
+    // `segment.node.request` indicates that this is a legacy critical request chain details node.
+    // For historical reasons, the legacy CRC will only show details for leaf nodes and will show
+    // the leaf node request duration rather than the duration of the entire tree.
+    if ('request' in segment.node) {
+      nodeTransferSize = segment.node.request.transferSize;
+      nodeUrl = segment.node.request.url;
+      nodeTiming = (segment.node.request.endTime - segment.node.request.startTime) * 1000;
+      alwaysShowTiming = false;
+    } else {
+      nodeTransferSize = segment.node.transferSize;
+      nodeUrl = segment.node.url;
+      nodeTiming = segment.node.navStartToEndTime;
+      alwaysShowTiming = true;
+      highlightLongest = segment.node.isLongest;
+    }
+
     // Hovering over request shows full URL.
-    dom.find('.lh-crc-node', chainEl).setAttribute('title', segment.node.request.url);
+    const nodeEl = dom.find('.lh-crc-node', chainEl);
+    nodeEl.setAttribute('title', nodeUrl);
+    if (highlightLongest) {
+      nodeEl.classList.add('lh-crc-node__longest');
+    }
 
     const treeMarkeEl = dom.find('.lh-crc-node__tree-marker', chainEl);
 
@@ -117,18 +122,17 @@ class CriticalRequestChainRenderer {
     );
 
     // Fill in url, host, and request size information.
-    const url = segment.node.request.url;
-    const linkEl = detailsRenderer.renderTextURL(url);
+    const linkEl = detailsRenderer.renderTextURL(nodeUrl);
     const treevalEl = dom.find('.lh-crc-node__tree-value', chainEl);
     treevalEl.append(linkEl);
 
-    if (!segment.hasChildren) {
-      const {startTime, endTime, transferSize} = segment.node.request;
+
+    if (!segment.hasChildren || alwaysShowTiming) {
       const span = dom.createElement('span', 'lh-crc-node__chain-duration');
       span.textContent =
-        ' - ' + Globals.i18n.formatMilliseconds((endTime - startTime) * 1000) + ', ';
-      const span2 = dom.createElement('span', 'lh-crc-node__chain-duration');
-      span2.textContent = Globals.i18n.formatBytesToKiB(transferSize, 0.01);
+        ' - ' + Globals.i18n.formatMilliseconds(nodeTiming) + ', ';
+      const span2 = dom.createElement('span', 'lh-crc-node__chain-size');
+      span2.textContent = Globals.i18n.formatBytesToKiB(nodeTransferSize, 0.01);
 
       treevalEl.append(span, span2);
     }
@@ -139,26 +143,24 @@ class CriticalRequestChainRenderer {
   /**
    * Recursively builds a tree from segments.
    * @param {DOM} dom
-   * @param {DocumentFragment} tmpl
-   * @param {CRCSegment} segment
+   * @param {NetworkSegment} segment
    * @param {Element} elem Parent element.
-   * @param {LH.Audit.Details.CriticalRequestChain} details
    * @param {DetailsRenderer} detailsRenderer
    */
-  static buildTree(dom, tmpl, segment, elem, details, detailsRenderer) {
+  static buildTree(dom, segment, elem, detailsRenderer) {
     elem.append(CRCRenderer.createChainNode(dom, segment, detailsRenderer));
     if (segment.node.children) {
       for (const key of Object.keys(segment.node.children)) {
         const childSegment = CRCRenderer.createSegment(segment.node.children, key,
-          segment.startTime, segment.transferSize, segment.treeMarkers, segment.isLastChild);
-        CRCRenderer.buildTree(dom, tmpl, childSegment, elem, details, detailsRenderer);
+          segment.treeMarkers, segment.isLastChild);
+        CRCRenderer.buildTree(dom, childSegment, elem, detailsRenderer);
       }
     }
   }
 
   /**
    * @param {DOM} dom
-   * @param {LH.Audit.Details.CriticalRequestChain} details
+   * @param {LH.Audit.Details.CriticalRequestChain|LH.Audit.Details.NetworkTree} details
    * @param {DetailsRenderer} detailsRenderer
    * @return {Element}
    */
@@ -174,10 +176,10 @@ class CriticalRequestChainRenderer {
         Globals.i18n.formatMilliseconds(details.longestChain.duration);
 
     // Construct visual tree.
-    const root = CRCRenderer.initTree(details.chains);
-    for (const key of Object.keys(root.tree)) {
-      const segment = CRCRenderer.createSegment(root.tree, key, root.startTime, root.transferSize);
-      CRCRenderer.buildTree(dom, tmpl, segment, containerEl, details, detailsRenderer);
+    const tree = details.chains;
+    for (const key of Object.keys(tree)) {
+      const segment = CRCRenderer.createSegment(tree, key);
+      CRCRenderer.buildTree(dom, segment, containerEl, detailsRenderer);
     }
 
     return dom.find('.lh-crc-container', tmpl);

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

@@ -6,7 +6,7 @@ export class DetailsRenderer {
     constructor(dom: DOM, options?: {
         fullPageScreenshot?: LH.Result.FullPageScreenshot;
         entities?: LH.Result.Entities;
-    } | undefined);
+    });
     _dom: import("./dom.js").DOM;
     _fullPageScreenshot: import("../../types/lhr/lhr.js").default.FullPageScreenshot | undefined;
     _entities: import("../../types/lhr/lhr.js").default.Entities | undefined;

package/report/renderer/details-renderer.js

@@ -50,6 +50,7 @@ export class DetailsRenderer {
       case 'table':
       case 'opportunity':
         return this._renderTable(details);
+      case 'network-tree':
       case 'criticalrequestchain':
         return CriticalRequestChainRenderer.render(this._dom, details, this);
 
@@ -547,6 +548,11 @@ export class DetailsRenderer {
     const listContainer = this._dom.createElement('div', 'lh-list');
 
     details.items.forEach(item => {
+      if (item.type === 'node') {
+        listContainer.append(this.renderNode(item));
+        return;
+      }
+
       const listItem = this.render(item);
       if (!listItem) return;
       listContainer.append(listItem);

package/report/renderer/dom.js

@@ -345,6 +345,13 @@ export class DOM {
     const parent = section.parentNode;
     if (!parent) return;
 
+    // LH Report enforces that only the first instance of a component will include the styles.
+    // If these single-instance happen to be in `section` then they could be lost once `section` is
+    // removed from the DOM.
+    // Therefore we need to transfer any styles that only exist in `section` into `newSection`.
+    const stylesToTransfer = section.querySelectorAll('style');
+    newSection.append(...stylesToTransfer);
+
     parent.insertBefore(newSection, section);
     section.remove();
   }

package/report/renderer/features-util.d.ts

@@ -8,6 +8,6 @@
  * @param {DOM} dom
  * @param {boolean} [force]
  */
-export function toggleDarkTheme(dom: DOM, force?: boolean | undefined): void;
+export function toggleDarkTheme(dom: DOM, force?: boolean): void;
 export type DOM = import("./dom.js").DOM;
 //# sourceMappingURL=features-util.d.ts.map

package/report/renderer/performance-category-renderer.d.ts

@@ -1,4 +1,9 @@
+/**
+ * @typedef {('DEFAULT'|'AUDITS'|'INSIGHTS')} InsightsExperimentState
+ */
 export class PerformanceCategoryRenderer extends CategoryRenderer {
+    /** @type InsightsExperimentState*/
+    _memoryInsightToggleState: InsightsExperimentState;
     /**
      * @param {LH.ReportResult.AuditRef} audit
      * @return {!Element}
@@ -23,6 +28,26 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
         overallImpact: number;
         overallLinearImpact: number;
     };
+    /**
+     * @param {InsightsExperimentState} newState
+    **/
+    _persistInsightToggleToStorage(newState: InsightsExperimentState): void;
+    /**
+     * @returns {InsightsExperimentState}
+    **/
+    _getInsightToggleState(): InsightsExperimentState;
+    /**
+     * @returns {InsightsExperimentState}
+    **/
+    _getRawInsightToggleState(): InsightsExperimentState;
+    /**
+     * @param {HTMLButtonElement} button
+    **/
+    _setInsightToggleButtonText(button: HTMLButtonElement): void;
+    /**
+     * @param {HTMLElement} element
+     */
+    _renderInsightsToggle(element: HTMLElement): void;
     /**
      * @param {LH.ReportResult.Category} category
      * @param {Object<string, LH.Result.ReportGroup>} groups
@@ -31,7 +56,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
      * @override
      */
     override render(category: LH.ReportResult.Category, groups: {
-        [x: string]: LH.Result.ReportGroup;
+        [x: string]: import("../../types/lhr/lhr.js").default.ReportGroup;
     }, options?: {
         gatherMode: LH.Result.GatherMode;
     } | undefined): Element;
@@ -43,7 +68,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
      * @return {Element|null}
      */
     renderFilterableSection(category: LH.ReportResult.Category, groups: {
-        [x: string]: LH.Result.ReportGroup;
+        [x: string]: import("../../types/lhr/lhr.js").default.ReportGroup;
     }, groupNames: string[], metricAudits: LH.ReportResult.AuditRef[]): Element | null;
     /**
      * Render the control to filter the audits by metric. The filtering is done at runtime by CSS only
@@ -54,5 +79,6 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
     renderMetricAuditFilter(filterableMetrics: LH.ReportResult.AuditRef[], categoryEl: HTMLDivElement, onFilterChange: (acronym: string) => void): void;
 }
 export type DOM = import("./dom.js").DOM;
+export type InsightsExperimentState = ("DEFAULT" | "AUDITS" | "INSIGHTS");
 import { CategoryRenderer } from './category-renderer.js';
 //# sourceMappingURL=performance-category-renderer.d.ts.map

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

@@ -12,7 +12,16 @@ import {Globals} from './report-globals.js';
 import {Util} from '../../shared/util.js';
 import {createGauge, updateGauge} from './explodey-gauge.js';
 
+const LOCAL_STORAGE_INSIGHTS_KEY = '__lh__insights_audits_toggle_state';
+
+/**
+ * @typedef {('DEFAULT'|'AUDITS'|'INSIGHTS')} InsightsExperimentState
+ */
+
 export class PerformanceCategoryRenderer extends CategoryRenderer {
+  /** @type InsightsExperimentState*/
+  _memoryInsightToggleState = 'DEFAULT';
+
   /**
    * @param {LH.ReportResult.AuditRef} audit
    * @return {!Element}
@@ -134,6 +143,85 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
     return {overallImpact, overallLinearImpact};
   }
 
+  /**
+   * @param {InsightsExperimentState} newState
+  **/
+  _persistInsightToggleToStorage(newState) {
+    try {
+      window.localStorage.setItem(LOCAL_STORAGE_INSIGHTS_KEY, newState);
+    } finally {
+      this._memoryInsightToggleState = newState;
+    }
+  }
+
+  /**
+   * @returns {InsightsExperimentState}
+  **/
+  _getInsightToggleState() {
+    let state = this._getRawInsightToggleState();
+    if (state === 'DEFAULT') state = 'AUDITS';
+    return state;
+  }
+
+  /**
+   * @returns {InsightsExperimentState}
+  **/
+  _getRawInsightToggleState() {
+    try {
+      const fromStorage = window.localStorage.getItem(LOCAL_STORAGE_INSIGHTS_KEY);
+      if (fromStorage === 'AUDITS' || fromStorage === 'INSIGHTS') {
+        return fromStorage;
+      }
+    } catch {
+      return this._memoryInsightToggleState;
+    }
+    return 'DEFAULT';
+  }
+
+  /**
+   * @param {HTMLButtonElement} button
+  **/
+  _setInsightToggleButtonText(button) {
+    const state = this._getInsightToggleState();
+    button.innerText =
+      state === 'AUDITS' ? Globals.strings.tryInsights : Globals.strings.goBackToAudits;
+  }
+
+  /**
+   * @param {HTMLElement} element
+   */
+  _renderInsightsToggle(element) {
+    // Insights / Audits toggle.
+    const container = this.dom.createChildOf(element, 'div', 'lh-perf-insights-toggle');
+    const textSpan = this.dom.createChildOf(container, 'span', 'lh-perf-toggle-text');
+    const icon = this.dom.createElement('span', 'lh-perf-insights-icon');
+    icon.innerHTML = '<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M18 13V11H22V13H18ZM19.2 20L16 17.6L17.2 16L20.4 18.4L19.2 20ZM17.2 8L16 6.4L19.2 4L20.4 5.6L17.2 8ZM5 19V15H4C3.45 15 2.975 14.8083 2.575 14.425C2.19167 14.025 2 13.55 2 13V11C2 10.45 2.19167 9.98333 2.575 9.6C2.975 9.2 3.45 9 4 9H8L13 6V18L8 15H7V19H5ZM11 14.45V9.55L8.55 11H4V13H8.55L11 14.45ZM14 15.35V8.65C14.45 9.05 14.8083 9.54167 15.075 10.125C15.3583 10.6917 15.5 11.3167 15.5 12C15.5 12.6833 15.3583 13.3167 15.075 13.9C14.8083 14.4667 14.45 14.95 14 15.35Z"/></svg>';
+    textSpan.appendChild(icon);
+    textSpan.appendChild(this.dom.convertMarkdownLinkSnippets(Globals.strings.insightsNotice));
+
+    const buttonClasses = 'lh-button lh-button-insight-toggle';
+    const button = this.dom.createChildOf(container, 'button', buttonClasses);
+    this._setInsightToggleButtonText(button);
+
+    button.addEventListener('click', event => {
+      event.preventDefault();
+      const swappableSection = this.dom.maybeFind('.lh-perf-audits--swappable');
+      if (swappableSection) {
+        this.dom.swapSectionIfPossible(swappableSection);
+      }
+      const currentState = this._getInsightToggleState();
+      const newState = currentState === 'AUDITS' ? 'INSIGHTS' : 'AUDITS';
+      this.dom.fireEventOn('lh-analytics', this.dom.document(), {
+        name: 'toggle_insights',
+        data: {newState},
+      });
+      this._persistInsightToggleToStorage(newState);
+      this._setInsightToggleButtonText(button);
+    });
+
+    container.appendChild(button);
+  }
+
   /**
    * @param {LH.ReportResult.Category} category
    * @param {Object<string, LH.Result.ReportGroup>} groups
@@ -201,6 +289,8 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
       filmstripEl && timelineEl.append(filmstripEl);
     }
 
+    this._renderInsightsToggle(element);
+
     const legacyAuditsSection =
       this.renderFilterableSection(category, groups, ['diagnostics'], metricAudits);
     legacyAuditsSection?.classList.add('lh-perf-audits--swappable', 'lh-perf-audits--legacy');
@@ -220,6 +310,23 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
         this.dom.registerSwappableSections(legacyAuditsSection, experimentalInsightsSection);
       }
     }
+    // Deal with the user loading the report and having toggled to Insights
+    // which is now stored in local storage. Put in a rAF otherwise this code
+    // runs before the DOM is created.
+    if (this._getInsightToggleState() === 'INSIGHTS') {
+      requestAnimationFrame(() => {
+        const swappableSection = this.dom.maybeFind('.lh-perf-audits--swappable');
+        if (swappableSection) {
+          this.dom.swapSectionIfPossible(swappableSection);
+        }
+      });
+    }
+
+    // Log the initial state.
+    this.dom.fireEventOn('lh-analytics', this.dom.document(), {
+      name: 'initial_insights_state',
+      data: {state: this._getRawInsightToggleState()},
+    });
 
     const isNavigationMode = !options || options?.gatherMode === 'navigation';
     if (isNavigationMode && category.score !== null) {
@@ -246,8 +353,19 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
     /** @type {Set<string>} */
     const replacedAuditIds = new Set();
 
+    /**
+     * This exists to temporarily allow showing insights - which are in the hidden
+     * group by default - when using the insights toggle.
+     * See https://github.com/GoogleChrome/lighthouse/pull/16418 for motivation.
+     *
+     * @param {LH.ReportResult.AuditRef} auditRef
+     */
+    const getGroup = (auditRef) => {
+      return auditRef.id.endsWith('-insight') ? 'insights' : auditRef.group ?? '';
+    };
+
     const allGroupAudits =
-      category.auditRefs.filter(audit => audit.group && groupNames.includes(audit.group));
+      category.auditRefs.filter(audit => groupNames.includes(getGroup(audit)));
     for (const auditRef of allGroupAudits) {
       auditRef.result.replacesAudits?.forEach(replacedAuditId => {
         replacedAuditIds.add(replacedAuditId);
@@ -327,7 +445,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
       for (const audit of filterableAudits) {
         if (!audit.auditRef.group) continue;
 
-        const groupEls = groupElsMap[audit.auditRef.group];
+        const groupEls = groupElsMap[getGroup(audit.auditRef)];
         if (!groupEls) continue;
 
         const [groupEl, footerEl] = groupEls;
@@ -355,7 +473,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
     refreshFilteredAudits('All');
 
     for (const groupName of groupNames) {
-      if (filterableAudits.some(auditRef => auditRef.auditRef.group === groupName)) {
+      if (filterableAudits.some(audit => getGroup(audit.auditRef) === groupName)) {
         const groupEls = groupElsMap[groupName];
         if (!groupEls) continue;
         element.append(groupEls[0]);

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

@@ -108,7 +108,6 @@ export namespace UIStrings {
     let dropdownViewer: string;
     let dropdownSaveGist: string;
     let dropdownDarkTheme: string;
-    let dropdownInsightsToggle: string;
     let dropdownViewUnthrottledTrace: string;
     let runtimeSettingsDevice: string;
     let runtimeSettingsNetworkThrottling: string;
@@ -137,5 +136,8 @@ export namespace UIStrings {
     let firstPartyChipLabel: string;
     let openInANewTabTooltip: string;
     let unattributable: string;
+    let insightsNotice: string;
+    let tryInsights: string;
+    let goBackToAudits: string;
 }
 //# sourceMappingURL=report-utils.d.ts.map

package/report/renderer/report-utils.js

@@ -67,13 +67,15 @@ class ReportUtils {
 
         // attach the stackpacks to the auditRef object
         if (clone.stackPacks) {
+          const ids = [auditRef.id, ...auditRef.result.replacesAudits ?? []];
           clone.stackPacks.forEach(pack => {
-            if (pack.descriptions[auditRef.id]) {
+            const id = ids.find(id => pack.descriptions[id]);
+            if (id && pack.descriptions[id]) {
               auditRef.stackPacks = auditRef.stackPacks || [];
               auditRef.stackPacks.push({
                 title: pack.title,
                 iconDataURL: pack.iconDataURL,
-                description: pack.descriptions[auditRef.id],
+                description: pack.descriptions[id],
               });
             }
           });
@@ -418,8 +420,6 @@ const UIStrings = {
   dropdownSaveGist: 'Save as Gist',
   /** Option in a dropdown menu that toggles the themeing of the report between Light(default) and Dark themes. */
   dropdownDarkTheme: 'Toggle Dark Theme',
-  /** Option in a dropdown menu that toggles the type of performance insights displayed. */
-  dropdownInsightsToggle: 'Toggle experimental insights',
   /** Option in a dropdown menu that opens the trace of the page without throttling. "Unthrottled" can be replaced with "Original". */
   dropdownViewUnthrottledTrace: 'View Unthrottled Trace',
 
@@ -481,6 +481,13 @@ const UIStrings = {
   openInANewTabTooltip: 'Open in a new tab',
   /** Generic category name for all resources that could not be attributed to a 1st or 3rd party entity. */
   unattributable: 'Unattributable',
+
+  /** Notice about upcoming planned changes to Lighthouse, to replace most performance audits with a new set of "insight" audits. */
+  insightsNotice: 'Later this year, insights will replace performance audits. [Learn more and provide feedback here](https://github.com/GoogleChrome/lighthouse/discussions/16462).',
+  /** Text for a button to try out "Performance insight audits", a new set of performance advice that will replace performance audits. */
+  tryInsights: 'Try insights',
+  /** Text for a button for going back to normal "Performance audits", instead of using the new set of performance insight audits that will replace performance audits. */
+  goBackToAudits: 'Go back to audits',
 };
 
 export {

package/report/renderer/topbar-features.js

@@ -114,13 +114,6 @@ export class TopbarFeatures {
         toggleDarkTheme(this._dom);
         break;
       }
-      case 'toggle-insights': {
-        const swappableSection = this._dom.maybeFind('.lh-perf-audits--swappable');
-        if (swappableSection) {
-          this._dom.swapSectionIfPossible(swappableSection);
-        }
-        break;
-      }
       case 'view-unthrottled-trace': {
         this._reportUIFeatures._opts.onViewTrace?.();
       }
@@ -153,8 +146,7 @@ export class TopbarFeatures {
    */
   onCopyButtonClick() {
     this._dom.fireEventOn('lh-analytics', this._dom.document(), {
-      cmd: 'send',
-      fields: {hitType: 'event', eventCategory: 'report', eventAction: 'copy'},
+      name: 'copy',
     });
 
     try {

package/shared/localization/format.d.ts

@@ -19,7 +19,7 @@ export function _formatPathAsString(pathInLHR: string[]): string;
  * @param {Map<string, MessageFormatElement>} [customElements]
  * @return {Map<string, MessageFormatElement>}
  */
-export function collectAllCustomElementsFromICU(icuElements: Array<MessageFormatElement>, customElements?: Map<string, import("@formatjs/icu-messageformat-parser").MessageFormatElement> | undefined): Map<string, MessageFormatElement>;
+export function collectAllCustomElementsFromICU(icuElements: Array<MessageFormatElement>, customElements?: Map<string, MessageFormatElement>): Map<string, MessageFormatElement>;
 /**
  * Returns whether `icuMessageOrNot`` is an `LH.IcuMessage` instance.
  * @param {unknown} icuMessageOrNot