chrome-devtools-frontend 1.0.1550444 → 1.0.1555174

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -47,6 +47,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import {html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
+import {AdoptedStyleSheetTreeElement} from './AdoptedStyleSheetTreeElement.js';
 import {getElementIssueDetails} from './ElementIssueUtils.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import {ElementsTreeElement, InitialChildrenLimit, isOpeningTag} from './ElementsTreeElement.js';
@@ -119,8 +120,8 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         ElementsTreeOutline.Events.SelectedNodeChanged, input.onSelectedNodeChanged, this);
     output.elementsTreeOutline.addEventListener(
         ElementsTreeOutline.Events.ElementsTreeUpdated, input.onElementsTreeUpdated, this);
-    output.elementsTreeOutline.addEventListener(UI.TreeOutline.Events.ElementExpanded, input.onElementCollapsed, this);
-    output.elementsTreeOutline.addEventListener(UI.TreeOutline.Events.ElementCollapsed, input.onElementExpanded, this);
+    output.elementsTreeOutline.addEventListener(UI.TreeOutline.Events.ElementExpanded, input.onElementExpanded, this);
+    output.elementsTreeOutline.addEventListener(UI.TreeOutline.Events.ElementCollapsed, input.onElementCollapsed, this);
     target.appendChild(output.elementsTreeOutline.element);
   }
   if (input.visibleWidth !== undefined) {
@@ -198,6 +199,8 @@ export class DOMTreeWidget extends UI.Widget.Widget {
            Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode | null, focus: boolean}>) => void = () => {};
   onElementsTreeUpdated: (event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode[]>) => void = () => {};
   onDocumentUpdated: (domModel: SDK.DOMModel.DOMModel) => void = () => {};
+  onElementExpanded: () => void = () => {};
+  onElementCollapsed: () => void = () => {};
 
   #visible = false;
   #visibleWidth?: number;
@@ -322,8 +325,14 @@ export class DOMTreeWidget extends UI.Widget.Widget {
             this.#clearHighlightedNode();
             this.onSelectedNodeChanged(event);
           },
-          onElementCollapsed: this.#clearHighlightedNode.bind(this),
-          onElementExpanded: this.#clearHighlightedNode.bind(this),
+          onElementCollapsed: () => {
+            this.#clearHighlightedNode();
+            this.onElementCollapsed();
+          },
+          onElementExpanded: () => {
+            this.#clearHighlightedNode();
+            this.onElementExpanded();
+          },
         },
         this.#viewOutput, this.contentElement);
   }
@@ -945,7 +954,10 @@ export class ElementsTreeOutline extends
     this.dispatchEventToListeners(ElementsTreeOutline.Events.ElementsTreeUpdated, nodes);
   }
 
-  findTreeElement(node: SDK.DOMModel.DOMNode): ElementsTreeElement|null {
+  findTreeElement(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet): ElementsTreeElement|null {
+    if (node instanceof SDK.DOMModel.AdoptedStyleSheet) {
+      return null;
+    }
     let treeElement = this.lookUpTreeElement(node);
     if (!treeElement && node.nodeType() === Node.TEXT_NODE) {
       // The text node might have been inlined if it was short, so try to find the parent element.
@@ -1518,6 +1530,7 @@ export class ElementsTreeOutline extends
     domModel.addEventListener(SDK.DOMModel.Events.ScrollableFlagUpdated, this.scrollableFlagUpdated, this);
     domModel.addEventListener(
         SDK.DOMModel.Events.AffectedByStartingStylesFlagUpdated, this.affectedByStartingStylesFlagUpdated, this);
+    domModel.addEventListener(SDK.DOMModel.Events.AdoptedStyleSheetsModified, this.adoptedStyleSheetsModified, this);
   }
 
   unwireFromDOMModel(domModel: SDK.DOMModel.DOMModel): void {
@@ -1534,6 +1547,7 @@ export class ElementsTreeOutline extends
     domModel.removeEventListener(SDK.DOMModel.Events.ScrollableFlagUpdated, this.scrollableFlagUpdated, this);
     domModel.removeEventListener(
         SDK.DOMModel.Events.AffectedByStartingStylesFlagUpdated, this.affectedByStartingStylesFlagUpdated, this);
+    domModel.removeEventListener(SDK.DOMModel.Events.AdoptedStyleSheetsModified, this.adoptedStyleSheetsModified, this);
     elementsTreeOutlineByDOMModel.delete(domModel);
   }
 
@@ -1612,6 +1626,12 @@ export class ElementsTreeOutline extends
     this.updateModifiedNodesSoon();
   }
 
+  private adoptedStyleSheetsModified(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode>): void {
+    const node = event.data;
+    this.addUpdateRecord(node).childrenModified();
+    this.updateModifiedNodesSoon();
+  }
+
   private updateModifiedNodesSoon(): void {
     if (!this.updateRecords.size) {
       return;
@@ -1711,7 +1731,11 @@ export class ElementsTreeOutline extends
     this.#topLayerContainerByParent.set(parent, container);
   }
 
-  private createElementTreeElement(node: SDK.DOMModel.DOMNode, isClosingTag?: boolean): ElementsTreeElement {
+  private createElementTreeElement(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet, isClosingTag?: boolean):
+      UI.TreeOutline.TreeElement {
+    if (node instanceof SDK.DOMModel.AdoptedStyleSheet) {
+      return new AdoptedStyleSheetTreeElement(node);
+    }
     const treeElement = new ElementsTreeElement(node, isClosingTag);
     treeElement.setExpandable(!isClosingTag && this.hasVisibleChildren(node));
     if (node.nodeType() === Node.ELEMENT_NODE && node.parentNode && node.parentNode.nodeType() === Node.DOCUMENT_NODE &&
@@ -1743,8 +1767,8 @@ export class ElementsTreeOutline extends
     return treeElement.childAt(index) as ElementsTreeElement;
   }
 
-  private visibleChildren(node: SDK.DOMModel.DOMNode): SDK.DOMModel.DOMNode[] {
-    let visibleChildren = ElementsTreeElement.visibleShadowRoots(node);
+  private visibleChildren(node: SDK.DOMModel.DOMNode): Array<SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet> {
+    let visibleChildren = [...node.adoptedStyleSheetsForNode, ...ElementsTreeElement.visibleShadowRoots(node)];
 
     const contentDocument = node.contentDocument();
     if (contentDocument) {
@@ -1870,8 +1894,8 @@ export class ElementsTreeOutline extends
   }
 
   insertChildElement(
-      treeElement: ElementsTreeElement|TopLayerContainer, child: SDK.DOMModel.DOMNode, index: number,
-      isClosingTag?: boolean): ElementsTreeElement {
+      treeElement: ElementsTreeElement|TopLayerContainer, child: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet,
+      index: number, isClosingTag?: boolean): UI.TreeOutline.TreeElement {
     const newElement = this.createElementTreeElement(child, isClosingTag);
     treeElement.insertChild(newElement, index);
     if (child instanceof SDK.DOMModel.DOMDocument) {
@@ -1903,11 +1927,12 @@ export class ElementsTreeOutline extends
 
     const node = treeElement.node();
     const visibleChildren = this.visibleChildren(node);
-    const visibleChildrenSet = new Set<SDK.DOMModel.DOMNode>(visibleChildren);
+    const visibleChildrenSet = new Set<SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet>(visibleChildren);
 
     // Remove any tree elements that no longer have this node as their parent and save
     // all existing elements that could be reused. This also removes closing tag element.
-    const existingTreeElements = new Map<SDK.DOMModel.DOMNode, UI.TreeOutline.TreeElement&ElementsTreeElement>();
+    const existingTreeElements =
+        new Map<SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet, UI.TreeOutline.TreeElement&ElementsTreeElement>();
     for (let i = treeElement.childCount() - 1; i >= 0; --i) {
       const existingTreeElement = treeElement.childAt(i);
       if (!(existingTreeElement instanceof ElementsTreeElement)) {
@@ -1926,6 +1951,7 @@ export class ElementsTreeOutline extends
       treeElement.removeChildAtIndex(i);
     }
 
+    // Insert child nodes.
     for (let i = 0; i < visibleChildren.length && i < treeElement.expandedChildrenLimit(); ++i) {
       const child = visibleChildren[i];
       const existingTreeElement = existingTreeElements.get(child) || this.findTreeElement(child);
@@ -1935,7 +1961,7 @@ export class ElementsTreeOutline extends
       } else {
         // No existing element found, insert a new element.
         const newElement = this.insertChildElement(treeElement, child, i);
-        if (this.updateRecordForHighlight(node) && treeElement.expanded) {
+        if (this.updateRecordForHighlight(node) && treeElement.expanded && newElement instanceof ElementsTreeElement) {
           ElementsTreeElement.animateOnDOMUpdate(newElement);
         }
         // If a node was inserted in the middle of existing list dynamically we might need to increase the limit.

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -398,7 +398,7 @@ export class VariableRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
     if (fromFallback) {
       renderedFallback?.cssControls.get('color')?.forEach(
           innerSwatch => innerSwatch.addEventListener(InlineEditor.ColorSwatch.ColorChangedEvent.eventName, ev => {
-            colorSwatch.setColor(ev.data.color);
+            colorSwatch.color = ev.data.color;
           }));
     }
 
@@ -516,7 +516,7 @@ export class AttributeRenderer extends rendererBase(SDK.CSSPropertyParserMatcher
     if (fromFallback) {
       renderedFallback?.cssControls.get('color')?.forEach(
           innerSwatch => innerSwatch.addEventListener(InlineEditor.ColorSwatch.ColorChangedEvent.eventName, ev => {
-            colorSwatch.setColor(ev.data.color);
+            colorSwatch.color = ev.data.color;
           }));
     }
 
@@ -691,19 +691,19 @@ export class ColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.Co
         context.ast.text(match.node.getChild('Callee')).match(/^(hsla?|hwba?)/)) {
       const [angle] = cssControls.get('angle') ?? [];
       if (angle instanceof InlineEditor.CSSAngle.CSSAngle) {
-        angle.updateProperty(swatch.getColor()?.asString() ?? '');
+        angle.updateProperty(swatch.color?.asString() ?? '');
         angle.addEventListener(InlineEditor.InlineEditorUtils.ValueChangedEvent.eventName, ev => {
           const hue = Common.Color.parseHueNumeric(ev.data.value);
-          const color = swatch.getColor();
+          const color = swatch.color;
           if (!hue || !color) {
             return;
           }
           if (color.is(Common.Color.Format.HSL) || color.is(Common.Color.Format.HSLA)) {
-            swatch.setColor(new Common.Color.HSL(hue, color.s, color.l, color.alpha));
+            swatch.color = new Common.Color.HSL(hue, color.s, color.l, color.alpha);
           } else if (color.is(Common.Color.Format.HWB) || color.is(Common.Color.Format.HWBA)) {
-            swatch.setColor(new Common.Color.HWB(hue, color.w, color.b, color.alpha));
+            swatch.color = new Common.Color.HWB(hue, color.w, color.b, color.alpha);
           }
-          angle.updateProperty(swatch.getColor()?.asString() ?? '');
+          angle.updateProperty(swatch.color?.asString() ?? '');
         });
       }
     }
@@ -716,9 +716,9 @@ export class ColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.Co
     const tooltip = editable ? i18nString(UIStrings.openColorPickerS, {PH1: shiftClickMessage}) : '';
 
     const swatch = new InlineEditor.ColorSwatch.ColorSwatch(tooltip);
-    swatch.setReadonly(!editable);
+    swatch.readonly = !editable;
     if (color) {
-      swatch.renderColor(color);
+      swatch.color = color;
     }
 
     if (this.#treeElement?.editable()) {
@@ -742,7 +742,7 @@ export class ColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.Co
           new ColorSwatchPopoverIcon(treeElement, treeElement.parentPane().swatchPopoverHelper(), swatch);
       swatchIcon.addEventListener(ColorSwatchPopoverIconEvents.COLOR_CHANGED, ev => {
         valueChild.textContent = ev.data.getAuthoredText() ?? ev.data.asString();
-        swatch.setColor(ev.data);
+        swatch.color = ev.data;
       });
       if (treeElement.property.name === 'color') {
         void this.#addColorContrastInfo(swatchIcon);
@@ -819,14 +819,15 @@ export class LightDarkColorRenderer extends rendererBase(SDK.CSSPropertyParserMa
 
     const activeColorSwatches = (activeColor === match.light ? lightControls : darkControls).get('color');
     activeColorSwatches?.forEach(
-        swatch => swatch.addEventListener(
-            InlineEditor.ColorSwatch.ColorChangedEvent.eventName, ev => colorSwatch.setColor(ev.data.color)));
+        swatch => swatch.addEventListener(InlineEditor.ColorSwatch.ColorChangedEvent.eventName, ev => {
+          colorSwatch.color = ev.data.color;
+        }));
     const inactiveColor = (activeColor === match.light) ? dark : light;
     const colorText = context.matchedResult.getComputedTextRange(activeColor[0], activeColor[activeColor.length - 1]);
     const color = colorText && Common.Color.parse(colorText);
     inactiveColor.classList.add('inactive-value');
     if (color) {
-      colorSwatch.renderColor(color);
+      colorSwatch.color = color;
     }
   }
 
@@ -948,7 +949,7 @@ export class ColorMixRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
           if (results) {
             const color = Common.Color.parse(results[0]);
             if (color) {
-              swatch.setColor(color.as(Common.Color.Format.HEXA));
+              swatch.color = color.as(Common.Color.Format.HEXA);
               return true;
             }
           }

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -2023,7 +2023,7 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
 
     function colorSwatchRenderer(color: Common.Color.Color): Element {
       const swatch = new InlineEditor.ColorSwatch.ColorSwatch();
-      swatch.renderColor(color);
+      swatch.color = color;
       swatch.style.pointerEvents = 'none';
       return swatch;
     }

package/front_end/panels/emulation/MediaQueryInspector.ts

@@ -1,7 +1,6 @@
 // Copyright 2014 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -9,7 +8,9 @@ import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
+import {Directives, html, nothing, render} from '../../third_party/lit/lit.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import type {LitTemplate} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import mediaQueryInspectorStyles from './mediaQueryInspector.css.js';
@@ -23,40 +24,165 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/emulation/MediaQueryInspector.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+const {classMap} = Directives;
+
+export interface ViewInput {
+  zoomFactor: number;
+  markers: Map<Section, MediaQueryMarker[]>;
+  onMediaQueryClicked: (model: MediaQueryUIModel) => void;
+  onContextMenu: (event: Event, locations: SDK.CSSModel.CSSLocation[]) => void;
+}
+
+export interface MediaQueryMarker {
+  active: boolean;
+  model: MediaQueryUIModel;
+  locations: SDK.CSSModel.CSSLocation[];
+}
+
+export const DEFAULT_VIEW = (input: ViewInput, _output: object, target: HTMLElement): void => {
+  const createBarClassMap = (marker: MediaQueryMarker): Record<string, boolean> => ({
+    'media-inspector-bar': true,
+    'media-inspector-marker-inactive': !marker.active,
+  });
+  // clang-format off
+  render(html`
+    <style>${mediaQueryInspectorStyles}</style>
+    <div class='media-inspector-view'>
+    ${input.markers.entries().map(([section, markers]) => html`
+      <div class='media-inspector-marker-container'>
+        ${markers.map(marker => html`
+          <div
+              class=${classMap(createBarClassMap(marker))}
+              @click=${() => input.onMediaQueryClicked(marker.model)}
+              @contextmenu=${(event: Event) => input.onContextMenu(event, marker.locations)}
+          >
+            ${section === Section.MAX
+              ? renderMaxSection(input.zoomFactor, marker.model)
+              : section === Section.MIN_MAX
+                ? renderMinMaxSection(input.zoomFactor, marker.model)
+                : renderMinSection(input.zoomFactor, marker.model)}
+          </div>
+        `)}
+      </div>
+    `).toArray()}
+    </div>`, target);
+  // clang-format on
+};
+
+function renderMaxSection(zoomFactor: number, model: MediaQueryUIModel): LitTemplate {
+  // clang-format off
+  return html`
+    <div class='media-inspector-marker-spacer'></div>
+    <div
+        class='media-inspector-marker media-inspector-marker-max-width'
+        style=${'width: ' + model.maxWidthValue(zoomFactor) + 'px'}
+        title=${model.mediaText()}
+    >
+      ${renderLabel(model.maxWidthExpression(), false, false)}
+      ${renderLabel(model.maxWidthExpression(), true, true)}
+    </div>
+    <div class='media-inspector-marker-spacer'></div>
+  `;
+  // clang-format on
+}
+
+function renderMinMaxSection(zoomFactor: number, model: MediaQueryUIModel): LitTemplate {
+  const width = (model.maxWidthValue(zoomFactor) - model.minWidthValue(zoomFactor)) * 0.5;
+  // clang-format off
+  return html`
+    <div class='media-inspector-marker-spacer'></div>
+    <div
+        class='media-inspector-marker media-inspector-marker-min-max-width'
+        style=${'width: ' + width + 'px'}
+        title=${model.mediaText()}
+    >
+      ${renderLabel(model.maxWidthExpression(), true, false)}
+      ${renderLabel(model.minWidthExpression(), false, true)}
+    </div>
+    <div class='media-inspector-marker-spacer' style=${'flex: 0 0 ' + model.minWidthValue(zoomFactor) + 'px'}></div>
+    <div
+        class='media-inspector-marker media-inspector-marker-min-max-width'
+        style=${'width: ' + width + 'px'}
+        title=${model.mediaText()}
+    >
+      ${renderLabel(model.minWidthExpression(), true, false)}
+      ${renderLabel(model.maxWidthExpression(), false, true)}
+    </div>
+    <div class='media-inspector-marker-spacer'></div>
+  `;
+  // clang-format on
+}
+
+function renderMinSection(zoomFactor: number, model: MediaQueryUIModel): LitTemplate {
+  // clang-format off
+  return html`
+    <div
+        class='media-inspector-marker media-inspector-marker-min-width media-inspector-marker-min-width-left'
+        title=${model.mediaText()}
+    >${renderLabel(model.minWidthExpression(), false, false)}</div>
+    <div class='media-inspector-marker-spacer' style=${'flex: 0 0 ' + model.minWidthValue(zoomFactor) + 'px'}></div>
+    <div
+        class='media-inspector-marker media-inspector-marker-min-width media-inspector-marker-min-width-right'
+        title=${model.mediaText()}
+    >${renderLabel(model.minWidthExpression(), true, true)}</div>
+  `;
+  // clang-format on
+}
+
+function renderLabel(
+    expression: SDK.CSSMedia.CSSMediaQueryExpression|null, atLeft: boolean, leftAlign: boolean): LitTemplate {
+  if (!expression) {
+    return nothing;
+  }
+
+  const containerClassMap = {
+    'media-inspector-marker-label-container': true,
+    'media-inspector-marker-label-container-left': atLeft,
+    'media-inspector-marker-label-container-right': !atLeft
+  };
+  const labelClassMap = {
+    'media-inspector-marker-label': true,
+    'media-inspector-label-left': leftAlign,
+    'media-inspector-label-right': !leftAlign
+  };
+
+  // clang-format off
+  return html`
+    <div class=${classMap(containerClassMap)}>
+      <span class=${classMap(labelClassMap)}>${expression.value()}${expression.unit()}</span>
+    </div>
+  `;
+  // clang-format on
+}
+
 export class MediaQueryInspector extends UI.Widget.Widget implements
     SDK.TargetManager.SDKModelObserver<SDK.CSSModel.CSSModel> {
+  private readonly view: typeof DEFAULT_VIEW;
   private readonly mediaThrottler: Common.Throttler.Throttler;
   private readonly getWidthCallback: () => number;
   private readonly setWidthCallback: (arg0: number) => void;
   private scale: number;
-  elementsToMediaQueryModel: WeakMap<Element, MediaQueryUIModel>;
-  elementsToCSSLocations: WeakMap<Element, SDK.CSSModel.CSSLocation[]>;
   private cssModel?: SDK.CSSModel.CSSModel;
   private cachedQueryModels?: MediaQueryUIModel[];
 
   constructor(
       getWidthCallback: () => number, setWidthCallback: (arg0: number) => void,
-      mediaThrottler: Common.Throttler.Throttler) {
+      mediaThrottler: Common.Throttler.Throttler, view = DEFAULT_VIEW) {
     super({
       jslog: `${VisualLogging.mediaInspectorView().track({click: true})}`,
       useShadowDom: true,
     });
-    this.registerRequiredCSS(mediaQueryInspectorStyles);
-    this.contentElement.classList.add('media-inspector-view');
-    this.contentElement.addEventListener('click', this.onMediaQueryClicked.bind(this), false);
-    this.contentElement.addEventListener('contextmenu', this.onContextMenu.bind(this), false);
+    this.view = view;
     this.mediaThrottler = mediaThrottler;
 
     this.getWidthCallback = getWidthCallback;
     this.setWidthCallback = setWidthCallback;
     this.scale = 1;
 
-    this.elementsToMediaQueryModel = new WeakMap();
-    this.elementsToCSSLocations = new WeakMap();
-
     SDK.TargetManager.TargetManager.instance().observeModels(SDK.CSSModel.CSSModel, this);
     UI.ZoomManager.ZoomManager.instance().addEventListener(
-        UI.ZoomManager.Events.ZOOM_CHANGED, this.renderMediaQueries.bind(this), this);
+        UI.ZoomManager.Events.ZOOM_CHANGED, this.requestUpdate.bind(this), this);
   }
 
   modelAdded(cssModel: SDK.CSSModel.CSSModel): void {
@@ -88,19 +214,10 @@ export class MediaQueryInspector extends UI.Widget.Widget implements
       return;
     }
     this.scale = scale;
-    this.renderMediaQueries();
+    this.performUpdate();
   }
 
-  private onMediaQueryClicked(event: Event): void {
-    const mediaQueryMarker = (event.target as Node).enclosingNodeOrSelfWithClass('media-inspector-bar');
-    if (!mediaQueryMarker) {
-      return;
-    }
-
-    const model = this.elementsToMediaQueryModel.get(mediaQueryMarker);
-    if (!model) {
-      return;
-    }
+  private onMediaQueryClicked(model: MediaQueryUIModel): void {
     const modelMaxWidth = model.maxWidthExpression();
     const modelMinWidth = model.minWidthExpression();
 
@@ -120,17 +237,11 @@ export class MediaQueryInspector extends UI.Widget.Widget implements
     }
   }
 
-  private onContextMenu(event: Event): void {
+  private onContextMenu(event: Event, locations: SDK.CSSModel.CSSLocation[]): void {
     if (!this.cssModel?.isEnabled()) {
       return;
     }
 
-    const mediaQueryMarker = (event.target as Node).enclosingNodeOrSelfWithClass('media-inspector-bar');
-    if (!mediaQueryMarker) {
-      return;
-    }
-
-    const locations = this.elementsToCSSLocations.get(mediaQueryMarker) || [];
     const uiLocations = new Map<string, Workspace.UISourceCode.UILocation>();
     for (let i = 0; i < locations.length; ++i) {
       const uiLocation =
@@ -214,24 +325,20 @@ export class MediaQueryInspector extends UI.Widget.Widget implements
       return;
     }
     this.cachedQueryModels = queryModels;
-    this.renderMediaQueries();
+    this.requestUpdate();
 
     function compareModels(model1: MediaQueryUIModel, model2: MediaQueryUIModel): number {
       return model1.compareTo(model2);
     }
   }
 
-  private renderMediaQueries(): void {
-    if (!this.cachedQueryModels || !this.isShowing()) {
-      return;
+  private buildMediaQueryMarkers(): MediaQueryMarker[] {
+    if (!this.cachedQueryModels) {
+      return [];
     }
 
-    const markers = [];
-    let lastMarker: {
-      active: boolean,
-      model: MediaQueryUIModel,
-      locations: SDK.CSSModel.CSSLocation[],
-    }|null = null;
+    const markers: MediaQueryMarker[] = [];
+    let lastMarker: MediaQueryMarker|null = null;
     for (const model of this.cachedQueryModels) {
       if (lastMarker?.model.dimensionsEqual(model)) {
         lastMarker.active = lastMarker.active || model.active();
@@ -239,7 +346,7 @@ export class MediaQueryInspector extends UI.Widget.Widget implements
         lastMarker = {
           active: model.active(),
           model,
-          locations: ([] as SDK.CSSModel.CSSLocation[]),
+          locations: [],
         };
         markers.push(lastMarker);
       }
@@ -249,23 +356,7 @@ export class MediaQueryInspector extends UI.Widget.Widget implements
       }
     }
 
-    this.contentElement.removeChildren();
-
-    let container: HTMLElement|null = null;
-    for (let i = 0; i < markers.length; ++i) {
-      if (!i || markers[i].model.section() !== markers[i - 1].model.section()) {
-        container = this.contentElement.createChild('div', 'media-inspector-marker-container');
-      }
-      const marker = markers[i];
-      const bar = this.createElementFromMediaQueryModel(marker.model);
-      this.elementsToMediaQueryModel.set(bar, marker.model);
-      this.elementsToCSSLocations.set(bar, marker.locations);
-      bar.classList.toggle('media-inspector-marker-inactive', !marker.active);
-      if (!container) {
-        throw new Error('Could not find container to render media queries into.');
-      }
-      container.appendChild(bar);
-    }
+    return markers;
   }
 
   private zoomFactor(): number {
@@ -275,75 +366,20 @@ export class MediaQueryInspector extends UI.Widget.Widget implements
   override wasShown(): void {
     super.wasShown();
     this.scheduleMediaQueriesUpdate();
+    this.performUpdate();  // Trigger a manual update eagerly, DeviceModeView needs to measure our height.
   }
 
-  private createElementFromMediaQueryModel(model: MediaQueryUIModel): Element {
-    const zoomFactor = this.zoomFactor();
-    const minWidthExpression = model.minWidthExpression();
-    const maxWidthExpression = model.maxWidthExpression();
-    const minWidthValue = minWidthExpression ? (minWidthExpression.computedLength() || 0) / zoomFactor : 0;
-    const maxWidthValue = maxWidthExpression ? (maxWidthExpression.computedLength() || 0) / zoomFactor : 0;
-    const result = document.createElement('div');
-    result.classList.add('media-inspector-bar');
-
-    if (model.section() === Section.MAX) {
-      result.createChild('div', 'media-inspector-marker-spacer');
-      const markerElement = result.createChild('div', 'media-inspector-marker media-inspector-marker-max-width');
-      markerElement.style.width = maxWidthValue + 'px';
-      UI.Tooltip.Tooltip.install(markerElement, model.mediaText());
-      appendLabel(markerElement, model.maxWidthExpression(), false, false);
-      appendLabel(markerElement, model.maxWidthExpression(), true, true);
-      result.createChild('div', 'media-inspector-marker-spacer');
-    }
-
-    if (model.section() === Section.MIN_MAX) {
-      result.createChild('div', 'media-inspector-marker-spacer');
-      const leftElement = result.createChild('div', 'media-inspector-marker media-inspector-marker-min-max-width');
-      leftElement.style.width = (maxWidthValue - minWidthValue) * 0.5 + 'px';
-      UI.Tooltip.Tooltip.install(leftElement, model.mediaText());
-      appendLabel(leftElement, model.maxWidthExpression(), true, false);
-      appendLabel(leftElement, model.minWidthExpression(), false, true);
-      result.createChild('div', 'media-inspector-marker-spacer').style.flex = '0 0 ' + minWidthValue + 'px';
-      const rightElement = result.createChild('div', 'media-inspector-marker media-inspector-marker-min-max-width');
-      rightElement.style.width = (maxWidthValue - minWidthValue) * 0.5 + 'px';
-      UI.Tooltip.Tooltip.install(rightElement, model.mediaText());
-      appendLabel(rightElement, model.minWidthExpression(), true, false);
-      appendLabel(rightElement, model.maxWidthExpression(), false, true);
-      result.createChild('div', 'media-inspector-marker-spacer');
-    }
-
-    if (model.section() === Section.MIN) {
-      const leftElement = result.createChild(
-          'div', 'media-inspector-marker media-inspector-marker-min-width media-inspector-marker-min-width-left');
-      UI.Tooltip.Tooltip.install(leftElement, model.mediaText());
-      appendLabel(leftElement, model.minWidthExpression(), false, false);
-      result.createChild('div', 'media-inspector-marker-spacer').style.flex = '0 0 ' + minWidthValue + 'px';
-      const rightElement = result.createChild(
-          'div', 'media-inspector-marker media-inspector-marker-min-width media-inspector-marker-min-width-right');
-      UI.Tooltip.Tooltip.install(rightElement, model.mediaText());
-      appendLabel(rightElement, model.minWidthExpression(), true, true);
-    }
-
-    function appendLabel(
-        marker: Element, expression: SDK.CSSMedia.CSSMediaQueryExpression|null, atLeft: boolean,
-        leftAlign: boolean): void {
-      if (!expression) {
-        return;
-      }
-      marker
-          .createChild(
-              'div',
-              'media-inspector-marker-label-container ' +
-                  (atLeft ? 'media-inspector-marker-label-container-left' :
-                            'media-inspector-marker-label-container-right'))
-          .createChild(
-              'span',
-              'media-inspector-marker-label ' +
-                  (leftAlign ? 'media-inspector-label-left' : 'media-inspector-label-right'))
-          .textContent = expression.value() + expression.unit();
-    }
-
-    return result;
+  override performUpdate(): void {
+    const markers = Map.groupBy(this.buildMediaQueryMarkers(), marker => marker.model.section());
+
+    this.view(
+        {
+          zoomFactor: this.zoomFactor(),
+          markers,
+          onMediaQueryClicked: this.onMediaQueryClicked.bind(this),
+          onContextMenu: this.onContextMenu.bind(this),
+        },
+        {}, this.contentElement);
   }
 }
 
@@ -502,6 +538,16 @@ export class MediaQueryUIModel {
     return this.#maxWidthExpression;
   }
 
+  minWidthValue(zoomFactor: number): number {
+    const minWidthExpression = this.minWidthExpression();
+    return minWidthExpression ? (minWidthExpression.computedLength() || 0) / zoomFactor : 0;
+  }
+
+  maxWidthValue(zoomFactor: number): number {
+    const maxWidthExpression = this.maxWidthExpression();
+    return maxWidthExpression ? (maxWidthExpression.computedLength() || 0) / zoomFactor : 0;
+  }
+
   active(): boolean {
     return this.#active;
   }