chrome-devtools-frontend 1.0.1664496 → 1.0.1665921

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -41,7 +41,7 @@ import {
   RenderingContext,
   StringRenderer,
   type TracingContext,
-  URLRenderer
+  URLRenderer,
 } from './PropertyRenderer.js';
 import {StyleEditorWidget} from './StyleEditorWidget.js';
 import type {ActiveAiSuggestionProperty, StylePropertiesSection} from './StylePropertiesSection.js';
@@ -1748,7 +1748,7 @@ export class LengthRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.L
     const evaluation = context.tracing?.applyEvaluation([], () => {
       return {
         placeholder: [valueElement],
-        asyncEvalCallback: () => this.#applyEvaluation(valueElement, match, context)
+        asyncEvalCallback: () => this.#applyEvaluation(valueElement, match, context),
       };
     });
 
@@ -2711,7 +2711,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
         anchor: exclamationElement,
         variant: 'simple',
         id: tooltipId,
-        jslogContext: 'elements.invalid-property-decl-popover'
+        jslogContext: 'elements.invalid-property-decl-popover',
       });
       tooltip.appendChild(title);
       container.appendChild(tooltip);
@@ -2894,7 +2894,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       variant: 'rich',
       padding: 'large',
       id: tooltipId,
-      jslogContext: 'elements.css-animation-hint'
+      jslogContext: 'elements.css-animation-hint',
     });
     const message = i18nString(UIStrings.overriddenByAnimation);
     const content = document.createElement('div');
@@ -3417,7 +3417,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       hasChildren: this.isExpandable(),
       isEditingName,
       originalProperty: this.property,
-      previousContent: isEditingName ? this.name : this.value
+      previousContent: isEditingName ? this.name : this.value,
     };
 
     this.removePrompt();

package/front_end/panels/elements/StylesAiCodeCompletionProvider.ts

@@ -60,12 +60,12 @@ export class StylesAiCodeCompletionProvider {
     if (this.#aiCodeCompletionConfig.completionContext.stopSequences) {
       stopSequences.push(...this.#aiCodeCompletionConfig.completionContext.stopSequences);
     }
-    this.#aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion(
-        {
-          aidaClient: this.#aidaClient,
-          serverSideLoggingEnabled: !Root.Runtime.hostConfig.aidaAvailability?.disallowLogging
-        },
-        this.#aiCodeCompletionConfig.panel, undefined, stopSequences);
+    this.#aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion({
+      aidaClient: this.#aidaClient,
+      serverSideLoggingEnabled: !Root.Runtime.hostConfig.aidaAvailability?.disallowLogging,
+    },
+                                                                                    this.#aiCodeCompletionConfig.panel,
+                                                                                    undefined, stopSequences);
     this.#aiCodeCompletionConfig.onFeatureEnabled();
   }
 

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -600,8 +600,9 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     const parentNodeId = this.matchedStyles?.getParentLayoutNodeId();
 
     const [computedStyles, parentsComputedStyles, computedStyleExtraFields] = await Promise.all([
-      this.fetchComputedStylesFor(nodeId), this.fetchComputedStylesFor(parentNodeId),
-      this.fetchComputedStyleExtraFieldsFor(nodeId)
+      this.fetchComputedStylesFor(nodeId),
+      this.fetchComputedStylesFor(parentNodeId),
+      this.fetchComputedStyleExtraFieldsFor(nodeId),
     ]);
 
     signal?.throwIfAborted();
@@ -2402,7 +2403,7 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
             });
           }
         }
-      }
+      },
     });
     return properties;
   }

package/front_end/panels/elements/elements-meta.ts

@@ -160,6 +160,10 @@ const UIStrings = {
    * @description Whether CSS rules that do not apply active styles in the Styles pane are collapsed by default.
    */
   collapseNonContributingCSSRules: 'Collapse non-contributing CSS rules',
+  /**
+   * @description Title of a setting in the Event Listeners widget.
+   */
+  frameworkListeners: 'Framework listeners',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/elements/elements-meta.ts', UIStrings);
 const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
@@ -623,8 +627,11 @@ UI.ViewManager.registerLocationResolver({
 Common.Revealer.registerRevealer({
   contextTypes() {
     return [
-      SDK.DOMModel.DOMNode, SDK.DOMModel.DeferredDOMNode, SDK.RemoteObject.RemoteObject, SDK.DOMModel.AdoptedStyleSheet,
-      Elements.ElementsPanel.NodeComputedStyles
+      SDK.DOMModel.DOMNode,
+      SDK.DOMModel.DeferredDOMNode,
+      SDK.RemoteObject.RemoteObject,
+      SDK.DOMModel.AdoptedStyleSheet,
+      Elements.ElementsPanel.NodeComputedStyles,
     ];
   },
   destination: Common.Revealer.RevealerDestination.ELEMENTS_PANEL,
@@ -698,3 +705,12 @@ UI.UIUtils.registerRenderer({
     return Elements.ElementsTreeOutlineRenderer.Renderer.instance();
   },
 });
+
+Common.Settings.registerSettingExtension({
+  category: Common.Settings.SettingCategory.NONE,
+  storageType: Common.Settings.SettingStorageType.GLOBAL,
+  title: i18nLazyString(UIStrings.frameworkListeners),
+  settingName: 'show-frameowkr-listeners',
+  settingType: Common.Settings.SettingType.BOOLEAN,
+  defaultValue: true,
+});

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -371,7 +371,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
                     jslog=${VisualLogging.dropDown().track({change: true}).context('device-pixel-ratio')}
                     ?disabled=${!input.isResponsive}>
                 ${input.dprOptions.map(o => html`<option value=${o.value} ?selected=${o.selected} jslog=${VisualLogging.item(o.jslogContext).track({click: true})}>${o.title}</option>`)}
-              </select>`
+              </select>`,
           })}
         </div>` : ''}
 
@@ -435,16 +435,15 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
   `, target, {container: {
       classes: ['device-mode-toolbar'],
       attributes: {jslog: `${VisualLogging.toolbar('device-mode').track({resize: true})}`,
-    }
+    },
   }});
   // clang-format on
 };
 
 export class DeviceModeToolbar extends UI.Widget.Widget {
-  private model: EmulationModel.DeviceModeModel.DeviceModeModel;
+  #model?: EmulationModel.DeviceModeModel.DeviceModeModel;
   private readonly showMediaInspectorSetting: Common.Settings.Setting<boolean>;
   private readonly showRulersSetting: Common.Settings.Setting<boolean>;
-  private readonly deviceOutlineSetting: Common.Settings.Setting<boolean>;
   private readonly showDeviceScaleFactorSetting: Common.Settings.Setting<boolean>;
   private readonly showUserAgentTypeSetting: Common.Settings.Setting<boolean>;
   private autoAdjustScaleSetting: Common.Settings.Setting<boolean>;
@@ -453,17 +452,15 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
   private readonly persistenceSetting: Common.Settings.Setting<{device: string, orientation: string, mode: string}>;
   private readonly view: View;
 
-  constructor(
-      model: EmulationModel.DeviceModeModel.DeviceModeModel,
-      showMediaInspectorSetting: Common.Settings.Setting<boolean>, showRulersSetting: Common.Settings.Setting<boolean>,
-      view: View = DEFAULT_VIEW) {
-    super();
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element);
     this.view = view;
-    this.model = model;
-    this.showMediaInspectorSetting = showMediaInspectorSetting;
-    this.showRulersSetting = showRulersSetting;
 
-    this.deviceOutlineSetting = this.model.deviceOutlineSetting();
+    this.showMediaInspectorSetting = Common.Settings.Settings.instance().moduleSetting('show-media-query-inspector');
+    this.showMediaInspectorSetting.addChangeListener(this.requestUpdate, this);
+    this.showRulersSetting = Common.Settings.Settings.instance().moduleSetting('emulation.show-rulers');
+    this.showRulersSetting.addChangeListener(this.requestUpdate, this);
+
     this.showDeviceScaleFactorSetting =
         Common.Settings.Settings.instance().createSetting('emulation.show-device-scale-factor', false);
     this.showDeviceScaleFactorSetting.addChangeListener(this.requestUpdate, this);
@@ -486,17 +483,42 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
 
     this.persistenceSetting = Common.Settings.Settings.instance().createSetting(
         'emulation.device-mode-value', {device: '', orientation: '', mode: ''});
+  }
+
+  get model(): EmulationModel.DeviceModeModel.DeviceModeModel|undefined {
+    return this.#model;
+  }
 
-    this.model.toolbarControlsEnabledSetting().addChangeListener(this.requestUpdate, this);
-    this.model.scaleSetting().addChangeListener(this.requestUpdate, this);
-    this.model.uaSetting().addChangeListener(this.requestUpdate, this);
-    this.model.deviceScaleFactorSetting().addChangeListener(this.requestUpdate, this);
-    this.model.addEventListener(EmulationModel.DeviceModeModel.Events.UPDATED, this.requestUpdate, this);
+  set model(model: EmulationModel.DeviceModeModel.DeviceModeModel) {
+    if (this.#model === model) {
+      return;
+    }
+    if (this.#model) {
+      this.#model.toolbarControlsEnabledSetting().removeChangeListener(this.requestUpdate, this);
+      this.#model.scaleSetting().removeChangeListener(this.requestUpdate, this);
+      this.#model.uaSetting().removeChangeListener(this.requestUpdate, this);
+      this.#model.deviceScaleFactorSetting().removeChangeListener(this.requestUpdate, this);
+      this.#model.removeEventListener(EmulationModel.DeviceModeModel.Events.UPDATED, this.requestUpdate, this);
+    }
+    this.#model = model;
+    this.#model.toolbarControlsEnabledSetting().addChangeListener(this.requestUpdate, this);
+    this.#model.scaleSetting().addChangeListener(this.requestUpdate, this);
+    this.#model.uaSetting().addChangeListener(this.requestUpdate, this);
+    this.#model.deviceScaleFactorSetting().addChangeListener(this.requestUpdate, this);
+    this.#model.addEventListener(EmulationModel.DeviceModeModel.Events.UPDATED, this.requestUpdate, this);
+    this.requestUpdate();
+  }
 
-    this.performUpdate();
+  override wasShown(): void {
+    super.wasShown();
+    // TODO(crbug.com/407750803): Revisit once DeviceModeView is migrated.
+    this.performUpdate();  // Trigger a manual update eagerly, DeviceModeView needs to measure our height.
   }
 
   override performUpdate(): void {
+    if (!this.model) {
+      return;
+    }
     const isResponsive = this.model.type() === EmulationModel.DeviceModeModel.Type.Responsive;
     const isFullHeight = isResponsive && this.model.isFullHeight();
     const size = this.model.appliedDeviceSize();
@@ -598,17 +620,17 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
       onWidthChange: (event: Event) => {
         const width = Number((event.target as HTMLInputElement).value);
         if (this.autoAdjustScaleSetting.get()) {
-          this.model.setWidthAndScaleToFit(width);
+          this.model?.setWidthAndScaleToFit(width);
         } else {
-          this.model.setWidth(width);
+          this.model?.setWidth(width);
         }
       },
       onHeightChange: (event: Event) => {
         const height = Number((event.target as HTMLInputElement).value);
         if (this.autoAdjustScaleSetting.get()) {
-          this.model.setHeightAndScaleToFit(height);
+          this.model?.setHeightAndScaleToFit(height);
         } else {
-          this.model.setHeight(height);
+          this.model?.setHeight(height);
         }
       },
       onScaleChange: this.onScaleChange.bind(this),
@@ -643,7 +665,7 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
   }
 
   private currentDevicePosture(): string {
-    const mode = this.model.mode();
+    const mode = this.model?.mode();
     if (mode &&
         (mode.orientation === EmulationModel.EmulatedDevices.VerticalSpanned ||
          mode.orientation === EmulationModel.EmulatedDevices.HorizontalSpanned)) {
@@ -653,6 +675,9 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
   }
 
   private getScaleOptions(): Array<{title: string, value: number, selected: boolean, jslogContext: string}> {
+    if (!this.model) {
+      return [];
+    }
     const values = [0.5, 0.75, 1, 1.25, 1.5, 2];
     const isAutoAdjusting = this.autoAdjustScaleSetting.get();
     const currentScale = this.model.scaleSetting().get();
@@ -684,6 +709,9 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
   }
 
   private onScaleChange(event: Event): void {
+    if (!this.model) {
+      return;
+    }
     const value = Number((event.target as HTMLSelectElement).value);
     if (value === 0) {
       this.autoAdjustScaleSetting.set(true);
@@ -705,6 +733,9 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
 
   private getDeviceScaleFactorOptions():
       Array<{title: string, value: number, selected: boolean, jslogContext: string}> {
+    if (!this.model) {
+      return [];
+    }
     const deviceScaleFactorSetting = this.model.deviceScaleFactorSetting();
     const defaultValue = this.model.uaSetting().get() === EmulationModel.DeviceModeModel.UA.MOBILE ||
             this.model.uaSetting().get() === EmulationModel.DeviceModeModel.UA.MOBILE_NO_TOUCH ?
@@ -728,18 +759,21 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
         title,
         value: value === defaultValue ? 0 : value,
         selected: currentDPR === value || (value === defaultValue && currentDPR === 0),
-        jslogContext
+        jslogContext,
       };
     });
   }
 
   private onDeviceScaleChange(event: Event): void {
     const value = Number((event.target as HTMLSelectElement).value);
-    this.model.deviceScaleFactorSetting().set(value);
+    this.model?.deviceScaleFactorSetting().set(value);
   }
 
   private getUserAgentOptions():
       Array<{title: string, value: EmulationModel.DeviceModeModel.UA, selected: boolean, jslogContext: string}> {
+    if (!this.model) {
+      return [];
+    }
     const uaSetting = this.model.uaSetting();
     const currentUserAgent = uaSetting.get();
     return [
@@ -751,18 +785,21 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
             title: value,
             value,
             selected: currentUserAgent === value,
-            jslogContext: Platform.StringUtilities.toKebabCase(value)
+            jslogContext: Platform.StringUtilities.toKebabCase(value),
           }));
   }
 
   private onUAChange(event: Event): void {
     const value = (event.target as HTMLSelectElement).value as EmulationModel.DeviceModeModel.UA;
-    this.model.uaSetting().set(value);
+    this.model?.uaSetting().set(value);
   }
 
   private appendOptionsMenuItems(contextMenu: UI.ContextMenu.ContextMenu): void {
+    if (!this.model) {
+      return;
+    }
     const model = this.model;
-    appendToggleItem(contextMenu.headerSection(), this.deviceOutlineSetting, i18nString(UIStrings.hideDeviceFrame),
+    appendToggleItem(contextMenu.headerSection(), model.deviceOutlineSetting(), i18nString(UIStrings.hideDeviceFrame),
                      i18nString(UIStrings.showDeviceFrame), !model.canShowDeviceFrame(), 'device-frame');
     appendToggleItem(
         contextMenu.headerSection(), this.showMediaInspectorSetting, i18nString(UIStrings.hideMediaQueries),
@@ -800,22 +837,25 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
   }
 
   private reset(): void {
-    this.deviceOutlineSetting.set(false);
+    this.model?.deviceOutlineSetting().set(false);
     this.showDeviceScaleFactorSetting.set(false);
     this.showUserAgentTypeSetting.set(false);
     this.showMediaInspectorSetting.set(false);
     this.showRulersSetting.set(false);
-    this.model.reset();
+    this.model?.reset();
   }
 
   private emulateDevice(device: EmulationModel.EmulatedDevices.EmulatedDevice): void {
+    if (!this.model) {
+      return;
+    }
     const scale = this.autoAdjustScaleSetting.get() ? undefined : this.model.scaleSetting().get();
     this.model.emulate(
         EmulationModel.DeviceModeModel.Type.Device, device, this.lastMode.get(device) || device.modes[0], scale);
   }
 
   private switchToResponsive(): void {
-    this.model.emulate(EmulationModel.DeviceModeModel.Type.Responsive, null, null);
+    this.model?.emulate(EmulationModel.DeviceModeModel.Type.Responsive, null, null);
   }
 
   private filterDevices(devices: EmulationModel.EmulatedDevices.EmulatedDevice[]):
@@ -855,28 +895,36 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
     }>,
     edit: {title: string, jslogContext: string},
   } {
+    if (!this.model) {
+      return {
+        responsive: {title: i18nString(UIStrings.responsive), selected: false, jslogContext: 'responsive'},
+        standard: [],
+        custom: [],
+        edit: {title: i18nString(UIStrings.edit), jslogContext: 'edit'},
+      };
+    }
     return {
       responsive: {
         title: i18nString(UIStrings.responsive),
         selected: this.model.type() === EmulationModel.DeviceModeModel.Type.Responsive,
-        jslogContext: 'responsive'
+        jslogContext: 'responsive',
       },
       standard: this.standardDevices().map(device => ({
                                              device,
                                              title: device.title,
-                                             selected: this.model.device() === device,
-                                             jslogContext: Platform.StringUtilities.toKebabCase(device.title)
+                                             selected: this.model?.device() === device,
+                                             jslogContext: Platform.StringUtilities.toKebabCase(device.title),
                                            })),
       custom: this.customDevices().map(device => ({
                                          device,
                                          title: device.title,
-                                         selected: this.model.device() === device,
-                                         jslogContext: Platform.StringUtilities.toKebabCase(device.title)
+                                         selected: this.model?.device() === device,
+                                         jslogContext: Platform.StringUtilities.toKebabCase(device.title),
                                        })),
       edit: {
         title: i18nString(UIStrings.edit),
         jslogContext: 'edit',
-      }
+      },
     };
   }
 
@@ -899,6 +947,9 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
 
   private deviceListChanged(): void {
     this.requestUpdate();
+    if (!this.model) {
+      return;
+    }
     const device = this.model.device();
     if (!device) {
       return;
@@ -917,6 +968,9 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
   }
 
   private spanClicked(): void {
+    if (!this.model) {
+      return;
+    }
     const device = this.model.device();
 
     if (!device || (!device.isDualScreen && !device.isFoldableScreen)) {
@@ -938,6 +992,9 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
   }
 
   private modeMenuClicked(event: Event): void {
+    if (!this.model) {
+      return;
+    }
     if (this.model.isScreenOrientationLocked()) {
       return;
     }
@@ -1015,14 +1072,17 @@ export class DeviceModeToolbar extends UI.Widget.Widget {
   }
 
   private getPrettyFitZoomPercentage(): string {
-    return `${(this.model.fitScale() * 100).toFixed(0)}`;
+    return !this.model ? '' : `${(this.model.fitScale() * 100).toFixed(0)}`;
   }
 
   private getPrettyZoomPercentage(): string {
-    return `${(this.model.scale() * 100).toFixed(0)}`;
+    return !this.model ? '' : `${(this.model.scale() * 100).toFixed(0)}`;
   }
 
   restore(): void {
+    if (!this.model) {
+      return;
+    }
     for (const device of this.allDevices()) {
       if (device.title === this.persistenceSetting.get().device) {
         for (const mode of device.modes) {

package/front_end/panels/emulation/DeviceModeView.ts

@@ -105,9 +105,9 @@ export class DeviceModeView extends UI.Widget.VBox {
 
     this.model = EmulationModel.DeviceModeModel.DeviceModeModel.instance();
     this.model.addEventListener(EmulationModel.DeviceModeModel.Events.UPDATED, this.updateUI, this);
-    this.mediaInspector = new MediaQueryInspector(
-        () => this.model.appliedDeviceSize().width, this.model.setWidth.bind(this.model),
-        new Common.Throttler.Throttler(0));
+    this.mediaInspector = new MediaQueryInspector();
+    this.mediaInspector.getWidthCallback = () => this.model.appliedDeviceSize().width;
+    this.mediaInspector.setWidthCallback = this.model.setWidth.bind(this.model);
     this.showMediaInspectorSetting = Common.Settings.Settings.instance().moduleSetting('show-media-query-inspector');
     this.showMediaInspectorSetting.addChangeListener(this.updateUI, this);
     this.showRulersSetting = Common.Settings.Settings.instance().moduleSetting('emulation.show-rulers');
@@ -130,7 +130,8 @@ export class DeviceModeView extends UI.Widget.VBox {
   }
 
   private createUI(): void {
-    this.toolbar = new DeviceModeToolbar(this.model, this.showMediaInspectorSetting, this.showRulersSetting);
+    this.toolbar = new DeviceModeToolbar();
+    this.toolbar.model = this.model;
     this.toolbar.show(this.contentElement);
     this.contentClip = this.contentElement.createChild('div', 'device-mode-content-clip vbox');
     this.responsivePresetsContainer = this.contentClip.createChild('div', 'device-mode-presets-container');

package/front_end/panels/emulation/MediaQueryInspector.ts

@@ -138,12 +138,12 @@ function renderLabel(
   const containerClassMap = {
     'media-inspector-marker-label-container': true,
     'media-inspector-marker-label-container-left': atLeft,
-    'media-inspector-marker-label-container-right': !atLeft
+    'media-inspector-marker-label-container-right': !atLeft,
   };
   const labelClassMap = {
     'media-inspector-marker-label': true,
     'media-inspector-label-left': leftAlign,
-    'media-inspector-label-right': !leftAlign
+    'media-inspector-label-right': !leftAlign,
   };
 
   // clang-format off
@@ -158,22 +158,16 @@ function renderLabel(
 export class MediaQueryInspector extends UI.Widget.Widget<ShadowRoot> implements
     SDK.TargetManager.SDKModelObserver<SDK.CSSModel.CSSModel> {
   private readonly view: typeof DEFAULT_VIEW;
-  private readonly mediaThrottler: Common.Throttler.Throttler;
-  private readonly getWidthCallback: () => number;
-  private readonly setWidthCallback: (arg0: number) => void;
+  readonly mediaThrottler: Common.Throttler.Throttler = new Common.Throttler.Throttler(0);
+  #getWidthCallback?: () => number;
+  #setWidthCallback?: (arg0: number) => void;
   private scale: number;
   private cssModel?: SDK.CSSModel.CSSModel;
   private cachedQueryModels?: MediaQueryUIModel[];
 
-  constructor(
-      getWidthCallback: () => number, setWidthCallback: (arg0: number) => void,
-      mediaThrottler: Common.Throttler.Throttler, view = DEFAULT_VIEW) {
-    super({useShadowDom: 'pure'});
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+    super(element, {useShadowDom: 'pure'});
     this.view = view;
-    this.mediaThrottler = mediaThrottler;
-
-    this.getWidthCallback = getWidthCallback;
-    this.setWidthCallback = setWidthCallback;
     this.scale = 1;
 
     SDK.TargetManager.TargetManager.instance().observeModels(SDK.CSSModel.CSSModel, this);
@@ -181,6 +175,24 @@ export class MediaQueryInspector extends UI.Widget.Widget<ShadowRoot> implements
         UI.ZoomManager.Events.ZOOM_CHANGED, this.requestUpdate.bind(this), this);
   }
 
+  get getWidthCallback(): (() => number)|undefined {
+    return this.#getWidthCallback;
+  }
+
+  set getWidthCallback(callback: (() => number)|undefined) {
+    this.#getWidthCallback = callback;
+    this.requestUpdate();
+  }
+
+  get setWidthCallback(): ((arg0: number) => void)|undefined {
+    return this.#setWidthCallback;
+  }
+
+  set setWidthCallback(callback: ((arg0: number) => void)|undefined) {
+    this.#setWidthCallback = callback;
+    this.requestUpdate();
+  }
+
   modelAdded(cssModel: SDK.CSSModel.CSSModel): void {
     // FIXME: adapt this to multiple targets.
     if (cssModel.target() !== SDK.TargetManager.TargetManager.instance().primaryPageTarget()) {
@@ -210,7 +222,7 @@ export class MediaQueryInspector extends UI.Widget.Widget<ShadowRoot> implements
       return;
     }
     this.scale = scale;
-    this.performUpdate();
+    this.requestUpdate();
   }
 
   private onMediaQueryClicked(model: MediaQueryUIModel): void {
@@ -218,18 +230,18 @@ export class MediaQueryInspector extends UI.Widget.Widget<ShadowRoot> implements
     const modelMinWidth = model.minWidthExpression();
 
     if (model.section() === Section.MAX) {
-      this.setWidthCallback(modelMaxWidth ? modelMaxWidth.computedLength() || 0 : 0);
+      this.setWidthCallback?.(modelMaxWidth ? modelMaxWidth.computedLength() || 0 : 0);
       return;
     }
     if (model.section() === Section.MIN) {
-      this.setWidthCallback(modelMinWidth ? modelMinWidth.computedLength() || 0 : 0);
+      this.setWidthCallback?.(modelMinWidth ? modelMinWidth.computedLength() || 0 : 0);
       return;
     }
-    const currentWidth = this.getWidthCallback();
+    const currentWidth = this.getWidthCallback?.() ?? 0;
     if (modelMinWidth && currentWidth !== modelMinWidth.computedLength()) {
-      this.setWidthCallback(modelMinWidth.computedLength() || 0);
+      this.setWidthCallback?.(modelMinWidth.computedLength() || 0);
     } else {
-      this.setWidthCallback(modelMaxWidth ? modelMaxWidth.computedLength() || 0 : 0);
+      this.setWidthCallback?.(modelMaxWidth ? modelMaxWidth.computedLength() || 0 : 0);
     }
   }
 
@@ -362,10 +374,14 @@ export class MediaQueryInspector extends UI.Widget.Widget<ShadowRoot> implements
   override wasShown(): void {
     super.wasShown();
     this.scheduleMediaQueriesUpdate();
+    // TODO(crbug.com/407750803): Revisit once DeviceModeView is migrated.
     this.performUpdate();  // Trigger a manual update eagerly, DeviceModeView needs to measure our height.
   }
 
   override performUpdate(): void {
+    if (!this.isShowing() || !this.getWidthCallback || !this.setWidthCallback) {
+      return;
+    }
     const markers = Map.groupBy(this.buildMediaQueryMarkers(), marker => marker.model.section());
 
     this.view(

package/front_end/panels/event_listeners/EventListenersView.ts

@@ -299,23 +299,23 @@ export class ObjectEventListenerBar extends UI.TreeOutline.TreeElement {
     properties.push(new ObjectUI.ObjectPropertiesSection.ObjectTreeNode(
         runtimeModel.createRemotePropertyFromPrimitiveValue('useCapture', eventListener.useCapture()), undefined, {
           readOnly: false,
-          propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED
+          propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
         }));
     properties.push(new ObjectUI.ObjectPropertiesSection.ObjectTreeNode(
         runtimeModel.createRemotePropertyFromPrimitiveValue('passive', eventListener.passive()), undefined, {
           readOnly: false,
-          propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED
+          propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
         }));
     properties.push(new ObjectUI.ObjectPropertiesSection.ObjectTreeNode(
         runtimeModel.createRemotePropertyFromPrimitiveValue('once', eventListener.once()), undefined, {
           readOnly: false,
-          propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED
+          propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
         }));
     if (typeof eventListener.handler() !== 'undefined') {
       properties.push(new ObjectUI.ObjectPropertiesSection.ObjectTreeNode(
           new SDK.RemoteObject.RemoteObjectProperty('handler', eventListener.handler()), undefined, {
             readOnly: false,
-            propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED
+            propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
           }));
     }
     ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement.populateWithProperties(