lighthouse 13.3.0 → 13.4.0-dev.20260626

package/report/renderer/explodey-gauge.js

@@ -322,12 +322,14 @@ function _setPerfGaugeExplodey(dom, wrapperEl, category) {
 
     // 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 useElems = Array.from(inner.querySelectorAll('circle')).map(circle => {
+      const id = `uniq-${Math.random()}`;
+      circle.setAttribute('id', id);
+      const useElem = dom.createSVGElement('use');
+      useElem.setAttribute('href', `#${id}`);
+      SVG.appendChild(useElem);
+      return useElem;
+    });
 
     const peekDurationSec = 2.5;
     SVG.style.setProperty('--peek-dur', `${peekDurationSec}s`);
@@ -336,7 +338,7 @@ function _setPerfGaugeExplodey(dom, wrapperEl, category) {
     // Fancy double cleanup
     const cleanup = () => {
       SVG.classList.remove('state--peek', 'state--expanded');
-      useElem.remove();
+      useElems.forEach(el => el.remove());
     };
     const tId = setTimeout(() => {
       SVG.removeEventListener('mouseenter', handleEarlyInteraction);

package/report/renderer/i18n-formatter.d.ts

@@ -3,7 +3,7 @@ export class I18nFormatter {
      * @param {LH.Locale} locale
      */
     constructor(locale: LH.Locale);
-    _locale: "ar" | "en-US" | "en" | "en-AU" | "en-GB" | "en-IE" | "en-SG" | "en-ZA" | "en-IN" | "ar-XB" | "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";
+    _locale: "id" | "hr" | "th" | "tr" | "mo" | "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" | "hu" | "gsw" | "in" | "it" | "iw" | "ja" | "ko" | "lt" | "lv" | "nl" | "nb" | "no" | "pl" | "pt" | "pt-PT" | "ro" | "ru" | "sk" | "sl" | "sr" | "sr-Latn" | "sv" | "ta" | "te" | "tl" | "uk" | "vi" | "zh" | "zh-HK" | "zh-TW";
     _cachedNumberFormatters: Map<any, any>;
     /**
      * @param {number} number

package/report/renderer/logger.js

@@ -13,8 +13,18 @@ export class Logger {
    */
   constructor(element) {
     this.el = element;
+
     const styleEl = document.createElement('style');
     styleEl.textContent = /* css */ `
+      @keyframes fadeInDown {
+        from { transform: translateY(100px); opacity: 0; }
+        to { transform: translateY(0); opacity: 1; }
+      }
+      @keyframes fadeOutUp {
+        from { transform: translateY(0); opacity: 1; }
+        to { transform: translateY(100px); opacity: 0; }
+      }
+
       #lh-log {
         position: fixed;
         background-color: #323232;
@@ -27,7 +37,6 @@ export class Logger {
         margin: 12px;
         font-size: 14px;
         cursor: default;
-        transition: transform 0.3s, opacity 0.3s;
         transform: translateY(100px);
         opacity: 0;
         bottom: 0;
@@ -40,8 +49,11 @@ export class Logger {
       }
       
       #lh-log.lh-show {
-        opacity: 1;
-        transform: translateY(0);
+        animation: fadeInDown 0.3s forwards;
+      }
+
+      #lh-log.lh-hide {
+        animation: fadeOutUp 0.3s forwards;
       }
     `;
     if (!this.el.parentNode) throw new Error('element needs to be in the DOM');
@@ -59,10 +71,11 @@ export class Logger {
     this._id && clearTimeout(this._id);
 
     this.el.textContent = msg;
+    this.el.classList.remove('lh-hide');
     this.el.classList.add('lh-show');
     if (autoHide) {
       this._id = setTimeout(() => {
-        this.el.classList.remove('lh-show');
+        this.hide();
       }, 7000);
     }
   }
@@ -93,5 +106,6 @@ export class Logger {
   hide() {
     this._id && clearTimeout(this._id);
     this.el.classList.remove('lh-show');
+    this.el.classList.add('lh-hide');
   }
 }

package/report/renderer/text-encoding.js

@@ -36,7 +36,7 @@ async function toBase64(string, options) {
     } else {
       /** @type {import('pako')=} */
       const pako = window.pako;
-      bytes = pako.gzip(string);
+      bytes = /** @type {any} */ (pako.gzip(string));
     }
   }
 

package/report/types/html-renderer.d.ts

@@ -14,7 +14,7 @@ import Treemap_ from '../../types/lhr/treemap';
 
 declare global {
   // Expose global types in LH namespace.
-  module LH {
+  namespace LH {
     export import Result = LHResult;
     export import ReportResult = ReportResult_;
     export import Renderer = Renderer_;
@@ -22,7 +22,7 @@ declare global {
     export type IcuMessage = IcuMessage_;
     export type FormattedIcu<T> = FormattedIcu_<T>;
 
-    module Audit {
+    namespace Audit {
       export import Details = AuditDetails;
     }