chrome-devtools-frontend 1.0.1524741 → 1.0.1525561

package/docs/policy/slow-close.md

@@ -4,11 +4,11 @@
 <small>([go/chrome-devtools:slow-close-policy])</small>
 
 In November 2024, we instituted a slow close policy for Chrome DevTools to
-automatically maintain hygiene of our bug database. We ended up with a list
-of over 1650 open bugs and over 750 open feature requests, some of them going
-back over 10 years, which was not only challenging to maintain, but also made
-it difficult to determine what's relevant and where we should invest our
-resources best.
+automatically maintain hygiene of our bug database. We ended up with a list of
+over 1650 open bugs and over 750 open feature requests, some of them going back
+over 10 years, which was not only challenging to maintain, but also made it
+difficult to determine what's relevant and where we should invest our resources
+best.
 
 By automatically nudging and closing stale bugs and feature requests, we can
 reduce this burden, and better communicate to our users what will actually be
@@ -20,28 +20,31 @@ actioned, and hear from them what remains relevant.
 
 The criteria for slow close:
 
-- Status: unassigned
-- Type: Bug or Feature Request
-- Created: over 3 years ago
-- Last updated: over 90 days ago
-- Popularity: (cc count + vote count) < 10
-- No open descendants
+-   Status: unassigned
+-   Type: Bug or Feature Request
+-   Created: over 3 years ago
+-   Last updated: over 90 days ago
+-   Popularity: (cc count + vote count) < 10
+-   No open descendants
 
 Googlers can mark issues as exempt from slow close by adding them to the
 [`DevTools-Blintz-Close-Exempt` hotlist](https://issues.chromium.org/hotlists/6459983).
+All issues on the
+[`ChromeTooling-Icebox`](https://issues.chromium.org/hotlists/7363836) are also
+automatically exempt from slow close.
 
 ## Process
 
 The automation runs on a daily basis, and performs the following steps:
 
-- Issues that meet the criteria outlined above are added to the
-  [`DevTools-Blintz-Close-Candidate` hotlist](https://issues.chromium.org/hotlists/6459982)
-  for closure.
-- If 14 days have passed and no updates have occurred, the issue will be closed
-  and moved to the
-  [`DevTools-Blintz-Close` hotlist](https://issues.chromium.org/hotlists/6460812)
-  for recording purposes.
-- No more than 25 issues will be updated in a single run.
+-   Issues that meet the criteria outlined above are added to the
+    [`DevTools-Blintz-Close-Candidate` hotlist](https://issues.chromium.org/hotlists/6459982)
+    for closure.
+-   If 14 days have passed and no updates have occurred, the issue will be
+    closed and moved to the
+    [`DevTools-Blintz-Close` hotlist](https://issues.chromium.org/hotlists/6460812)
+    for recording purposes.
+-   No more than 25 issues will be updated in a single run.
 
 ## Implementation
 

package/front_end/{models/source_map_scopes → core/sdk}/ScopeTreeCache.ts

@@ -2,24 +2,25 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as SDK from '../../core/sdk/sdk.js';
-import * as Formatter from '../formatter/formatter.js';
-import * as TextUtils from '../text_utils/text_utils.js';
+import * as Formatter from '../../models/formatter/formatter.js';
+import * as TextUtils from '../../models/text_utils/text_utils.js';
+
+import type {Script} from './Script.js';
 
 type ScopeTreeNode = Formatter.FormatterWorkerPool.ScopeTreeNode;
 
 /** If a script failed to parse, we stash null in order to prevent unnecessary re-parsing */
-const scopeTrees = new WeakMap<SDK.Script.Script, Promise<ScopeTreeNode|null>>();
+const scopeTrees = new WeakMap<Script, Promise<ScopeTreeNode|null>>();
 
 /**
  * Computes and caches the scope tree for `script`.
  *
- * We use {@link SDK.Script.Script} as a key to uniquely identify scripts.
- * {@link SDK.Script.Script} boils down to "target" + "script ID". This
+ * We use {@link Script} as a key to uniquely identify scripts.
+ * {@link Script} boils down to "target" + "script ID". This
  * duplicates work in case of identitical script running on multiple targets
  * (e.g. workers).
  */
-export function scopeTreeForScript(script: SDK.Script.Script): Promise<ScopeTreeNode|null> {
+export function scopeTreeForScript(script: Script): Promise<ScopeTreeNode|null> {
   let promise = scopeTrees.get(script);
   if (promise === undefined) {
     promise = script.requestContentData().then(content => {

package/front_end/core/sdk/sdk.ts

@@ -68,6 +68,7 @@ import * as RemoteObject from './RemoteObject.js';
 import * as Resource from './Resource.js';
 import * as ResourceTreeModel from './ResourceTreeModel.js';
 import * as RuntimeModel from './RuntimeModel.js';
+import * as ScopeTreeCache from './ScopeTreeCache.js';
 import * as ScreenCaptureModel from './ScreenCaptureModel.js';
 import * as Script from './Script.js';
 import * as SDKModel from './SDKModel.js';
@@ -149,6 +150,7 @@ export {
   Resource,
   ResourceTreeModel,
   RuntimeModel,
+  ScopeTreeCache,
   ScreenCaptureModel,
   Script,
   SDKModel,

package/front_end/entrypoints/formatter_worker/FormatterActions.ts

@@ -44,9 +44,16 @@ export const enum DefinitionKind {
   FIXED = 3,
 }
 
+export const enum ScopeKind {
+  BLOCK = 1,
+  FUNCTION = 2,
+  GLOBAL = 3,
+}
+
 export interface ScopeTreeNode {
   variables: Array<{name: string, kind: DefinitionKind, offsets: number[]}>;
   start: number;
   end: number;
+  kind: ScopeKind;
   children: ScopeTreeNode[];
 }

package/front_end/entrypoints/formatter_worker/ScopeParser.ts

@@ -5,7 +5,7 @@
 import * as Acorn from '../../third_party/acorn/acorn.js';
 
 import {ECMA_VERSION} from './AcornTokenizer.js';
-import {DefinitionKind, type ScopeTreeNode} from './FormatterActions.js';
+import {DefinitionKind, ScopeKind, type ScopeTreeNode} from './FormatterActions.js';
 
 export function parseScopes(expression: string, sourceType: 'module'|'script' = 'script'): Scope|null {
   // Parse the expression and find variables and scopes.
@@ -36,12 +36,14 @@ export class Scope {
   readonly parent: Scope|null;
   readonly start: number;
   readonly end: number;
+  readonly kind: ScopeKind;
   readonly children: Scope[] = [];
 
-  constructor(start: number, end: number, parent: Scope|null) {
+  constructor(start: number, end: number, parent: Scope|null, kind: ScopeKind) {
     this.start = start;
     this.end = end;
     this.parent = parent;
+    this.kind = kind;
     if (parent) {
       parent.children.push(this);
     }
@@ -61,6 +63,7 @@ export class Scope {
       start: this.start,
       end: this.end,
       variables,
+      kind: this.kind,
       children,
     };
   }
@@ -137,7 +140,7 @@ export class ScopeVariableAnalysis {
 
   constructor(node: Acorn.ESTree.Node) {
     this.#rootNode = node;
-    this.#rootScope = new Scope(node.start, node.end, null);
+    this.#rootScope = new Scope(node.start, node.end, null, ScopeKind.GLOBAL);
     this.#currentScope = this.#rootScope;
   }
 
@@ -169,7 +172,7 @@ export class ScopeVariableAnalysis {
         node.elements.forEach(item => this.#processNode(item));
         break;
       case 'ArrowFunctionExpression': {
-        this.#pushScope(node.start, node.end);
+        this.#pushScope(node.start, node.end, ScopeKind.FUNCTION);
         node.params.forEach(this.#processNodeAsDefinition.bind(this, DefinitionKind.VAR, false));
         if (node.body.type === 'BlockStatement') {
           // Include the body of the arrow function in the same scope as the arguments.
@@ -188,7 +191,7 @@ export class ScopeVariableAnalysis {
         this.#processNode(node.right);
         break;
       case 'BlockStatement':
-        this.#pushScope(node.start, node.end);
+        this.#pushScope(node.start, node.end, ScopeKind.BLOCK);
         node.body.forEach(this.#processNode.bind(this));
         this.#popScope(false);
         break;
@@ -202,7 +205,7 @@ export class ScopeVariableAnalysis {
         break;
       }
       case 'CatchClause':
-        this.#pushScope(node.start, node.end);
+        this.#pushScope(node.start, node.end, ScopeKind.BLOCK);
         this.#processNodeAsDefinition(DefinitionKind.LET, false, node.param);
         this.#processNode(node.body);
         this.#popScope(false);
@@ -234,14 +237,14 @@ export class ScopeVariableAnalysis {
         break;
       case 'ForInStatement':
       case 'ForOfStatement':
-        this.#pushScope(node.start, node.end);
+        this.#pushScope(node.start, node.end, ScopeKind.BLOCK);
         this.#processNode(node.left);
         this.#processNode(node.right);
         this.#processNode(node.body);
         this.#popScope(false);
         break;
       case 'ForStatement':
-        this.#pushScope(node.start, node.end);
+        this.#pushScope(node.start, node.end, ScopeKind.BLOCK);
         this.#processNode(node.init ?? null);
         this.#processNode(node.test ?? null);
         this.#processNode(node.update ?? null);
@@ -250,7 +253,7 @@ export class ScopeVariableAnalysis {
         break;
       case 'FunctionDeclaration':
         this.#processNodeAsDefinition(DefinitionKind.VAR, false, node.id);
-        this.#pushScope(node.id?.end ?? node.start, node.end);
+        this.#pushScope(node.id?.end ?? node.start, node.end, ScopeKind.FUNCTION);
         this.#addVariable('this', node.start, DefinitionKind.FIXED);
         this.#addVariable('arguments', node.start, DefinitionKind.FIXED);
         node.params.forEach(this.#processNodeAsDefinition.bind(this, DefinitionKind.LET, false));
@@ -259,7 +262,7 @@ export class ScopeVariableAnalysis {
         this.#popScope(true);
         break;
       case 'FunctionExpression':
-        this.#pushScope(node.id?.end ?? node.start, node.end);
+        this.#pushScope(node.id?.end ?? node.start, node.end, ScopeKind.FUNCTION);
         this.#addVariable('this', node.start, DefinitionKind.FIXED);
         this.#addVariable('arguments', node.start, DefinitionKind.FIXED);
         node.params.forEach(this.#processNodeAsDefinition.bind(this, DefinitionKind.LET, false));
@@ -421,8 +424,8 @@ export class ScopeVariableAnalysis {
     return this.#allNames;
   }
 
-  #pushScope(start: number, end: number): void {
-    this.#currentScope = new Scope(start, end, this.#currentScope);
+  #pushScope(start: number, end: number, kind: ScopeKind): void {
+    this.#currentScope = new Scope(start, end, this.#currentScope, kind);
   }
 
   #popScope(isFunctionContext: boolean): void {

package/front_end/models/formatter/FormatterWorkerPool.ts

@@ -5,7 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import * as FormatterActions from '../../entrypoints/formatter_worker/FormatterActions.js';  // eslint-disable-line rulesdir/es-modules-import
 
-export {DefinitionKind, type ScopeTreeNode} from '../../entrypoints/formatter_worker/FormatterActions.js';
+export {DefinitionKind, ScopeKind, type ScopeTreeNode} from '../../entrypoints/formatter_worker/FormatterActions.js';
 
 let formatterWorkerPoolInstance: FormatterWorkerPool;
 

package/front_end/models/source_map_scopes/NamesResolver.ts

@@ -9,8 +9,6 @@ import * as Bindings from '../bindings/bindings.js';
 import * as Formatter from '../formatter/formatter.js';
 import * as TextUtils from '../text_utils/text_utils.js';
 
-import {scopeTreeForScript} from './ScopeTreeCache.js';
-
 interface CachedScopeMap {
   sourceMap: SDK.SourceMap.SourceMap|undefined;
   mappingPromise: Promise<{variableMapping: Map<string, string>, thisMapping: string|null}>;
@@ -55,7 +53,7 @@ scopeTree:
     return null;
   }
 
-  const scopeTree = await scopeTreeForScript(script);
+  const scopeTree = await SDK.ScopeTreeCache.scopeTreeForScript(script);
   if (!scopeTree) {
     return null;
   }

package/front_end/models/source_map_scopes/source_map_scopes.ts

@@ -4,10 +4,8 @@
 
 import * as NamesResolver from './NamesResolver.js';
 import * as ScopeChainModel from './ScopeChainModel.js';
-import * as ScopeTreeCache from './ScopeTreeCache.js';
 
 export {
   NamesResolver,
   ScopeChainModel,
-  ScopeTreeCache,
 };

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/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();
     });
   }