lighthouse 9.5.0-dev.20230117 → 9.5.0-dev.20230119

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

@@ -0,0 +1,141 @@
+export class DetailsRenderer {
+    /**
+     * @param {DOM} dom
+     * @param {{fullPageScreenshot?: LH.Result.FullPageScreenshot}} [options]
+     */
+    constructor(dom: DOM, options?: {
+        fullPageScreenshot?: import("../../types/lhr/lhr.js").default.FullPageScreenshot | undefined;
+    } | undefined);
+    _dom: import("./dom.js").DOM;
+    _fullPageScreenshot: import("../../types/lhr/lhr.js").default.FullPageScreenshot | undefined;
+    /**
+     * @param {AuditDetails} details
+     * @return {Element|null}
+     */
+    render(details: AuditDetails): Element | null;
+    /**
+     * @param {{value: number, granularity?: number}} details
+     * @return {Element}
+     */
+    _renderBytes(details: {
+        value: number;
+        granularity?: number | undefined;
+    }): Element;
+    /**
+     * @param {{value: number, granularity?: number, displayUnit?: string}} details
+     * @return {Element}
+     */
+    _renderMilliseconds(details: {
+        value: number;
+        granularity?: number | undefined;
+        displayUnit?: string | undefined;
+    }): Element;
+    /**
+     * @param {string} text
+     * @return {HTMLElement}
+     */
+    renderTextURL(text: string): HTMLElement;
+    /**
+     * @param {{text: string, url: string}} details
+     * @return {HTMLElement}
+     */
+    _renderLink(details: {
+        text: string;
+        url: string;
+    }): HTMLElement;
+    /**
+     * @param {string} text
+     * @return {HTMLDivElement}
+     */
+    _renderText(text: string): HTMLDivElement;
+    /**
+     * @param {{value: number, granularity?: number}} details
+     * @return {Element}
+     */
+    _renderNumeric(details: {
+        value: number;
+        granularity?: number | undefined;
+    }): Element;
+    /**
+     * Create small thumbnail with scaled down image asset.
+     * @param {string} details
+     * @return {Element}
+     */
+    _renderThumbnail(details: string): Element;
+    /**
+     * @param {string} type
+     * @param {*} value
+     */
+    _renderUnknown(type: string, value: any): HTMLDetailsElement;
+    /**
+     * Render a details item value for embedding in a table. Renders the value
+     * based on the heading's valueType, unless the value itself has a `type`
+     * property to override it.
+     * @param {TableItemValue} value
+     * @param {LH.Audit.Details.TableColumnHeading} heading
+     * @return {Element|null}
+     */
+    _renderTableValue(value: TableItemValue, heading: LH.Audit.Details.TableColumnHeading): Element | null;
+    /**
+     * Returns a new heading where the values are defined first by `heading.subItemsHeading`,
+     * and secondly by `heading`. If there is no subItemsHeading, returns null, which will
+     * be rendered as an empty column.
+     * @param {LH.Audit.Details.TableColumnHeading} heading
+     * @return {LH.Audit.Details.TableColumnHeading | null}
+     */
+    _getDerivedSubItemsHeading(heading: LH.Audit.Details.TableColumnHeading): LH.Audit.Details.TableColumnHeading | null;
+    /**
+     * @param {TableItem} item
+     * @param {(LH.Audit.Details.TableColumnHeading | null)[]} headings
+     */
+    _renderTableRow(item: TableItem, headings: (LH.Audit.Details.TableColumnHeading | null)[]): HTMLTableRowElement;
+    /**
+     * Renders one or more rows from a details table item. A single table item can
+     * expand into multiple rows, if there is a subItemsHeading.
+     * @param {TableItem} item
+     * @param {LH.Audit.Details.TableColumnHeading[]} headings
+     */
+    _renderTableRowsFromItem(item: TableItem, headings: LH.Audit.Details.TableColumnHeading[]): DocumentFragment;
+    /**
+     * @param {{headings: TableColumnHeading[], items: TableItem[]}} details
+     * @return {Element}
+     */
+    _renderTable(details: {
+        headings: TableColumnHeading[];
+        items: TableItem[];
+    }): Element;
+    /**
+     * @param {LH.FormattedIcu<LH.Audit.Details.List>} details
+     * @return {Element}
+     */
+    _renderList(details: LH.FormattedIcu<LH.Audit.Details.List>): Element;
+    /**
+     * @param {LH.Audit.Details.NodeValue} item
+     * @return {Element}
+     */
+    renderNode(item: LH.Audit.Details.NodeValue): Element;
+    /**
+     * @param {LH.Audit.Details.SourceLocationValue} item
+     * @return {Element|null}
+     * @protected
+     */
+    protected renderSourceLocation(item: LH.Audit.Details.SourceLocationValue): Element | null;
+    /**
+     * @param {LH.Audit.Details.Filmstrip} details
+     * @return {Element}
+     */
+    _renderFilmstrip(details: LH.Audit.Details.Filmstrip): Element;
+    /**
+     * @param {string} text
+     * @return {Element}
+     */
+    _renderCode(text: string): Element;
+}
+export type DOM = import('./dom.js').DOM;
+export type AuditDetails = LH.FormattedIcu<LH.Audit.Details>;
+export type OpportunityTable = LH.FormattedIcu<LH.Audit.Details.Opportunity>;
+export type Table = LH.FormattedIcu<LH.Audit.Details.Table>;
+export type TableItem = LH.FormattedIcu<LH.Audit.Details.TableItem>;
+export type TableItemValue = LH.FormattedIcu<LH.Audit.Details.ItemValue>;
+export type TableColumnHeading = LH.FormattedIcu<LH.Audit.Details.TableColumnHeading>;
+//# sourceMappingURL=details-renderer.d.ts.map

package/report/renderer/dom.d.ts

@@ -0,0 +1,125 @@
+export class DOM {
+    /**
+     * @param {Document} document
+     * @param {HTMLElement} rootEl
+     */
+    constructor(document: Document, rootEl: HTMLElement);
+    /** @type {Document} */
+    _document: Document;
+    /** @type {string} */
+    _lighthouseChannel: string;
+    /** @type {Map<string, DocumentFragment>} */
+    _componentCache: Map<string, DocumentFragment>;
+    /** @type {HTMLElement} */
+    rootEl: HTMLElement;
+    /**
+     * @template {string} T
+     * @param {T} name
+     * @param {string=} className
+     * @return {HTMLElementByTagName[T]}
+     */
+    createElement<T extends string>(name: T, className?: string | undefined): HTMLElementByTagName[T];
+    /**
+     * @param {string} namespaceURI
+     * @param {string} name
+     * @param {string=} className
+     * @return {Element}
+     */
+    createElementNS(namespaceURI: string, name: string, className?: string | undefined): Element;
+    /**
+     * @return {!DocumentFragment}
+     */
+    createFragment(): DocumentFragment;
+    /**
+     * @param {string} data
+     * @return {!Node}
+     */
+    createTextNode(data: string): Node;
+    /**
+     * @template {string} T
+     * @param {Element} parentElem
+     * @param {T} elementName
+     * @param {string=} className
+     * @return {HTMLElementByTagName[T]}
+     */
+    createChildOf<T_1 extends string>(parentElem: Element, elementName: T_1, className?: string | undefined): HTMLElementByTagName[T_1];
+    /**
+     * @param {import('./components.js').ComponentName} componentName
+     * @return {!DocumentFragment} A clone of the cached component.
+     */
+    createComponent(componentName: import('./components.js').ComponentName): DocumentFragment;
+    clearComponentCache(): void;
+    /**
+     * @param {string} text
+     * @return {Element}
+     */
+    convertMarkdownLinkSnippets(text: string): Element;
+    /**
+     * Set link href, but safely, preventing `javascript:` protocol, etc.
+     * @see https://github.com/google/safevalues/
+     * @param {HTMLAnchorElement} elem
+     * @param {string} url
+     */
+    safelySetHref(elem: HTMLAnchorElement, url: string): void;
+    /**
+     * Only create blob URLs for JSON & HTML
+     * @param {HTMLAnchorElement} elem
+     * @param {Blob} blob
+     */
+    safelySetBlobHref(elem: HTMLAnchorElement, blob: Blob): void;
+    /**
+     * @param {string} markdownText
+     * @return {Element}
+     */
+    convertMarkdownCodeSnippets(markdownText: string): Element;
+    /**
+     * The channel to use for UTM data when rendering links to the documentation.
+     * @param {string} lighthouseChannel
+     */
+    setLighthouseChannel(lighthouseChannel: string): void;
+    /**
+     * ONLY use if `dom.rootEl` isn't sufficient for your needs. `dom.rootEl` is preferred
+     * for all scoping, because a document can have multiple reports within it.
+     * @return {Document}
+     */
+    document(): Document;
+    /**
+     * TODO(paulirish): import and conditionally apply the DevTools frontend subclasses instead of this
+     * @return {boolean}
+     */
+    isDevTools(): boolean;
+    /**
+     * Guaranteed context.querySelector. Always returns an element or throws if
+     * nothing matches query.
+     * @template {string} T
+     * @param {T} query
+     * @param {ParentNode} context
+     * @return {ParseSelector<T>}
+     */
+    find<T_2 extends string>(query: T_2, context: ParentNode): import("typed-query-selector/parser").ParseSelector<T_2, Element>;
+    /**
+     * Helper for context.querySelectorAll. Returns an Array instead of a NodeList.
+     * @template {string} T
+     * @param {T} query
+     * @param {ParentNode} context
+     */
+    findAll<T_3 extends string>(query: T_3, context: ParentNode): import("../../types/internal/query-selector.js").QuerySelectorParse<T_3>[];
+    /**
+     * Fires a custom DOM event on target.
+     * @param {string} name Name of the event.
+     * @param {Node=} target DOM node to fire the event on.
+     * @param {*=} detail Custom data to include.
+     */
+    fireEventOn(name: string, target?: Node | undefined, detail?: any | undefined): void;
+    /**
+     * Downloads a file (blob) using a[download].
+     * @param {Blob|File} blob The file to save.
+     * @param {string} filename
+     */
+    saveFile(blob: Blob | File, filename: string): void;
+}
+export type HTMLElementByTagName = HTMLElementTagNameMap & {
+    [id: string]: HTMLElement;
+};
+export type ParseSelector<T extends string> = import('typed-query-selector/parser').ParseSelector<T, Element>;
+//# sourceMappingURL=dom.d.ts.map

package/report/renderer/drop-down-menu.d.ts

@@ -0,0 +1,70 @@
+/**
+ * @license Copyright 2021 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.
+ */
+/** @typedef {import('./dom.js').DOM} DOM */
+export class DropDownMenu {
+    /**
+     * @param {DOM} dom
+     */
+    constructor(dom: DOM);
+    /** @type {DOM} */
+    _dom: DOM;
+    /** @type {HTMLElement} */
+    _toggleEl: HTMLElement;
+    /** @type {HTMLElement} */
+    _menuEl: HTMLElement;
+    /**
+     * Keydown handler for the document.
+     * @param {KeyboardEvent} e
+     */
+    onDocumentKeyDown(e: KeyboardEvent): void;
+    /**
+     * Click handler for tools button.
+     * @param {Event} e
+     */
+    onToggleClick(e: Event): void;
+    /**
+     * Handler for tool button.
+     * @param {KeyboardEvent} e
+     */
+    onToggleKeydown(e: KeyboardEvent): void;
+    /**
+     * Focus out handler for the drop down menu.
+     * @param {FocusEvent} e
+     */
+    onMenuFocusOut(e: FocusEvent): void;
+    /**
+     * Handler for tool DropDown.
+     * @param {KeyboardEvent} e
+     */
+    onMenuKeydown(e: KeyboardEvent): void;
+    /**
+     * @param {?HTMLElement=} startEl
+     * @return {HTMLElement}
+     */
+    _getNextMenuItem(startEl?: (HTMLElement | null) | undefined): HTMLElement;
+    /**
+     * @param {Array<Node>} allNodes
+     * @param {?HTMLElement=} startNode
+     * @return {HTMLElement}
+     */
+    _getNextSelectableNode(allNodes: Array<Node>, startNode?: (HTMLElement | null) | undefined): HTMLElement;
+    /**
+     * @param {?HTMLElement=} startEl
+     * @return {HTMLElement}
+     */
+    _getPreviousMenuItem(startEl?: (HTMLElement | null) | undefined): HTMLElement;
+    /**
+     * @param {function(MouseEvent): any} menuClickHandler
+     */
+    setup(menuClickHandler: (arg0: MouseEvent) => any): void;
+    close(): void;
+    /**
+     * @param {HTMLElement} firstFocusElement
+     */
+    open(firstFocusElement: HTMLElement): void;
+}
+export type DOM = import('./dom.js').DOM;
+//# sourceMappingURL=drop-down-menu.d.ts.map

package/report/renderer/element-screenshot-renderer.d.ts

@@ -0,0 +1,79 @@
+export class ElementScreenshotRenderer {
+    /**
+     * Given the location of an element and the sizes of the preview and screenshot,
+     * compute the absolute positions (in screenshot coordinate scale) of the screenshot content
+     * and the highlighted rect around the element.
+     * @param {Rect} elementRectSC
+     * @param {Size} elementPreviewSizeSC
+     * @param {Size} screenshotSize
+     */
+    static getScreenshotPositions(elementRectSC: Rect, elementPreviewSizeSC: Size, screenshotSize: Size): {
+        screenshot: {
+            left: number;
+            top: number;
+        };
+        clip: {
+            left: number;
+            top: number;
+        };
+    };
+    /**
+     * Render a clipPath SVG element to assist marking the element's rect.
+     * The elementRect and previewSize are in screenshot coordinate scale.
+     * @param {DOM} dom
+     * @param {HTMLElement} maskEl
+     * @param {{left: number, top: number}} positionClip
+     * @param {Rect} elementRect
+     * @param {Size} elementPreviewSize
+     */
+    static renderClipPathInScreenshot(dom: DOM, maskEl: HTMLElement, positionClip: {
+        left: number;
+        top: number;
+    }, elementRect: Rect, elementPreviewSize: Size): void;
+    /**
+     * Called by report renderer. Defines a css variable used by any element screenshots
+     * in the provided report element.
+     * Allows for multiple Lighthouse reports to be rendered on the page, each with their
+     * own full page screenshot.
+     * @param {HTMLElement} el
+     * @param {LH.Result.FullPageScreenshot['screenshot']} screenshot
+     */
+    static installFullPageScreenshot(el: HTMLElement, screenshot: LH.Result.FullPageScreenshot['screenshot']): void;
+    /**
+     * Installs the lightbox elements and wires up click listeners to all .lh-element-screenshot elements.
+     * @param {InstallOverlayFeatureParams} opts
+     */
+    static installOverlayFeature(opts: InstallOverlayFeatureParams): void;
+    /**
+     * Given the size of the element in the screenshot and the total available size of our preview container,
+     * compute the factor by which we need to zoom out to view the entire element with context.
+     * @param {Rect} elementRectSC
+     * @param {Size} renderContainerSizeDC
+     * @return {number}
+     */
+    static _computeZoomFactor(elementRectSC: Rect, renderContainerSizeDC: Size): number;
+    /**
+     * Renders an element with surrounding context from the full page screenshot.
+     * Used to render both the thumbnail preview in details tables and the full-page screenshot in the lightbox.
+     * Returns null if element rect is outside screenshot bounds.
+     * @param {DOM} dom
+     * @param {LH.Result.FullPageScreenshot['screenshot']} screenshot
+     * @param {Rect} elementRectSC Region of screenshot to highlight.
+     * @param {Size} maxRenderSizeDC e.g. maxThumbnailSize or maxLightboxSize.
+     * @return {Element|null}
+     */
+    static render(dom: DOM, screenshot: LH.Result.FullPageScreenshot['screenshot'], elementRectSC: Rect, maxRenderSizeDC: Size): Element | null;
+}
+export type DOM = import('./dom.js').DOM;
+export type Rect = LH.Audit.Details.Rect;
+export type Size = {
+    width: number;
+    height: number;
+};
+export type InstallOverlayFeatureParams = {
+    dom: DOM;
+    rootEl: Element;
+    overlayContainerEl: Element;
+    fullPageScreenshot: LH.Result.FullPageScreenshot;
+};
+//# sourceMappingURL=element-screenshot-renderer.d.ts.map

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

@@ -0,0 +1,13 @@
+/**
+ * @license Copyright 2021 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.
+ */
+/** @typedef {import('./dom.js').DOM} DOM */
+/**
+ * @param {DOM} dom
+ * @param {boolean} [force]
+ */
+export function toggleDarkTheme(dom: DOM, force?: boolean | undefined): void;
+export type DOM = import('./dom.js').DOM;
+//# sourceMappingURL=features-util.d.ts.map

package/report/renderer/i18n.d.ts

@@ -0,0 +1,106 @@
+/**
+ * @template T
+ */
+export class I18n<T> {
+    /**
+     * @param {LH.Locale} locale
+     * @param {T} strings
+     */
+    constructor(locale: LH.Locale, strings: T);
+    _locale: "en-US" | "en" | "en-AU" | "en-GB" | "en-IE" | "en-SG" | "en-ZA" | "en-IN" | "ar-XB" | "ar" | "bg" | "ca" | "cs" | "da" | "de" | "el" | "en-XL" | "es" | "es-419" | "es-AR" | "es-BO" | "es-BR" | "es-BZ" | "es-CL" | "es-CO" | "es-CR" | "es-CU" | "es-DO" | "es-EC" | "es-GT" | "es-HN" | "es-MX" | "es-NI" | "es-PA" | "es-PE" | "es-PR" | "es-PY" | "es-SV" | "es-US" | "es-UY" | "es-VE" | "fi" | "fil" | "fr" | "he" | "hi" | "hr" | "hu" | "gsw" | "id" | "in" | "it" | "iw" | "ja" | "ko" | "lt" | "lv" | "mo" | "nl" | "nb" | "no" | "pl" | "pt" | "pt-PT" | "ro" | "ru" | "sk" | "sl" | "sr" | "sr-Latn" | "sv" | "ta" | "te" | "th" | "tl" | "tr" | "uk" | "vi" | "zh" | "zh-HK" | "zh-TW";
+    _strings: T;
+    _cachedNumberFormatters: Map<any, any>;
+    get strings(): T;
+    /**
+     * @param {number} number
+     * @param {number|undefined} granularity
+     * @param {Intl.NumberFormatOptions=} opts
+     * @return {string}
+     */
+    _formatNumberWithGranularity(number: number, granularity: number | undefined, opts?: Intl.NumberFormatOptions | undefined): string;
+    /**
+     * Format number.
+     * @param {number} number
+     * @param {number=} granularity Controls how coarse the displayed value is.
+     *                              If undefined, the number will be displayed as described
+     *                              by the Intl defaults: tinyurl.com/7s67w5x7
+     * @return {string}
+     */
+    formatNumber(number: number, granularity?: number | undefined): string;
+    /**
+     * Format integer.
+     * Just like {@link formatNumber} but uses a granularity of 1, rounding to the nearest
+     * whole number.
+     * @param {number} number
+     * @return {string}
+     */
+    formatInteger(number: number): string;
+    /**
+     * Format percent.
+     * @param {number} number 0–1
+     * @return {string}
+     */
+    formatPercent(number: number): string;
+    /**
+     * @param {number} size
+     * @param {number=} granularity Controls how coarse the displayed value is.
+     *                              If undefined, the number will be displayed in full.
+     * @return {string}
+     */
+    formatBytesToKiB(size: number, granularity?: number | undefined): string;
+    /**
+     * @param {number} size
+     * @param {number=} granularity Controls how coarse the displayed value is.
+     *                              If undefined, the number will be displayed in full.
+     * @return {string}
+     */
+    formatBytesToMiB(size: number, granularity?: number | undefined): string;
+    /**
+     * @param {number} size
+     * @param {number=} granularity Controls how coarse the displayed value is.
+     *                              If undefined, the number will be displayed in full.
+     * @return {string}
+     */
+    formatBytes(size: number, granularity?: number | undefined): string;
+    /**
+     * @param {number} size
+     * @param {number=} granularity Controls how coarse the displayed value is.
+     *                              If undefined, the number will be displayed in full.
+     * @return {string}
+     */
+    formatBytesWithBestUnit(size: number, granularity?: number | undefined): string;
+    /**
+     * @param {number} size
+     * @param {number=} granularity Controls how coarse the displayed value is.
+     *                              If undefined, the number will be displayed in full.
+     * @return {string}
+     */
+    formatKbps(size: number, granularity?: number | undefined): string;
+    /**
+     * @param {number} ms
+     * @param {number=} granularity Controls how coarse the displayed value is.
+     *                              If undefined, the number will be displayed in full.
+     * @return {string}
+     */
+    formatMilliseconds(ms: number, granularity?: number | undefined): string;
+    /**
+     * @param {number} ms
+     * @param {number=} granularity Controls how coarse the displayed value is.
+     *                              If undefined, the number will be displayed in full.
+     * @return {string}
+     */
+    formatSeconds(ms: number, granularity?: number | undefined): string;
+    /**
+     * Format time.
+     * @param {string} date
+     * @return {string}
+     */
+    formatDateTime(date: string): string;
+    /**
+     * Converts a time in milliseconds into a duration string, i.e. `1d 2h 13m 52s`
+     * @param {number} timeInMilliseconds
+     * @return {string}
+     */
+    formatDuration(timeInMilliseconds: number): string;
+}
+//# sourceMappingURL=i18n.d.ts.map

package/report/renderer/logger.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright 2017 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.
+ */
+/**
+ * Logs messages via a UI butter.
+ */
+export class Logger {
+    /**
+     * @param {HTMLElement} element - expected to have id #lh-log
+     */
+    constructor(element: HTMLElement);
+    el: HTMLElement;
+    _id: number | undefined;
+    /**
+     * Shows a butter bar.
+     * @param {string} msg The message to show.
+     * @param {boolean=} autoHide True to hide the message after a duration.
+     *     Default is true.
+     */
+    log(msg: string, autoHide?: boolean | undefined): void;
+    /**
+     * @param {string} msg
+     */
+    warn(msg: string): void;
+    /**
+     * @param {string} msg
+     */
+    error(msg: string): void;
+    /**
+     * Explicitly hides the butter bar.
+     */
+    hide(): void;
+}
+//# sourceMappingURL=logger.d.ts.map

package/report/renderer/open-tab.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Opens a new tab to the online viewer and sends the local page's JSON results
+ * to the online viewer using URL.fragment
+ * @param {LH.Result} lhr
+ * @protected
+ */
+export function openViewer(lhr: LH.Result): Promise<void>;
+/**
+ * Same as openViewer, but uses postMessage.
+ * @param {LH.Result} lhr
+ * @protected
+ */
+export function openViewerAndSendData(lhr: LH.Result): Promise<void>;
+/**
+ * Opens a new tab to the treemap app and sends the JSON results using URL.fragment
+ * @param {LH.Result} json
+ */
+export function openTreemap(json: LH.Result): void;
+//# sourceMappingURL=open-tab.d.ts.map

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

@@ -0,0 +1,56 @@
+export class PerformanceCategoryRenderer extends CategoryRenderer {
+    /**
+     * @param {LH.ReportResult.AuditRef} audit
+     * @return {!Element}
+     */
+    _renderMetric(audit: LH.ReportResult.AuditRef): Element;
+    /**
+     * @param {LH.ReportResult.AuditRef} audit
+     * @param {number} scale
+     * @return {!Element}
+     */
+    _renderOpportunity(audit: LH.ReportResult.AuditRef, scale: number): Element;
+    /**
+     * Get an audit's wastedMs to sort the opportunity by, and scale the sparkline width
+     * Opportunities with an error won't have a details object, so MIN_VALUE is returned to keep any
+     * erroring opportunities last in sort order.
+     * @param {LH.ReportResult.AuditRef} audit
+     * @return {number}
+     */
+    _getWastedMs(audit: LH.ReportResult.AuditRef): number;
+    /**
+     * Get a link to the interactive scoring calculator with the metric values.
+     * @param {LH.ReportResult.AuditRef[]} auditRefs
+     * @return {string}
+     */
+    _getScoringCalculatorHref(auditRefs: LH.ReportResult.AuditRef[]): string;
+    /**
+     * For performance, audits with no group should be a diagnostic or opportunity.
+     * The audit details type will determine which of the two groups an audit is in.
+     *
+     * @param {LH.ReportResult.AuditRef} audit
+     * @return {'load-opportunity'|'diagnostic'|null}
+     */
+    _classifyPerformanceAudit(audit: LH.ReportResult.AuditRef): 'load-opportunity' | 'diagnostic' | null;
+    /**
+     * @param {LH.ReportResult.Category} category
+     * @param {Object<string, LH.Result.ReportGroup>} groups
+     * @param {{gatherMode: LH.Result.GatherMode}=} options
+     * @return {Element}
+     * @override
+     */
+    override render(category: LH.ReportResult.Category, groups: {
+        [x: string]: LH.Result.ReportGroup;
+    }, options?: {
+        gatherMode: LH.Result.GatherMode;
+    } | undefined): Element;
+    /**
+     * Render the control to filter the audits by metric. The filtering is done at runtime by CSS only
+     * @param {LH.ReportResult.AuditRef[]} filterableMetrics
+     * @param {HTMLDivElement} categoryEl
+     */
+    renderMetricAuditFilter(filterableMetrics: LH.ReportResult.AuditRef[], categoryEl: HTMLDivElement): void;
+}
+export type DOM = import('./dom.js').DOM;
+import { CategoryRenderer } from "./category-renderer.js";
+//# sourceMappingURL=performance-category-renderer.d.ts.map

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

@@ -116,8 +116,10 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
   _getScoringCalculatorHref(auditRefs) {
     // TODO: filter by !!acronym when dropping renderer support of v7 LHRs.
     const metrics = auditRefs.filter(audit => audit.group === 'metrics');
+    const tti = auditRefs.find(audit => audit.id === 'interactive');
     const fci = auditRefs.find(audit => audit.id === 'first-cpu-idle');
     const fmp = auditRefs.find(audit => audit.id === 'first-meaningful-paint');
+    if (tti) metrics.push(tti);
     if (fci) metrics.push(fci);
     if (fmp) metrics.push(fmp);