lighthouse 11.1.0 → 11.2.0

package/report/renderer/dom.d.ts

@@ -26,6 +26,13 @@ export class DOM {
      * @return {Element}
      */
     createElementNS(namespaceURI: string, name: string, className?: string | undefined): Element;
+    /**
+     * @template {string} T
+     * @param {T} name
+     * @param {string=} className
+     * @return {SVGElementByTagName[T]}
+     */
+    createSVGElement<T_1 extends string>(name: T_1, className?: string | undefined): SVGElementByTagName[T_1];
     /**
      * @return {!DocumentFragment}
      */
@@ -42,7 +49,7 @@ export class DOM {
      * @param {string=} className
      * @return {HTMLElementByTagName[T]}
      */
-    createChildOf<T_1 extends string>(parentElem: Element, elementName: T_1, className?: string | undefined): HTMLElementByTagName[T_1];
+    createChildOf<T_2 extends string>(parentElem: Element, elementName: T_2, className?: string | undefined): HTMLElementByTagName[T_2];
     /**
      * @param {import('./components.js').ComponentName} componentName
      * @return {!DocumentFragment} A clone of the cached component.
@@ -92,21 +99,31 @@ export class DOM {
      */
     isDevTools(): boolean;
     /**
-     * Guaranteed context.querySelector. Always returns an element or throws if
+     * Typed and 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>;
+    find<T_3 extends string>(query: T_3, context: ParentNode): import("typed-query-selector/parser").ParseSelector<T_3, Element>;
+    /**
+     * Typed context.querySelector.
+     *
+     * @template {string} T
+     * @param {T} query
+     * @param {ParentNode} context
+     * @return {ParseSelector<T> | null}
+     */
+    maybeFind<T_4 extends string>(query: T_4, context: ParentNode): import("typed-query-selector/parser").ParseSelector<T_4, Element> | null;
     /**
      * 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>[];
+    findAll<T_5 extends string>(query: T_5, context: ParentNode): import("../../types/internal/query-selector.js").QuerySelectorParse<T_5>[];
     /**
      * Fires a custom DOM event on target.
      * @param {string} name Name of the event.
@@ -124,5 +141,8 @@ export class DOM {
 export type HTMLElementByTagName = HTMLElementTagNameMap & {
     [id: string]: HTMLElement;
 };
+export type SVGElementByTagName = SVGElementTagNameMap & {
+    [id: string]: SVGElement;
+};
 export type ParseSelector<T extends string> = import('typed-query-selector/parser').ParseSelector<T, Element>;
 //# sourceMappingURL=dom.d.ts.map

package/report/renderer/dom.js

@@ -1,23 +1,13 @@
 /**
  * @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.
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
  */
 
 /* eslint-env browser */
 
 /** @typedef {HTMLElementTagNameMap & {[id: string]: HTMLElement}} HTMLElementByTagName */
+/** @typedef {SVGElementTagNameMap & {[id: string]: SVGElement}} SVGElementByTagName */
 /** @template {string} T @typedef {import('typed-query-selector/parser').ParseSelector<T, Element>} ParseSelector */
 
 import {Util} from '../../shared/util.js';
@@ -72,6 +62,17 @@ export class DOM {
     return element;
   }
 
+  /**
+   * @template {string} T
+   * @param {T} name
+   * @param {string=} className
+   * @return {SVGElementByTagName[T]}
+   */
+  createSVGElement(name, className) {
+    return /** @type {SVGElementByTagName[T]} */ (
+      this._document.createElementNS('http://www.w3.org/2000/svg', name, className));
+  }
+
   /**
    * @return {!DocumentFragment}
    */
@@ -250,23 +251,38 @@ export class DOM {
   }
 
   /**
-   * Guaranteed context.querySelector. Always returns an element or throws if
+   * Typed and 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(query, context) {
-    const result = context.querySelector(query);
+    const result = this.maybeFind(query, context);
     if (result === null) {
       throw new Error(`query ${query} not found`);
     }
 
+    return result;
+  }
+
+  /**
+   * Typed context.querySelector.
+   *
+   * @template {string} T
+   * @param {T} query
+   * @param {ParentNode} context
+   * @return {ParseSelector<T> | null}
+   */
+  maybeFind(query, context) {
+    const result = context.querySelector(query);
+
     // Because we control the report layout and templates, use the simpler
     // `typed-query-selector` types that don't require differentiating between
     // e.g. HTMLAnchorElement and SVGAElement. See https://github.com/GoogleChrome/lighthouse/issues/12011
-    return /** @type {ParseSelector<T>} */ (result);
+    return /** @type {ParseSelector<T> | null} */ (result);
   }
 
   /**

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

@@ -1,7 +1,7 @@
 /**
- * @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.
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
  */
 /** @typedef {import('./dom.js').DOM} DOM */
 export class DropDownMenu {

package/report/renderer/drop-down-menu.js

@@ -1,7 +1,7 @@
 /**
- * @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.
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
  */
 
 /* eslint-env browser */

package/report/renderer/element-screenshot-renderer.js

@@ -1,7 +1,7 @@
 /**
- * @license Copyright 2020 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.
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
  */
 
 /**

package/report/renderer/explodey-gauge.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @param {import('./dom.js').DOM} dom
+ */
+export function createGauge(dom: import('./dom.js').DOM): Element;
+/**
+ * @param {import('./dom.js').DOM} dom
+ * @param {Element} componentEl
+ * @param {LH.ReportResult.Category} category
+ */
+export function updateGauge(dom: import('./dom.js').DOM, componentEl: Element, category: LH.ReportResult.Category): void;
+//# sourceMappingURL=explodey-gauge.d.ts.map

package/report/renderer/explodey-gauge.js

@@ -0,0 +1,357 @@
+/**
+ * @license Copyright 2023 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.
+*/
+
+/* eslint-env browser */
+/* eslint-disable max-len */
+
+import {ReportUtils} from './report-utils.js';
+
+/**
+ * @param {import('./dom.js').DOM} dom
+ */
+function createGauge(dom) {
+  const docFrag = dom.createComponent('explodeyGauge');
+  return dom.find('.lh-exp-gauge-component', docFrag);
+}
+
+/**
+ * @param {import('./dom.js').DOM} dom
+ * @param {Element} componentEl
+ * @param {LH.ReportResult.Category} category
+ */
+function updateGauge(dom, componentEl, category) {
+  const wrapperEl = dom.find('div.lh-exp-gauge__wrapper', componentEl);
+  wrapperEl.className = '';
+  wrapperEl.classList.add('lh-exp-gauge__wrapper',
+    `lh-exp-gauge__wrapper--${ReportUtils.calculateRating(category.score)}`);
+  _setPerfGaugeExplodey(dom, wrapperEl, category);
+}
+
+/**
+ * @param {number} sizeSVG
+ * @param {number} percent
+ * @param {number=} strokeWidth
+ */
+function _determineTrig(sizeSVG, percent, strokeWidth) {
+  strokeWidth = strokeWidth || sizeSVG / 32;
+
+  const radiusInner = sizeSVG / strokeWidth;
+  const strokeGap = 0.5 * strokeWidth;
+  const radiusOuter = radiusInner + strokeGap + strokeWidth;
+
+  const circumferenceInner = 2 * Math.PI * radiusInner;
+  // arc length we need to subtract
+  // for very small strokeWidth:radius ratios this is ≈ strokeWidth
+  // angle = acute angle of isosceles △ with 2 edges equal to radius & 3rd equal to strokeWidth
+  // angle formula given by law of cosines
+  const endDiffInner = Math.acos(1 - 0.5 * Math.pow((0.5 * strokeWidth) / radiusInner, 2)) * radiusInner;
+
+  const circumferenceOuter = 2 * Math.PI * radiusOuter;
+  const endDiffOuter = Math.acos(1 - 0.5 * Math.pow((0.5 * strokeWidth) / radiusOuter, 2)) * radiusOuter;
+
+  return {
+    radiusInner,
+    radiusOuter,
+    circumferenceInner,
+    circumferenceOuter,
+    getArcLength: () => Math.max(0, Number((percent * circumferenceInner))),
+    /**
+     * @param {number} weightingPct
+     * @param {boolean} isButt for metricArcHoverTarget
+     */
+    getMetricArcLength: (weightingPct, isButt = false) => {
+      // TODO: this math isn't perfect butt it's very close.
+      const linecapFactor = isButt ? 0 : 2 * endDiffOuter;
+      return Math.max(0, Number((weightingPct * circumferenceOuter - strokeGap - linecapFactor)));
+    },
+    endDiffInner,
+    endDiffOuter,
+    strokeWidth,
+    strokeGap,
+  };
+}
+
+/**
+ * @param {import('./dom.js').DOM} dom
+ * @param {HTMLElement} wrapperEl
+ * @param {LH.ReportResult.Category} category
+ */
+function _setPerfGaugeExplodey(dom, wrapperEl, category) {
+  const sizeSVG = 128;
+  const offsetSVG = -0.5 * sizeSVG;
+
+  const percent = Number(category.score);
+  const {
+    radiusInner,
+    radiusOuter,
+    circumferenceInner,
+    circumferenceOuter,
+    getArcLength,
+    getMetricArcLength,
+    endDiffInner,
+    endDiffOuter,
+    strokeWidth,
+    strokeGap,
+  } = _determineTrig(sizeSVG, percent);
+
+  const SVG = dom.find('svg.lh-exp-gauge', wrapperEl);
+
+  dom.find('.lh-exp-gauge__label', SVG).textContent = category.title;
+
+  SVG.setAttribute('viewBox', [offsetSVG, offsetSVG / 2, sizeSVG, sizeSVG / 2].join(' '));
+  SVG.style.setProperty('--stroke-width', `${strokeWidth}px`);
+  SVG.style.setProperty('--circle-meas', (2 * Math.PI).toFixed(4));
+
+  const groupOuter = dom.find('g.lh-exp-gauge__outer', wrapperEl);
+  const groupInner = dom.find('g.lh-exp-gauge__inner', wrapperEl);
+  const cover = dom.find('circle.lh-cover', groupOuter);
+  const gaugeArc = dom.find('circle.lh-exp-gauge__arc', groupInner);
+  const gaugePerc = dom.find('text.lh-exp-gauge__percentage', groupInner);
+
+  groupOuter.style.setProperty('--scale-initial', String(radiusInner / radiusOuter));
+  groupOuter.style.setProperty('--radius', `${radiusOuter}px`);
+  cover.style.setProperty('--radius', `${0.5 * (radiusInner + radiusOuter)}px`);
+  cover.setAttribute('stroke-width', String(strokeGap));
+  SVG.style.setProperty('--radius', `${radiusInner}px`);
+
+  gaugeArc.setAttribute('stroke-dasharray',
+    `${getArcLength()} ${(circumferenceInner - getArcLength()).toFixed(4)}`);
+  gaugeArc.setAttribute('stroke-dashoffset', String(0.25 * circumferenceInner - endDiffInner));
+
+  gaugePerc.textContent = Math.round(percent * 100).toString();
+
+  const radiusTextOuter = radiusOuter + strokeWidth;
+  const radiusTextInner = radiusOuter - strokeWidth;
+
+  const metrics = category.auditRefs.filter(r => r.group === 'metrics' && r.weight);
+  const totalWeight = metrics.reduce((sum, each) => (sum += each.weight), 0);
+  let offsetAdder = 0.25 * circumferenceOuter - endDiffOuter - 0.5 * strokeGap;
+  let angleAdder = -0.5 * Math.PI;
+
+  // Extra hack on top of the HACK for element reuse below. Delete any metric elems that aren't needed anymore (happens when the same gauge goes from v5 to v6)
+  groupOuter.querySelectorAll('.metric').forEach(metricElem => {
+    const classNamesToRetain = metrics.map(metric => `metric--${metric.id}`);
+    const match = classNamesToRetain.find(selector => metricElem.classList.contains(selector));
+    if (!match) metricElem.remove();
+  });
+
+  metrics.forEach((metric, i) => {
+    const alias = metric.acronym ?? metric.id;
+
+    // Hack
+    const needsDomPopulation = !groupOuter.querySelector(`.metric--${alias}`);
+
+    // HACK:This isn't ideal but it was quick. Create element during initialization or reuse existing during updates
+    const metricGroup = dom.maybeFind(`g.metric--${alias}`, groupOuter) || dom.createSVGElement('g');
+    const metricArcMax = dom.maybeFind(`.metric--${alias} circle.lh-exp-gauge--faded`, groupOuter) || dom.createSVGElement('circle');
+    const metricArc = dom.maybeFind(`.metric--${alias} circle.lh-exp-gauge--miniarc`, groupOuter) || dom.createSVGElement('circle');
+    const metricArcHoverTarget = dom.maybeFind(`.metric--${alias} circle.lh-exp-gauge-hovertarget`, groupOuter) || dom.createSVGElement('circle');
+    const metricLabel = dom.maybeFind(`.metric--${alias} text.metric__label`, groupOuter) || dom.createSVGElement('text');
+    const metricValue = dom.maybeFind(`.metric--${alias} text.metric__value`, groupOuter) || dom.createSVGElement('text');
+
+    metricGroup.classList.add('metric', `metric--${alias}`);
+    metricArcMax.classList.add('lh-exp-gauge__arc', 'lh-exp-gauge__arc--metric', 'lh-exp-gauge--faded');
+    metricArc.classList.add('lh-exp-gauge__arc', 'lh-exp-gauge__arc--metric', 'lh-exp-gauge--miniarc');
+    metricArcHoverTarget.classList.add('lh-exp-gauge__arc', 'lh-exp-gauge__arc--metric', 'lh-exp-gauge-hovertarget');
+
+    const weightingPct = metric.weight / totalWeight;
+    const metricLengthMax = getMetricArcLength(weightingPct);
+    const metricPercent = metric.result.score ? metric.result.score * weightingPct : 0;
+    const metricLength = getMetricArcLength(metricPercent);
+    const metricOffset = weightingPct * circumferenceOuter;
+    const metricHoverLength = getMetricArcLength(weightingPct, true);
+    const rating = ReportUtils.calculateRating(metric.result.score, metric.result.scoreDisplayMode);
+
+    metricGroup.style.setProperty('--metric-rating', rating);
+    metricGroup.style.setProperty('--metric-color', `var(--color-${rating})`);
+    metricGroup.style.setProperty('--metric-offset', `${offsetAdder}`);
+    metricGroup.style.setProperty('--i', i.toString());
+
+    metricArcMax.setAttribute('stroke-dasharray', `${metricLengthMax} ${circumferenceOuter - metricLengthMax}`);
+    metricArc.style.setProperty('--metric-array', `${metricLength} ${circumferenceOuter - metricLength}`);
+    metricArcHoverTarget.setAttribute('stroke-dasharray', `${metricHoverLength} ${circumferenceOuter - metricHoverLength - endDiffOuter}`);
+
+    metricLabel.classList.add('metric__label');
+    metricValue.classList.add('metric__value');
+    metricLabel.textContent = alias;
+    metricValue.textContent = `+${Math.round(metricPercent * 100)}`;
+
+    const midAngle = angleAdder + weightingPct * Math.PI;
+    const cos = Math.cos(midAngle);
+    const sin = Math.sin(midAngle);
+
+    // only set non-default alignments
+    switch (true) {
+      case cos > 0:
+        metricValue.setAttribute('text-anchor', 'end');
+        break;
+      case cos < 0:
+        metricLabel.setAttribute('text-anchor', 'end');
+        break;
+      case cos === 0:
+        metricLabel.setAttribute('text-anchor', 'middle');
+        metricValue.setAttribute('text-anchor', 'middle');
+        break;
+    }
+
+    switch (true) {
+      case sin > 0:
+        metricLabel.setAttribute('dominant-baseline', 'hanging');
+        break;
+      case sin < 0:
+        metricValue.setAttribute('dominant-baseline', 'hanging');
+        break;
+      case sin === 0:
+        metricLabel.setAttribute('dominant-baseline', 'middle');
+        metricValue.setAttribute('dominant-baseline', 'middle');
+        break;
+    }
+
+    metricLabel.setAttribute('x', (radiusTextOuter * cos).toFixed(2));
+    metricLabel.setAttribute('y', (radiusTextOuter * sin).toFixed(2));
+    metricValue.setAttribute('x', (radiusTextInner * cos).toFixed(2));
+    metricValue.setAttribute('y', (radiusTextInner * sin).toFixed(2));
+
+    if (needsDomPopulation) {
+      metricGroup.appendChild(metricArcMax);
+      metricGroup.appendChild(metricArc);
+      metricGroup.appendChild(metricArcHoverTarget);
+      metricGroup.appendChild(metricLabel);
+      metricGroup.appendChild(metricValue);
+      groupOuter.appendChild(metricGroup);
+    }
+
+    offsetAdder -= metricOffset;
+    angleAdder += weightingPct * 2 * Math.PI;
+  });
+
+  // Catch pointerover movement between the hovertarget arcs. Without this the metric-highlights can clear when moving between.
+  const underHoverTarget = groupOuter.querySelector(`.lh-exp-gauge-underhovertarget`) || dom.createSVGElement('circle');
+  underHoverTarget.classList.add('lh-exp-gauge__arc', 'lh-exp-gauge__arc--metric', 'lh-exp-gauge-hovertarget', 'lh-exp-gauge-underhovertarget');
+  const underHoverLength = getMetricArcLength(1, true);
+  underHoverTarget.setAttribute('stroke-dasharray', `${underHoverLength} ${circumferenceOuter - underHoverLength - endDiffOuter}`);
+  if (!underHoverTarget.isConnected) {
+    groupOuter.prepend(underHoverTarget);
+  }
+
+  // Hack. Not ideal.
+  if (SVG.dataset.listenersSetup) return;
+  // @ts-expect-error
+  SVG.dataset.listenersSetup = true;
+
+  peekGauge(SVG);
+
+  /*
+    wrapperEl.state-expanded: gauge is exploded
+    wrapperEl.state-highlight: gauge is exploded and one of the metrics is being highlighted
+    metric.metric-highlight: highlight this particular metric
+  */
+  SVG.addEventListener('pointerover', e => {
+    // If hovering outside of the arcs, reset back to unexploded state
+    if (e.target === SVG && SVG.classList.contains('state--expanded')) {
+      SVG.classList.remove('state--expanded');
+
+      if (SVG.classList.contains('state--highlight')) {
+        SVG.classList.remove('state--highlight');
+        dom.find('.metric--highlight', SVG).classList.remove('metric--highlight');
+      }
+      return;
+    }
+
+    if (!(e.target instanceof Element)) {
+      return;
+    }
+
+    const parentEl = e.target.parentNode;
+    if (!(parentEl instanceof SVGElement)) {
+      return;
+    }
+
+    // if hovering on the primary (inner) part, then explode it but dont highlight
+    if (parentEl && parentEl === groupInner) {
+      if (!SVG.classList.contains('state--expanded')) SVG.classList.add('state--expanded');
+      else if (SVG.classList.contains('state--highlight')) {
+        SVG.classList.remove('state--highlight');
+        dom.find('.metric--highlight', SVG).classList.remove('metric--highlight');
+      }
+      return;
+    }
+
+    // if hovering on a metric, highlight that one.
+    // TODO: The hover target is a little small. ideally it's thicker.
+    if (parentEl && parentEl.classList && parentEl.classList.contains('metric')) {
+      // match the bg color of the gauge during a metric highlight
+      const metricRating = parentEl.style.getPropertyValue('--metric-rating');
+      wrapperEl.style.setProperty('--color-highlight', `var(--color-${metricRating}-secondary)`);
+
+      if (!SVG.classList.contains('state--highlight')) {
+        SVG.classList.add('state--highlight');
+        parentEl.classList.add('metric--highlight');
+      } else {
+        const highlightEl = dom.find('.metric--highlight', SVG);
+
+        if (parentEl !== highlightEl) {
+          highlightEl.classList.remove('metric--highlight');
+          parentEl.classList.add('metric--highlight');
+          console.log({highlightEl, parent: parentEl});
+        }
+      }
+    }
+  });
+
+  // clear on mouselave even if mousemove didn't catch it.
+  SVG.addEventListener('mouseleave', () => {
+    // SVG.classList.remove('state--expanded');
+    SVG.classList.remove('state--highlight');
+    const mh = SVG.querySelector('.metric--highlight');
+    mh?.classList.remove('metric--highlight');
+  });
+
+  /**
+   * On the first run, tease with a little peek reveal
+   * @param {SVGElement} SVG
+   */
+  async function peekGauge(SVG) {
+    // Delay just a tad to let the user aclimatize beforehand.
+    await new Promise(resolve => setTimeout(resolve, 1000));
+
+    // Early exit if it's already engaged
+    if (SVG.classList.contains('state--expanded')) return;
+
+    // To visually get the outer ring to peek on the edge, we need the inner ring on top. This is SVG's equivalent to `innerElem.zIndex = 100`
+    const inner = dom.find('.lh-exp-gauge__inner', SVG);
+    const id = `uniq-${Math.random()}`;
+    inner.setAttribute('id', id);
+    const useElem = dom.createSVGElement('use');
+    useElem.setAttribute('href', `#${id}`);
+    // for paint order this must come _after_ the outer.
+    SVG.appendChild(useElem);
+
+    const peekDurationSec = 2.5;
+    SVG.style.setProperty('--peek-dur', `${peekDurationSec}s`);
+    SVG.classList.add('state--peek', 'state--expanded');
+
+    // Fancy double cleanup
+    const cleanup = () => {
+      SVG.classList.remove('state--peek', 'state--expanded');
+      useElem.remove();
+    };
+    const tId = setTimeout(() => {
+      SVG.removeEventListener('mouseenter', handleEarlyInteraction);
+      cleanup();
+    }, peekDurationSec * 1000 * 1.5); // lil extra time just cuz
+    function handleEarlyInteraction() {
+      clearTimeout(tId);
+      cleanup();
+    }
+    SVG.addEventListener('mouseenter', handleEarlyInteraction, {once: true});
+  }
+}
+
+export {
+  createGauge,
+  updateGauge,
+};

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

@@ -1,7 +1,7 @@
 /**
- * @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.
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
  */
 /** @typedef {import('./dom.js').DOM} DOM */
 /**

package/report/renderer/features-util.js

@@ -1,7 +1,7 @@
 /**
- * @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.
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
  */
 
 /* eslint-env browser */

package/report/renderer/i18n-formatter.js

@@ -1,7 +1,7 @@
 /**
- * @license Copyright 2020 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.
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
  */
 
 // Not named `NBSP` because that creates a duplicate identifier (util.js).

package/report/renderer/logger.d.ts

@@ -1,18 +1,7 @@
 /**
  * @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.
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
  */
 /**
  * Logs messages via a UI butter.

package/report/renderer/logger.js

@@ -1,18 +1,7 @@
 /**
  * @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.
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
  */
 
 /**

package/report/renderer/open-tab.js

@@ -1,18 +1,7 @@
 /**
  * @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.
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
  */
 
 import {TextEncoding} from './text-encoding.js';