chrome-devtools-frontend 1.0.1618066 → 1.0.1621064

package/front_end/panels/elements/ElementsPanel.ts

@@ -544,16 +544,15 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     }
 
     if (selectedNode) {
-      const activeNode = ElementsComponents.Helper.legacyNodeToElementsComponentsNode(selectedNode);
-      const crumbs = [activeNode];
+      const crumbs = [selectedNode];
 
       for (let current: (SDK.DOMModel.DOMNode|null) = selectedNode.parentNode; current; current = current.parentNode) {
-        crumbs.push(ElementsComponents.Helper.legacyNodeToElementsComponentsNode(current));
+        crumbs.push(current);
       }
 
       this.breadcrumbs.data = {
         crumbs,
-        selectedNode: ElementsComponents.Helper.legacyNodeToElementsComponentsNode(selectedNode),
+        selectedNode,
       };
 
       if (this.accessibilityTreeView) {
@@ -938,16 +937,14 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
      */
 
     // Get the current set of active crumbs
-    const activeNode = ElementsComponents.Helper.legacyNodeToElementsComponentsNode(selectedNode);
-    const existingCrumbs = [activeNode];
+    const existingCrumbs = [selectedNode];
     for (let current: (SDK.DOMModel.DOMNode|null) = selectedNode.parentNode; current; current = current.parentNode) {
-      existingCrumbs.push(ElementsComponents.Helper.legacyNodeToElementsComponentsNode(current));
+      existingCrumbs.push(current);
     }
 
     /* Get the change nodes from the event & convert them to breadcrumb nodes */
-    const newNodes = nodes.map(ElementsComponents.Helper.legacyNodeToElementsComponentsNode);
-    const nodesThatHaveChangedMap = new Map<number, ElementsComponents.Helper.DOMNode>();
-    newNodes.forEach(crumb => nodesThatHaveChangedMap.set(crumb.id, crumb));
+    const nodesThatHaveChangedMap = new Map<Protocol.DOM.NodeId, SDK.DOMModel.DOMNode>();
+    nodes.forEach(crumb => nodesThatHaveChangedMap.set(crumb.id, crumb));
 
     /* Loop over our existing crumbs, and if any have an ID that matches an ID from the new nodes
      * that we have, use the new node, rather than the one we had, because it's changed.
@@ -959,12 +956,12 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     this.breadcrumbs.data = {
       crumbs: newSetOfCrumbs,
-      selectedNode: activeNode,
+      selectedNode,
     };
   }
 
   private crumbNodeSelected(event: ElementsComponents.ElementsBreadcrumbs.NodeSelectedEvent): void {
-    this.selectDOMNode(event.legacyDomNode, true);
+    this.selectDOMNode(event.node, true);
   }
 
   private leaveUserAgentShadowDOM(node: SDK.DOMModel.DOMNode): SDK.DOMModel.DOMNode {

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -1181,7 +1181,7 @@ export class StylePropertiesSection {
 
     const containerElement = new ElementsComponents.QueryContainer.QueryContainer();
     containerElement.data = {
-      container: ElementsComponents.Helper.legacyNodeToElementsComponentsNode(container.containerNode),
+      container: container.containerNode,
       queryName: containerQuery.name,
       onContainerLinkClick: event => {
         event.preventDefault();

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

@@ -7,7 +7,7 @@ import '../../../ui/kit/kit.js';
 import '../../../ui/components/node_text/node_text.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import type * as SDK from '../../../core/sdk/sdk.js';
+import * as SDK from '../../../core/sdk/sdk.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as Lit from '../../../ui/lit/lit.js';
@@ -15,7 +15,6 @@ import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import elementsBreadcrumbsStyles from './elementsBreadcrumbs.css.js';
 import {crumbsToRender, type UserScrollPosition} from './ElementsBreadcrumbsUtils.js';
-import type {DOMNode} from './Helper.js';
 
 const {html} = Lit;
 
@@ -39,25 +38,25 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class NodeSelectedEvent extends Event {
   static readonly eventName = 'breadcrumbsnodeselected';
-  legacyDomNode: SDK.DOMModel.DOMNode;
+  node: SDK.DOMModel.DOMNode;
 
-  constructor(node: DOMNode) {
+  constructor(node: SDK.DOMModel.DOMNode) {
     super(NodeSelectedEvent.eventName, {});
-    this.legacyDomNode = node.legacyDomNode;
+    this.node = node;
   }
 }
 
 export interface ElementsBreadcrumbsData {
-  selectedNode: DOMNode|null;
-  crumbs: DOMNode[];
+  selectedNode: SDK.DOMModel.DOMNode|null;
+  crumbs: SDK.DOMModel.DOMNode[];
 }
 
 export class ElementsBreadcrumbs extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #resizeObserver = new ResizeObserver(() => this.#checkForOverflowOnResize());
 
-  #crumbsData: readonly DOMNode[] = [];
-  #selectedDOMNode: Readonly<DOMNode>|null = null;
+  #crumbsData: readonly SDK.DOMModel.DOMNode[] = [];
+  #selectedDOMNode: SDK.DOMModel.DOMNode|null = null;
   #overflowing = false;
   #userScrollPosition: UserScrollPosition = 'start';
   #isObservingResize = false;
@@ -75,7 +74,7 @@ export class ElementsBreadcrumbs extends HTMLElement {
     this.#resizeObserver.disconnect();
   }
 
-  #onCrumbClick(node: DOMNode): (event: Event) => void {
+  #onCrumbClick(node: SDK.DOMModel.DOMNode): (event: Event) => void {
     return (event: Event): void => {
       event.preventDefault();
       this.dispatchEvent(new NodeSelectedEvent(node));
@@ -121,20 +120,20 @@ export class ElementsBreadcrumbs extends HTMLElement {
     void this.#updateScrollState(crumbWindow);
   }
 
-  #onCrumbMouseMove(node: DOMNode): () => void {
-    return (): void => node.highlightNode();
+  #onCrumbMouseMove(node: SDK.DOMModel.DOMNode): () => void {
+    return (): void => node.highlight();
   }
 
-  #onCrumbMouseLeave(node: DOMNode): () => void {
-    return (): void => node.clearHighlight();
+  #onCrumbMouseLeave(): void {
+    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
   }
 
-  #onCrumbFocus(node: DOMNode): () => void {
-    return (): void => node.highlightNode();
+  #onCrumbFocus(node: SDK.DOMModel.DOMNode): () => void {
+    return (): void => node.highlight();
   }
 
-  #onCrumbBlur(node: DOMNode): () => void {
-    return (): void => node.clearHighlight();
+  #onCrumbBlur(): void {
+    SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
   }
 
   #engageResizeObserver(): void {
@@ -306,9 +305,9 @@ export class ElementsBreadcrumbs extends HTMLElement {
                     jslog=${VisualLogging.item().track({click:true, resize:true})}
                     @click=${this.#onCrumbClick(crumb.node)}
                     @mousemove=${this.#onCrumbMouseMove(crumb.node)}
-                    @mouseleave=${this.#onCrumbMouseLeave(crumb.node)}
+                    @mouseleave=${this.#onCrumbMouseLeave}
                     @focus=${this.#onCrumbFocus(crumb.node)}
-                    @blur=${this.#onCrumbBlur(crumb.node)}
+                    @blur=${this.#onCrumbBlur}
                   >
                     <devtools-node-text data-node-title=${crumb.title.main} .data=${{
                       nodeTitle: crumb.title.main,

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

@@ -3,8 +3,7 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../core/i18n/i18n.js';
-
-import type {DOMNode} from './Helper.js';
+import type * as SDK from '../../../core/sdk/sdk.js';
 
 const UIStrings = {
   /**
@@ -21,8 +20,7 @@ export type UserScrollPosition = 'start'|'middle'|'end';
 export interface Crumb {
   title: CrumbTitle;
   selected: boolean;
-  node: DOMNode;
-  originalNode: unknown;
+  node: SDK.DOMModel.DOMNode;
 }
 
 export interface CrumbTitle {
@@ -30,25 +28,25 @@ export interface CrumbTitle {
   extras: {id?: string, classes?: string[]};
 }
 
-export const crumbsToRender = (crumbs: readonly DOMNode[], selectedNode: Readonly<DOMNode>|null): Crumb[] => {
-  if (!selectedNode) {
-    return [];
-  }
+export const crumbsToRender =
+    (crumbs: readonly SDK.DOMModel.DOMNode[], selectedNode: SDK.DOMModel.DOMNode|null): Crumb[] => {
+      if (!selectedNode) {
+        return [];
+      }
 
-  return crumbs
-      .filter(crumb => {
-        return crumb.nodeType !== Node.DOCUMENT_NODE;
-      })
-      .map(crumb => {
-        return {
-          title: determineElementTitle(crumb),
-          selected: crumb.id === selectedNode.id,
-          node: crumb,
-          originalNode: crumb.legacyDomNode,
-        };
-      })
-      .reverse();
-};
+      return crumbs
+          .filter(crumb => {
+            return crumb.nodeType() !== Node.DOCUMENT_NODE;
+          })
+          .map(crumb => {
+            return {
+              title: determineElementTitle(crumb),
+              selected: crumb.id === selectedNode.id,
+              node: crumb,
+            };
+          })
+          .reverse();
+    };
 
 const makeCrumbTitle = (main: string, extras = {}): CrumbTitle => {
   return {
@@ -57,13 +55,15 @@ const makeCrumbTitle = (main: string, extras = {}): CrumbTitle => {
   };
 };
 
-export const determineElementTitle = (domNode: DOMNode): CrumbTitle => {
-  switch (domNode.nodeType) {
+export const determineElementTitle = (domNode: SDK.DOMModel.DOMNode): CrumbTitle => {
+  const nodeType = domNode.nodeType();
+  switch (nodeType) {
     case Node.ELEMENT_NODE: {
-      if (domNode.pseudoType) {
-        return makeCrumbTitle('::' + domNode.pseudoType);
+      const pseudoType = domNode.pseudoType();
+      if (pseudoType) {
+        return makeCrumbTitle('::' + pseudoType);
       }
-      const crumbTitle = makeCrumbTitle(domNode.nodeNameNicelyCased);
+      const crumbTitle = makeCrumbTitle(domNode.nodeNameInCorrectCase());
 
       const id = domNode.getAttribute('id');
       if (id) {
@@ -86,8 +86,8 @@ export const determineElementTitle = (domNode: DOMNode): CrumbTitle => {
     case Node.DOCUMENT_TYPE_NODE:
       return makeCrumbTitle('<!doctype>');
     case Node.DOCUMENT_FRAGMENT_NODE:
-      return makeCrumbTitle(domNode.shadowRootType ? '#shadow-root' : domNode.nodeNameNicelyCased);
+      return makeCrumbTitle(domNode.shadowRootType() ? '#shadow-root' : domNode.nodeNameInCorrectCase());
     default:
-      return makeCrumbTitle(domNode.nodeNameNicelyCased);
+      return makeCrumbTitle(domNode.nodeNameInCorrectCase());
   }
 };

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/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/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/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> = {};