chrome-devtools-frontend 1.0.1616061 → 1.0.1621064

package/front_end/panels/elements/components/QueryContainer.ts

@@ -10,7 +10,6 @@ import * as SDK from '../../../core/sdk/sdk.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
-import type {DOMNode} from './Helper.js';
 import queryContainerStyles from './queryContainer.css.js';
 
 const {render, html} = Lit;
@@ -24,7 +23,7 @@ export class QueriedSizeRequestedEvent extends Event {
 }
 
 export interface QueryContainerData {
-  container: DOMNode;
+  container: SDK.DOMModel.DOMNode;
   queryName?: string;
   onContainerLinkClick: (event: Event) => void;
 }
@@ -32,7 +31,7 @@ export interface QueryContainerData {
 export class QueryContainer extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #queryName?: string;
-  #container?: DOMNode;
+  #container?: SDK.DOMModel.DOMNode;
   #onContainerLinkClick?: (event: Event) => void;
   #isContainerLinkHovered = false;
   #queriedSizeDetails?: SDK.CSSContainerQuery.ContainerQueriedSizeDetails;
@@ -50,13 +49,13 @@ export class QueryContainer extends HTMLElement {
   }
 
   async #onContainerLinkMouseEnter(): Promise<void> {
-    this.#container?.highlightNode('container-outline');
+    this.#container?.highlight('container-outline');
     this.#isContainerLinkHovered = true;
     this.dispatchEvent(new QueriedSizeRequestedEvent());
   }
 
   #onContainerLinkMouseLeave(): void {
-    this.#container?.clearHighlight();
+    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
     this.#isContainerLinkHovered = false;
     this.#render();
   }
@@ -72,7 +71,7 @@ export class QueryContainer extends HTMLElement {
       classesToDisplay = this.#container.getAttribute('class')?.split(/\s+/).filter(Boolean);
     }
 
-    const nodeTitle = this.#queryName || this.#container.nodeNameNicelyCased;
+    const nodeTitle = this.#queryName || this.#container.nodeNameInCorrectCase();
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off

package/front_end/panels/elements/components/components.ts

@@ -14,7 +14,6 @@ import * as CSSVariableValueView from './CSSVariableValueView.js';
 import * as ElementsBreadcrumbs from './ElementsBreadcrumbs.js';
 import * as ElementsBreadcrumbsUtils from './ElementsBreadcrumbsUtils.js';
 import * as ElementsTreeExpandButton from './ElementsTreeExpandButton.js';
-import * as Helper from './Helper.js';
 import * as QueryContainer from './QueryContainer.js';
 import * as StylePropertyEditor from './StylePropertyEditor.js';
 
@@ -31,7 +30,6 @@ export {
   ElementsBreadcrumbs,
   ElementsBreadcrumbsUtils,
   ElementsTreeExpandButton,
-  Helper,
   QueryContainer,
   StylePropertyEditor,
 };

package/front_end/panels/emulation/MediaQueryInspector.ts

@@ -39,7 +39,7 @@ export interface MediaQueryMarker {
   locations: SDK.CSSModel.CSSLocation[];
 }
 
-export const DEFAULT_VIEW = (input: ViewInput, _output: object, target: HTMLElement): void => {
+export const DEFAULT_VIEW = (input: ViewInput, _output: object, target: DocumentFragment): void => {
   const createBarClassMap = (marker: MediaQueryMarker): Record<string, boolean> => ({
     'media-inspector-bar': true,
     'media-inspector-marker-inactive': !marker.active,
@@ -65,7 +65,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: object, target: HTMLElem
         `)}
       </div>
     `).toArray()}
-    </div>`, target);
+    </div>`, target, {container: {attributes: {jslog: `${VisualLogging.mediaInspectorView().track({click: true})}`}}});
   // clang-format on
 };
 
@@ -155,7 +155,7 @@ function renderLabel(
   // clang-format on
 }
 
-export class MediaQueryInspector extends UI.Widget.Widget implements
+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;
@@ -168,10 +168,7 @@ export class MediaQueryInspector extends UI.Widget.Widget implements
   constructor(
       getWidthCallback: () => number, setWidthCallback: (arg0: number) => void,
       mediaThrottler: Common.Throttler.Throttler, view = DEFAULT_VIEW) {
-    super({
-      jslog: `${VisualLogging.mediaInspectorView().track({click: true})}`,
-      useShadowDom: true,
-    });
+    super({useShadowDom: 'pure'});
     this.view = view;
     this.mediaThrottler = mediaThrottler;
 

package/front_end/panels/layer_viewer/LayerDetailsView.ts

@@ -152,7 +152,7 @@ export interface ViewInput {
 
 export type ViewOutput = undefined;
 
-export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTMLElement): void => {
+export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: DocumentFragment): void => {
   const {layer, snapshotSelection, compositingReasons, onScrollRectClick, onPaintProfilerRequested} = input;
 
   if (!layer) {
@@ -272,11 +272,11 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
         ${i18nString(UIStrings.paintProfiler)}
       </button>` : nothing}
     </div>`,
-      target);
+      target, {container: {attributes: {jslog: `${VisualLogging.pane('layers-details')}`}}});
   // clang-format on
 };
 
-export class LayerDetailsView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
+export class LayerDetailsView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget<ShadowRoot>>(
     UI.Widget.Widget) implements LayerView {
   private readonly layerViewHost: LayerViewHost;
   private layerSnapshotMap: Map<SDK.LayerTreeBase.Layer, SnapshotSelection>;
@@ -285,10 +285,7 @@ export class LayerDetailsView extends Common.ObjectWrapper.eventMixin<EventTypes
   private readonly view: typeof DEFAULT_VIEW;
 
   constructor(layerViewHost: LayerViewHost, view: typeof DEFAULT_VIEW = DEFAULT_VIEW) {
-    super({
-      jslog: `${VisualLogging.pane('layers-details')}`,
-      useShadowDom: true,
-    });
+    super({useShadowDom: 'pure'});
     this.view = view;
     this.registerRequiredCSS(layerDetailsViewStyles);
     this.layerViewHost = layerViewHost;

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -144,7 +144,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         }
         output.canvasElement = el as HTMLCanvasElement;
       })}></canvas>`,
-      target);
+      target, {container: {attributes: {jslog: `${VisualLogging.pane('layers-3d-view')}`}}});
   // clang-format onn
 };
 
@@ -182,7 +182,7 @@ export class Layers3DView extends Common.ObjectWrapper.eventMixin<EventTypes, ty
   #canvasElement!: HTMLCanvasElement;
 
   constructor(layerViewHost: LayerViewHost, view = DEFAULT_VIEW) {
-    super({jslog: `${VisualLogging.pane('layers-3d-view')}`, useShadowDom: true, classes: ['layers-3d-view']});
+    super();
     this.#view = view;
 
     this.layerViewHost = layerViewHost;

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -74,9 +74,9 @@ const renderStartView = (
       <form class="lighthouse-start-view">
         <header class="hbox">
           <div class="lighthouse-logo"></div>
-          <div class="lighthouse-title">
+          <h1 class="lighthouse-title">
             ${i18nString(UIStrings.generateLighthouseReport)}
-          </div>
+          </h1>
           <div class="lighthouse-start-button-container"></div>
         </header>
         <div

package/front_end/panels/mobile_throttling/NetworkThrottlingSelector.ts

@@ -15,7 +15,7 @@ import * as PanelsCommon from '../common/common.js';
 import {ThrottlingManager} from './ThrottlingManager.js';
 import type {NetworkThrottlingConditionsGroup} from './ThrottlingPresets.js';
 
-const {render, html, Directives, nothing} = Lit;
+const {render, html, Directives} = Lit;
 
 const UIStrings = {
   /**
@@ -70,7 +70,7 @@ interface ViewInput {
   onSelect: (conditions: SDK.NetworkManager.ThrottlingConditions) => void;
   onAddCustomConditions: () => void;
 }
-export type ViewFunction = (input: ViewInput, output: object, target: HTMLElement) => void;
+export type ViewFunction = (input: ViewInput, output: object, target: HTMLSelectElement) => void;
 
 export const DEFAULT_VIEW: ViewFunction = (input, output, target) => {
   // The title is usually an i18nLazyString except for custom values that are stored in the local storage in the form of a string.
@@ -110,12 +110,7 @@ export const DEFAULT_VIEW: ViewFunction = (input, output, target) => {
 
   render(
       // clang-format off
-    html`<select
-      ?disabled=${input.disabled}
-      aria-label=${input.title ?? nothing}
-      jslog=${VisualLogging.dropDown().track({change: true}).context(input.jslogContext)}
-      @change=${onSelect}>
-          ${input.throttlingGroups.map(
+    html`${input.throttlingGroups.map(
           group =>
           html`<optgroup
             label=${group.title}>
@@ -149,40 +144,52 @@ export const DEFAULT_VIEW: ViewFunction = (input, output, target) => {
             jslog=${VisualLogging.action('add').track({click: true})}>
               ${i18nString(UIStrings.add)}
           </option>
-        </optgroup>
-      </select>`,  // clang-format on
-      target);
+        </optgroup>`,  // clang-format on
+      target, {
+        container: {
+          listeners: {change: onSelect},
+          attributes: {
+            disabled: input.disabled,
+            'aria-label': input.title,
+            jslog: `${VisualLogging.dropDown(input.jslogContext).track({change: true})}`
+          }
+        }
+      });
 };
 
 export const enum Events {
-  CONDITIONS_CHANGED = 'conditionsChanged',
+  CONDITIONS_CHANGED = 'ConditionsChanged',
 }
 
 export interface EventTypes {
   [Events.CONDITIONS_CHANGED]: SDK.NetworkManager.ThrottlingConditions;
 }
 
-export class NetworkThrottlingSelect extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
+export class NetworkThrottlingSelect extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
+    UI.Widget.Widget) {
   #recommendedConditions: SDK.NetworkManager.Conditions|null = null;
-  readonly #element: HTMLElement;
   #jslogContext?: string;
   #currentConditions: SDK.NetworkManager.ThrottlingConditions|undefined;
-  readonly #title?: string;
+  #title?: string;
   readonly #view: ViewFunction;
   #variant: NetworkThrottlingSelect.Variant = NetworkThrottlingSelect.Variant.GLOBAL_CONDITIONS;
   #disabled = false;
 
   static createForGlobalConditions(element: HTMLElement, title: string): NetworkThrottlingSelect {
     ThrottlingManager.instance();  // Instantiate the throttling manager to connect network manager with the setting
-    const select = new NetworkThrottlingSelect(element, {
+    const selectElement = element.createChild('select');
+    const select = new NetworkThrottlingSelect(selectElement, {
       title,
       jslogContext: SDK.NetworkManager.activeNetworkThrottlingKeySetting().name,
       currentConditions: SDK.NetworkManager.MultitargetNetworkManager.instance().networkConditions()
     });
-    select.addEventListener(
-        Events.CONDITIONS_CHANGED,
-        ev => !('block' in ev.data) &&
-            SDK.NetworkManager.MultitargetNetworkManager.instance().setNetworkConditions(ev.data));
+    select.show(element, undefined, /* suppressOrphanWidgetError= */ true);
+    select.addEventListener(Events.CONDITIONS_CHANGED, event => {
+      const conditions = event.data;
+      if (!('block' in conditions)) {
+        SDK.NetworkManager.MultitargetNetworkManager.instance().setNetworkConditions(conditions);
+      }
+    });
     SDK.NetworkManager.MultitargetNetworkManager.instance().addEventListener(
         SDK.NetworkManager.MultitargetNetworkManager.Events.CONDITIONS_CHANGED, () => {
           select.currentConditions = SDK.NetworkManager.MultitargetNetworkManager.instance().networkConditions();
@@ -203,22 +210,21 @@ export class NetworkThrottlingSelect extends Common.ObjectWrapper.ObjectWrapper<
   }
 
   constructor(
-      element: HTMLElement, options: {
+      element?: HTMLElement, options: {
         title?: string,
         jslogContext?: string,
         currentConditions?: SDK.NetworkManager.Conditions,
         includeBlocking?: true,
       } = {},
       view = DEFAULT_VIEW) {
-    super();
-    SDK.NetworkManager.customUserNetworkConditionsSetting().addChangeListener(this.#performUpdate, this);
-    this.#element = element;
+    super(element);
+    SDK.NetworkManager.customUserNetworkConditionsSetting().addChangeListener(this.requestUpdate, this);
     this.#jslogContext = options.jslogContext;
     this.#currentConditions = options.currentConditions;
     this.#title = options.title;
     this.#view = view;
 
-    this.#performUpdate();
+    this.performUpdate();
   }
 
   get disabled(): boolean {
@@ -226,7 +232,7 @@ export class NetworkThrottlingSelect extends Common.ObjectWrapper.ObjectWrapper<
   }
   set disabled(disabled: boolean) {
     this.#disabled = disabled;
-    this.#performUpdate();
+    this.requestUpdate();
   }
 
   get recommendedConditions(): SDK.NetworkManager.Conditions|null {
@@ -234,7 +240,7 @@ export class NetworkThrottlingSelect extends Common.ObjectWrapper.ObjectWrapper<
   }
   set recommendedConditions(recommendedConditions: SDK.NetworkManager.Conditions|null) {
     this.#recommendedConditions = recommendedConditions;
-    this.#performUpdate();
+    this.requestUpdate();
   }
 
   get currentConditions(): SDK.NetworkManager.ThrottlingConditions|undefined {
@@ -242,7 +248,7 @@ export class NetworkThrottlingSelect extends Common.ObjectWrapper.ObjectWrapper<
   }
   set currentConditions(currentConditions: SDK.NetworkManager.ThrottlingConditions|undefined) {
     this.#currentConditions = currentConditions;
-    this.#performUpdate();
+    this.requestUpdate();
   }
 
   get jslogContext(): string|undefined {
@@ -250,7 +256,7 @@ export class NetworkThrottlingSelect extends Common.ObjectWrapper.ObjectWrapper<
   }
   set jslogContext(jslogContext: string|undefined) {
     this.#jslogContext = jslogContext;
-    this.#performUpdate();
+    this.requestUpdate();
   }
 
   get variant(): NetworkThrottlingSelect.Variant {
@@ -258,11 +264,19 @@ export class NetworkThrottlingSelect extends Common.ObjectWrapper.ObjectWrapper<
   }
   set variant(variant: NetworkThrottlingSelect.Variant) {
     this.#variant = variant;
-    this.#performUpdate();
+    this.requestUpdate();
+  }
+
+  get title(): string|undefined {
+    return this.#title;
+  }
+
+  set title(title: string|undefined) {
+    this.#title = title;
+    this.requestUpdate();
   }
 
-  // FIXME Should use requestUpdate once we merge this with the widget
-  #performUpdate(): void {
+  override performUpdate(): void {
     const customNetworkConditionsSetting = SDK.NetworkManager.customUserNetworkConditionsSetting();
     const customNetworkConditions = customNetworkConditionsSetting.get();
     const onAddCustomConditions = (): void => {
@@ -315,7 +329,7 @@ export class NetworkThrottlingSelect extends Common.ObjectWrapper.ObjectWrapper<
       throttlingGroups,
       customConditionsGroup,
     };
-    this.#view(viewInput, {}, this.#element);
+    this.#view(viewInput, {}, this.contentElement as HTMLSelectElement);
   }
 }
 export namespace NetworkThrottlingSelect {
@@ -324,36 +338,3 @@ export namespace NetworkThrottlingSelect {
     INDIVIDUAL_REQUEST_CONDITIONS = 'individual-request-conditions',
   }
 }
-
-export class NetworkThrottlingSelectorWidget extends UI.Widget.VBox {
-  #select: NetworkThrottlingSelect;
-  #conditionsChangedHandler?: ((conditions: SDK.NetworkManager.ThrottlingConditions) => void);
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
-    super(element, {useShadowDom: true});
-    this.#select = new NetworkThrottlingSelect(this.contentElement, {}, view);
-    this.#select.addEventListener(Events.CONDITIONS_CHANGED, ({data}) => this.#conditionsChangedHandler?.(data));
-  }
-
-  get disabled(): boolean {
-    return this.#select.disabled;
-  }
-  set disabled(disabled: boolean) {
-    this.#select.disabled = disabled;
-  }
-
-  set variant(variant: NetworkThrottlingSelect.Variant) {
-    this.#select.variant = variant;
-  }
-
-  set jslogContext(context: string) {
-    this.#select.jslogContext = context;
-  }
-
-  set currentConditions(currentConditions: SDK.NetworkManager.ThrottlingConditions|undefined) {
-    this.#select.currentConditions = currentConditions;
-  }
-
-  set onConditionsChanged(handler: (conditions: SDK.NetworkManager.ThrottlingConditions) => void) {
-    this.#conditionsChangedHandler = handler;
-  }
-}

package/front_end/panels/network/NetworkConfigView.ts

@@ -466,7 +466,7 @@ export const userAgentGroups: UserAgentGroup[] = [
       {
         title: 'Chrome \u2014 Android Mobile',
         value:
-            'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36',
+            'Mozilla/5.0 (Linux; Android 16; Pixel 10) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36',
         metadata: {
           brands: [
             {brand: 'Not A;Brand', version: '99'},
@@ -475,16 +475,16 @@ export const userAgentGroups: UserAgentGroup[] = [
           ],
           fullVersion: '%s',
           platform: 'Android',
-          platformVersion: '6.0',
+          platformVersion: '16',
           architecture: '',
-          model: 'Nexus 5',
+          model: 'Pixel 10',
           mobile: true,
         },
       },
       {
         title: 'Chrome \u2014 Android Mobile (high-end)',
         value:
-            'Mozilla/5.0 (Linux; Android 10; Pixel 4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36',
+            'Mozilla/5.0 (Linux; Android 16; Pixel 10 Pro XL) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Mobile Safari/537.36',
         metadata: {
           brands: [
             {brand: 'Not A;Brand', version: '99'},
@@ -493,16 +493,16 @@ export const userAgentGroups: UserAgentGroup[] = [
           ],
           fullVersion: '%s',
           platform: 'Android',
-          platformVersion: '10',
+          platformVersion: '16',
           architecture: '',
-          model: 'Pixel 4',
+          model: 'Pixel 10 Pro XL',
           mobile: true,
         },
       },
       {
         title: 'Chrome \u2014 Android Tablet',
         value:
-            'Mozilla/5.0 (Linux; Android 4.3; Nexus 7 Build/JSS15Q) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Safari/537.36',
+            'Mozilla/5.0 (Linux; Android 16; Pixel Tablet) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/%s Safari/537.36',
         metadata: {
           brands: [
             {brand: 'Not A;Brand', version: '99'},
@@ -511,22 +511,22 @@ export const userAgentGroups: UserAgentGroup[] = [
           ],
           fullVersion: '%s',
           platform: 'Android',
-          platformVersion: '4.3',
+          platformVersion: '16',
           architecture: '',
-          model: 'Nexus 7',
+          model: 'Pixel Tablet',
           mobile: true,
         },
       },
       {
         title: 'Chrome \u2014 iPhone',
         value:
-            'Mozilla/5.0 (iPhone; CPU iPhone OS 13_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/%s Mobile/15E148 Safari/604.1',
+            'Mozilla/5.0 (iPhone; CPU iPhone OS 26_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/%s Mobile/15E148 Safari/604.1',
         metadata: null,
       },
       {
         title: 'Chrome \u2014 iPad',
         value:
-            'Mozilla/5.0 (iPad; CPU OS 13_2 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/%s Mobile/15E148 Safari/604.1',
+            'Mozilla/5.0 (iPad; CPU OS 26_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/%s Mobile/15E148 Safari/604.1',
         metadata: null,
       },
       {

package/front_end/panels/network/RequestConditionsDrawer.ts

@@ -268,18 +268,20 @@ function renderItem(
       aria-details=url-pattern-${index}>
         ${constructorStringOrWildcardURL}
     </div>
-    <devtools-widget
+    <select
        class=conditions-selector
        title=${i18nString(UIStrings.requestConditionsLabel)}
+       @ConditionsChanged=${(e: CustomEvent<SDK.NetworkManager.ThrottlingConditions>) => {
+         onConditionsChanged(condition, e.detail);
+       }}
        ${widget(
-         MobileThrottling.NetworkThrottlingSelector.NetworkThrottlingSelectorWidget, {
+         MobileThrottling.NetworkThrottlingSelector.NetworkThrottlingSelect, {
            variant:
              MobileThrottling.NetworkThrottlingSelector.NetworkThrottlingSelect.Variant.INDIVIDUAL_REQUEST_CONDITIONS,
            jslogContext: 'request-conditions',
            disabled: !editable,
-           onConditionsChanged: conditions => onConditionsChanged(condition, conditions),
            currentConditions: condition.conditions,
-         })}></devtools-widget>
+         })}></select>
     <devtools-widget
       ?disabled=${!editable || !originalOrUpgradedURLPattern}
       ${widget(AffectedCountWidget, {condition, lookUpRequestCount})}></devtools-widget>`;

package/front_end/panels/network/RequestCookiesView.ts

@@ -150,7 +150,7 @@ export const DEFAULT_VIEW: ViewFunction = (input, _output, target) => {
       </div>
     </div>
   `,
-  target);
+  target, {container: {attributes: {jslog: `${VisualLogging.pane('cookies').track({resize: true})}`}}});
   // clang-format on
 };
 
@@ -168,7 +168,7 @@ export class RequestCookiesView extends UI.Widget.Widget {
   private readonly view: ViewFunction;
 
   constructor(request: SDK.NetworkRequest.NetworkRequest, view: ViewFunction = DEFAULT_VIEW) {
-    super({jslog: `${VisualLogging.pane('cookies').track({resize: true})}`});
+    super();
     this.request = request;
     this.showFilteredOutCookiesSetting = Common.Settings.Settings.instance().createSetting(
         'show-filtered-out-request-cookies', /* defaultValue */ false);

package/front_end/panels/network/RequestDeviceBoundSessionsView.ts

@@ -108,7 +108,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
                                                 nothing}
       </div>
     `,
-      target);
+      target, {container: {attributes: {jslog: `${VisualLogging.pane('device-bound-sessions-request')}`}}});
 };
 
 export class RequestDeviceBoundSessionsView extends UI.Widget.VBox {
@@ -116,7 +116,7 @@ export class RequestDeviceBoundSessionsView extends UI.Widget.VBox {
   #view: typeof DEFAULT_VIEW;
 
   constructor(request: SDK.NetworkRequest.NetworkRequest, view: typeof DEFAULT_VIEW = DEFAULT_VIEW) {
-    super({jslog: `${VisualLogging.pane('device-bound-sessions-request')}`});
+    super();
     this.#request = request;
     this.#view = view;
   }

package/front_end/panels/network/RequestHeadersView.ts

@@ -218,7 +218,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
         })}
       `,
       // clang-format on
-      target);
+      target, {container: {attributes: {jslog: `${VisualLogging.pane('headers').track({resize: true})}`}}});
 };
 
 export class RequestHeadersView extends UI.Widget.Widget {
@@ -239,7 +239,7 @@ export class RequestHeadersView extends UI.Widget.Widget {
   }
 
   constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
-    super({jslog: `${VisualLogging.pane('headers').track({resize: true})}`});
+    super();
     this.#view = view;
   }
 

package/front_end/panels/network/components/DirectSocketConnectionView.ts

@@ -114,7 +114,7 @@ export interface ViewInput {
   onCopyRow: () => void;
 }
 
-export type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+export type View = (input: ViewInput, output: undefined, target: HTMLElement|DocumentFragment) => void;
 
 export const DEFAULT_VIEW: View = (input, _output, target) => {
   function isCategoryOpen(name: string): boolean {
@@ -218,18 +218,17 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
     ${renderCategory(CATEGORY_NAME_GENERAL, i18nString(UIStrings.general), generalContent)}
     ${renderCategory(CATEGORY_NAME_OPTIONS, i18nString(UIStrings.options), optionsContent)}
     ${socketInfo.openInfo ? renderCategory(CATEGORY_NAME_OPEN_INFO, i18nString(UIStrings.openInfo), openInfoContent) : Lit.nothing}
-  `, target);
+  `, target, {container: {attributes: {jslog: `${VisualLogging.pane('connection-info').track({resize: true})}`}}});
   // clang-format on
 };
 
-export class DirectSocketConnectionView extends UI.Widget.Widget {
+export class DirectSocketConnectionView extends UI.Widget.Widget<ShadowRoot> {
   #request: Readonly<SDK.NetworkRequest.NetworkRequest>;
   #view: View;
 
   constructor(request: SDK.NetworkRequest.NetworkRequest, view: View = DEFAULT_VIEW) {
     super({
-      jslog: `${VisualLogging.pane('connection-info').track({resize: true})}`,
-      useShadowDom: true,
+      useShadowDom: 'pure',
     });
     this.#request = request;
     this.#view = view;

package/front_end/panels/performance_monitor/PerformanceMonitor.ts

@@ -75,8 +75,8 @@ interface PerformanceMonitorOutput {
   width: number;
 }
 
-type PerformanceMonitorView = (input: PerformanceMonitorInput, output: PerformanceMonitorOutput, target: HTMLElement) =>
-    void;
+type PerformanceMonitorView =
+    (input: PerformanceMonitorInput, output: PerformanceMonitorOutput, target: DocumentFragment) => void;
 
 const DEFAULT_VIEW: PerformanceMonitorView = (input, output, target) => {
   // clang-format off
@@ -102,11 +102,11 @@ const DEFAULT_VIEW: PerformanceMonitorView = (input, output, target) => {
       <div class="perfmon-chart-suspend-overlay fill">
         <div>${i18nString(UIStrings.paused)}</div>
       </div>` : ''}`,
-    target);
+    target, {container: {attributes: {jslog: `${VisualLogging.pane('performance.monitor').track({resize: true})}`}}});
   // clang-format on
 };
 
-export class PerformanceMonitorImpl extends UI.Widget.HBox implements
+export class PerformanceMonitorImpl extends UI.Widget.HBox<ShadowRoot> implements
     SDK.TargetManager.SDKModelObserver<SDK.PerformanceMetricsModel.PerformanceMetricsModel> {
   private view: PerformanceMonitorView;
   private chartInfos: ChartInfo[] = [];
@@ -127,10 +127,7 @@ export class PerformanceMonitorImpl extends UI.Widget.HBox implements
   private graphRenderingContext: CanvasRenderingContext2D|null = null;
 
   constructor(pollIntervalMs = 500, view = DEFAULT_VIEW) {
-    super({
-      jslog: `${VisualLogging.panel('performance.monitor').track({resize: true})}`,
-      useShadowDom: true,
-    });
+    super({useShadowDom: 'pure'});
     this.view = view;
     this.registerRequiredCSS(performanceMonitorStyles);
 
@@ -504,7 +501,7 @@ export class PerformanceMonitorImpl extends UI.Widget.HBox implements
 
   private createChartInfos(): ChartInfo[] {
     const themeSupport = ThemeSupport.ThemeSupport.instance();
-    const elementForStyles = this.contentElement;
+    const elementForStyles = this.contentElement.firstElementChild;
 
     const defaults: Partial<ChartInfo> = {};