chrome-devtools-frontend 1.0.1555430 → 1.0.1558690

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/CookieItemsView.ts

@@ -184,6 +184,7 @@ export class CookieItemsView extends UI.Widget.VBox {
     this.#toolbar.show(this.element);
 
     this.cookiesTable = new CookieTable.CookiesTable.CookiesTable(
+        undefined,
         /* renderInline */ false, this.saveCookie.bind(this), this.refreshItems.bind(this),
         this.handleCookieSelected.bind(this), this.deleteCookie.bind(this));
 

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/SharedStorageTreeElement.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import type * as Platform from '../../core/platform/platform.js';
+import {createIcon} from '../../ui/kit/kit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
@@ -22,6 +23,8 @@ export class SharedStorageTreeElement extends ApplicationPanelTreeElement {
     const treeElement = new SharedStorageTreeElement(resourcesPanel, sharedStorage);
     treeElement.view = await SharedStorageItemsView.createView(sharedStorage);
     treeElement.view.element.setAttribute('jslog', `${VisualLogging.pane('shared-storage-data')}`);
+    const sharedStorageIcon = createIcon('database');
+    treeElement.setLeadingIcons([sharedStorageIcon]);
     return treeElement;
   }
 

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

@@ -13,7 +13,7 @@
   flex-grow: 0;
 }
 
-.manifest-container {
+:host {
   overflow: auto;
 }
 
@@ -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/console/ConsoleViewMessage.ts

@@ -982,10 +982,11 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       const renderResult = await UI.UIUtils.Renderer.render(node);
       if (renderResult) {
         this.selectableChildren.push(renderResult);
-        const resizeObserver = new ResizeObserver(() => {
+        // FIXME: this should not be needed once ConsoleViewMessage is rendering
+        // declaratively and the tree outline auto-resizes itself.
+        renderResult.element.addEventListener('dimensionschanged', () => {
           this.messageResized({data: renderResult.element});
         });
-        resizeObserver.observe(renderResult.element);
         result.appendChild(renderResult.element);
       } else {
         result.appendChild(this.formatParameterAsObject(remoteObject, false));
@@ -1185,7 +1186,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   }
 
   matchesFilterText(filter: string): boolean {
-    const text = this.contentElement().deepTextContent();
+    const text = this.contentElement().deepTextContent() + this.message.messageText;
     return text.toLowerCase().includes(filter.toLowerCase());
   }
 

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -44,6 +44,7 @@ import * as Badges from '../../models/badges/badges.js';
 import type * as Elements from '../../models/elements/elements.js';
 import type * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as Workspace from '../../models/workspace/workspace.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import type {DirectiveResult} from '../../third_party/lit/lib/directive.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
@@ -275,6 +276,10 @@ const UIStrings = {
    */
   startAChat: 'Start a chat',
   /**
+   * @description Label of an adorner next to the html node in the Elements panel.
+   */
+  viewSourceCode: 'View source code',
+  /**
    * @description Context menu item in Elements panel to assess visibility of an element via AI.
    */
   assessVisibility: 'Assess visibility',
@@ -386,6 +391,7 @@ export interface ViewInput {
   showTopLayerAdorner: boolean;
   isSubgrid: boolean;
 
+  showViewSourceAdorner: boolean;
   adorners?: Set<Adorners.Adorner.Adorner>;
   nodeInfo?: DocumentFragment;
   topLayerIndex: number;
@@ -399,6 +405,7 @@ export interface ViewInput {
   onMediaAdornerClick: (e: Event) => void;
   onPopoverAdornerClick: (e: Event) => void;
   onTopLayerAdornerClick: (e: Event) => void;
+  onViewSourceAdornerClick: () => void;
 }
 
 export interface ViewOutput {
@@ -429,6 +436,8 @@ function adornerRef(input: ViewInput): DirectiveResult<typeof Lit.Directives.Ref
 export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
   const adAdornerConfig =
       ElementsComponents.AdornerManager.getRegisteredAdorner(ElementsComponents.AdornerManager.RegisteredAdorners.AD);
+  const viewSourceAdornerConfig = ElementsComponents.AdornerManager.getRegisteredAdorner(
+      ElementsComponents.AdornerManager.RegisteredAdorners.VIEW_SOURCE);
   const containerAdornerConfig = ElementsComponents.AdornerManager.getRegisteredAdorner(
       ElementsComponents.AdornerManager.RegisteredAdorners.CONTAINER);
   const flexAdornerConfig =
@@ -447,7 +456,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
       ElementsComponents.AdornerManager.RegisteredAdorners.TOP_LAYER);
   const hasAdorners = input.adorners?.size || input.showAdAdorner || input.showContainerAdorner ||
       input.showFlexAdorner || input.showGridAdorner || input.showGridLanesAdorner || input.showMediaAdorner ||
-      input.showPopoverAdorner || input.showTopLayerAdorner;
+      input.showPopoverAdorner || input.showTopLayerAdorner || input.showViewSourceAdorner;
   // clang-format off
   render(html`
     <div ${ref(el => { output.contentElement = el as HTMLElement; })}>
@@ -463,6 +472,13 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           ${adornerRef(input)}>
           <span>${adAdornerConfig.name}</span>
         </devtools-adorner>` : nothing}
+        ${input.showViewSourceAdorner ? html`<devtools-adorner
+          .data=${{name: viewSourceAdornerConfig.name, jslogContext: viewSourceAdornerConfig.name}}
+          aria-label=${i18nString(UIStrings.viewSourceCode)}
+          @click=${input.onViewSourceAdornerClick}
+          ${adornerRef(input)}>
+          <span>${viewSourceAdornerConfig.name}</span>
+        </devtools-adorner>` : nothing}
         ${input.showContainerAdorner ? html`<devtools-adorner
           class=clickable
           role=button
@@ -800,8 +816,10 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           gridAdornerActive: this.#gridAdornerActive,
           popoverAdornerActive: this.#popoverAdornerActive,
           isSubgrid: Boolean(this.#layout?.isSubgrid),
+          showViewSourceAdorner: this.nodeInternal.isRootNode() && isOpeningTag(this.tagTypeContext),
           nodeInfo: this.#nodeInfo,
           topLayerIndex: this.node().topLayerIndex(),
+          onViewSourceAdornerClick: this.revealHTMLInSources.bind(this),
           onGutterClick: this.showContextMenu.bind(this),
           onAdornerAdded: adorner => {
             ElementsPanel.instance().registerAdorner(adorner);
@@ -1291,6 +1309,17 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.treeOutline && void this.treeOutline.showContextMenu(this, event);
   }
 
+  private revealHTMLInSources(): void {
+    const frameOwnerId = this.nodeInternal.frameOwnerFrameId();
+    if (frameOwnerId) {
+      const frame = SDK.FrameManager.FrameManager.instance().getFrame(frameOwnerId);
+      if (frame) {
+        const sourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(frame.url);
+        void Common.Revealer.reveal(sourceCode);
+      }
+    }
+  }
+
   async populateTagContextMenu(contextMenu: UI.ContextMenu.ContextMenu, event: Event): Promise<void> {
     // Add attribute-related actions.
     const treeElement =

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/elements/ElementsTreeOutlineRenderer.ts

@@ -33,7 +33,7 @@
  */
 
 import * as SDK from '../../core/sdk/sdk.js';
-import type * as UI from '../../ui/legacy/legacy.js';
+import * as UI from '../../ui/legacy/legacy.js';
 
 import {ElementsTreeOutline} from './ElementsTreeOutline.js';
 
@@ -75,6 +75,12 @@ export class Renderer implements UI.UIUtils.Renderer {
     if (options?.expand) {
       treeOutline.firstChild()?.expand();
     }
+    const dispatchDimensionChange = (): void => {
+      treeOutline.element.dispatchEvent(new CustomEvent('dimensionschanged'));
+    };
+    treeOutline.addEventListener(UI.TreeOutline.Events.ElementAttached, dispatchDimensionChange);
+    treeOutline.addEventListener(UI.TreeOutline.Events.ElementExpanded, dispatchDimensionChange);
+    treeOutline.addEventListener(UI.TreeOutline.Events.ElementCollapsed, dispatchDimensionChange);
     return {
       element: treeOutline.element,
       forceSelect: treeOutline.forceSelect.bind(treeOutline),

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

@@ -33,6 +33,7 @@ export enum RegisteredAdorners {
   SCROLL = 'scroll',
   SCROLL_SNAP = 'scroll-snap',
   SLOT = 'slot',
+  VIEW_SOURCE = 'view-source',
   STARTING_STYLE = 'starting-style',
   SUBGRID = 'subgrid',
   TOP_LAYER = 'top-layer',
@@ -129,6 +130,13 @@ export function getRegisteredAdorner(which: RegisteredAdorners): RegisteredAdorn
         enabledByDefault: true,
       };
     }
+    case RegisteredAdorners.VIEW_SOURCE: {
+      return {
+        name: 'view-source',
+        category: AdornerCategories.DEFAULT,
+        enabledByDefault: true,
+      };
+    }
   }
 }
 

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -351,7 +351,9 @@ export class DeviceModeToolbar {
         MobileThrottling.ThrottlingManager.throttlingManager().createMobileThrottlingButton();
     this.throttlingConditionsItem.turnShrinkable();
     toolbar.appendToolbarItem(this.throttlingConditionsItem);
-    toolbar.appendToolbarItem(MobileThrottling.ThrottlingManager.throttlingManager().createSaveDataOverrideSelector());
+    const saveDataItem = MobileThrottling.ThrottlingManager.throttlingManager().createSaveDataOverrideSelector();
+    saveDataItem.turnShrinkable();
+    toolbar.appendToolbarItem(saveDataItem);
   }
 
   private appendDevicePositionItems(toolbar: UI.Toolbar.Toolbar): void {

package/front_end/panels/issues/AffectedResourcesView.ts

@@ -254,7 +254,6 @@ export abstract class AffectedResourcesView extends UI.TreeOutline.TreeElement {
     sourceCodeLocation.classList.add('affected-source-location');
     if (sourceLocation) {
       const maxLengthForDisplayedURLs = 40;  // Same as console messages.
-      // TODO(crbug.com/1108503): Add some mechanism to be able to add telemetry to this element.
       const linkifier = new Components.Linkifier.Linkifier(maxLengthForDisplayedURLs);
       const sourceAnchor = linkifier.linkifyScriptLocation(
           target || null, sourceLocation.scriptId || null, sourceLocation.url as Platform.DevToolsPath.UrlString,

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -104,6 +104,7 @@ export class LighthousePanel extends UI.Panel.Panel {
 
     this.renderToolbar();
     this.auditResultsElement = this.contentElement.createChild('div', 'lighthouse-results-container');
+    this.auditResultsElement.addEventListener('keydown', this.onKeyDown.bind(this));
     this.renderStartView();
 
     this.controller.recomputePageAuditability();
@@ -365,4 +366,13 @@ export class LighthousePanel extends UI.Panel.Panel {
     }
     return els;
   }
+
+  private onKeyDown(event: KeyboardEvent): void {
+    // The LHR's tool button is a toggle. When the user hits escape, the default behavior
+    // is to close the tool drawer. We want to prevent this behavior and instead let the
+    // LHR's tool button handle the event and close the tool's dropdown.
+    if (event.key === 'Escape' && this.auditResultsElement.querySelector('.lh-tools__button.lh-active')) {
+      event.handled = true;
+    }
+  }
 }

package/front_end/panels/lighthouse/lighthousePanel.css

@@ -19,9 +19,6 @@ button.view-trace {
   margin: 10px;
 }
 
-.lighthouse-results-container {
-  position: relative;
-}
 /** `window.opener` is null for windows opened from DevTools. This breaks
     the LH viewer app, so disable this feature. */
 
@@ -63,3 +60,49 @@ select.lighthouse-report {
 .lh-devtools .lh-element-screenshot__overlay {
   position: absolute;
 }
+
+.lighthouse-results-container {
+  position: relative;
+
+  :focus-visible {
+    outline: -webkit-focus-ring-color auto 1px;
+  }
+
+  .lh-tools__button {
+    height: var(--sys-size-9);
+    width: var(--sys-size-9);
+    min-width: var(--sys-size-9);
+
+    &:focus-visible {
+      border-radius: var(--sys-shape-corner-full);
+      outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+    }
+
+    &.lh-active + .lh-tools__dropdown {
+      clip: rect(-8px, 204px, 270px, -10px);  /* stylelint-disable-line property-no-deprecated */
+    }
+  }
+
+  .lh-tools__dropdown {
+    padding: var(--sys-size-5) 0;
+    border-radius: var(--sys-shape-corner-small);
+    box-shadow: var(--sys-elevation-level3);
+    top: 24px;
+
+    &:hover a:focus {
+      background-color: transparent;
+    }
+
+    a {
+      height: var(--sys-size-11);
+      padding: 0 var(--sys-size-8);
+      white-space: nowrap;
+      align-items: center;
+
+      &::before {
+        content: none;
+      }
+    }
+  }
+
+}

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