chrome-devtools-frontend 1.0.1721762 → 1.0.1724140

package/front_end/panels/application/SubAppsView.ts

@@ -0,0 +1,159 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import '../../ui/kit/kit.js';
+import '../../ui/legacy/components/data_grid/data_grid.js';
+
+import * as i18n from '../../core/i18n/i18n.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+
+import subAppsViewStyles from './subAppsView.css.js';
+
+const {html} = Lit;
+
+const UIStrings = {
+  /**
+   * @description Heading label for Sub Apps view
+   */
+  subApps: 'Sub Apps',
+  /**
+   * @description Heading label for Sibling Sub Apps view
+   */
+  siblingSubApps: 'Sibling Sub Apps',
+  /**
+   * @description Column header for the sub-app name
+   */
+  name: 'Name',
+  /**
+   * @description Column header for the sub-app scope
+   */
+  scope: 'Scope',
+  /**
+   * @description Column header when Manifest ID and Start URL are identical across all sub-apps
+   */
+  manifestIdAndStartUrl: 'Manifest ID / Start URL',
+  /**
+   * @description Column header for Manifest ID
+   */
+  manifestId: 'Manifest ID',
+  /**
+   * @description Column header for Start URL
+   */
+  startUrl: 'Start URL',
+} as const;
+
+const str_ = i18n.i18n.registerUIStrings('panels/application/SubAppsView.ts', UIStrings);
+export const i18nString: i18n.LocalizeString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export interface SubAppEntry {
+  name: string;
+  scope: string;
+  manifestId: string;
+  startUrl: string;
+}
+
+export interface SubAppsViewInput {
+  subApps: SubAppEntry[];
+  isSiblingSubApps?: boolean;
+}
+
+/**
+ * Sub apps always share the parent app's origin, so, like the manifest's
+ * Start URL field, only the path (plus any query or fragment) is shown. The
+ * full URL is kept in the cell's tooltip. Falls back to the original string if
+ * it is not a valid absolute URL.
+ */
+function stripOrigin(url: string): string {
+  try {
+    const parsed = new URL(url);
+    return parsed.pathname + parsed.search + parsed.hash;
+  } catch {
+    return url;
+  }
+}
+
+type View = (input: SubAppsViewInput, output: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const hasDistinctManifestId =
+      input.subApps.some(subApp => subApp.manifestId && subApp.startUrl && subApp.manifestId !== subApp.startUrl);
+  const headingText = input.isSiblingSubApps ? i18nString(UIStrings.siblingSubApps) : i18nString(UIStrings.subApps);
+
+  // clang-format off
+  Lit.render(html`
+    <style>${subAppsViewStyles}</style>
+    <style>${UI.inspectorCommonStyles}</style>
+    <div jslog=${VisualLogging.pane('sub-apps')}>
+      <span class="heading">${headingText}</span>
+      <devtools-data-grid striped inline role="grid" aria-label=${headingText}>
+        <table>
+          <tr>
+            <th id="name" weight="10" sortable>${i18nString(UIStrings.name)}</th>
+            <th id="scope" weight="10" sortable>${i18nString(UIStrings.scope)}</th>
+            ${hasDistinctManifestId ? html`
+              <th id="manifest-id" weight="10" sortable>${i18nString(UIStrings.manifestId)}</th>
+              <th id="start-url" weight="10" sortable>${i18nString(UIStrings.startUrl)}</th>
+            ` : html`
+              <th id="manifest-id-start-url" weight="10" sortable>${i18nString(UIStrings.manifestIdAndStartUrl)}</th>
+            `}
+          </tr>
+          ${input.subApps.map(subApp => html`
+            <tr>
+              <td>${subApp.name}</td>
+              <td title=${subApp.scope}>${stripOrigin(subApp.scope)}</td>
+              ${hasDistinctManifestId ? html`
+                <td title=${subApp.manifestId}>${stripOrigin(subApp.manifestId)}</td>
+                <td title=${subApp.startUrl}>${stripOrigin(subApp.startUrl)}</td>
+              ` : html`
+                <td title=${subApp.manifestId || subApp.startUrl}>${stripOrigin(subApp.manifestId || subApp.startUrl)}</td>
+              `}
+            </tr>
+          `)}
+        </table>
+      </devtools-data-grid>
+    </div>
+  `, target);
+  // clang-format on
+};
+
+export class SubAppsView extends UI.Widget.VBox {
+  #subApps: SubAppEntry[] = [];
+  #isSiblingSubApps = false;
+  #view: View;
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
+  }
+
+  get subApps(): SubAppEntry[] {
+    return this.#subApps;
+  }
+
+  set subApps(subApps: SubAppEntry[]) {
+    if (subApps === this.#subApps) {
+      return;
+    }
+    this.#subApps = subApps;
+    this.requestUpdate();
+  }
+
+  get isSiblingSubApps(): boolean {
+    return this.#isSiblingSubApps;
+  }
+
+  set isSiblingSubApps(isSiblingSubApps: boolean) {
+    if (isSiblingSubApps === this.#isSiblingSubApps) {
+      return;
+    }
+    this.#isSiblingSubApps = isSiblingSubApps;
+    this.requestUpdate();
+  }
+
+  override async performUpdate(): Promise<void> {
+    this.#view({subApps: this.#subApps, isSiblingSubApps: this.#isSiblingSubApps}, undefined, this.contentElement);
+  }
+}

package/front_end/panels/application/application.ts

@@ -34,6 +34,7 @@ import * as ServiceWorkerUpdateCycleView from './ServiceWorkerUpdateCycleView.js
 import * as StorageBucketsTreeElement from './StorageBucketsTreeElement.js';
 import * as StorageItemsToolbar from './StorageItemsToolbar.js';
 import * as StorageView from './StorageView.js';
+import * as SubAppsView from './SubAppsView.js';
 import * as TrustTokensTreeElement from './TrustTokensTreeElement.js';
 import * as WebMCPTreeElement from './WebMCPTreeElement.js';
 import * as WebMCPView from './WebMCPView.js';
@@ -72,6 +73,7 @@ export {
   StorageBucketsTreeElement,
   StorageItemsToolbar,
   StorageView,
+  SubAppsView,
   TrustTokensTreeElement,
   WebMCPTreeElement,
   WebMCPView,

package/front_end/panels/application/preloading/components/PreloadingDisabledInfobar.ts

@@ -138,7 +138,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
                       str_, valueId,
                       Object.fromEntries(Object.entries(placeholders).map(
                           ([key, {title, href}]) =>
-                              [key, html`<devtools-link href=${href}>${title}</devtools-link>`])));
+                              [key, html`<devtools-link href=${href} allow-privileged>${title}</devtools-link>`])));
                   return html`
                       <div class="key">${key}</div>
                       <div class="value">${value}</div>

package/front_end/panels/application/subAppsView.css

@@ -0,0 +1,21 @@
+/*
+ * Copyright 2026 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+@scope to (devtools-widget > *) {
+  :scope {
+    padding: var(--sys-size-9);
+    height: 100%;
+    display: flex;
+  }
+
+  .heading {
+    font-size: 15px;
+  }
+
+  devtools-data-grid {
+    margin-top: var(--sys-size-9);
+  }
+}

package/front_end/panels/elements/ClassesPaneWidget.ts

@@ -77,7 +77,9 @@ export class ClassesPaneWidget extends UI.Widget.Widget {
   }
 
   private splitTextIntoClasses(text: string): string[] {
-    return text.split(/[,\s]/).map(className => className.trim()).filter(className => className.length);
+    return text.split(/[,\s]/)
+        .map(className => className.trim().replace(/^\./, ''))
+        .filter(className => className.length);
   }
 
   private onKeyDown(event: KeyboardEvent): void {

package/front_end/panels/elements/DOMTreeElementWidget.ts

@@ -701,7 +701,9 @@ function renderLinkifiedValue(value: string, node: SDK.DOMModel.DOMNode): Lit.Te
   if (value.startsWith('data:')) {
     value = Platform.StringUtilities.trimMiddle(value, 60);
   }
-  const isAnchor = node && node.nodeName().toLowerCase() === 'a';
+  // Page-authored hrefs must not open privileged URLs (e.g. `devtools://` or `chrome://`) on click. Anchors with
+  // other schemes fall through to the Linkifier, which renders privileged URLs as inert text.
+  const isAnchor = node && node.nodeName().toLowerCase() === 'a' && Common.ParsedURL.hasWebSafeScheme(rewrittenHref);
   if (isAnchor) {
     return html`<devtools-link class="devtools-link image-url" href=${rewrittenHref} ${ref(el => {
       if (el) {

package/front_end/panels/elements/DOMTreeWidget.ts

@@ -690,6 +690,16 @@ export const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target:
       input.onContextMenu(node, event);
     };
 
+    // Prevent the native word selection on double click. The double click
+    // starts inline editing instead. Inside an active inline editor the
+    // native selection must stay enabled.
+    const onMouseDown = (event: MouseEvent): void => {
+      if (event.detail < 2 || UI.UIUtils.isBeingEdited(event.target as Node)) {
+        return;
+      }
+      event.preventDefault();
+    };
+
     const onDragStart = (event: DragEvent): void => {
       event.stopPropagation();
       const currentTarget = event.currentTarget as HTMLElement | null;
@@ -733,6 +743,7 @@ export const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target:
           @select=${on((event: UI.TreeOutline.TreeViewElement.SelectEvent) => onSelect(false, Boolean(event.detail?.selectedByUser)))}
           @expand=${on(onExpand)}
           @mousemove=${on(onMouseMove(/* isClosingTag= */ false))}
+          @mousedown=${on(onMouseDown)}
           @contextmenu=${on(onContextMenu)}
           @dragstart=${on(onDragStart)}
           @dragover=${on(onDragOver(/* isClosingTag= */ false))}
@@ -816,6 +827,7 @@ export const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target:
                     @select=${on((event: UI.TreeOutline.TreeViewElement.SelectEvent) => onSelect(true, Boolean(event.detail?.selectedByUser)))}
                     @contextmenu=${on(onContextMenu)}
                     @mousemove=${on(onMouseMove(/* isClosingTag= */ true))}
+                    @mousedown=${on(onMouseDown)}
                     @dragstart=${on(onDragStart)}
                     @dragover=${on(onDragOver(/* isClosingTag= */ true))}
                     @dragleave=${on(onDragLeave)}

package/front_end/panels/elements/StyleEditorWidget.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
+import * as Elements from '../../models/elements/elements.js';
 import {createIcon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -34,6 +35,7 @@ export class StyleEditorWidget extends UI.Widget.VBox {
   private editorContainer: HTMLElement;
 
   #triggerKey: string|undefined;
+  #initialProperties: Map<string, string>|null = null;
 
   constructor() {
     super({useShadowDom: true});
@@ -72,6 +74,10 @@ export class StyleEditorWidget extends UI.Widget.VBox {
   bindContext(stylesContainer: StylesContainer, section: StylePropertiesSection): void {
     this.stylesContainer = stylesContainer;
     this.section = section;
+    if (!this.#initialProperties) {
+      this.#initialProperties =
+          this.editor ? getAuthoredStyles(section, this.editor.getEditableProperties()) : new Map();
+    }
     this.editor?.addEventListener('propertyselected', this.onPropertySelected);
     this.editor?.addEventListener('propertydeselected', this.onPropertyDeselected);
   }
@@ -91,6 +97,28 @@ export class StyleEditorWidget extends UI.Widget.VBox {
     this.editor?.removeEventListener('propertydeselected', this.onPropertyDeselected);
   }
 
+  #trackChanges(): void {
+    const initialProperties = this.#initialProperties;
+    this.#initialProperties = null;
+    if (!this.editor || !this.section || !this.stylesContainer || !initialProperties) {
+      return;
+    }
+    const finalProperties = getAuthoredStyles(this.section, this.editor.getEditableProperties());
+    const node = this.stylesContainer.node() ?? this.section.matchedStyles.node();
+    const ruleHeader = this.section.headerText();
+    for (const {propertyName} of this.editor.getEditableProperties()) {
+      const oldValue = initialProperties.get(propertyName) ?? '';
+      const newValue = finalProperties.get(propertyName) ?? '';
+      Elements.StyleChanges.trackStylePropertyEdit(this.stylesContainer.changeTracker, node, {
+        ruleHeader,
+        oldName: oldValue ? propertyName : '',
+        oldValue,
+        newName: newValue ? propertyName : '',
+        newValue,
+      });
+    }
+  }
+
   async render(): Promise<void> {
     if (!this.editor) {
       return;
@@ -146,6 +174,7 @@ export class StyleEditorWidget extends UI.Widget.VBox {
       const onStylesUpdateCompleted = widget.requestUpdate.bind(widget);
       stylesContainer.addStyleUpdateListener(onStylesUpdateCompleted);
       popoverHelper.show(widget, triggerButton, () => {
+        widget.#trackChanges();
         widget.unbindContext();
         if (scrollerElement) {
           scrollerElement.removeEventListener('scroll', onScroll);

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/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/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/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/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();