lighthouse 12.8.2-dev.20251004 → 12.8.2-dev.20251006

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

@@ -12,16 +12,7 @@ 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_2';
-
-/**
- * @typedef {('DEFAULT'|'AUDITS'|'INSIGHTS')} InsightsExperimentState
- */
-
 export class PerformanceCategoryRenderer extends CategoryRenderer {
-  /** @type InsightsExperimentState*/
-  _memoryInsightToggleState = 'DEFAULT';
-
   /**
    * @param {LH.ReportResult.AuditRef} audit
    * @return {!Element}
@@ -143,84 +134,6 @@ 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 = 'INSIGHTS';
-    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 insights-icon-url');
-    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
@@ -288,44 +201,12 @@ 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');
-
-    const experimentalInsightsSection =
+    const auditsSection =
       this.renderFilterableSection(category, groups, ['insights', 'diagnostics'], metricAudits);
-    experimentalInsightsSection?.classList.add(
-      'lh-perf-audits--swappable', 'lh-perf-audits--experimental');
-
-    if (legacyAuditsSection) {
-      element.append(legacyAuditsSection);
-
-      // Many tests expect just one of these sections to be in the DOM at a given time.
-      // To prevent the hidden section from tripping up these tests, we will just remove the hidden
-      // section from the DOM and store it in memory.
-      if (experimentalInsightsSection) {
-        this.dom.registerSwappableSections(legacyAuditsSection, experimentalInsightsSection);
-      }
+    if (auditsSection) {
+      auditsSection.classList.add('lh-perf-audits');
+      element.append(auditsSection);
     }
-    // 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) {
@@ -349,31 +230,18 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
 
     const element = this.dom.createElement('div');
 
-    /** @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 ?? '';
+      return auditRef.group ?? '';
     };
 
     const allGroupAudits =
       category.auditRefs.filter(audit => groupNames.includes(getGroup(audit)));
-    for (const auditRef of allGroupAudits) {
-      auditRef.result.replacesAudits?.forEach(replacedAuditId => {
-        replacedAuditIds.add(replacedAuditId);
-      });
-    }
 
     // Diagnostics
     const allFilterableAudits = allGroupAudits
-      .filter(audit => !replacedAuditIds.has(audit.id))
       .map(auditRef => {
         const {overallImpact, overallLinearImpact} = this.overallImpact(auditRef, metricAudits);
         const guidanceLevel = auditRef.result.guidanceLevel || 1;
@@ -382,7 +250,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
         return {auditRef, auditEl, overallImpact, overallLinearImpact, guidanceLevel};
       });
 
-    const filterableAudits = allFilterableAudits
+    const notPassedAudits = allFilterableAudits
       .filter(audit => !ReportUtils.showAsPassed(audit.auditRef.result));
 
     const passedAudits = allFilterableAudits
@@ -409,7 +277,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
         }
       }
 
-      filterableAudits.sort((a, b) => {
+      notPassedAudits.sort((a, b) => {
         // Performance diagnostics should only have score display modes of "informative" and "metricSavings"
         // If the score display mode is "metricSavings", the `score` will be a coarse approximation of the overall impact.
         // Therefore, it makes sense to sort audits by score first to ensure visual clarity with the score icons.
@@ -441,7 +309,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
         return b.guidanceLevel - a.guidanceLevel;
       });
 
-      for (const audit of filterableAudits) {
+      for (const audit of notPassedAudits) {
         if (!audit.auditRef.group) continue;
 
         const groupEls = groupElsMap[getGroup(audit.auditRef)];
@@ -454,7 +322,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
 
     /** @type {Set<string>} */
     const filterableMetricAcronyms = new Set();
-    for (const audit of filterableAudits) {
+    for (const audit of notPassedAudits) {
       const metricSavings = audit.auditRef.result.metricSavings || {};
       for (const [key, value] of Object.entries(metricSavings)) {
         if (typeof value === 'number') filterableMetricAcronyms.add(key);
@@ -472,7 +340,7 @@ export class PerformanceCategoryRenderer extends CategoryRenderer {
     refreshFilteredAudits('All');
 
     for (const groupName of groupNames) {
-      if (filterableAudits.some(audit => getGroup(audit.auditRef) === groupName)) {
+      if (notPassedAudits.some(audit => getGroup(audit.auditRef) === groupName)) {
         const groupEls = groupElsMap[groupName];
         if (!groupEls) continue;
         element.append(groupEls[0]);

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

@@ -10,7 +10,6 @@ export class ReportUIFeatures {
     _dom: DOM;
     _opts: import("../types/report-renderer.js").default.Options;
     _topbar: TopbarFeatures | null;
-    _tablesHandledFor3p: WeakSet<object>;
     /**
      * Handle media query change events.
      * @param {MediaQueryList|MediaQueryListEvent} mql

package/report/renderer/report-ui-features.js

@@ -40,7 +40,6 @@ export class ReportUIFeatures {
     this._opts = opts;
 
     this._topbar = opts.omitTopbar ? null : new TopbarFeatures(this, dom);
-    this._tablesHandledFor3p = new WeakSet();
     this.onMediaQueryChange = this.onMediaQueryChange.bind(this);
   }
 
@@ -61,9 +60,6 @@ export class ReportUIFeatures {
     this._setupThirdPartyFilter();
     this._setupElementScreenshotOverlay(this._dom.rootEl);
 
-    // TODO(v13): remove.
-    this._dom._onSwap = () => this._setupThirdPartyFilter();
-
     // Do not query the system preferences for DevTools - DevTools should only apply dark theme
     // if dark is selected in the settings panel.
     // TODO: set `disableDarkMode` in devtools and delete this special case.
@@ -215,10 +211,13 @@ export class ReportUIFeatures {
   }
 
   _setupThirdPartyFilter() {
+    // Note: do not remove deleted audits from the below arrays.
+
     // Some audits should not display the third party filter option.
     const thirdPartyFilterAuditExclusions = [
       // These audits deal explicitly with third party resources.
       'uses-rel-preconnect',
+      'third-party-facades',
       // Too much work to support.
       'network-dependency-tree-insight',
     ];
@@ -241,15 +240,6 @@ export class ReportUIFeatures {
       });
 
     tablesWithUrls.forEach((tableEl) => {
-      // The "toggle insights/audits" button means that not all tables are on the DOM on init.
-      // So we call this whole setup function multiple times for now, once every time we toggle.
-      // TODO(v13): remove.
-      if (this._tablesHandledFor3p.has(tableEl)) {
-        return;
-      }
-
-      this._tablesHandledFor3p.add(tableEl);
-
       const rowEls = getTableRows(tableEl);
       const nonSubItemRows = rowEls.filter(rowEl => !rowEl.classList.contains('lh-sub-item-row'));
       const thirdPartyRowEls = this._getThirdPartyRows(nonSubItemRows,

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

@@ -136,8 +136,7 @@ export namespace UIStrings {
     let firstPartyChipLabel: string;
     let openInANewTabTooltip: string;
     let unattributable: string;
-    let insightsNotice: string;
-    let tryInsights: string;
-    let goBackToAudits: string;
+    let unscoredLabel: string;
+    let unscoredTitle: string;
 }
 //# sourceMappingURL=report-utils.d.ts.map

package/report/renderer/report-utils.js

@@ -483,12 +483,10 @@ const UIStrings = {
   /** 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',
+  /** Descriptive explanation used when an audit is not part of the calculated score. */
+  unscoredLabel: 'Unscored',
+  /** Descriptive explanation used when an audit is not part of the calculated score. */
+  unscoredTitle: 'This audit does not contribute to the overall category score.',
 };
 
 export {

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

@@ -5,7 +5,6 @@
  */
 
 import { Result as AuditResult } from "../../types/lhr/audit-result";
-import { ReportUIFeatures } from "../renderer/report-ui-features.js";
 
 declare module Renderer {
   function renderReport(lhr: AuditResult, options?: Options): HTMLElement;
@@ -47,11 +46,6 @@ declare module Renderer {
      * data, which can be gotten from the artifacts.
      */
     onViewTrace?: () => void;
-    /**
-     * Called when the performance audits/insights are swapped out.
-     * TODO(v13): remove
-     */
-    _onSwapHook?: () => void;
   }
 }