lighthouse 9.5.0-dev.20230118 → 9.5.0-dev.20230119

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

@@ -0,0 +1,176 @@
+export class CategoryRenderer {
+    /**
+     * @param {DOM} dom
+     * @param {DetailsRenderer} detailsRenderer
+     */
+    constructor(dom: DOM, detailsRenderer: DetailsRenderer);
+    /** @type {DOM} */
+    dom: DOM;
+    /** @type {DetailsRenderer} */
+    detailsRenderer: DetailsRenderer;
+    /**
+     * Display info per top-level clump. Define on class to avoid race with Util init.
+     */
+    get _clumpTitles(): {
+        warning: string;
+        manual: string;
+        passed: string;
+        notApplicable: string;
+    };
+    /**
+     * @param {LH.ReportResult.AuditRef} audit
+     * @return {Element}
+     */
+    renderAudit(audit: LH.ReportResult.AuditRef): Element;
+    /**
+     * Populate an DOM tree with audit details. Used by renderAudit and renderOpportunity
+     * @param {LH.ReportResult.AuditRef} audit
+     * @param {DocumentFragment} component
+     * @return {!Element}
+     */
+    populateAuditValues(audit: LH.ReportResult.AuditRef, component: DocumentFragment): Element;
+    /**
+     * Inject the final screenshot next to the score gauge of the first category (likely Performance)
+     * @param {HTMLElement} categoriesEl
+     * @param {LH.ReportResult['audits']} audits
+     * @param {Element} scoreScaleEl
+     */
+    injectFinalScreenshot(categoriesEl: HTMLElement, audits: LH.ReportResult['audits'], scoreScaleEl: Element): null | undefined;
+    /**
+     * @return {Element}
+     */
+    _createChevron(): Element;
+    /**
+     * @param {Element} element DOM node to populate with values.
+     * @param {number|null} score
+     * @param {string} scoreDisplayMode
+     * @return {!Element}
+     */
+    _setRatingClass(element: Element, score: number | null, scoreDisplayMode: string): Element;
+    /**
+     * @param {LH.ReportResult.Category} category
+     * @param {Record<string, LH.Result.ReportGroup>} groupDefinitions
+     * @param {{gatherMode: LH.Result.GatherMode}=} options
+     * @return {DocumentFragment}
+     */
+    renderCategoryHeader(category: LH.ReportResult.Category, groupDefinitions: Record<string, LH.Result.ReportGroup>, options?: {
+        gatherMode: LH.Result.GatherMode;
+    } | undefined): DocumentFragment;
+    /**
+     * Renders the group container for a group of audits. Individual audit elements can be added
+     * directly to the returned element.
+     * @param {LH.Result.ReportGroup} group
+     * @return {[Element, Element | null]}
+     */
+    renderAuditGroup(group: LH.Result.ReportGroup): [Element, Element | null];
+    /**
+     * Takes an array of auditRefs, groups them if requested, then returns an
+     * array of audit and audit-group elements.
+     * @param {Array<LH.ReportResult.AuditRef>} auditRefs
+     * @param {Object<string, LH.Result.ReportGroup>} groupDefinitions
+     * @return {Array<Element>}
+     */
+    _renderGroupedAudits(auditRefs: Array<LH.ReportResult.AuditRef>, groupDefinitions: {
+        [x: string]: LH.Result.ReportGroup;
+    }): Array<Element>;
+    /**
+     * Take a set of audits, group them if they have groups, then render in a top-level
+     * clump that can't be expanded/collapsed.
+     * @param {Array<LH.ReportResult.AuditRef>} auditRefs
+     * @param {Object<string, LH.Result.ReportGroup>} groupDefinitions
+     * @return {Element}
+     */
+    renderUnexpandableClump(auditRefs: Array<LH.ReportResult.AuditRef>, groupDefinitions: {
+        [x: string]: LH.Result.ReportGroup;
+    }): Element;
+    /**
+     * Take a set of audits and render in a top-level, expandable clump that starts
+     * in a collapsed state.
+     * @param {Exclude<TopLevelClumpId, 'failed'>} clumpId
+     * @param {{auditRefs: Array<LH.ReportResult.AuditRef>, description?: string}} clumpOpts
+     * @return {!Element}
+     */
+    renderClump(clumpId: Exclude<TopLevelClumpId, 'failed'>, { auditRefs, description }: {
+        auditRefs: Array<LH.ReportResult.AuditRef>;
+        description?: string;
+    }): Element;
+    /**
+     * @param {LH.ReportResult.Category} category
+     * @param {Record<string, LH.Result.ReportGroup>} groupDefinitions
+     * @param {{gatherMode: LH.Result.GatherMode, omitLabel?: boolean, onPageAnchorRendered?: (link: HTMLAnchorElement) => void}=} options
+     * @return {DocumentFragment}
+     */
+    renderCategoryScore(category: LH.ReportResult.Category, groupDefinitions: Record<string, LH.Result.ReportGroup>, options?: {
+        gatherMode: LH.Result.GatherMode;
+        omitLabel?: boolean | undefined;
+        onPageAnchorRendered?: ((link: HTMLAnchorElement) => void) | undefined;
+    } | undefined): DocumentFragment;
+    /**
+     * @param {LH.ReportResult.Category} category
+     * @param {Record<string, LH.Result.ReportGroup>} groupDefinitions
+     * @return {DocumentFragment}
+     */
+    renderScoreGauge(category: LH.ReportResult.Category, groupDefinitions: Record<string, LH.Result.ReportGroup>): DocumentFragment;
+    /**
+     * @param {LH.ReportResult.Category} category
+     * @return {DocumentFragment}
+     */
+    renderCategoryFraction(category: LH.ReportResult.Category): DocumentFragment;
+    /**
+     * Returns true if an LH category has any non-"notApplicable" audits.
+     * @param {LH.ReportResult.Category} category
+     * @return {boolean}
+     */
+    hasApplicableAudits(category: LH.ReportResult.Category): boolean;
+    /**
+     * Define the score arc of the gauge
+     * Credit to xgad for the original technique: https://codepen.io/xgad/post/svg-radial-progress-meters
+     * @param {SVGCircleElement} arcElem
+     * @param {number} percent
+     */
+    _setGaugeArc(arcElem: SVGCircleElement, percent: number): void;
+    /**
+     * @param {LH.ReportResult.AuditRef} audit
+     * @return {boolean}
+     */
+    _auditHasWarning(audit: LH.ReportResult.AuditRef): boolean;
+    /**
+     * Returns the id of the top-level clump to put this audit in.
+     * @param {LH.ReportResult.AuditRef} auditRef
+     * @return {TopLevelClumpId}
+     */
+    _getClumpIdForAuditRef(auditRef: LH.ReportResult.AuditRef): TopLevelClumpId;
+    /**
+     * Renders a set of top level sections (clumps), under a status of failed, warning,
+     * manual, passed, or notApplicable. The result ends up something like:
+     *
+     * failed clump
+     *   ├── audit 1 (w/o group)
+     *   ├── audit 2 (w/o group)
+     *   ├── audit group
+     *   |  ├── audit 3
+     *   |  └── audit 4
+     *   └── audit group
+     *      ├── audit 5
+     *      └── audit 6
+     * other clump (e.g. 'manual')
+     *   ├── audit 1
+     *   ├── audit 2
+     *   ├── …
+     *   ⋮
+     * @param {LH.ReportResult.Category} category
+     * @param {Object<string, LH.Result.ReportGroup>=} groupDefinitions
+     * @param {{gatherMode: LH.Result.GatherMode}=} options
+     * @return {Element}
+     */
+    render(category: LH.ReportResult.Category, groupDefinitions?: {
+        [x: string]: LH.Result.ReportGroup;
+    } | undefined, options?: {
+        gatherMode: LH.Result.GatherMode;
+    } | undefined): Element;
+}
+export type DOM = import('./dom.js').DOM;
+export type ReportRenderer = import('./report-renderer.js').ReportRenderer;
+export type DetailsRenderer = import('./details-renderer.js').DetailsRenderer;
+export type TopLevelClumpId = 'failed' | 'warning' | 'manual' | 'passed' | 'notApplicable';
+//# sourceMappingURL=category-renderer.d.ts.map

package/report/renderer/components.d.ts

@@ -0,0 +1,10 @@
+/** @typedef {'3pFilter'|'audit'|'categoryHeader'|'chevron'|'clump'|'crc'|'crcChain'|'elementScreenshot'|'footer'|'fraction'|'gauge'|'gaugePwa'|'heading'|'metric'|'opportunity'|'opportunityHeader'|'scorescale'|'scoresWrapper'|'snippet'|'snippetContent'|'snippetHeader'|'snippetLine'|'styles'|'topbar'|'warningsToplevel'} ComponentName */
+/**
+ * @param {DOM} dom
+ * @param {ComponentName} componentName
+ * @return {DocumentFragment}
+ */
+export function createComponent(dom: DOM, componentName: ComponentName): DocumentFragment;
+export type DOM = import('./dom.js').DOM;
+export type ComponentName = '3pFilter' | 'audit' | 'categoryHeader' | 'chevron' | 'clump' | 'crc' | 'crcChain' | 'elementScreenshot' | 'footer' | 'fraction' | 'gauge' | 'gaugePwa' | 'heading' | 'metric' | 'opportunity' | 'opportunityHeader' | 'scorescale' | 'scoresWrapper' | 'snippet' | 'snippetContent' | 'snippetHeader' | 'snippetLine' | 'styles' | 'topbar' | 'warningsToplevel';
+//# sourceMappingURL=components.d.ts.map

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

@@ -0,0 +1,73 @@
+export type DOM = import('./dom.js').DOM;
+export type DetailsRenderer = import('./details-renderer.js').DetailsRenderer;
+export type CRCSegment = {
+    node: LH.Audit.Details.SimpleCriticalRequestNode[string];
+    isLastChild: boolean;
+    hasChildren: boolean;
+    startTime: number;
+    transferSize: number;
+    treeMarkers: boolean[];
+};
+/** @typedef {import('./dom.js').DOM} DOM */
+/** @typedef {import('./details-renderer.js').DetailsRenderer} DetailsRenderer */
+/**
+ * @typedef CRCSegment
+ * @property {LH.Audit.Details.SimpleCriticalRequestNode[string]} node
+ * @property {boolean} isLastChild
+ * @property {boolean} hasChildren
+ * @property {number} startTime
+ * @property {number} transferSize
+ * @property {boolean[]} treeMarkers
+ */
+export 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: LH.Audit.Details.SimpleCriticalRequestNode): {
+        tree: LH.Audit.Details.SimpleCriticalRequestNode;
+        startTime: number;
+        transferSize: number;
+    };
+    /**
+     * 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 {string} id
+     * @param {number} startTime
+     * @param {number} transferSize
+     * @param {Array<boolean>=} treeMarkers
+     * @param {boolean=} parentIsLastChild
+     * @return {CRCSegment}
+     */
+    static createSegment(parent: LH.Audit.Details.SimpleCriticalRequestNode, id: string, startTime: number, transferSize: number, treeMarkers?: Array<boolean> | undefined, parentIsLastChild?: boolean | undefined): CRCSegment;
+    /**
+     * Creates the DOM for a tree segment.
+     * @param {DOM} dom
+     * @param {CRCSegment} segment
+     * @param {DetailsRenderer} detailsRenderer
+     * @return {Node}
+     */
+    static createChainNode(dom: DOM, segment: CRCSegment, detailsRenderer: DetailsRenderer): Node;
+    /**
+     * Recursively builds a tree from segments.
+     * @param {DOM} dom
+     * @param {DocumentFragment} tmpl
+     * @param {CRCSegment} segment
+     * @param {Element} elem Parent element.
+     * @param {LH.Audit.Details.CriticalRequestChain} details
+     * @param {DetailsRenderer} detailsRenderer
+     */
+    static buildTree(dom: DOM, tmpl: DocumentFragment, segment: CRCSegment, elem: Element, details: LH.Audit.Details.CriticalRequestChain, detailsRenderer: DetailsRenderer): void;
+    /**
+     * @param {DOM} dom
+     * @param {LH.Audit.Details.CriticalRequestChain} details
+     * @param {DetailsRenderer} detailsRenderer
+     * @return {Element}
+     */
+    static render(dom: DOM, details: LH.Audit.Details.CriticalRequestChain, detailsRenderer: DetailsRenderer): Element;
+}
+//# sourceMappingURL=crc-details-renderer.d.ts.map

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