chrome-devtools-frontend 1.0.1721762 → 1.0.1726686

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -1834,6 +1834,7 @@ export class StylesSidebarPane extends StylesSidebarPaneBase implements StylesCo
   }
 
   #cleanupAiCodeCompletion(): void {
+    this.#aiCodeCompletionSummaryToolbar?.detach();
     this.#aiCodeCompletionSummaryToolbarContainer?.remove();
     this.#aiCodeCompletionSummaryToolbarContainer = undefined;
     this.#aiCodeCompletionSummaryToolbar = undefined;

package/front_end/panels/event_listeners/EventListenersView.ts

@@ -64,7 +64,6 @@ interface ViewInput {
   togglePassiveListener(listener: SDK.DOMDebuggerModel.EventListener): void;
   removeListener(listener: SDK.DOMDebuggerModel.EventListener): boolean;
   reveal(object: SDK.RemoteObject.RemoteObject): void;
-  linkifier: Components.Linkifier.Linkifier;
   listeners: Map<string, ListenerEntry[]>;
   filter?: {showFramework: boolean, showPassive: boolean, showBlocking: boolean};
 }
@@ -167,7 +166,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                    ?hidden=${shouldHide(listener)}>
                  <span class=event-listener-details>
                    ${ObjectUI.ObjectPropertiesSection.renderPropertyValue(
-                     object, /* wasThrown */ false, /* showPreview */ false, input.linkifier)}
+                     object, /* wasThrown */ false, /* showPreview */ false)}
                    <devtools-button
                      .iconName=${'bin'}
                      .variant=${Buttons.Button.Variant.ICON}
@@ -184,9 +183,16 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                          ${i18nString(UIStrings.togglePassive)}
                      </button>` : Lit.nothing}
                    <span class=event-listener-tree-subtitle>
-                     ${input.linkifier.linkifyRawLocation(
-                         listener.location(), listener.sourceURL(), /* FIXME template version */
-                         undefined, {tabStop: true})}
+                     ${widget(Components.Linkifier.ScriptLocationLink, {
+                       target: listener.location().debuggerModel.target(),
+                       scriptId: listener.location().scriptId,
+                       sourceURL: listener.sourceURL(),
+                       lineNumber: listener.location().lineNumber,
+                       options: {
+                         columnNumber: listener.location().columnNumber,
+                         tabStop: true,
+                       },
+                     })}
                    </span>
                  </span>
                  <ul role=group ${widget(ObjectUI.ObjectPropertiesSection.ObjectTreeWidget, {objectTree})} ${
@@ -205,7 +211,6 @@ export class EventListenersView extends UI.Widget.VBox {
   #filter: {showFramework: boolean, showPassive: boolean, showBlocking: boolean}|undefined;
   #view: View;
   #listeners?: Map<string, ListenerEntry[]>;
-  #linkifier = new Components.Linkifier.Linkifier();
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element);
     this.#view = view;
@@ -278,9 +283,7 @@ export class EventListenersView extends UI.Widget.VBox {
           void Common.Revealer.reveal(object);
         }
       },
-      linkifier: this.#linkifier,
     };
-    this.#linkifier.reset();
     this.#view(input, {}, this.contentElement);
     this.eventListenersArrivedForTest();
   }

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -168,11 +168,11 @@ export class Layers3DView extends Layers3DViewBase
   private whiteTexture?: WebGLTexture|null;
   private gl?: WebGLRenderingContext|null;
   private dimensionsForAutoscale?: {width: number, height: number};
-  private needsUpdate?: boolean;
   private updateScheduled?: boolean;
   private panelToolbar: UI.Toolbar.Toolbar;
-  private showSlowScrollRectsSetting?: Common.Settings.Setting<boolean>;
-  private showPaintsSetting?: Common.Settings.Setting<boolean>;
+  private readonly showSlowScrollRectsSetting: Common.Settings.Setting<boolean>;
+  private readonly showPaintsSetting: Common.Settings.Setting<boolean>;
+  readonly #chromeWindowSetting: Common.Settings.Setting<boolean>;
   private mouseDownX?: number;
   private mouseDownY?: number;
 
@@ -197,10 +197,8 @@ export class Layers3DView extends Layers3DViewBase
         SettingsUI.LayerViewerSettings.showPaintsSettingDescriptor, this.panelToolbar);
     this.showSlowScrollRectsSetting = this.createVisibilitySetting(
         SettingsUI.LayerViewerSettings.showSlowScrollRectsSettingDescriptor, this.panelToolbar);
-    this.showPaintsSetting.addChangeListener(this.updatePaints, this);
-    Common.Settings.Settings.instance()
-        .resolve(SettingsUI.LayerViewerSettings.chromeWindowSettingDescriptor)
-        .addChangeListener(this.updateData, this);
+    this.#chromeWindowSetting =
+        Common.Settings.Settings.instance().resolve(SettingsUI.LayerViewerSettings.chromeWindowSettingDescriptor);
 
     this.performUpdate();
 
@@ -216,8 +214,6 @@ export class Layers3DView extends Layers3DViewBase
 
     this.snapshotLayers = new Map();
     this.layerViewHost.setLayerSnapshotMap(this.snapshotLayers);
-
-    this.layerViewHost.showInternalLayersSetting().addChangeListener(this.updateData, this);
   }
 
   override performUpdate(): void {
@@ -242,7 +238,7 @@ export class Layers3DView extends Layers3DViewBase
     this.layerTree = layerTree;
     this.layerTexture = null;
     delete this.oldTextureScale;
-    if (this.showPaints()) {
+    if (this.showPaintsSetting.get()) {
       this.textureManager.setLayerTree(layerTree);
     }
     this.updateData();
@@ -268,19 +264,24 @@ export class Layers3DView extends Layers3DViewBase
   }
 
   override willHide(): void {
-    super.willHide();
+    this.showPaintsSetting.removeChangeListener(this.updatePaints, this);
+    this.showSlowScrollRectsSetting.removeChangeListener(this.updateData, this);
+    this.#chromeWindowSetting.removeChangeListener(this.updateData, this);
+    this.layerViewHost.showInternalLayersSetting().removeChangeListener(this.updateData, this);
     this.textureManager.suspend();
+    super.willHide();
   }
 
   override wasShown(): void {
     super.wasShown();
+    this.showPaintsSetting.addChangeListener(this.updatePaints, this);
+    this.showSlowScrollRectsSetting.addChangeListener(this.updateData, this);
+    this.#chromeWindowSetting.addChangeListener(this.updateData, this);
+    this.layerViewHost.showInternalLayersSetting().addChangeListener(this.updateData, this);
     this.textureManager.resume();
-    if (!this.needsUpdate) {
-      return;
-    }
     this.performUpdate();
     this.resizeCanvas();
-    this.updateData();
+    this.updatePaints();
   }
 
   updateLayerSnapshot(layer: SDK.LayerTreeBase.Layer): void {
@@ -632,7 +633,7 @@ export class Layers3DView extends Layers3DViewBase
       this.layerTree.forEachLayer(this.calculateLayerRect.bind(this));
     }
 
-    if (this.showSlowScrollRectsSetting && this.showSlowScrollRectsSetting.get() && this.layerTree) {
+    if (this.showSlowScrollRectsSetting.get() && this.layerTree) {
       this.layerTree.forEachLayer(this.calculateLayerScrollRects.bind(this));
     }
 
@@ -643,7 +644,7 @@ export class Layers3DView extends Layers3DViewBase
       rect.setVertices(layer.quad(), this.depthForLayer(layer));
       rect.texture = this.layerTexture.texture;
       this.appendRect(rect);
-    } else if (this.showPaints() && this.layerTree) {
+    } else if (this.showPaintsSetting.get() && this.layerTree) {
       this.layerTree.forEachLayer(this.calculateLayerTileRects.bind(this));
     }
   }
@@ -731,9 +732,8 @@ export class Layers3DView extends Layers3DViewBase
       return;
     }
 
-    const drawChrome =
-        Common.Settings.Settings.instance().resolve(SettingsUI.LayerViewerSettings.chromeWindowSettingDescriptor).get() &&
-        this.chromeTextures.length >= 3 && this.chromeTextures.indexOf(undefined) < 0;
+    const drawChrome = this.#chromeWindowSetting.get() && this.chromeTextures.length >= 3 &&
+        this.chromeTextures.indexOf(undefined) < 0;
     const z = (this.maxDepth + 1) * LayerSpacing;
     const borderWidth = Math.ceil(ViewportBorderWidth * this.scale);
     let vertices: number[] = [viewport.width, 0, z, viewport.width, viewport.height, z, 0, viewport.height, z, 0, 0, z];
@@ -803,7 +803,6 @@ export class Layers3DView extends Layers3DViewBase
 
   updateData(): void {
     if (!this.isShowing()) {
-      this.needsUpdate = true;
       return;
     }
     // Debounce into the next frame (double rAF).
@@ -878,7 +877,6 @@ export class Layers3DView extends Layers3DViewBase
       descriptor: Common.Settings.SettingDescriptor<boolean>,
       toolbar: UI.Toolbar.Toolbar): Common.Settings.Setting<boolean> {
     const setting = Common.Settings.Settings.instance().resolve(descriptor);
-    setting.addChangeListener(this.updateData, this);
     toolbar.appendToolbarItem(new UI.Toolbar.ToolbarSettingCheckbox(setting));
     return setting;
   }
@@ -935,18 +933,13 @@ export class Layers3DView extends Layers3DViewBase
   }
 
   private updatePaints(): void {
-    if (this.showPaints()) {
+    if (this.showPaintsSetting.get()) {
       this.textureManager.setLayerTree(this.layerTree);
-      this.textureManager.forceUpdate();
     } else {
       this.textureManager.reset();
     }
     this.updateData();
   }
-
-  private showPaints(): boolean {
-    return this.showPaintsSetting ? this.showPaintsSetting.get() : false;
-  }
 }
 
 export enum OutlineType {
@@ -1088,9 +1081,6 @@ export class LayerTextureManager {
         }
       });
     }
-    if (!oldLayers.length) {
-      this.forceUpdate();
-    }
     for (const layer of oldLayers) {
       if (newLayers.has(layer)) {
         continue;
@@ -1149,12 +1139,6 @@ export class LayerTextureManager {
     }
   }
 
-  forceUpdate(): void {
-    this.queue.forEach(layer => this.updateLayer(layer));
-    this.queue = [];
-    void this.update();
-  }
-
   private update(): Promise<void> {
     const layer = this.queue.shift();
     if (!layer) {

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

@@ -65,7 +65,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
             return html`
                 <devtools-checkbox
                   title=${valueTypeToLocalizedString(type)}
-                  ?checked=${input.valueTypes.has(type)}
+                  .checked=${input.valueTypes.has(type)}
                   @change=${(e: Event) => {
                     const checkbox = e.target as HTMLInputElement;
                     input.onToggle(type, checkbox.checked);

package/front_end/panels/network/NetworkConfigView.ts

@@ -2,8 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../settings/emulation/components/components.js';
-
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
@@ -14,7 +12,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, type LitTemplate, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js';
-import type * as EmulationComponents from '../settings/emulation/components/components.js';
+import * as EmulationComponents from '../settings/emulation/components/components.js';
 
 import networkConfigViewStyles from './networkConfigView.css.js';
 
@@ -195,13 +193,17 @@ function renderUserAgentSection(input: NetworkConfigViewInput, output: NetworkCo
     </devtools-checkbox>
     <div class=${Directives.classMap({'network-config-ua-custom': true, checked: input.useCustomUA})}>
       ${renderUserAgentSelectAndInput(input, output, title)}
-      <devtools-user-agent-client-hints-form
-          .value=${input.clientHintsValue}
-          .disabled=${!input.useCustomUA}
-          @clienthintschange=${(e: Event) => input.onClientHintsChange(
-              (e.target as EmulationComponents.UserAgentClientHintsForm.UserAgentClientHintsForm).value.metaData)}
-          @clienthintssubmit=${(e: Event) => input.onClientHintsSubmit((e as CustomEvent).detail.value)}>
-      </devtools-user-agent-client-hints-form>
+      <devtools-widget
+          class="user-agent-client-hints-form"
+          @clienthintschange=${(e: CustomEvent<Protocol.Emulation.UserAgentMetadata>) =>
+              input.onClientHintsChange(e.detail)}
+          @clienthintssubmit=${(e: CustomEvent<Protocol.Emulation.UserAgentMetadata>) =>
+              input.onClientHintsSubmit(e.detail)}
+          ${UI.Widget.widget(EmulationComponents.UserAgentClientHintsForm.UserAgentClientHintsForm, {
+            value: input.clientHintsValue,
+            disabled: !input.useCustomUA,
+          })}>
+      </devtools-widget>
     </div>
     <span class="status-text">${input.clientHintsStatusText}</span>
   `);

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -1367,7 +1367,9 @@ export class NetworkRequestNode extends NetworkNode {
   }
 
   private openInNewTab(): void {
-    if (Common.ParsedURL.isPrivilegedScheme(this.requestInternal.url())) {
+    // Only open URLs with web-safe schemes. Do not open privileged or other non-web-safe
+    // schemes (such as `chrome:`, `devtools:`, `file:`, or `blob:devtools:`).
+    if (!Common.ParsedURL.hasWebSafeScheme(this.requestInternal.url())) {
       return;
     }
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(this.requestInternal.url());

package/front_end/panels/network/RequestConditionsDrawer.ts

@@ -150,7 +150,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     <style>${requestConditionsDrawerStyles}</style>
     <devtools-toolbar jslog=${VisualLogging.toolbar()}>
       <devtools-checkbox
-        ?checked=${input.enabled}
+        .checked=${input.enabled}
         @click=${input.toggleEnabled}
         .jslogContext=${'network.enable-request-blocking'}>
         ${i18nString(UIStrings.enableBlockingAndThrottling)}

package/front_end/panels/network/RequestPayloadView.ts

@@ -125,7 +125,7 @@ export interface ViewInput {
   queryParameters: SDK.NetworkRequest.NameValue[]|null;
   objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree|null;
   onPayloadContextMenu(contextMenu: UI.ContextMenu.ContextMenu): void;
-  onPayloadToggle(expanded: boolean): void;
+  onPayloadToggle(expanded: boolean, recursively?: boolean): void;
 
   /** Raw binary content data for the request body (when base64-encoded by backend). */
   binaryPayloadContentData: TextUtils.ContentData.ContentData|null;
@@ -204,7 +204,9 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       <li role=treeitem class="source-code object-properties-section-root-element object-properties-section"
           toggle-on-click
           ?open=${objectTree.expanded}
-          @expand=${(e: UI.TreeOutline.TreeViewElement.ExpandEvent) => input.onPayloadToggle(e.detail.expanded)}
+          @expand=${
+        (e: UI.TreeOutline.TreeViewElement.ExpandEvent) =>
+            input.onPayloadToggle(e.detail.expanded, e.detail.recursively)}
           @contextmenu=${onPayloadContextMenu}>
         ${objectTree.object.description}
         ${objectTree.object.hasChildren ? ObjectUI.ObjectPropertiesSection.renderObjectTree(objectTree) : nothing}
@@ -500,10 +502,15 @@ export class RequestPayloadView extends UI.Widget.VBox {
             },
         );
       },
-      onPayloadToggle: (expanded: boolean): void => {
-        if (this.#objectTree) {
-          this.#objectTree.expanded = expanded;
+      onPayloadToggle: (expanded: boolean, recursively = false): void => {
+        if (!this.#objectTree) {
+          return;
+        }
+        if (expanded && recursively) {
+          void this.#objectTree.expandRecursively();
+          return;
         }
+        this.#objectTree.expanded = expanded;
       },
       binaryPayloadContentData: this.#binaryPayloadContentData,
       requestUrl: this.request?.url() ?? Platform.DevToolsPath.EmptyUrlString,

package/front_end/panels/network/networkConfigView.css

@@ -26,7 +26,7 @@
   flex: 2 0 200px;
 }
 
-.network-config-fields span:first-of-type {
+.network-config-fields > span:first-of-type {
   padding: 3px 0;
 }
 
@@ -74,12 +74,12 @@
   line-height: var(--sys-size-9);
 }
 
-.network-config-ua input {
+.network-config-ua-custom > input {
   display: block;
   width: calc(100% - var(--sys-size-9));
 }
 
-.network-config-ua input[type="text"],
+.network-config-ua-custom > input[type="text"],
 .network-config-ua select {
   margin-top: var(--sys-size-5);
 }
@@ -92,20 +92,20 @@
 .network-config-ua-custom {
   padding-bottom: var(--sys-size-5);
 
-  input,
-  devtools-user-agent-client-hints-form {
+  > input,
+  > .user-agent-client-hints-form {
     opacity: 38%;
     pointer-events: none;
   }
 
-  &.checked input,
-  &.checked devtools-user-agent-client-hints-form {
+  &.checked > input,
+  &.checked > .user-agent-client-hints-form {
     opacity: revert;
     pointer-events: revert;
   }
 }
 
-devtools-user-agent-client-hints-form {
+.user-agent-client-hints-form {
   display: block;
   margin-top: var(--sys-size-7);
   width: min(100%, 400px);

package/front_end/panels/profiler/HeapProfileView.ts

@@ -409,19 +409,41 @@ export class HeapProfileView extends UI.View.SimpleView implements UI.Searchable
   }
 
   #setupTimelineOverview(): void {
-    if (this.profileType.hasTemporaryView()) {
+    // Only the profile that is being recorded receives stats updates. Profiles
+    // loaded from a file are also marked as being recorded while they load.
+    if (this.profileType.hasTemporaryView() && !this.profileHeader.fromFile() &&
+        this.profileType.profileBeingRecorded() === this.profileHeader) {
       this.timelineOverview.addEventListener(Events.IDS_RANGE_CHANGED, this.onIdsRangeChanged.bind(this));
       this.timelineOverview.start();
 
       this.profileType.addEventListener(SamplingHeapProfileType.Events.STATS_UPDATE, this.onStatsUpdate, this);
-      void this.profileType.once(ProfileEvents.PROFILE_COMPLETE).then(() => {
-        this.profileType.removeEventListener(SamplingHeapProfileType.Events.STATS_UPDATE, this.onStatsUpdate, this);
-        this.timelineOverview.stop();
-        this.timelineOverview.updateGrid();
-      });
+      this.profileType.addEventListener(ProfileEvents.PROFILE_COMPLETE, this.#onProfileComplete, this);
+      this.profileType.addEventListener(ProfileEvents.REMOVE_PROFILE_HEADER, this.#onProfileRemoved, this);
     }
   }
 
+  #onProfileComplete({data: profile}: Common.EventTarget.EventTargetEvent<ProfileHeader>): void {
+    if (profile !== this.profileHeader) {
+      return;
+    }
+    this.#stopTimelineTracking();
+    this.timelineOverview.updateGrid();
+  }
+
+  #onProfileRemoved({data: profile}: Common.EventTarget.EventTargetEvent<ProfileHeader>): void {
+    // A profile that is removed while it is being recorded never completes.
+    if (profile === this.profileHeader) {
+      this.#stopTimelineTracking();
+    }
+  }
+
+  #stopTimelineTracking(): void {
+    this.profileType.removeEventListener(SamplingHeapProfileType.Events.STATS_UPDATE, this.onStatsUpdate, this);
+    this.profileType.removeEventListener(ProfileEvents.PROFILE_COMPLETE, this.#onProfileComplete, this);
+    this.profileType.removeEventListener(ProfileEvents.REMOVE_PROFILE_HEADER, this.#onProfileRemoved, this);
+    this.timelineOverview.stop();
+  }
+
   override async toolbarItems(): Promise<TemplateResult> {
     const currentViewType = this.viewType.get();
     const isFlame = currentViewType === ViewTypes.FLAME;

package/front_end/panels/profiler/HeapSnapshotDataGrids.ts

@@ -533,14 +533,18 @@ export class HeapSnapshotViewportDataGrid extends HeapSnapshotSortableDataGrid {
     const scrollBottom = scrollTop + this.scrollContainer.offsetHeight;
     if (height >= scrollTop && height < scrollBottom) {
       if (!node.dataGrid) {
-        this.updateVisibleNodes(false);
+        this.updateVisibleNodes(true);
       }
       return Promise.resolve(node);
     }
 
     const scrollGap = 40;
     this.scrollContainer.scrollTop = Math.max(0, height - scrollGap);
-    this.updateVisibleNodes(false);
+    this.updateVisibleNodes(true);
+    if (!node.dataGrid) {
+      this.scrollContainer.scrollTop = Math.max(0, height - scrollGap);
+      this.updateVisibleNodes(true);
+    }
     return new Promise(resolve => {
       if (this.scrollToResolveCallback) {
         this.scrollToResolveCallback();
@@ -551,7 +555,7 @@ export class HeapSnapshotViewportDataGrid extends HeapSnapshotSortableDataGrid {
         if (!this.scrollToResolveCallback) {
           return;
         }
-        this.updateVisibleNodes(false);
+        this.updateVisibleNodes(!node.dataGrid);
         this.scrollToResolveCallback();
         this.scrollToResolveCallback = null;
       });

package/front_end/panels/protocol_monitor/JSONEditor.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import '../../ui/kit/kit.js';
-import '../../ui/components/menus/menus.js';
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';

package/front_end/panels/recorder/RecorderPanel.ts

@@ -241,7 +241,7 @@ export interface ViewInput {
   onRemoveBreakpoint: (index: number) => void;
   onExtensionViewClosed: () => void;
   onExportMenuClosed: () => void;
-  onExportOptionSelected: (event: Menus.SelectMenu.SelectMenuItemSelectedEvent) => void;
+  onExportOptionSelected: (event: Menus.Menu.MenuItemSelectedEvent) => void;
   onRecordingFinished: () => void;
   handleAddAssertionEvent: () => void;
   onSetRecording: (event: Event) => void;
@@ -1594,7 +1594,7 @@ export class RecorderPanel extends UI.Widget.VBox<DocumentFragment> {
     }
   }
 
-  async #onExportOptionSelected(event: Menus.SelectMenu.SelectMenuItemSelectedEvent): Promise<void> {
+  async #onExportOptionSelected(event: Menus.Menu.MenuItemSelectedEvent): Promise<void> {
     if (typeof event.itemValue !== 'string') {
       throw new Error('Invalid export option value');
     }

package/front_end/panels/screencast/ScreencastView.ts

@@ -455,9 +455,8 @@ export class ScreencastView extends UI.Widget.Widget implements SDK.OverlayModel
       this.resourceTreeModel = screenCaptureModel.target().model(SDK.ResourceTreeModel.ResourceTreeModel);
       this.networkManager = screenCaptureModel.target().model(SDK.NetworkManager.NetworkManager);
       this.inputModel = screenCaptureModel.target().model(InputModel);
-      this.createNavigationBar();
-      this.updateGlasspane();
       if (this.isShowing()) {
+        this.createNavigationBar();
         this.#scheduleCasting();
       }
     } else {
@@ -494,6 +493,7 @@ export class ScreencastView extends UI.Widget.Widget implements SDK.OverlayModel
     super.wasShown();
     SDK.TargetManager.TargetManager.instance().addEventListener(SDK.TargetManager.Events.SUSPEND_STATE_CHANGED,
                                                                 this.onSuspendStateChange, this);
+    this.createNavigationBar();
     this.updateGlasspane();
     this.#scheduleCasting();
     this.requestUpdate();
@@ -539,14 +539,11 @@ export class ScreencastView extends UI.Widget.Widget implements SDK.OverlayModel
       delete this.deferredCasting;
     }
     this.stopCasting();
+    this.#cleanup();
     SDK.TargetManager.TargetManager.instance().removeEventListener(SDK.TargetManager.Events.SUSPEND_STATE_CHANGED,
                                                                    this.onSuspendStateChange, this);
   }
 
-  override onDetach(): void {
-    this.#cleanup();
-  }
-
   private async startCasting(): Promise<void> {
     if (!this.#screenCaptureModel) {
       return;

package/front_end/panels/security/SecurityPanelSidebar.ts

@@ -272,37 +272,6 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
     this.requestUpdate();
   }
 
-  // Used in web tests
-  elementsByOrigin(): Map<string, {
-    select: (omitFocus?: boolean, selectedByUser?: boolean) => void,
-    showElement: () => void,
-    origin: () => string,
-    securityState: () => Protocol.Security.SecurityState | undefined,
-  }> {
-    const map = new Map<string, {
-      select: (omitFocus?: boolean, selectedByUser?: boolean) => void,
-      showElement: () => void,
-      origin: () => string,
-      securityState: () => Protocol.Security.SecurityState | undefined,
-    }>();
-    for (const [origin, state] of this.#origins.entries()) {
-      const element = {
-        select: () => {
-          this.#selectedElementId = origin;
-          this.requestUpdate();
-          this.#onShowOrigin?.(origin);
-        },
-        showElement: () => {
-          this.#onShowOrigin?.(origin);
-        },
-        origin: () => origin,
-        securityState: () => state,
-      };
-      map.set(origin, element);
-    }
-    return map;
-  }
-
   set selectedOrigin(origin: Platform.DevToolsPath.UrlString|null) {
     this.#selectedElementId = origin ?? 'overview';
     this.requestUpdate();

package/front_end/panels/settings/SettingsScreen.ts

@@ -442,7 +442,7 @@ export const EXPERIMENTS_SETTINGS_TAB_DEFAULT_VIEW: ExperimentsSettingsTabView =
                         class="experiment-label"
                         name=${experiment.name}
                         title=${experiment.title}
-                        ?checked=${experiment.isEnabled()}
+                        .checked=${experiment.isEnabled()}
                         .jslogContext=${experiment.name}
                         @click=${(e: Event) => {
                           const checkbox = e.currentTarget as UI.UIUtils.CheckboxLabel;

package/front_end/panels/settings/emulation/DevicesSettingsTab.ts

@@ -260,6 +260,7 @@ export class DevicesSettingsTab extends UI.Widget.VBox implements
   private muteUpdate: boolean;
   private emulatedDevicesList: EmulationModel.EmulatedDevices.EmulatedDevicesList;
   private editor?: UI.ListWidget.Editor<EmulationModel.EmulatedDevices.EmulatedDevice>;
+  readonly #userAgentClientHintsForm = new EmulationComponents.UserAgentClientHintsForm.UserAgentClientHintsForm();
 
   constructor() {
     super({jslog: `${VisualLogging.pane('devices')}`});
@@ -471,10 +472,7 @@ export class DevicesSettingsTab extends UI.Widget.VBox implements
         uaType === EmulationModel.DeviceModeModel.UA.DESKTOP_TOUCH) {
       device.capabilities.push(EmulationModel.EmulatedDevices.Capability.TOUCH);
     }
-    const userAgentControlValue =
-        (editor.control('ua-metadata') as
-         UI.ListWidget.CustomEditorControl<EmulationComponents.UserAgentClientHintsForm.UserAgentClientHintsFormData>)
-            .value.metaData;
+    const userAgentControlValue = this.#userAgentClientHintsForm.value.metaData;
     const hasUserAgentOverride = device.userAgent.trim().length > 0;
     device.userAgentMetadata = null;
     if (hasUserAgentOverride && userAgentControlValue) {
@@ -517,9 +515,7 @@ export class DevicesSettingsTab extends UI.Widget.VBox implements
           device.touch() ? EmulationModel.DeviceModeModel.UA.DESKTOP_TOUCH : EmulationModel.DeviceModeModel.UA.DESKTOP;
     }
     editor.control('ua-type').value = uaType;
-    (editor.control('ua-metadata') as
-     UI.ListWidget.CustomEditorControl<EmulationComponents.UserAgentClientHintsForm.UserAgentClientHintsFormData>)
-        .value = {metaData: device.userAgentMetadata || undefined};
+    this.#userAgentClientHintsForm.value = {metaData: device.userAgentMetadata || undefined};
     return editor;
   }
 
@@ -693,19 +689,16 @@ export class DevicesSettingsTab extends UI.Widget.VBox implements
     uaType.classList.add('device-edit-fixed');
     ua.appendChild(uaType);
 
-    const uaMetadata = editor.createCustomControl(
-        'ua-metadata', EmulationComponents.UserAgentClientHintsForm.UserAgentClientHintsForm,
-        userAgentMetadataValidator);
+    const uaMetadata = this.#userAgentClientHintsForm;
     uaMetadata.value = {};
-    uaMetadata.addEventListener('clienthintschange', () => editor.requestValidation(), false);
-    content.appendChild(uaMetadata);
+    uaMetadata.addEventListener(EmulationComponents.UserAgentClientHintsForm.Events.CLIENT_HINTS_CHANGE,
+                                () => editor.requestValidation());
+    // The editor content is not in the DOM yet, so show the form as a root widget.
+    uaMetadata.show(content, undefined, /* suppressOrphanWidgetError= */ true);
+    editor.addCustomControl(uaMetadata.element, () => uaMetadata.validate());
 
     return editor;
 
-    function userAgentMetadataValidator(): UI.ListWidget.ValidatorResult {
-      return uaMetadata.validate();
-    }
-
     function userAgentValidator(
         _item: EmulationModel.EmulatedDevices.EmulatedDevice, _index: number,
         input: UI.ListWidget.EditorControl): UI.ListWidget.ValidatorResult {