chrome-devtools-frontend 1.0.1597624 → 1.0.1599001

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -12,7 +12,6 @@ import * as EmulationModel from '../../models/emulation/emulation.js';
 import type * as LighthouseModel from '../../models/lighthouse/lighthouse.js';
 import * as Emulation from '../emulation/emulation.js';
 
-import type {RunOverrides} from './LighthousePanel.js';
 import type {LighthouseRun as LighthouseRunType, ProtocolService} from './LighthouseProtocolService.js';
 
 const UIStrings = {
@@ -370,11 +369,11 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
     protocolService.registerStatusCallback(
         message => this.dispatchEventToListeners(Events.AuditProgressChanged, {message}));
 
-    for (const preset of Presets) {
+    for (const preset of getPresets()) {
       preset.setting.addChangeListener(this.recomputePageAuditability.bind(this));
     }
 
-    for (const runtimeSetting of RuntimeSettings) {
+    for (const runtimeSetting of getRuntimeSettings()) {
       runtimeSetting.setting.addChangeListener(this.recomputePageAuditability.bind(this));
     }
 
@@ -441,7 +440,7 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
   }
 
   private hasAtLeastOneCategory(): boolean {
-    return Presets.some(preset => preset.setting.get());
+    return getPresets().some(preset => preset.setting.get());
   }
 
   private unauditablePageMessage(): string|null {
@@ -492,7 +491,7 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
 
   private async hasImportantResourcesNotCleared(): Promise<string> {
     const clearStorageSetting =
-        RuntimeSettings.find(runtimeSetting => runtimeSetting.setting.name === 'lighthouse.clear-storage');
+        getRuntimeSettings().find(runtimeSetting => runtimeSetting.setting.name === 'lighthouse.clear-storage');
     if (clearStorageSetting && !clearStorageSetting.setting.get()) {
       return '';
     }
@@ -559,7 +558,7 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
     mode: string,
   } {
     const flags = {};
-    for (const runtimeSetting of RuntimeSettings) {
+    for (const runtimeSetting of getRuntimeSettings()) {
       runtimeSetting.setFlags(flags, runtimeSetting.setting.get());
     }
     return flags as {
@@ -568,10 +567,10 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
     };
   }
 
-  getCategoryIDs(): CategoryId[] {
+  getCategoryIDs(): LighthouseModel.RunTypes.CategoryId[] {
     const {mode} = this.getFlags();
-    const categoryIDs: CategoryId[] = [];
-    for (const preset of Presets) {
+    const categoryIDs: LighthouseModel.RunTypes.CategoryId[] = [];
+    for (const preset of getPresets()) {
       if (mode && !preset.supportedModes.includes(mode)) {
         continue;
       }
@@ -620,7 +619,7 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
   private recordMetrics(flags: {mode: string}, categoryIds: string[]): void {
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.LighthouseStarted);
 
-    for (const preset of Presets) {
+    for (const preset of getPresets()) {
       if (!categoryIds.includes(preset.configID)) {
         continue;
       }
@@ -645,7 +644,7 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
    * user has selected in the UI, but these can be overridden by passing in the
    * category IDs, in which case these take priority.
    */
-  async startLighthouse(overrides?: RunOverrides): Promise<void> {
+  async startLighthouse(overrides?: LighthouseModel.RunTypes.RunOverrides): Promise<void> {
     if (this.lastAction) {
       await this.lastAction;
     }
@@ -702,144 +701,154 @@ const STORAGE_TYPE_NAMES = new Map([
   [Protocol.Storage.StorageType.Websql, i18nLazyString(UIStrings.webSql)],
 ]);
 
-export const Presets: Preset[] = [
-  // configID maps to Lighthouse's Object.keys(config.categories)[0] value
-  {
-    setting: Common.Settings.Settings.instance().createSetting(
-        'lighthouse.cat-perf', true, Common.Settings.SettingStorageType.SYNCED),
-    configID: 'performance',
-    title: i18nLazyString(UIStrings.performance),
-    description: i18nLazyString(UIStrings.howLongDoesThisAppTakeToShow),
-    supportedModes: ['navigation', 'timespan', 'snapshot'],
-    userMetric: Host.UserMetrics.LighthouseCategoryUsed.PERFORMANCE,
-  },
-  {
-    setting: Common.Settings.Settings.instance().createSetting(
-        'lighthouse.cat-a11y', true, Common.Settings.SettingStorageType.SYNCED),
-    configID: 'accessibility',
-    title: i18nLazyString(UIStrings.accessibility),
-    description: i18nLazyString(UIStrings.isThisPageUsableByPeopleWith),
-    supportedModes: ['navigation', 'snapshot'],
-    userMetric: Host.UserMetrics.LighthouseCategoryUsed.ACCESSIBILITY,
-  },
-  {
-    setting: Common.Settings.Settings.instance().createSetting(
-        'lighthouse.cat-best-practices', true, Common.Settings.SettingStorageType.SYNCED),
-    configID: 'best-practices',
-    title: i18nLazyString(UIStrings.bestPractices),
-    description: i18nLazyString(UIStrings.doesThisPageFollowBestPractices),
-    supportedModes: ['navigation', 'timespan', 'snapshot'],
-    userMetric: Host.UserMetrics.LighthouseCategoryUsed.BEST_PRACTICES,
-  },
-  {
-    setting: Common.Settings.Settings.instance().createSetting(
-        'lighthouse.cat-seo', true, Common.Settings.SettingStorageType.SYNCED),
-    configID: 'seo',
-    title: i18nLazyString(UIStrings.seo),
-    description: i18nLazyString(UIStrings.isThisPageOptimizedForSearch),
-    supportedModes: ['navigation', 'snapshot'],
-    userMetric: Host.UserMetrics.LighthouseCategoryUsed.SEO,
-  },
-];
-
-export type Flags = Record<string, string|boolean>;
-
-export const RuntimeSettings: RuntimeSetting[] = [
-  {
-    setting: Common.Settings.Settings.instance().createSetting(
-        'lighthouse.device-type', 'mobile', Common.Settings.SettingStorageType.SYNCED),
-    title: i18nLazyString(UIStrings.applyMobileEmulation),
-    description: i18nLazyString(UIStrings.applyMobileEmulationDuring),
-    setFlags: (flags: Flags, value: string|boolean) => {
-      // See Audits.AuditsPanel._setupEmulationAndProtocolConnection()
-      flags.formFactor = value;
-    },
-    options: [
+let presets: LighthouseModel.RunTypes.Preset[]|null = null;
+export function getPresets(): LighthouseModel.RunTypes.Preset[] {
+  if (!presets) {
+    presets = [
+      // configID maps to Lighthouse's Object.keys(config.categories)[0] value
       {
-        label: i18nLazyString(UIStrings.mobile),
-        tooltip: i18nLazyString(UIStrings.applyMobileEmulationDuring),
-        value: 'mobile'
+        setting: Common.Settings.Settings.instance().createSetting(
+            'lighthouse.cat-perf', true, Common.Settings.SettingStorageType.SYNCED),
+        configID: 'performance',
+        title: i18nLazyString(UIStrings.performance),
+        description: i18nLazyString(UIStrings.howLongDoesThisAppTakeToShow),
+        supportedModes: ['navigation', 'timespan', 'snapshot'],
+        userMetric: Host.UserMetrics.LighthouseCategoryUsed.PERFORMANCE,
       },
       {
-        label: i18nLazyString(UIStrings.desktop),
-        tooltip: i18nLazyString(UIStrings.applyDesktopEmulationDuring),
-        value: 'desktop'
+        setting: Common.Settings.Settings.instance().createSetting(
+            'lighthouse.cat-a11y', true, Common.Settings.SettingStorageType.SYNCED),
+        configID: 'accessibility',
+        title: i18nLazyString(UIStrings.accessibility),
+        description: i18nLazyString(UIStrings.isThisPageUsableByPeopleWith),
+        supportedModes: ['navigation', 'snapshot'],
+        userMetric: Host.UserMetrics.LighthouseCategoryUsed.ACCESSIBILITY,
       },
-    ],
-  },
-  {
-    setting: Common.Settings.Settings.instance().createSetting(
-        'lighthouse.mode', 'navigation', Common.Settings.SettingStorageType.SYNCED),
-    title: i18nLazyString(UIStrings.lighthouseMode),
-    description: i18nLazyString(UIStrings.runLighthouseInMode),
-    setFlags: (flags: Flags, value: string|boolean) => {
-      flags.mode = value;
-    },
-    options: [
       {
-        label: i18nLazyString(UIStrings.navigation),
-        tooltip: i18nLazyString(UIStrings.navigationTooltip),
-        value: 'navigation',
+        setting: Common.Settings.Settings.instance().createSetting(
+            'lighthouse.cat-best-practices', true, Common.Settings.SettingStorageType.SYNCED),
+        configID: 'best-practices',
+        title: i18nLazyString(UIStrings.bestPractices),
+        description: i18nLazyString(UIStrings.doesThisPageFollowBestPractices),
+        supportedModes: ['navigation', 'timespan', 'snapshot'],
+        userMetric: Host.UserMetrics.LighthouseCategoryUsed.BEST_PRACTICES,
       },
       {
-        label: i18nLazyString(UIStrings.timespan),
-        tooltip: i18nLazyString(UIStrings.timespanTooltip),
-        value: 'timespan',
+        setting: Common.Settings.Settings.instance().createSetting(
+            'lighthouse.cat-seo', true, Common.Settings.SettingStorageType.SYNCED),
+        configID: 'seo',
+        title: i18nLazyString(UIStrings.seo),
+        description: i18nLazyString(UIStrings.isThisPageOptimizedForSearch),
+        supportedModes: ['navigation', 'snapshot'],
+        userMetric: Host.UserMetrics.LighthouseCategoryUsed.SEO,
       },
+    ];
+  }
+  return presets;
+}
+
+let runtimeSettings: LighthouseModel.RunTypes.RuntimeSetting[]|null = null;
+export function getRuntimeSettings(): LighthouseModel.RunTypes.RuntimeSetting[] {
+  if (!runtimeSettings) {
+    runtimeSettings = [
       {
-        label: i18nLazyString(UIStrings.snapshot),
-        tooltip: i18nLazyString(UIStrings.snapshotTooltip),
-        value: 'snapshot',
+        setting: Common.Settings.Settings.instance().createSetting(
+            'lighthouse.device-type', 'mobile', Common.Settings.SettingStorageType.SYNCED),
+        title: i18nLazyString(UIStrings.applyMobileEmulation),
+        description: i18nLazyString(UIStrings.applyMobileEmulationDuring),
+        setFlags: (flags: LighthouseModel.RunTypes.Flags, value: string|boolean) => {
+          // See Audits.AuditsPanel._setupEmulationAndProtocolConnection()
+          flags.formFactor = value;
+        },
+        options: [
+          {
+            label: i18nLazyString(UIStrings.mobile),
+            tooltip: i18nLazyString(UIStrings.applyMobileEmulationDuring),
+            value: 'mobile'
+          },
+          {
+            label: i18nLazyString(UIStrings.desktop),
+            tooltip: i18nLazyString(UIStrings.applyDesktopEmulationDuring),
+            value: 'desktop'
+          },
+        ],
       },
-    ],
-    learnMore: 'https://github.com/GoogleChrome/lighthouse/blob/HEAD/docs/user-flows.md' as
-        Platform.DevToolsPath.UrlString,
-  },
-  {
-    // This setting is disabled, but we keep it around to show in the UI.
-    setting: Common.Settings.Settings.instance().createSetting(
-        'lighthouse.throttling', 'simulate', Common.Settings.SettingStorageType.SYNCED),
-    title: i18nLazyString(UIStrings.throttlingMethod),
-    // We will disable this when we have a Lantern trace viewer within DevTools.
-    learnMore:
-        'https://github.com/GoogleChrome/lighthouse/blob/master/docs/throttling.md#devtools-lighthouse-panel-throttling' as
-        Platform.DevToolsPath.UrlString,
-    description: i18nLazyString(UIStrings.simulateASlowerPageLoadBasedOn),
-    setFlags: (flags: Flags, value: string|boolean) => {
-      if (typeof value === 'string') {
-        flags.throttlingMethod = value;
-      } else {
-        flags.throttlingMethod = value ? 'simulate' : 'devtools';
-      }
-    },
-    options: [
-      {label: i18nLazyString(UIStrings.simulatedThrottling), value: 'simulate'},
-      {label: i18nLazyString(UIStrings.devtoolsThrottling), value: 'devtools'},
-    ],
-  },
-  {
-    setting: Common.Settings.Settings.instance().createSetting(
-        'lighthouse.clear-storage', true, Common.Settings.SettingStorageType.SYNCED),
-    title: i18nLazyString(UIStrings.clearStorage),
-    description: i18nLazyString(UIStrings.resetStorageLocalstorage),
-    setFlags: (flags: Flags, value: string|boolean) => {
-      flags.disableStorageReset = !value;
-    },
-  },
-  {
-    setting: Common.Settings.Settings.instance().createSetting(
-        'lighthouse.enable-sampling', false, Common.Settings.SettingStorageType.SYNCED),
-    title: i18nLazyString(UIStrings.enableSampling),
-    description: i18nLazyString(UIStrings.enableJavaScriptSampling),
-    setFlags: (flags: Flags, value: string|boolean) => {
-      if (value) {
-        flags.additionalTraceCategories = 'disabled-by-default-v8.cpu_profiler';
-      } else {
-        flags.additionalTraceCategories = '';
-      }
-    },
-  },
-];
+      {
+        setting: Common.Settings.Settings.instance().createSetting(
+            'lighthouse.mode', 'navigation', Common.Settings.SettingStorageType.SYNCED),
+        title: i18nLazyString(UIStrings.lighthouseMode),
+        description: i18nLazyString(UIStrings.runLighthouseInMode),
+        setFlags: (flags: LighthouseModel.RunTypes.Flags, value: string|boolean) => {
+          flags.mode = value;
+        },
+        options: [
+          {
+            label: i18nLazyString(UIStrings.navigation),
+            tooltip: i18nLazyString(UIStrings.navigationTooltip),
+            value: 'navigation',
+          },
+          {
+            label: i18nLazyString(UIStrings.timespan),
+            tooltip: i18nLazyString(UIStrings.timespanTooltip),
+            value: 'timespan',
+          },
+          {
+            label: i18nLazyString(UIStrings.snapshot),
+            tooltip: i18nLazyString(UIStrings.snapshotTooltip),
+            value: 'snapshot',
+          },
+        ],
+        learnMore: 'https://github.com/GoogleChrome/lighthouse/blob/HEAD/docs/user-flows.md' as
+            Platform.DevToolsPath.UrlString,
+      },
+      {
+        // This setting is disabled, but we keep it around to show in the UI.
+        setting: Common.Settings.Settings.instance().createSetting(
+            'lighthouse.throttling', 'simulate', Common.Settings.SettingStorageType.SYNCED),
+        title: i18nLazyString(UIStrings.throttlingMethod),
+        // We will disable this when we have a Lantern trace viewer within DevTools.
+        learnMore:
+            'https://github.com/GoogleChrome/lighthouse/blob/master/docs/throttling.md#devtools-lighthouse-panel-throttling' as
+            Platform.DevToolsPath.UrlString,
+        description: i18nLazyString(UIStrings.simulateASlowerPageLoadBasedOn),
+        setFlags: (flags: LighthouseModel.RunTypes.Flags, value: string|boolean) => {
+          if (typeof value === 'string') {
+            flags.throttlingMethod = value;
+          } else {
+            flags.throttlingMethod = value ? 'simulate' : 'devtools';
+          }
+        },
+        options: [
+          {label: i18nLazyString(UIStrings.simulatedThrottling), value: 'simulate'},
+          {label: i18nLazyString(UIStrings.devtoolsThrottling), value: 'devtools'},
+        ],
+      },
+      {
+        setting: Common.Settings.Settings.instance().createSetting(
+            'lighthouse.clear-storage', true, Common.Settings.SettingStorageType.SYNCED),
+        title: i18nLazyString(UIStrings.clearStorage),
+        description: i18nLazyString(UIStrings.resetStorageLocalstorage),
+        setFlags: (flags: LighthouseModel.RunTypes.Flags, value: string|boolean) => {
+          flags.disableStorageReset = !value;
+        },
+      },
+      {
+        setting: Common.Settings.Settings.instance().createSetting(
+            'lighthouse.enable-sampling', false, Common.Settings.SettingStorageType.SYNCED),
+        title: i18nLazyString(UIStrings.enableSampling),
+        description: i18nLazyString(UIStrings.enableJavaScriptSampling),
+        setFlags: (flags: LighthouseModel.RunTypes.Flags, value: string|boolean) => {
+          if (value) {
+            flags.additionalTraceCategories = 'disabled-by-default-v8.cpu_profiler';
+          } else {
+            flags.additionalTraceCategories = '';
+          }
+        },
+      },
+    ];
+  }
+  return runtimeSettings;
+}
 
 export enum Events {
   /* eslint-disable @typescript-eslint/naming-convention -- Used by web_tests. */
@@ -866,26 +875,3 @@ export interface EventTypes {
   [Events.PageWarningsChanged]: PageWarningsChangedEvent;
   [Events.AuditProgressChanged]: AuditProgressChangedEvent;
 }
-
-export type CategoryId = 'performance'|'accessibility'|'best-practices'|'seo';
-
-export interface Preset {
-  setting: Common.Settings.Setting<boolean>;
-  configID: CategoryId;
-  title: () => Common.UIString.LocalizedString;
-  description: () => Common.UIString.LocalizedString;
-  supportedModes: string[];
-  userMetric: Host.UserMetrics.LighthouseCategoryUsed;
-}
-export interface RuntimeSetting {
-  setting: Common.Settings.Setting<string|boolean>;
-  description: () => Common.UIString.LocalizedString;
-  setFlags: (flags: Flags, value: string|boolean) => void;
-  options?: Array<{
-    label: () => Common.UIString.LocalizedString,
-    value: string,
-    tooltip?: () => Common.UIString.LocalizedString,
-  }>;
-  title?: () => Common.UIString.LocalizedString;
-  learnMore?: Platform.DevToolsPath.UrlString;
-}

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -13,7 +13,6 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {
   type AuditProgressChangedEvent,
-  type CategoryId,
   Events,
   LighthouseController,
   type PageAuditabilityChangedEvent,
@@ -153,7 +152,7 @@ export class LighthousePanel extends UI.Panel.Panel {
     }
   }
 
-  async handleCompleteRun(overrides?: RunOverrides):
+  async handleCompleteRun(overrides?: LighthouseModel.RunTypes.RunOverrides):
       Promise<{report: LighthouseModel.ReporterTypes.ReportJSON | null}> {
     try {
       await this.controller.startLighthouse(overrides);
@@ -392,7 +391,7 @@ export class LighthousePanel extends UI.Panel.Panel {
   }
 
   static async executeLighthouseRecording(
-      overrides?: RunOverrides,
+      overrides?: LighthouseModel.RunTypes.RunOverrides,
       ): Promise<LighthouseModel.ReporterTypes.ReportJSON|null> {
     const panel = LighthousePanel.instance();
     await UI.ViewManager.ViewManager.instance().showView('lighthouse');
@@ -401,7 +400,3 @@ export class LighthousePanel extends UI.Panel.Panel {
     return report;
   }
 }
-
-export interface RunOverrides {
-  categoryIds: CategoryId[];
-}

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -8,12 +8,13 @@ import '../../ui/legacy/legacy.js';
 import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
+import type * as LHModel from '../../models/lighthouse/lighthouse.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import {Link} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, render} from '../../ui/lit/lit.js';
 
-import {type LighthouseController, type Preset, Presets, RuntimeSettings} from './LighthouseController.js';
+import {getPresets, getRuntimeSettings, type LighthouseController} from './LighthouseController.js';
 import type {LighthousePanel} from './LighthousePanel.js';
 import lighthouseStartViewStyles from './lighthouseStartView.css.js';
 import {RadioSetting} from './RadioSetting.js';
@@ -135,7 +136,7 @@ export class StartView extends UI.Widget.Widget {
   private startButton!: Buttons.Button.Button;
   private helpText?: Element;
   private warningText?: Element;
-  private checkboxes: Array<{preset: Preset, checkbox: UI.Toolbar.ToolbarCheckbox}> = [];
+  private checkboxes: Array<{preset: LHModel.RunTypes.Preset, checkbox: UI.Toolbar.ToolbarCheckbox}> = [];
 
   changeFormMode?: (mode: string) => void;
 
@@ -151,7 +152,7 @@ export class StartView extends UI.Widget.Widget {
   }
 
   private populateRuntimeSettingAsRadio(settingName: string, label: string, parentElement: Element): void {
-    const runtimeSetting = RuntimeSettings.find(item => item.setting.name === settingName);
+    const runtimeSetting = getRuntimeSettings().find(item => item.setting.name === settingName);
     if (!runtimeSetting?.options) {
       throw new Error(`${settingName} is not a setting with options`);
     }
@@ -175,7 +176,7 @@ export class StartView extends UI.Widget.Widget {
   }
 
   private populateRuntimeSettingAsToolbarCheckbox(settingName: string, toolbar: UI.Toolbar.Toolbar): void {
-    const runtimeSetting = RuntimeSettings.find(item => item.setting.name === settingName);
+    const runtimeSetting = getRuntimeSettings().find(item => item.setting.name === settingName);
     if (!runtimeSetting?.title) {
       throw new Error(`${settingName} is not a setting with a title`);
     }
@@ -193,7 +194,7 @@ export class StartView extends UI.Widget.Widget {
   }
 
   private populateRuntimeSettingAsToolbarDropdown(settingName: string, toolbar: UI.Toolbar.Toolbar): void {
-    const runtimeSetting = RuntimeSettings.find(item => item.setting.name === settingName);
+    const runtimeSetting = getRuntimeSettings().find(item => item.setting.name === settingName);
     if (!runtimeSetting?.title) {
       throw new Error(`${settingName} is not a setting with a title`);
     }
@@ -225,7 +226,7 @@ export class StartView extends UI.Widget.Widget {
     // Populate the categories
 
     this.checkboxes = [];
-    for (const preset of Presets) {
+    for (const preset of getPresets()) {
       preset.setting.setTitle(preset.title());
       const checkbox = new UI.Toolbar.ToolbarSettingCheckbox(preset.setting, preset.description());
       const row = categoryFormElements.createChild('div', 'vbox lighthouse-launcher-row');

package/front_end/panels/lighthouse/LighthouseStatusView.ts

@@ -9,7 +9,7 @@ import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
 
-import {RuntimeSettings} from './LighthouseController.js';
+import {getRuntimeSettings} from './LighthouseController.js';
 import lighthouseDialogStyles from './lighthouseDialog.css.js';
 import type {LighthousePanel} from './LighthousePanel.js';
 
@@ -378,8 +378,8 @@ export class StatusView {
       return phase.message();
     }
 
-    const deviceTypeSetting = RuntimeSettings.find(item => item.setting.name === 'lighthouse.device-type');
-    const throttleSetting = RuntimeSettings.find(item => item.setting.name === 'lighthouse.throttling');
+    const deviceTypeSetting = getRuntimeSettings().find(item => item.setting.name === 'lighthouse.device-type');
+    const throttleSetting = getRuntimeSettings().find(item => item.setting.name === 'lighthouse.throttling');
     const deviceType = deviceTypeSetting ? deviceTypeSetting.setting.get() : '';
     const throttling = throttleSetting ? throttleSetting.setting.get() : '';
     const match = LoadingMessages.find(item => {

package/front_end/panels/linear_memory_inspector/components/LinearMemoryInspector.ts

@@ -425,17 +425,21 @@ export class LinearMemoryInspector extends Common.ObjectWrapper.eventMixin<Event
   }
 
   #onValueTypeToggled(type: ValueType, checked: boolean): void {
+    const valueTypes = new Set(this.#valueTypes);
     if (checked) {
-      this.#valueTypes.add(type);
+      valueTypes.add(type);
     } else {
-      this.#valueTypes.delete(type);
+      valueTypes.delete(type);
     }
+    this.#valueTypes = valueTypes;
     this.dispatchEventToListeners(Events.SETTINGS_CHANGED, this.#createSettings());
     void this.requestUpdate();
   }
 
   #onValueTypeModeChanged(type: ValueType, mode: ValueTypeMode): void {
-    this.#valueTypeModes.set(type, mode);
+    const valueTypeModes = new Map(this.#valueTypeModes);
+    valueTypeModes.set(type, mode);
+    this.#valueTypeModes = valueTypeModes;
     this.dispatchEventToListeners(Events.SETTINGS_CHANGED, this.#createSettings());
     void this.requestUpdate();
   }

package/front_end/panels/network/RequestConditionsDrawer.ts

@@ -24,7 +24,7 @@ import * as PanelUtils from '../utils/utils.js';
 import requestConditionsDrawerStyles from './requestConditionsDrawer.css.js';
 
 const {ref, live} = Directives;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -175,7 +175,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
           ${i18nString(UIStrings.addRule)}
       </devtools-button>
     </div>
-    <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(UI.Widget.VBox)}>
+    <devtools-widget ${widget(UI.Widget.VBox)}>
       ${input.list.element}
     </devtools-widget>
     `,
@@ -271,7 +271,7 @@ function renderItem(
     <devtools-widget
        class=conditions-selector
        title=${i18nString(UIStrings.requestConditionsLabel)}
-       .widgetConfig=${UI.Widget.widgetConfig(
+       ${widget(
          MobileThrottling.NetworkThrottlingSelector.NetworkThrottlingSelectorWidget, {
            variant:
              MobileThrottling.NetworkThrottlingSelector.NetworkThrottlingSelect.Variant.INDIVIDUAL_REQUEST_CONDITIONS,
@@ -282,7 +282,7 @@ function renderItem(
          })}></devtools-widget>
     <devtools-widget
       ?disabled=${!editable || !originalOrUpgradedURLPattern}
-      .widgetConfig=${widgetConfig(AffectedCountWidget, {condition, lookUpRequestCount})}></devtools-widget>`;
+      ${widget(AffectedCountWidget, {condition, lookUpRequestCount})}></devtools-widget>`;
   // clang-format on
 }
 

package/front_end/panels/network/RequestCookiesView.ts

@@ -113,7 +113,7 @@ export const DEFAULT_VIEW: ViewFunction = (input, _output, target) => {
       </div>
 
       ${input.requestCookies.cookies.length > 0 ? html`
-        <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(CookieTable.CookiesTable.CookiesTable, {
+        <devtools-widget ${widget(CookieTable.CookiesTable.CookiesTable, {
           cookiesData: input.requestCookies,
           inline: true
         })} class="cookie-table cookies-panel-item"></devtools-widget>
@@ -131,7 +131,7 @@ export const DEFAULT_VIEW: ViewFunction = (input, _output, target) => {
       </div>
 
       ${input.responseCookies.cookies.length ? html`
-        <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(CookieTable.CookiesTable.CookiesTable, {
+        <devtools-widget ${widget(CookieTable.CookiesTable.CookiesTable, {
           cookiesData: input.responseCookies,
           inline: true })} class="cookie-table cookies-panel-item"></devtools-widget>
       ` : Lit.nothing}

package/front_end/panels/network/RequestHeadersView.ts

@@ -21,6 +21,7 @@ import * as NetworkComponents from './components/components.js';
 import {ShowMoreDetailsWidget} from './ShowMoreDetailsWidget.js';
 
 const {render, html} = Lit;
+const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -210,8 +211,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
           contents: (input.showRequestHeadersText && requestHeadersText) ?
             renderRawHeaders(requestHeadersText) :
             html`
-          <devtools-widget .widgetConfig=${
-            UI.Widget.widgetConfig(NetworkComponents.RequestHeaderSection.RequestHeaderSection, {
+          <devtools-widget ${widget(NetworkComponents.RequestHeaderSection.RequestHeaderSection, {
               request: input.request,
               toReveal: input.toReveal,
             })} jslog=${VisualLogging.section('request-headers')}></devtools-widget>`
@@ -392,8 +392,8 @@ function renderHeaderOverridesLink(input: ViewInput): Lit.LitTemplate {
 }
 
 function renderRawHeaders(text: string): Lit.TemplateResult {
-  return html`<div class="row raw-headers-row"><devtools-widget  class=raw-headers .widgetConfig=${
-      UI.Widget.widgetConfig(ShowMoreDetailsWidget, {text})}></devtools-widget></div>`;
+  return html`<div class="row raw-headers-row"><devtools-widget  class=raw-headers
+      ${widget(ShowMoreDetailsWidget, {text})}></devtools-widget></div>`;
 }
 
 function renderGeneralRow(

package/front_end/panels/network/RequestResponseView.ts

@@ -43,7 +43,7 @@ export interface ViewOutput {
   revealPosition: (position: SourceFrame.SourceFrame.RevealPosition) => Promise<void>;
 }
 
-const {widgetConfig, widgetRef, widget} = UI.Widget;
+const {widgetRef, widget} = UI.Widget;
 type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
 
 export const DEFAULT_VIEW: View = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
@@ -62,7 +62,7 @@ export const DEFAULT_VIEW: View = (input: ViewInput, output: ViewOutput, target:
     // clang-format on
   } else if (input.renderAsText) {
     // clang-format off
-    widgetTemplate = html`<devtools-widget .widgetConfig=${widgetConfig(element => new SourceFrame.ResourceSourceFrame.SearchableContainer(
+    widgetTemplate = html`<devtools-widget ${widget(element => new SourceFrame.ResourceSourceFrame.SearchableContainer(
                         input.request, input.mimeType, element))}
                     ${widgetRef(SourceFrame.ResourceSourceFrame.SearchableContainer, widget => {output.revealPosition = widget.revealPosition.bind(widget);})}></devtools-widget>`;
     // clang-format on

package/front_end/panels/performance_monitor/PerformanceMonitor.ts

@@ -58,7 +58,7 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/performance_monitor/PerformanceMonitor.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 const {classMap, ref} = Directives;
 
 interface PerformanceMonitorInput {
@@ -81,7 +81,7 @@ type PerformanceMonitorView = (input: PerformanceMonitorInput, output: Performan
 const DEFAULT_VIEW: PerformanceMonitorView = (input, output, target) => {
   // clang-format off
   render(html`
-    <devtools-widget .widgetConfig=${widgetConfig(ControlPane, {
+    <devtools-widget ${widget(ControlPane, {
       onMetricChanged: input.onMetricChanged,
       chartsInfo: input.chartsInfo,
       metrics: input.metrics