chrome-devtools-frontend 1.0.1524741 → 1.0.1526203

package/front_end/models/trace/insights/ThirdParties.ts

@@ -24,7 +24,7 @@ export const UIStrings = {
    * This is displayed after a user expands the section to see more. No character length limits.
    */
   description: '3rd party code can significantly impact load performance. ' +
-      '[Reduce and defer loading of 3rd party code](https://web.dev/articles/optimizing-content-efficiency-loading-third-party-javascript/) to prioritize your page\'s content.',
+      '[Reduce and defer loading of 3rd party code](https://developer.chrome.com/docs/performance/insights/third-parties) to prioritize your page\'s content.',
   /** Label for a table column that displays the name of a third-party provider. */
   columnThirdParty: '3rd party',
   /** Label for a column in a data table; entries will be the download size of a web resource in kilobytes. */
@@ -65,6 +65,7 @@ function finalize(partialModel: PartialInsightModel<ThirdPartiesInsightModel>):
     strings: UIStrings,
     title: i18nString(UIStrings.title),
     description: i18nString(UIStrings.description),
+    docs: 'https://developer.chrome.com/docs/performance/insights/third-parties',
     category: InsightCategory.ALL,
     state: partialModel.entitySummaries.find(summary => summary.entity !== partialModel.firstPartyEntity) ?
         'informative' :

package/front_end/models/trace/insights/Viewport.ts

@@ -24,7 +24,7 @@ export const UIStrings = {
    * @description Text to tell the user how a viewport meta element can improve performance. \xa0 is a non-breaking space
    */
   description:
-      'Tap interactions may be [delayed by up to 300\xA0ms](https://developer.chrome.com/blog/300ms-tap-delay-gone-away/) if the viewport is not optimized for mobile.',
+      'Tap interactions may be [delayed by up to 300\xA0ms](https://developer.chrome.com/docs/performance/insights/viewport) if the viewport is not optimized for mobile.',
   /**
    * @description Text for a label describing the portion of an interaction event that was delayed due to a bad mobile viewport.
    */
@@ -46,6 +46,7 @@ function finalize(partialModel: PartialInsightModel<ViewportInsightModel>): View
     strings: UIStrings,
     title: i18nString(UIStrings.title),
     description: i18nString(UIStrings.description),
+    docs: 'https://developer.chrome.com/docs/performance/insights/viewport',
     category: InsightCategory.INP,
     state: partialModel.mobileOptimized === false ? 'fail' : 'pass',
     ...partialModel,

package/front_end/models/trace/insights/types.ts

@@ -76,6 +76,7 @@ export type InsightModel<UIStrings extends Record<string, string> = Record<strin
       strings: UIStrings,
       title: Common.UIString.LocalizedString,
       description: Common.UIString.LocalizedString,
+      docs: string,
       category: InsightCategory,
       state: 'pass' | 'fail' | 'informative',
       /** Used by RelatedInsightChips.ts */
@@ -101,7 +102,7 @@ export type InsightModel<UIStrings extends Record<string, string> = Record<strin
     };
 
 export type PartialInsightModel<T> =
-    Omit<T, 'strings'|'title'|'description'|'category'|'state'|'insightKey'|'navigationId'|'frameId'>;
+    Omit<T, 'strings'|'title'|'description'|'docs'|'category'|'state'|'insightKey'|'navigationId'|'frameId'>;
 
 /**
  * Contains insights for a specific navigation. If a trace began after a navigation already started,

package/front_end/panels/application/ReportingApiView.ts

@@ -56,12 +56,11 @@ interface ViewInput {
   onReportSelected: (id: string) => void;
 }
 
-type View = (input: ViewInput, output: object, target: HTMLElement) => void;
-
-export const DEFAULT_VIEW: View = (input, _output, target) => {
+export const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLElement): void => {
   if (input.hasReports || input.hasEndpoints) {
     // clang-format off
     render(html`
+      <style>${UI.inspectorCommonStyles}</style>
       <devtools-split-view sidebar-position="second" sidebar-initial-size="150" jslog=${
           VisualLogging.pane('reporting-api')}>
         ${input.hasReports ? html`
@@ -73,9 +72,9 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
             </div>
             <div slot="sidebar" class="vbox" jslog=${VisualLogging.pane('preview').track({resize: true})}>
               ${input.focusedReport ? html`
-                <devtools-widget .widgetConfig=${widgetConfig(
-                  element => SourceFrame.JSONView.JSONView.createViewSync(input.focusedReport?.body || '', element)
-                )}></devtools-widget>
+                <devtools-widget .widgetConfig=${widgetConfig(SourceFrame.JSONView.SearchableJsonView, {
+                  jsonObject: input.focusedReport.body,
+                })}></devtools-widget>
               ` : html`
                 <devtools-widget .widgetConfig=${widgetConfig(UI.EmptyWidget.EmptyWidget, {
                   header: i18nString(UIStrings.noReportSelected),
@@ -112,6 +111,8 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
   }
 };
 
+type View = typeof DEFAULT_VIEW;
+
 export class ReportingApiView extends UI.Widget.VBox implements
     SDK.TargetManager.SDKModelObserver<SDK.NetworkManager.NetworkManager> {
   #endpoints: Map<string, Protocol.Network.ReportingApiEndpoint[]>;
@@ -164,7 +165,7 @@ export class ReportingApiView extends UI.Widget.VBox implements
       focusedReport: this.#focusedReport,
       onReportSelected: this.#onReportSelected.bind(this),
     };
-    this.#view(viewInput, {}, this.element);
+    this.#view(viewInput, undefined, this.element);
   }
 
   #onEndpointsChangedForOrigin({data}: {data: Protocol.Network.ReportingApiEndpointsChangedForOriginEvent}): void {

package/front_end/panels/application/StorageView.ts

@@ -236,6 +236,7 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
     this.quotaOverrideCheckbox.addEventListener('click', this.onClickCheckbox.bind(this), false);
     this.quotaOverrideControlRow = quota.appendRow();
     this.quotaOverrideEditor = this.quotaOverrideControlRow.createChild('input', 'quota-override-notification-editor');
+    this.quotaOverrideEditor.setAttribute('placeholder', i18nString(UIStrings.pleaseEnterANumber));
     this.quotaOverrideEditor.setAttribute(
         'jslog', `${VisualLogging.textField('quota-override').track({change: true})}`);
     this.quotaOverrideControlRow.appendChild(UI.UIUtils.createLabel(i18nString(UIStrings.mb)));
@@ -402,7 +403,7 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
       this.quotaOverrideControlRow.classList.remove('hidden');
       this.quotaOverrideCheckbox.checked = true;
       this.quotaOverrideEditor.value = this.previousOverrideFieldValue;
-      this.quotaOverrideEditor.focus();
+      window.setTimeout(() => this.quotaOverrideEditor.focus(), 500);
     } else if (this.target && this.securityOrigin) {
       this.quotaOverrideControlRow.classList.add('hidden');
       this.quotaOverrideCheckbox.checked = false;

package/front_end/panels/application/preloading/components/PreloadingString.ts

@@ -736,6 +736,8 @@ export function capitalizedAction(action: Protocol.Preload.SpeculationAction): C
       return i18n.i18n.lockedString('Prefetch');
     case Protocol.Preload.SpeculationAction.Prerender:
       return i18n.i18n.lockedString('Prerender');
+    case Protocol.Preload.SpeculationAction.PrerenderUntilScript:
+      return i18n.i18n.lockedString('PrerenderUntilScript');
   }
 }
 

package/front_end/panels/changes/ChangesSidebar.ts

@@ -67,14 +67,21 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
 
 export class ChangesSidebar extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.Widget>(
     UI.Widget.Widget) {
-  readonly #workspaceDiff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl;
+  #workspaceDiff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl|null = null;
   readonly #view: View;
   readonly #sourceCodes = new Set<Workspace.UISourceCode.UISourceCode>();
   #selectedUISourceCode: Workspace.UISourceCode.UISourceCode|null = null;
-  constructor(workspaceDiff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl, target?: HTMLElement, view = DEFAULT_VIEW) {
-    super({jslog: `${VisualLogging.pane('sidebar').track({resize: true})}`});
+  constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
+    super(target, {jslog: `${VisualLogging.pane('sidebar').track({resize: true})}`});
     this.#view = view;
+  }
 
+  set workspaceDiff(workspaceDiff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl) {
+    if (this.#workspaceDiff) {
+      this.#workspaceDiff.modifiedUISourceCodes().forEach(this.#removeUISourceCode.bind(this));
+      this.#workspaceDiff.removeEventListener(
+          WorkspaceDiff.WorkspaceDiff.Events.MODIFIED_STATUS_CHANGED, this.uiSourceCodeModifiedStatusChanged, this);
+    }
     this.#workspaceDiff = workspaceDiff;
     this.#workspaceDiff.modifiedUISourceCodes().forEach(this.#addUISourceCode.bind(this));
     this.#workspaceDiff.addEventListener(

package/front_end/panels/changes/ChangesView.ts

@@ -1,7 +1,6 @@
 // Copyright 2017 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 rulesdir/no-imperative-dom-api */
 
 import '../../ui/legacy/legacy.js';
 
@@ -10,6 +9,7 @@ import type * as Platform from '../../core/platform/platform.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
 import * as WorkspaceDiff from '../../models/workspace_diff/workspace_diff.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {ChangesSidebar, Events} from './ChangesSidebar.js';
@@ -30,93 +30,93 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/changes/ChangesView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const {render, html} = Lit;
+interface ViewInput {
+  selectedSourceCode: Workspace.UISourceCode.UISourceCode|null;
+  onSelect(sourceCode: Workspace.UISourceCode.UISourceCode|null): void;
+  workspaceDiff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl;
+}
+type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const onSidebar = (sidebar: ChangesSidebar): void => {
+    sidebar.addEventListener(
+        Events.SELECTED_UI_SOURCE_CODE_CHANGED, () => input.onSelect(sidebar.selectedUISourceCode()));
+  };
+  render(
+      // clang-format off
+      html`
+      <style>${changesViewStyles}</style>
+      <devtools-split-view direction=column>
+        <div class=vbox slot="main">
+          <devtools-widget
+            ?hidden=${input.workspaceDiff.modifiedUISourceCodes().length > 0}
+            .widgetConfig=${UI.Widget.widgetConfig(UI.EmptyWidget.EmptyWidget, {
+                              header: i18nString(UIStrings.noChanges),
+                              text: i18nString(UIStrings.changesViewDescription),
+                              link: CHANGES_VIEW_URL,
+                            })}>
+          </devtools-widget>
+          <div class=diff-container role=tabpanel ?hidden=${input.workspaceDiff.modifiedUISourceCodes().length === 0}>
+            <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(CombinedDiffView.CombinedDiffView, {
+                                              selectedFileUrl: input.selectedSourceCode?.url(),
+                                              workspaceDiff: input.workspaceDiff
+                                            })}></devtools-widget>
+          </div>
+        </div>
+        <devtools-widget
+          slot="sidebar"
+          .widgetConfig=${UI.Widget.widgetConfig(ChangesSidebar, {
+                           workspaceDiff: input.workspaceDiff
+                         })}
+          ${UI.Widget.widgetRef(ChangesSidebar, onSidebar)}>
+        </devtools-widget>
+      </devtools-split-view>`,
+      // clang-format on
+      target);
+};
 
 export class ChangesView extends UI.Widget.VBox {
-  private emptyWidget: UI.EmptyWidget.EmptyWidget;
-  private readonly workspaceDiff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl;
-  readonly changesSidebar: ChangesSidebar;
-  private selectedUISourceCode: Workspace.UISourceCode.UISourceCode|null;
-  private readonly diffContainer: HTMLElement;
-  private readonly combinedDiffView: CombinedDiffView.CombinedDiffView;
+  readonly #workspaceDiff: WorkspaceDiff.WorkspaceDiff.WorkspaceDiffImpl;
+  #selectedUISourceCode: Workspace.UISourceCode.UISourceCode|null = null;
+  readonly #view: View;
 
-  constructor() {
-    super({
+  constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
+    super(target, {
       jslog: `${VisualLogging.panel('changes').track({resize: true})}`,
       useShadowDom: true,
     });
-    this.registerRequiredCSS(changesViewStyles);
-
-    const splitWidget = new UI.SplitWidget.SplitWidget(true /* vertical */, false /* sidebar on left */);
-    const mainWidget = new UI.Widget.VBox();
-    splitWidget.setMainWidget(mainWidget);
-    splitWidget.show(this.contentElement);
-
-    this.emptyWidget = new UI.EmptyWidget.EmptyWidget('', '');
-    this.emptyWidget.show(mainWidget.element);
-
-    this.workspaceDiff = WorkspaceDiff.WorkspaceDiff.workspaceDiff();
-    this.changesSidebar = new ChangesSidebar(this.workspaceDiff);
-    this.changesSidebar.addEventListener(
-        Events.SELECTED_UI_SOURCE_CODE_CHANGED, this.selectedUISourceCodeChanged, this);
-    splitWidget.setSidebarWidget(this.changesSidebar);
 
-    this.selectedUISourceCode = null;
+    this.#workspaceDiff = WorkspaceDiff.WorkspaceDiff.workspaceDiff();
+    this.#view = view;
 
-    this.diffContainer = mainWidget.element.createChild('div', 'diff-container');
-    UI.ARIAUtils.markAsTabpanel(this.diffContainer);
-    this.combinedDiffView = new CombinedDiffView.CombinedDiffView();
-    this.combinedDiffView.workspaceDiff = this.workspaceDiff;
-    this.combinedDiffView.show(this.diffContainer);
-
-    this.hideDiff();
-    this.selectedUISourceCodeChanged();
+    this.requestUpdate();
   }
 
-  private renderDiffOrEmptyState(): void {
-    // There are modified UI source codes, we should render the combined diff view.
-    if (this.workspaceDiff.modifiedUISourceCodes().length > 0) {
-      this.showDiff();
-    } else {
-      this.hideDiff();
-    }
-  }
-
-  private selectedUISourceCodeChanged(): void {
-    const selectedUISourceCode = this.changesSidebar.selectedUISourceCode();
-    if (!selectedUISourceCode || this.selectedUISourceCode === selectedUISourceCode) {
-      return;
-    }
-
-    this.selectedUISourceCode = selectedUISourceCode;
-    this.combinedDiffView.selectedFileUrl = selectedUISourceCode.url();
+  override performUpdate(): void {
+    this.#view(
+        {
+          workspaceDiff: this.#workspaceDiff,
+          selectedSourceCode: this.#selectedUISourceCode,
+          onSelect: sourceCode => {
+            this.#selectedUISourceCode = sourceCode;
+            this.requestUpdate();
+          },
+        },
+        {}, this.contentElement);
   }
 
   override wasShown(): void {
     UI.Context.Context.instance().setFlavor(ChangesView, this);
     super.wasShown();
-    this.renderDiffOrEmptyState();
-    this.workspaceDiff.addEventListener(
-        WorkspaceDiff.WorkspaceDiff.Events.MODIFIED_STATUS_CHANGED, this.renderDiffOrEmptyState, this);
+    this.requestUpdate();
+    this.#workspaceDiff.addEventListener(
+        WorkspaceDiff.WorkspaceDiff.Events.MODIFIED_STATUS_CHANGED, this.requestUpdate, this);
   }
 
   override willHide(): void {
     super.willHide();
     UI.Context.Context.instance().setFlavor(ChangesView, null);
-    this.workspaceDiff.removeEventListener(
-        WorkspaceDiff.WorkspaceDiff.Events.MODIFIED_STATUS_CHANGED, this.renderDiffOrEmptyState, this);
-  }
-
-  private hideDiff(): void {
-    this.diffContainer.style.display = 'none';
-    this.emptyWidget.header = i18nString(UIStrings.noChanges);
-    this.emptyWidget.text = i18nString(UIStrings.changesViewDescription);
-
-    this.emptyWidget.link = CHANGES_VIEW_URL;
-    this.emptyWidget.showWidget();
-  }
-
-  private showDiff(): void {
-    this.emptyWidget.hideWidget();
-    this.diffContainer.style.display = 'block';
+    this.#workspaceDiff.removeEventListener(
+        WorkspaceDiff.WorkspaceDiff.Events.MODIFIED_STATUS_CHANGED, this.requestUpdate, this);
   }
 }

package/front_end/panels/changes/CombinedDiffView.ts

@@ -149,7 +149,7 @@ export class CombinedDiffView extends UI.Widget.Widget {
     void this.#initializeModifiedUISourceCodes();
   }
 
-  set selectedFileUrl(fileUrl: string) {
+  set selectedFileUrl(fileUrl: string|undefined) {
     this.#selectedFileUrl = fileUrl;
     this.requestUpdate();
     void this.updateComplete.then(() => {

package/front_end/panels/changes/changesView.css

@@ -36,3 +36,7 @@
   background-color: var(--sys-color-cdt-base-container);
   border-top: 1px solid var(--sys-color-divider);
 }
+
+[hidden] {
+  display: none !important; /* stylelint-disable-line declaration-no-important */
+}

package/front_end/panels/console/ConsolePrompt.ts

@@ -343,9 +343,29 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   private editorKeymap(): readonly CodeMirror.KeyBinding[] {
-    const keymap = [
-      {key: 'ArrowUp', run: () => this.#editorHistory.moveHistory(Direction.BACKWARD)},
-      {key: 'ArrowDown', run: () => this.#editorHistory.moveHistory(Direction.FORWARD)},
+    const keymap: CodeMirror.KeyBinding[] = [
+      {
+        // Handle the KeyboardEvent manually.
+        any: (_view, event) => {
+          // Events with `repeat=true` are excluded from altering the history state because
+          // they are often not intended as such. Example:
+          // Scrolling through long snippets.
+          if (event.repeat) {
+            return false;
+          }
+
+          if (event.key === 'ArrowUp') {
+            return this.#editorHistory.moveHistory(Direction.BACKWARD);
+          }
+
+          if (event.key === 'ArrowDown') {
+            return this.#editorHistory.moveHistory(Direction.FORWARD);
+          }
+
+          return false;
+        },
+      },
+
       {mac: 'Ctrl-p', run: () => this.#editorHistory.moveHistory(Direction.BACKWARD, true)},
       {mac: 'Ctrl-n', run: () => this.#editorHistory.moveHistory(Direction.FORWARD, true)},
       {
@@ -372,7 +392,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     if (this.isAiCodeCompletionEnabled()) {
       keymap.push({
         key: 'Tab',
-        run: (): boolean => {
+        run: () => {
           const {accepted, suggestion} = TextEditor.Config.acceptAiAutoCompleteSuggestion(this.editor.editor);
           if (accepted) {
             this.dispatchEventToListeners(

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -401,8 +401,13 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
   }
 
   getCategoryIDs(): string[] {
+    const {mode} = this.getFlags();
     const categoryIDs = [];
     for (const preset of Presets) {
+      if (mode && !preset.supportedModes.includes(mode)) {
+        continue;
+      }
+
       if (preset.setting.get()) {
         categoryIDs.push(preset.configID);
       }

package/front_end/panels/linear_memory_inspector/LinearMemoryInspectorPane.ts

@@ -122,6 +122,8 @@ export interface EventTypes {
 
 export class LinearMemoryInspectorView extends UI.Widget.VBox {
   #memoryWrapper: LazyUint8Array;
+  #memory?: Uint8Array<ArrayBuffer>;
+  #offset = 0;
   #address: number;
   #tabId: string;
   #inspector: LinearMemoryInspectorComponents.LinearMemoryInspector.LinearMemoryInspector;
@@ -140,32 +142,52 @@ export class LinearMemoryInspectorView extends UI.Widget.VBox {
     this.#address = address;
     this.#tabId = tabId;
     this.#hideValueInspector = Boolean(hideValueInspector);
+    this.firstTimeOpen = true;
+
     this.#inspector = new LinearMemoryInspectorComponents.LinearMemoryInspector.LinearMemoryInspector();
-    this.#inspector.addEventListener(
+    this.#inspector.contentElement.addEventListener(
         LinearMemoryInspectorComponents.LinearMemoryInspector.MemoryRequestEvent.eventName,
-        (event: LinearMemoryInspectorComponents.LinearMemoryInspector.MemoryRequestEvent) => {
-          this.#memoryRequested(event);
-        });
-    this.#inspector.addEventListener(
+        (event: LinearMemoryInspectorComponents.LinearMemoryInspector.MemoryRequestEvent) =>
+            this.#memoryRequested(event));
+    this.#inspector.contentElement.addEventListener(
         LinearMemoryInspectorComponents.LinearMemoryInspector.AddressChangedEvent.eventName,
-        (event: LinearMemoryInspectorComponents.LinearMemoryInspector.AddressChangedEvent) => {
-          this.updateAddress(event.data);
-        });
-    this.#inspector.addEventListener(
+        (event: LinearMemoryInspectorComponents.LinearMemoryInspector.AddressChangedEvent) =>
+            this.updateAddress(event.data));
+    this.#inspector.contentElement.addEventListener(
         LinearMemoryInspectorComponents.LinearMemoryInspector.SettingsChangedEvent.eventName,
         (event: LinearMemoryInspectorComponents.LinearMemoryInspector.SettingsChangedEvent) => {
           // Stop event from bubbling up, since no element further up needs the event.
           event.stopPropagation();
           this.saveSettings(event.data);
         });
-    this.#inspector.addEventListener(
+    this.#inspector.contentElement.addEventListener(
         LinearMemoryInspectorComponents.LinearMemoryHighlightChipList.DeleteMemoryHighlightEvent.eventName,
         (event: LinearMemoryInspectorComponents.LinearMemoryHighlightChipList.DeleteMemoryHighlightEvent) => {
           LinearMemoryInspectorController.instance().removeHighlight(this.#tabId, event.data);
           this.refreshData();
         });
-    this.contentElement.appendChild(this.#inspector);
-    this.firstTimeOpen = true;
+    this.#inspector.show(this.contentElement);
+  }
+
+  render(): void {
+    if (this.firstTimeOpen) {
+      const settings = LinearMemoryInspectorController.instance().loadSettings();
+      this.#inspector.valueTypes = settings.valueTypes;
+      this.#inspector.valueTypeModes = settings.modes;
+      this.#inspector.endianness = settings.endianness;
+      this.firstTimeOpen = false;
+    }
+
+    if (!this.#memory) {
+      return;
+    }
+
+    this.#inspector.memory = this.#memory;
+    this.#inspector.memoryOffset = this.#offset;
+    this.#inspector.address = this.#address;
+    this.#inspector.outerMemoryLength = this.#memoryWrapper.length();
+    this.#inspector.highlightInfo = this.#getHighlightInfo();
+    this.#inspector.hideValueInspector = this.#hideValueInspector;
   }
 
   override wasShown(): void {
@@ -184,32 +206,12 @@ export class LinearMemoryInspectorView extends UI.Widget.VBox {
   }
 
   refreshData(): void {
-    void LinearMemoryInspectorController.getMemoryForAddress(this.#memoryWrapper, this.#address).then(({
-                                                                                                        memory,
-                                                                                                        offset,
-                                                                                                      }) => {
-      let valueTypes;
-      let valueTypeModes;
-      let endianness;
-      if (this.firstTimeOpen) {
-        const settings = LinearMemoryInspectorController.instance().loadSettings();
-        valueTypes = settings.valueTypes;
-        valueTypeModes = settings.modes;
-        endianness = settings.endianness;
-        this.firstTimeOpen = false;
-      }
-      this.#inspector.data = {
-        memory,
-        address: this.#address,
-        memoryOffset: offset,
-        outerMemoryLength: this.#memoryWrapper.length(),
-        valueTypes,
-        valueTypeModes,
-        endianness,
-        highlightInfo: this.#getHighlightInfo(),
-        hideValueInspector: this.#hideValueInspector,
-      };
-    });
+    void LinearMemoryInspectorController.getMemoryForAddress(this.#memoryWrapper, this.#address)
+        .then(({memory, offset}) => {
+          this.#memory = memory;
+          this.#offset = offset;
+          this.render();
+        });
   }
 
   #memoryRequested(event: LinearMemoryInspectorComponents.LinearMemoryInspector.MemoryRequestEvent): void {
@@ -219,14 +221,9 @@ export class LinearMemoryInspectorView extends UI.Widget.VBox {
     }
 
     void LinearMemoryInspectorController.getMemoryRange(this.#memoryWrapper, start, end).then(memory => {
-      this.#inspector.data = {
-        memory,
-        address,
-        memoryOffset: start,
-        outerMemoryLength: this.#memoryWrapper.length(),
-        highlightInfo: this.#getHighlightInfo(),
-        hideValueInspector: this.#hideValueInspector,
-      };
+      this.#memory = memory;
+      this.#offset = start;
+      this.render();
     });
   }