chrome-devtools-frontend 1.0.1555430 → 1.0.1556696

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -1165,71 +1165,38 @@ export class AppManifestTreeElement extends ApplicationPanelTreeElement {
   generateChildren(): void {
     const staticSections = this.view.getStaticSections();
     for (const section of staticSections) {
-      const sectionElement = section.getTitleElement();
-      const childTitle = section.title();
-      const sectionFieldElement = section.getFieldElement();
-      const child = new ManifestChildTreeElement(
-          this.resourcesPanel, sectionElement, childTitle, sectionFieldElement, section.jslogContext || '');
-      this.appendChild(child);
-    }
-  }
-
-  onInvoke(): void {
-    this.view.getManifestElement().scrollIntoView();
-    UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.onInvokeAlert, {PH1: this.listItemElement.title}));
-  }
+      const childTitle = section.title;
+      const child = new ApplicationPanelTreeElement(this.resourcesPanel, childTitle, false, section.jslogContext || '');
+      child.onselect = (selectedByUser?: boolean): boolean => {
+        if (selectedByUser) {
+          this.showView(this.view);
+          this.view.scrollToSection(childTitle);
+        }
+        return true;
+      };
 
-  showManifestView(): void {
-    this.showView(this.view);
-  }
-}
+      const icon = createIcon('document');
+      child.setLeadingIcons([icon]);
 
-export class ManifestChildTreeElement extends ApplicationPanelTreeElement {
-  #sectionElement: Element;
-  #sectionFieldElement: HTMLElement;
-  constructor(
-      storagePanel: ResourcesPanel, element: Element, childTitle: string, fieldElement: HTMLElement,
-      jslogContext: string) {
-    super(storagePanel, childTitle, false, jslogContext);
-    const icon = createIcon('document');
-    this.setLeadingIcons([icon]);
-    this.#sectionElement = element;
-    this.#sectionFieldElement = fieldElement;
-    self.onInvokeElement(this.listItemElement, this.onInvoke.bind(this));
-    this.listItemElement.addEventListener('keydown', this.onInvokeElementKeydown.bind(this));
-    UI.ARIAUtils.setLabel(
-        this.listItemElement, i18nString(UIStrings.beforeInvokeAlert, {PH1: this.listItemElement.title}));
-  }
+      child.listItemElement.addEventListener('keydown', (event: Event) => {
+        if ((event as KeyboardEvent).key !== 'Tab' || (event as KeyboardEvent).shiftKey) {
+          return;
+        }
 
-  override get itemURL(): Platform.DevToolsPath.UrlString {
-    return 'manifest://' + this.title as Platform.DevToolsPath.UrlString;
+        if (this.view.focusOnSection(childTitle)) {
+          event.consume(true);
+        }
+      });
+      UI.ARIAUtils.setLabel(
+          child.listItemElement, i18nString(UIStrings.beforeInvokeAlert, {PH1: child.listItemElement.title}));
+      this.appendChild(child);
+    }
   }
 
   onInvoke(): void {
-    (this.parent as AppManifestTreeElement)?.showManifestView();
-    this.#sectionElement.scrollIntoView();
+    this.view.getManifestElement().scrollIntoView();
     UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.onInvokeAlert, {PH1: this.listItemElement.title}));
   }
-  // direct focus to the corresponding element
-  onInvokeElementKeydown(event: KeyboardEvent): void {
-    if (event.key !== 'Tab' || event.shiftKey) {
-      return;
-    }
-    const checkBoxElement = this.#sectionFieldElement.querySelector('.mask-checkbox');
-    let focusableElement: HTMLElement|null = this.#sectionFieldElement.querySelector('[tabindex="0"]');
-    if (checkBoxElement?.shadowRoot) {
-      focusableElement = checkBoxElement.shadowRoot.querySelector('input') || null;
-    } else if (!focusableElement) {
-      // special case for protocol handler section since it is a custom Element and has different structure than the others
-      focusableElement = this.#sectionFieldElement.querySelector('devtools-protocol-handlers-view')
-                             ?.shadowRoot?.querySelector('[tabindex="0"]') ||
-          null;
-    }
-    if (focusableElement) {
-      focusableElement?.focus();
-      event.consume(true);
-    }
-  }
 }
 
 export class ClearStorageTreeElement extends ApplicationPanelTreeElement {

package/front_end/panels/application/OpenedWindowDetailsView.ts

@@ -153,6 +153,7 @@ export class OpenedWindowDetailsView extends UI.Widget.VBox {
     this.isWindowClosed = isWindowClosed;
 
     this.contentElement.classList.add('frame-details-container');
+    // TODO(crbug.com/1156978): Replace UI.ReportView.ReportView with ReportView.ts web component.
     this.reportView = new UI.ReportView.ReportView(this.buildTitle());
 
     this.reportView.show(this.contentElement);
@@ -220,6 +221,7 @@ export class WorkerDetailsView extends UI.Widget.VBox {
     this.targetInfo = targetInfo;
 
     this.contentElement.classList.add('frame-details-container');
+    // TODO(crbug.com/1156978): Replace UI.ReportView.ReportView with ReportView.ts web component.
     this.reportView =
         new UI.ReportView.ReportView(this.targetInfo.title || this.targetInfo.url || i18nString(UIStrings.worker));
 

package/front_end/panels/application/ServiceWorkersView.ts

@@ -202,6 +202,7 @@ export class ServiceWorkersView extends UI.Widget.VBox implements
     });
     this.registerRequiredCSS(serviceWorkersViewStyles);
 
+    // TODO(crbug.com/1156978): Replace UI.ReportView.ReportView with ReportView.ts web component.
     this.currentWorkersView = new UI.ReportView.ReportView(i18n.i18n.lockedString('Service workers'));
     this.currentWorkersView.setBodyScrollable(false);
     this.contentElement.classList.add('service-worker-list');
@@ -220,6 +221,7 @@ export class ServiceWorkersView extends UI.Widget.VBox implements
 
     const othersDiv = this.contentElement.createChild('div', 'service-workers-other-origin');
     othersDiv.setAttribute('jslog', `${VisualLogging.section('other-origin')}`);
+    // TODO(crbug.com/1156978): Replace UI.ReportView.ReportView with ReportView.ts web component.
     const othersView = new UI.ReportView.ReportView();
     othersView.setHeaderVisible(false);
     othersView.show(othersDiv);

package/front_end/panels/application/StorageView.ts

@@ -181,6 +181,7 @@ export class StorageView extends UI.Widget.VBox {
       [Protocol.Storage.StorageType.Service_workers, 'rgb(255, 167, 36)'],  // orange
     ]);
 
+    // TODO(crbug.com/1156978): Replace UI.ReportView.ReportView with ReportView.ts web component.
     this.reportView = new UI.ReportView.ReportView(i18nString(UIStrings.storageTitle));
     this.reportView.registerRequiredCSS(storageViewStyles);
 

package/front_end/panels/application/appManifestView.css

@@ -39,3 +39,51 @@ select {
 .inline-button {
   vertical-align: sub;
 }
+
+devtools-report .report-row {
+  margin: var(--sys-size-3) 0 var(--sys-size-3) var(--sys-size-9);
+  grid-column: 1 / 3;
+
+  > devtools-checkbox:first-child {
+    margin-left: calc(var(--sys-size-4) * -1);
+  }
+
+  > devtools-icon:first-child {
+    /* We have inline icons that would otherwise be mis-aligned */
+    margin-inline-start: 0;
+  }
+}
+
+devtools-report .report-section {
+  display: grid;
+  grid-column: 1 / 3;
+  grid-template-columns: subgrid;
+  padding-bottom: var(--sys-size-5);
+  border-bottom: 1px solid var(--sys-color-divider);
+  margin-bottom: var(--sys-size-5);
+}
+
+.image-wrapper,
+.image-wrapper img {
+  max-width: 200px;
+  max-height: 200px;
+  display: block;
+  object-fit: contain;
+}
+
+.image-wrapper {
+  display: inline-block;
+  height: fit-content;
+  margin-right: 8px;
+}
+
+.show-mask img {
+  /* The safe zone is a centrally positioned circle, with radius 2/5
+  * (40%) of the minimum of the icon's width and height.
+  * https://w3c.github.io/manifest/#icon-masks */
+  clip-path: circle(40% at 50% 50%);
+}
+
+.show-mask .image-wrapper {
+  background: var(--image-file-checker);
+}

package/front_end/panels/application/components/ProtocolHandlersView.ts

@@ -144,7 +144,7 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
     ${renderStatusMessage(input.protocolHandler, input.manifestLink)}
     <div class="protocol-handlers-row">
       ${i18nTemplate(UIStrings.needHelpReadOur, {PH1: html`
-        <x-link href=${PROTOCOL_DOCUMENT_URL} tabindex=0 class="devtools-link" jslog=${
+        <x-link href=${PROTOCOL_DOCUMENT_URL} tabindex=0 class="devtools-link" autofocus jslog=${
             VisualLogging.link('learn-more').track({click: true, keydown: 'Enter|Space'})}>
           ${i18nString(UIStrings.protocolHandlerRegistrations)}
         </x-link>`})}
@@ -173,7 +173,7 @@ export class ProtocolHandlersView extends UI.Widget.Widget {
   #view: View;
 
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
-    super(element, {useShadowDom: false});
+    super(element, {useShadowDom: false, classes: ['vbox']});
     this.#view = view;
   }
 

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -2000,7 +2000,7 @@ export class ElementsTreeOutline extends
       this.insertChildElement(treeElement, node, treeElement.childCount(), true);
     }
 
-    if (node instanceof SDK.DOMModel.DOMDocument) {
+    if (node instanceof SDK.DOMModel.DOMDocument && !this.isXMLMimeType) {
       let topLayerContainer = this.#topLayerContainerByDocument.get(node);
       if (!topLayerContainer) {
         topLayerContainer = new TopLayerContainer(this, node);

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

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import './LinearMemoryValueInterpreter.js';
 import './LinearMemoryViewer.js';
 
 import * as Common from '../../../core/common/common.js';
@@ -20,6 +19,7 @@ import {
   Navigation,
   type PageNavigationEvent,
 } from './LinearMemoryNavigator.js';
+import {LinearMemoryValueInterpreter} from './LinearMemoryValueInterpreter.js';
 import type {ByteSelectedEvent, ResizeEvent} from './LinearMemoryViewer.js';
 import type {HighlightInfo} from './LinearMemoryViewerUtils.js';
 import {
@@ -186,10 +186,8 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: Record<string, unknown>,
     ${
       input.hideValueInspector ? nothing : html`
     <div class="value-interpreter">
-      <devtools-linear-memory-inspector-interpreter
-        .data=${
-          {
-            value: input.memory
+      <devtools-widget .widgetConfig=${widgetConfig(LinearMemoryValueInterpreter, {
+            buffer: input.memory
                        .slice(
                            input.address - input.memoryOffset,
                            input.address + VALUE_INTEPRETER_MAX_NUM_BYTES,
@@ -203,9 +201,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: Record<string, unknown>,
             onJumpToAddressClicked: input.onJumpToAddress,
             onValueTypeToggled: input.onValueTypeToggled,
             onEndiannessChanged: input.onEndiannessChanged,
-  }}
-        >
-      </devtools-linear-memory-inspector-interpreter>
+      })}></devtools-widget>
     </div>`}
     `,
          target);

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

@@ -1,7 +1,6 @@
 // Copyright 2020 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-lit-render-outside-of-view */
 
 import '../../../ui/kit/kit.js';
 
@@ -35,42 +34,149 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const {render, html} = Lit;
 const {widgetConfig} = UI.Widget;
 
-export interface LinearMemoryValueInterpreterData {
-  value: ArrayBuffer;
-  valueTypes: Set<ValueType>;
+export interface ViewInput {
   endianness: Endianness;
-  valueTypeModes?: Map<ValueType, ValueTypeMode>;
+  buffer: ArrayBuffer;
+  valueTypes: Set<ValueType>;
+  valueTypeModes: Map<ValueType, ValueTypeMode>;
   memoryLength: number;
+  showSettings: boolean;
   onValueTypeModeChange: (type: ValueType, mode: ValueTypeMode) => void;
   onJumpToAddressClicked: (address: number) => void;
   onEndiannessChanged: (endianness: Endianness) => void;
   onValueTypeToggled: (type: ValueType, checked: boolean) => void;
+  onSettingsToggle: () => void;
 }
 
-export class LinearMemoryValueInterpreter extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #onValueTypeModeChange: (type: ValueType, mode: ValueTypeMode) => void = () => {};
-  #onJumpToAddressClicked: (address: number) => void = () => {};
-  #onEndiannessChanged: (endianness: Endianness) => void = () => {};
-  #onValueTypeToggled: (type: ValueType, checked: boolean) => void = () => {};
+function renderEndiannessSetting(
+    onEndiannessChanged: (endianness: Endianness) => void, currentEndiannes: Endianness): Lit.TemplateResult {
+  // Disabled until https://crbug.com/1079231 is fixed.
+  // clang-format off
+    return html`
+    <label data-endianness-setting="true" title=${i18nString(UIStrings.changeEndianness)}>
+      <select
+        jslog=${VisualLogging.dropDown('linear-memory-inspector.endianess').track({change: true})}
+        style="border: none;"
+        data-endianness="true" @change=${(e: Event) => onEndiannessChanged((e.target as HTMLSelectElement).value as Endianness)}>
+        ${[Endianness.LITTLE, Endianness.BIG].map(endianness => {
+            return html`<option value=${endianness} .selected=${currentEndiannes === endianness}
+            jslog=${VisualLogging.item(Platform.StringUtilities.toKebabCase(endianness)).track({click: true})}>${
+                i18n.i18n.lockedString(endianness)}</option>`;
+        })}
+      </select>
+    </label>
+    `;
+  // clang-format on
+}
+
+export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
+  // Disabled until https://crbug.com/1079231 is fixed.
+  // clang-format off
+  render(html`
+    <style>${UI.inspectorCommonStyles}</style>
+    <style>${linearMemoryValueInterpreterStyles}</style>
+    <div class="value-interpreter">
+      <div class="settings-toolbar">
+        ${renderEndiannessSetting(input.onEndiannessChanged, input.endianness)}
+        <devtools-button data-settings="true" class="toolbar-button ${input.showSettings ? '' : 'disabled'}"
+            title=${i18nString(UIStrings.toggleValueTypeSettings)} @click=${input.onSettingsToggle}
+            jslog=${VisualLogging.toggleSubpane('linear-memory-inspector.toggle-value-settings').track({ click: true })}
+            .iconName=${'gear'}
+            .toggledIconName=${'gear-filled'}
+            .toggleType=${Buttons.Button.ToggleType.PRIMARY}
+            .variant=${Buttons.Button.Variant.ICON_TOGGLE}
+        ></devtools-button>
+      </div>
+      <span class="divider"></span>
+      <div>
+        ${input.showSettings ?
+      html`
+            <devtools-widget .widgetConfig=${widgetConfig(ValueInterpreterSettings, {
+              valueTypes: input.valueTypes, onToggle: input.onValueTypeToggled
+            })}>
+            </devtools-widget>` :
+      html`
+            <devtools-widget .widgetConfig=${widgetConfig(ValueInterpreterDisplay, {
+              buffer: input.buffer,
+              valueTypes: input.valueTypes,
+              endianness: input.endianness,
+              valueTypeModes: input.valueTypeModes,
+              memoryLength: input.memoryLength,
+              onValueTypeModeChange: input.onValueTypeModeChange,
+              onJumpToAddressClicked: input.onJumpToAddressClicked,
+            })}>
+            </devtools-widget>`}
+      </div>
+    </div>
+  `,
+    target,
+  );
+  // clang-format on
+};
+
+export type View = typeof DEFAULT_VIEW;
+
+export class LinearMemoryValueInterpreter extends UI.Widget.Widget {
+  readonly #view: View;
   #endianness = Endianness.LITTLE;
   #buffer = new ArrayBuffer(0);
   #valueTypes = new Set<ValueType>();
   #valueTypeModeConfig = new Map<ValueType, ValueTypeMode>();
   #memoryLength = 0;
   #showSettings = false;
+  #onValueTypeModeChange: (type: ValueType, mode: ValueTypeMode) => void = () => {};
+  #onJumpToAddressClicked: (address: number) => void = () => {};
+  #onEndiannessChanged: (endianness: Endianness) => void = () => {};
+  #onValueTypeToggled: (type: ValueType, checked: boolean) => void = () => {};
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
+  }
+
+  set buffer(value: ArrayBuffer) {
+    this.#buffer = value;
+    this.requestUpdate();
+  }
 
-  set data(data: LinearMemoryValueInterpreterData) {
-    this.#endianness = data.endianness;
-    this.#buffer = data.value;
-    this.#valueTypes = data.valueTypes;
-    this.#valueTypeModeConfig = data.valueTypeModes || new Map();
-    this.#memoryLength = data.memoryLength;
-    this.#onValueTypeModeChange = data.onValueTypeModeChange;
-    this.#onJumpToAddressClicked = data.onJumpToAddressClicked;
-    this.#onEndiannessChanged = data.onEndiannessChanged;
-    this.#onValueTypeToggled = data.onValueTypeToggled;
-    this.#render();
+  get buffer(): ArrayBuffer {
+    return this.#buffer;
+  }
+
+  set valueTypes(value: Set<ValueType>) {
+    this.#valueTypes = value;
+    this.requestUpdate();
+  }
+
+  get valueTypes(): Set<ValueType> {
+    return this.#valueTypes;
+  }
+
+  set valueTypeModes(value: Map<ValueType, ValueTypeMode>) {
+    this.#valueTypeModeConfig = value;
+    this.requestUpdate();
+  }
+
+  get valueTypeModes(): Map<ValueType, ValueTypeMode> {
+    return this.#valueTypeModeConfig;
+  }
+
+  set endianness(value: Endianness) {
+    this.#endianness = value;
+    this.requestUpdate();
+  }
+
+  get endianness(): Endianness {
+    return this.#endianness;
+  }
+
+  set memoryLength(value: number) {
+    this.#memoryLength = value;
+    this.requestUpdate();
+  }
+
+  get memoryLength(): number {
+    return this.#memoryLength;
   }
 
   get onValueTypeModeChange(): (type: ValueType, mode: ValueTypeMode) => void {
@@ -79,7 +185,7 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
 
   set onValueTypeModeChange(value: (type: ValueType, mode: ValueTypeMode) => void) {
     this.#onValueTypeModeChange = value;
-    this.#render();
+    this.requestUpdate();
   }
 
   get onJumpToAddressClicked(): (address: number) => void {
@@ -88,7 +194,7 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
 
   set onJumpToAddressClicked(value: (address: number) => void) {
     this.#onJumpToAddressClicked = value;
-    this.#render();
+    this.requestUpdate();
   }
 
   get onEndiannessChanged(): (endianness: Endianness) => void {
@@ -97,7 +203,7 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
 
   set onEndiannessChanged(value: (endianness: Endianness) => void) {
     this.#onEndiannessChanged = value;
-    this.#render();
+    this.performUpdate();
   }
 
   get onValueTypeToggled(): (type: ValueType, checked: boolean) => void {
@@ -106,83 +212,28 @@ export class LinearMemoryValueInterpreter extends HTMLElement {
 
   set onValueTypeToggled(value: (type: ValueType, checked: boolean) => void) {
     this.#onValueTypeToggled = value;
-    this.#render();
-  }
-
-  #render(): void {
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    render(html`
-      <style>${UI.inspectorCommonStyles}</style>
-      <style>${linearMemoryValueInterpreterStyles}</style>
-      <div class="value-interpreter">
-        <div class="settings-toolbar">
-          ${this.#renderEndiannessSetting()}
-          <devtools-button data-settings="true" class="toolbar-button ${this.#showSettings ? '' : 'disabled'}"
-              title=${i18nString(UIStrings.toggleValueTypeSettings)} @click=${this.#onSettingsToggle}
-              jslog=${VisualLogging.toggleSubpane('linear-memory-inspector.toggle-value-settings').track({click: true})}
-              .iconName=${'gear'}
-              .toggledIconName=${'gear-filled'}
-              .toggleType=${Buttons.Button.ToggleType.PRIMARY}
-              .variant=${Buttons.Button.Variant.ICON_TOGGLE}
-          ></devtools-button>
-        </div>
-        <span class="divider"></span>
-        <div>
-          ${this.#showSettings ?
-            html`
-              <devtools-widget .widgetConfig=${widgetConfig(ValueInterpreterSettings, {
-                valueTypes: this.#valueTypes, onToggle: this.#onValueTypeToggled })}>
-              </devtools-widget>` :
-            html`
-              <devtools-widget .widgetConfig=${widgetConfig(ValueInterpreterDisplay, {
-                  buffer: this.#buffer,
-                  valueTypes: this.#valueTypes,
-                  endianness: this.#endianness,
-                  valueTypeModes: this.#valueTypeModeConfig,
-                  memoryLength: this.#memoryLength,
-                  onValueTypeModeChange: this.#onValueTypeModeChange,
-                  onJumpToAddressClicked: this.#onJumpToAddressClicked,
-                })}>
-              </devtools-widget>`}
-        </div>
-      </div>
-    `,
-      this.#shadow, { host: this },
-    );
-    // clang-format on
+    this.performUpdate();
   }
 
-  #renderEndiannessSetting(): Lit.TemplateResult {
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    return html`
-    <label data-endianness-setting="true" title=${i18nString(UIStrings.changeEndianness)}>
-      <select
-        jslog=${VisualLogging.dropDown('linear-memory-inspector.endianess').track({change: true})}
-        style="border: none;"
-        data-endianness="true" @change=${(e: Event) => this.#onEndiannessChanged((e.target as HTMLSelectElement).value as Endianness)}>
-        ${[Endianness.LITTLE, Endianness.BIG].map(endianness => {
-            return html`<option value=${endianness} .selected=${this.#endianness === endianness}
-            jslog=${VisualLogging.item(Platform.StringUtilities.toKebabCase(endianness)).track({click: true})}>${
-                i18n.i18n.lockedString(endianness)}</option>`;
-        })}
-      </select>
-    </label>
-    `;
-    // clang-format on
+  override performUpdate(): void {
+    const viewInput: ViewInput = {
+      endianness: this.#endianness,
+      buffer: this.#buffer,
+      valueTypes: this.#valueTypes,
+      valueTypeModes: this.#valueTypeModeConfig,
+      memoryLength: this.#memoryLength,
+      showSettings: this.#showSettings,
+      onValueTypeModeChange: this.#onValueTypeModeChange,
+      onJumpToAddressClicked: this.#onJumpToAddressClicked,
+      onEndiannessChanged: this.#onEndiannessChanged,
+      onValueTypeToggled: this.#onValueTypeToggled,
+      onSettingsToggle: this.#onSettingsToggle.bind(this),
+    };
+    this.#view(viewInput, undefined, this.contentElement);
   }
 
   #onSettingsToggle(): void {
     this.#showSettings = !this.#showSettings;
-    this.#render();
-  }
-}
-
-customElements.define('devtools-linear-memory-inspector-interpreter', LinearMemoryValueInterpreter);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-linear-memory-inspector-interpreter': LinearMemoryValueInterpreter;
+    this.requestUpdate();
   }
 }

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

@@ -47,7 +47,7 @@ const BYTE_GROUP_SIZE = 4;
 export class LinearMemoryViewer extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
 
-  readonly #resizeObserver = new ResizeObserver(() => this.#resize());
+  readonly #resizeObserver = new ResizeObserver(() => requestAnimationFrame(this.#resize.bind(this)));
   #isObservingResize = false;
 
   #memory = new Uint8Array();

package/front_end/panels/linear_memory_inspector/components/linearMemoryValueInterpreter.css

@@ -4,44 +4,46 @@
  * found in the LICENSE file.
  */
 
-:host {
-  flex: auto;
-  display: flex;
-}
+@scope to (devtools-widget > *) {
+  :scope {
+    flex: auto;
+    display: flex;
+  }
 
-.value-interpreter {
-  border: 1px solid var(--sys-color-divider);
-  background-color: var(--sys-color-cdt-base-container);
-  overflow: hidden;
-  width: 400px;
-}
+  .value-interpreter {
+    border: 1px solid var(--sys-color-divider);
+    background-color: var(--sys-color-cdt-base-container);
+    overflow: hidden;
+    width: 400px;
+  }
 
-.settings-toolbar {
-  min-height: 26px;
-  display: flex;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  padding-left: var(--sys-size-3);
-  padding-right: var(--sys-size-3);
-  align-items: center;
-}
+  .settings-toolbar {
+    min-height: 26px;
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    padding-left: var(--sys-size-3);
+    padding-right: var(--sys-size-3);
+    align-items: center;
+  }
 
-.settings-toolbar-button {
-  padding: 0;
-  width: 20px;
-  height: 20px;
-  border: none;
-  outline: none;
-  background-color: transparent;
-}
+  .settings-toolbar-button {
+    padding: 0;
+    width: 20px;
+    height: 20px;
+    border: none;
+    outline: none;
+    background-color: transparent;
+  }
 
-.settings-toolbar-button.active devtools-icon {
-  color: var(--icon-toggled);
-}
+  .settings-toolbar-button.active devtools-icon {
+    color: var(--icon-toggled);
+  }
 
-.divider {
-  display: block;
-  height: 1px;
-  margin-bottom: 12px;
-  background-color: var(--sys-color-divider);
+  .divider {
+    display: block;
+    height: 1px;
+    margin-bottom: 12px;
+    background-color: var(--sys-color-divider);
+  }
 }