chrome-devtools-frontend 1.0.1014346 → 1.0.1015658

package/front_end/models/source_map_scopes/NamesResolver.ts

@@ -54,12 +54,19 @@ const computeScopeTree = async function(functionScope: SDK.DebuggerModel.ScopeCh
       functionEndLocation.columnNumber);
   const scopeText = text.extract(scopeRange);
   const scopeStart = text.toSourceRange(scopeRange).offset;
-  let prefix = 'function fui';
-  let scopeTree = await Formatter.FormatterWorkerPool.formatterWorkerPool().javaScriptScopeTree(prefix + scopeText);
+  // We wrap the scope in a class constructor. This handles the case where the
+  // scope is a (non-arrow) function and the case where it is a constructor
+  // (so that parsing 'super' calls succeeds).
+  let prefix = 'class DummyClass extends DummyBase { constructor';
+  let suffix = '}';
+  let scopeTree =
+      await Formatter.FormatterWorkerPool.formatterWorkerPool().javaScriptScopeTree(prefix + scopeText + suffix);
   if (!scopeTree) {
     // Try to parse the function as an arrow function.
-    prefix = 'let fui = ';
-    scopeTree = await Formatter.FormatterWorkerPool.formatterWorkerPool().javaScriptScopeTree(prefix + scopeText);
+    prefix = '';
+    suffix = '';
+    scopeTree =
+        await Formatter.FormatterWorkerPool.formatterWorkerPool().javaScriptScopeTree(prefix + scopeText + suffix);
   }
   if (!scopeTree) {
     return null;
@@ -174,6 +181,15 @@ export const scopeIdentifiers = async function(
   }
 };
 
+const identifierAndPunctuationRegExp = /^\s*([A-Za-z_$][A-Za-z_$0-9]*)\s*([.;,]?)\s*$/;
+
+const enum Punctuation {
+  None = 0,
+  Comma = 1,
+  Dot = 2,
+  Semicolon = 3,
+}
+
 const resolveScope =
     async(scope: SDK.DebuggerModel
               .ScopeChainEntry): Promise<{variableMapping: Map<string, string>, thisMapping: string | null}> => {
@@ -182,8 +198,6 @@ const resolveScope =
   const sourceMap = Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().sourceMapForScript(script);
 
   if (!cachedScopeMap || cachedScopeMap.sourceMap !== sourceMap) {
-    // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const identifiersPromise =
@@ -260,33 +274,95 @@ const resolveScope =
       script: SDK.Script.Script, sourceMap: SDK.SourceMap.SourceMap, name: string,
       position: {lineNumber: number, columnNumber: number},
       textCache: Map<string, TextUtils.Text.Text>): Promise<string|null> {
-    const startEntry = sourceMap.findEntry(position.lineNumber, position.columnNumber);
-    const endEntry = sourceMap.findEntry(position.lineNumber, position.columnNumber + name.length);
-    if (!startEntry || !endEntry || !startEntry.sourceURL || startEntry.sourceURL !== endEntry.sourceURL ||
-        !startEntry.sourceLineNumber || !startEntry.sourceColumnNumber || !endEntry.sourceLineNumber ||
-        !endEntry.sourceColumnNumber) {
+    const ranges = sourceMap.findEntryRanges(position.lineNumber, position.columnNumber);
+    if (!ranges) {
       return null;
     }
-    const sourceTextRange = new TextUtils.TextRange.TextRange(
-        startEntry.sourceLineNumber, startEntry.sourceColumnNumber, endEntry.sourceLineNumber,
-        endEntry.sourceColumnNumber);
+    // Extract the underlying text from the compiled code's range and make sure that
+    // it starts with the identifier |name|.
     const uiSourceCode =
         Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().uiSourceCodeForSourceMapSourceURL(
-            script.debuggerModel, startEntry.sourceURL, script.isContentScript());
+            script.debuggerModel, ranges.sourceURL, script.isContentScript());
     if (!uiSourceCode) {
       return null;
     }
-    const {content} = await uiSourceCode.requestContent();
-    if (!content) {
+    const compiledText = getTextFor((await script.requestContent()).content);
+    if (!compiledText) {
+      return null;
+    }
+    const compiledToken = compiledText.extract(ranges.range);
+    const parsedCompiledToken = extractIdentifier(compiledToken);
+    if (!parsedCompiledToken) {
       return null;
     }
-    let text = textCache.get(content);
-    if (!text) {
-      text = new TextUtils.Text.Text(content);
-      textCache.set(content, text);
+    const {name: compiledName, punctuation: compiledPunctuation} = parsedCompiledToken;
+    if (compiledName !== name) {
+      return null;
+    }
+
+    // Extract the mapped name from the source code range and ensure that the punctuation
+    // matches the one from the compiled code.
+    const sourceText = getTextFor((await uiSourceCode.requestContent()).content);
+    if (!sourceText) {
+      return null;
+    }
+    const sourceToken = sourceText.extract(ranges.sourceRange);
+    const parsedSourceToken = extractIdentifier(sourceToken);
+    if (!parsedSourceToken) {
+      return null;
+    }
+    const {name: sourceName, punctuation: sourcePunctuation} = parsedSourceToken;
+    // Accept the source name if it is followed by the same punctuation.
+    if (compiledPunctuation === sourcePunctuation) {
+      return sourceName;
+    }
+    // Let us also allow semicolons into commas since that it is a common transformation.
+    if (compiledPunctuation === Punctuation.Comma && sourcePunctuation === Punctuation.Semicolon) {
+      return sourceName;
+    }
+
+    return null;
+
+    function extractIdentifier(token: string): {name: string, punctuation: Punctuation}|null {
+      const match = token.match(identifierAndPunctuationRegExp);
+      if (!match) {
+        return null;
+      }
+
+      const name = match[1];
+      let punctuation: Punctuation|null = null;
+      switch (match[2]) {
+        case '.':
+          punctuation = Punctuation.Dot;
+          break;
+        case ',':
+          punctuation = Punctuation.Comma;
+          break;
+        case ';':
+          punctuation = Punctuation.Semicolon;
+          break;
+        case '':
+          punctuation = Punctuation.None;
+          break;
+        default:
+          console.error(`Name token parsing error: unexpected token "${match[2]}"`);
+          return null;
+      }
+
+      return {name, punctuation};
+    }
+
+    function getTextFor(content: string|null): TextUtils.Text.Text|null {
+      if (!content) {
+        return null;
+      }
+      let text = textCache.get(content);
+      if (!text) {
+        text = new TextUtils.Text.Text(content);
+        textCache.set(content, text);
+      }
+      return text;
     }
-    const originalIdentifier = text.extract(sourceTextRange).trim();
-    return /[a-zA-Z0-9_$]+/.test(originalIdentifier) ? originalIdentifier : null;
   }
 
   function findFunctionScope(): SDK.DebuggerModel.ScopeChainEntry|null {

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -1706,9 +1706,13 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
         break;
 
       case Node.ELEMENT_NODE: {
-        const pseudoType = node.pseudoType();
-        if (pseudoType) {
-          this.buildPseudoElementDOM(titleDOM, pseudoType);
+        let pseudoElementName = node.pseudoType();
+        if (pseudoElementName) {
+          const pseudoIdentifier = node.pseudoIdentifier();
+          if (pseudoIdentifier) {
+            pseudoElementName += `(${pseudoIdentifier})`;
+          }
+          this.buildPseudoElementDOM(titleDOM, pseudoElementName);
           break;
         }
 

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

@@ -14,8 +14,7 @@ import {crumbsToRender} from './ElementsBreadcrumbsUtils.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
 import type {DOMNode} from './Helper.js';
 
-import {NodeText} from './NodeText.js';
-import type {NodeTextData} from './NodeText.js';
+import * as NodeText from '../../../ui/components/node_text/node_text.js';
 
 const UIStrings = {
   /**
@@ -300,11 +299,11 @@ export class ElementsBreadcrumbs extends HTMLElement {
                       @mouseleave=${this.#onCrumbMouseLeave(crumb.node)}
                       @focus=${this.#onCrumbFocus(crumb.node)}
                       @blur=${this.#onCrumbBlur(crumb.node)}
-                    ><${NodeText.litTagName} data-node-title=${crumb.title.main} .data=${{
+                    ><${NodeText.NodeText.NodeText.litTagName} data-node-title=${crumb.title.main} .data=${{
                       nodeTitle: crumb.title.main,
                       nodeId: crumb.title.extras.id,
                       nodeClasses: crumb.title.extras.classes,
-                    } as NodeTextData}></${NodeText.litTagName}></a>
+                    } as NodeText.NodeText.NodeTextData}></${NodeText.NodeText.NodeText.litTagName}></a>
                   </li>`;
               })}
             </ul>

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

@@ -10,10 +10,9 @@ import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 import type {BooleanSetting, EnumSetting, Setting} from './LayoutPaneUtils.js';
 import type {LayoutElement} from './LayoutPaneUtils.js';
 
-import type {NodeTextData} from './NodeText.js';
-import {NodeText} from './NodeText.js';
 import layoutPaneStyles from '../layoutPane.css.js';
 import * as Input from '../../../ui/components/input/input.js';
+import * as NodeText from '../../../ui/components/node_text/node_text.js';
 // eslint-disable-next-line rulesdir/es_modules_import
 import inspectorCommonStyles from '../../../ui/legacy/inspectorCommon.css.js';
 
@@ -262,11 +261,11 @@ export class LayoutPane extends HTMLElement {
       <label data-element="true" class="checkbox-label">
         <input data-input="true" type="checkbox" .checked=${element.enabled} @change=${onElementToggle} />
         <span class="node-text-container" data-label="true" @mouseenter=${onMouseEnter} @mouseleave=${onMouseLeave}>
-          <${NodeText.litTagName} .data=${{
+          <${NodeText.NodeText.NodeText.litTagName} .data=${{
             nodeId: element.domId,
             nodeTitle: element.name,
             nodeClasses: element.domClasses,
-          } as NodeTextData}></${NodeText.litTagName}>
+          } as NodeText.NodeText.NodeTextData}></${NodeText.NodeText.NodeText.litTagName}>
         </span>
       </label>
       <label @keyup=${onColorLabelKeyUp} @keydown=${onColorLabelKeyDown} tabindex="0" title=${i18nString(UIStrings.chooseElementOverlayColor)} class="color-picker-label" style="background: ${element.color};">

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

@@ -5,11 +5,10 @@
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
+import * as NodeText from '../../../ui/components/node_text/node_text.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import type {DOMNode} from './Helper.js';
-import {NodeText} from './NodeText.js';
-import type {NodeTextData} from './NodeText.js';
 import queryContainerStyles from './queryContainer.css.js';
 
 const {render, html} = LitHtml;
@@ -90,13 +89,13 @@ export class QueryContainer extends HTMLElement {
         @click=${this.#onContainerLinkClick}
         @mouseenter=${this.#onContainerLinkMouseEnter}
         @mouseleave=${this.#onContainerLinkMouseLeave}
-      ><${NodeText.litTagName}
+      ><${NodeText.NodeText.NodeText.litTagName}
           data-node-title=${nodeTitle}
           .data=${{
         nodeTitle,
         nodeId: idToDisplay,
         nodeClasses: classesToDisplay,
-      } as NodeTextData}></${NodeText.litTagName}></a>
+      } as NodeText.NodeText.NodeTextData}></${NodeText.NodeText.NodeText.litTagName}></a>
       ${this.#isContainerLinkHovered ? this.#renderQueriedSizeDetails() : LitHtml.nothing}
     `, this.#shadow, {
       host: this,

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

@@ -15,7 +15,6 @@ import * as ElementsPanelLink from './ElementsPanelLink.js';
 import * as Helper from './Helper.js';
 import * as LayoutPane from './LayoutPane.js';
 import * as LayoutPaneUtils from './LayoutPaneUtils.js';
-import * as NodeText from './NodeText.js';
 import * as QueryContainer from './QueryContainer.js';
 import * as StylePropertyEditor from './StylePropertyEditor.js';
 
@@ -33,7 +32,6 @@ export {
   Helper,
   LayoutPane,
   LayoutPaneUtils,
-  NodeText,
   QueryContainer,
   StylePropertyEditor,
 };

package/front_end/panels/lighthouse/lighthouseStartView.css

@@ -18,7 +18,9 @@
 }
 
 .lighthouse-start-view-fr {
-  margin: 24px;
+  padding: 24px;
+  overflow: auto;
+  height: 100%;
 }
 
 .lighthouse-start-view header {

package/front_end/panels/sources/ScopeChainSidebarPane.ts

@@ -28,12 +28,11 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import * as Common from '../../core/common/common.js';
+import type * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
-import * as Bindings from '../../models/bindings/bindings.js';
 import * as SourceMapScopes from '../../models/source_map_scopes/source_map_scopes.js';
 import * as LinearMemoryInspector from '../../ui/components/linear_memory_inspector/linear_memory_inspector.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
@@ -76,10 +75,6 @@ const UIStrings = {
   *@description A context menu item in the Scope View of the Sources Panel
   */
   revealInMemoryInspectorPanel: 'Reveal in Memory Inspector panel',
-  /**
-  *@description Error message that shows up in the console if a buffer to be opened in the lienar memory inspector cannot be found.
-  */
-  couldNotOpenLinearMemory: 'Could not open linear memory inspector: failed locating buffer.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/sources/ScopeChainSidebarPane.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -310,24 +305,10 @@ export class OpenLinearMemoryInspector extends UI.Widget.VBox implements UI.Cont
     return openLinearMemoryInspectorInstance;
   }
 
-  private isMemoryObjectProperty(obj: SDK.RemoteObject.RemoteObject): boolean {
-    const isWasmOrBuffer = obj.type === 'object' && obj.subtype &&
-        LinearMemoryInspector.LinearMemoryInspectorController.ACCEPTED_MEMORY_TYPES.includes(obj.subtype);
-    if (isWasmOrBuffer) {
-      return true;
-    }
-
-    const isWasmDWARF = obj instanceof Bindings.DebuggerLanguagePlugins.ValueNode;
-    if (isWasmDWARF) {
-      return obj.inspectableAddress !== undefined;
-    }
-
-    return false;
-  }
-
   appendApplicableItems(event: Event, contextMenu: UI.ContextMenu.ContextMenu, target: Object): void {
     if (target instanceof ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement) {
-      if (target.property && target.property.value && this.isMemoryObjectProperty(target.property.value)) {
+      if (target.property && target.property.value &&
+          LinearMemoryInspector.LinearMemoryInspectorController.isMemoryObjectProperty(target.property.value)) {
         contextMenu.debugSection().appendItem(
             i18nString(UIStrings.revealInMemoryInspectorPanel),
             this.openMemoryInspector.bind(this, target.property.value));
@@ -337,26 +318,7 @@ export class OpenLinearMemoryInspector extends UI.Widget.VBox implements UI.Cont
 
   private async openMemoryInspector(obj: SDK.RemoteObject.RemoteObject): Promise<void> {
     const controller = LinearMemoryInspector.LinearMemoryInspectorController.LinearMemoryInspectorController.instance();
-    let address = 0;
-    let memoryObj: SDK.RemoteObject.RemoteObject = obj;
-
-    if (obj instanceof Bindings.DebuggerLanguagePlugins.ValueNode) {
-      const valueNode = obj;
-      address = valueNode.inspectableAddress || 0;
-      const callFrame = valueNode.callFrame;
-      const response = await obj.debuggerModel().agent.invoke_evaluateOnCallFrame({
-        callFrameId: callFrame.id,
-        expression: 'memories[0]',
-      });
-      const error = response.getError();
-      if (error) {
-        console.error(error);
-        Common.Console.Console.instance().error(i18nString(UIStrings.couldNotOpenLinearMemory));
-      }
-      const runtimeModel = obj.debuggerModel().runtimeModel();
-      memoryObj = runtimeModel.createRemoteObject(response.result);
-    }
     Host.userMetrics.linearMemoryInspectorRevealedFrom(Host.UserMetrics.LinearMemoryInspectorRevealedFrom.ContextMenu);
-    void controller.openInspectorView(memoryObj, address);
+    void controller.openInspectorView(obj, 0);
   }
 }

package/front_end/ui/components/linear_memory_inspector/LinearMemoryInspectorController.ts

@@ -4,6 +4,7 @@
 
 import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
+import * as i18n from '../../../core/i18n/i18n.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Protocol from '../../../generated/protocol.js';
 import * as UI from '../../legacy/legacy.js';
@@ -12,7 +13,17 @@ import type {Settings} from './LinearMemoryInspector.js';
 import {Events as LmiEvents, LinearMemoryInspectorPaneImpl} from './LinearMemoryInspectorPane.js';
 import type {ValueType, ValueTypeMode} from './ValueInterpreterDisplayUtils.js';
 import {Endianness, getDefaultValueTypeMapping} from './ValueInterpreterDisplayUtils.js';
+import * as Bindings from '../../../models/bindings/bindings.js';
 
+const UIStrings = {
+  /**
+  *@description Error message that shows up in the console if a buffer to be opened in the linear memory inspector cannot be found.
+  */
+  couldNotOpenLinearMemory: 'Could not open linear memory inspector: failed locating buffer.',
+};
+const str_ =
+    i18n.i18n.registerUIStrings('ui/components/linear_memory_inspector/LinearMemoryInspectorController.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const LINEAR_MEMORY_INSPECTOR_OBJECT_GROUP = 'linear-memory-inspector';
 const MEMORY_TRANSFER_MIN_CHUNK_SIZE = 1000;
 export const ACCEPTED_MEMORY_TYPES = ['webassemblymemory', 'typedarray', 'dataview', 'arraybuffer'];
@@ -66,6 +77,20 @@ async function getBufferFromObject(obj: SDK.RemoteObject.RemoteObject): Promise<
   return new SDK.RemoteObject.RemoteArrayBuffer(obj);
 }
 
+export function isMemoryObjectProperty(obj: SDK.RemoteObject.RemoteObject): boolean {
+  const isWasmOrBuffer = obj.type === 'object' && obj.subtype && ACCEPTED_MEMORY_TYPES.includes(obj.subtype);
+  if (isWasmOrBuffer) {
+    return true;
+  }
+
+  const isWasmDWARF = obj instanceof Bindings.DebuggerLanguagePlugins.ValueNode;
+  if (isWasmDWARF) {
+    return obj.inspectableAddress !== undefined;
+  }
+
+  return false;
+}
+
 type SerializableSettings = {
   valueTypes: ValueType[],
   valueTypeModes: [ValueType, ValueTypeMode][],
@@ -142,21 +167,52 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
     };
   }
 
+  static async retrieveDWARFMemoryObjectAndAddress(obj: SDK.RemoteObject.RemoteObject):
+      Promise<{obj: SDK.RemoteObject.RemoteObject, address: number}|undefined> {
+    if (!(obj instanceof Bindings.DebuggerLanguagePlugins.ValueNode)) {
+      return;
+    }
+
+    const valueNode = obj;
+    const address = valueNode.inspectableAddress || 0;
+    const callFrame = valueNode.callFrame;
+    const response = await obj.debuggerModel().agent.invoke_evaluateOnCallFrame({
+      callFrameId: callFrame.id,
+      expression: 'memories[0]',
+    });
+    const error = response.getError();
+    if (error) {
+      console.error(error);
+      Common.Console.Console.instance().error(i18nString(UIStrings.couldNotOpenLinearMemory));
+    }
+    const runtimeModel = obj.debuggerModel().runtimeModel();
+    obj = runtimeModel.createRemoteObject(response.result);
+    return {obj, address};
+  }
+
   async openInspectorView(obj: SDK.RemoteObject.RemoteObject, address?: number): Promise<void> {
-    if (address !== undefined) {
+    const response = await LinearMemoryInspectorController.retrieveDWARFMemoryObjectAndAddress(obj);
+    let memoryObj = obj;
+    let memoryAddress = address;
+    if (response !== undefined) {
+      memoryAddress = response.address;
+      memoryObj = response.obj;
+    }
+
+    if (memoryAddress !== undefined) {
       Host.userMetrics.linearMemoryInspectorTarget(
           Host.UserMetrics.LinearMemoryInspectorTarget.DWARFInspectableAddress);
-    } else if (obj.subtype === Protocol.Runtime.RemoteObjectSubtype.Arraybuffer) {
+    } else if (memoryObj.subtype === Protocol.Runtime.RemoteObjectSubtype.Arraybuffer) {
       Host.userMetrics.linearMemoryInspectorTarget(Host.UserMetrics.LinearMemoryInspectorTarget.ArrayBuffer);
-    } else if (obj.subtype === Protocol.Runtime.RemoteObjectSubtype.Dataview) {
+    } else if (memoryObj.subtype === Protocol.Runtime.RemoteObjectSubtype.Dataview) {
       Host.userMetrics.linearMemoryInspectorTarget(Host.UserMetrics.LinearMemoryInspectorTarget.DataView);
-    } else if (obj.subtype === Protocol.Runtime.RemoteObjectSubtype.Typedarray) {
+    } else if (memoryObj.subtype === Protocol.Runtime.RemoteObjectSubtype.Typedarray) {
       Host.userMetrics.linearMemoryInspectorTarget(Host.UserMetrics.LinearMemoryInspectorTarget.TypedArray);
     } else {
-      console.assert(obj.subtype === Protocol.Runtime.RemoteObjectSubtype.Webassemblymemory);
+      console.assert(memoryObj.subtype === Protocol.Runtime.RemoteObjectSubtype.Webassemblymemory);
       Host.userMetrics.linearMemoryInspectorTarget(Host.UserMetrics.LinearMemoryInspectorTarget.WebAssemblyMemory);
     }
-    const buffer = await getBufferFromObject(obj);
+    const buffer = await getBufferFromObject(memoryObj);
     const {internalProperties} = await buffer.object().getOwnProperties(false);
     const idProperty = internalProperties?.find(({name}) => name === '[[ArrayBufferData]]');
     const id = idProperty?.value?.value;
@@ -167,7 +223,7 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
     const memory = memoryProperty?.value;
 
     if (this.#bufferIdToRemoteObject.has(id)) {
-      this.#paneInstance.reveal(id, address);
+      this.#paneInstance.reveal(id, memoryAddress);
       void UI.ViewManager.ViewManager.instance().showView('linear-memory-inspector');
       return;
     }
@@ -176,7 +232,7 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
     this.#bufferIdToRemoteObject.set(id, buffer.object());
     const arrayBufferWrapper = new RemoteArrayBufferWrapper(buffer);
 
-    this.#paneInstance.create(id, title, arrayBufferWrapper, address);
+    this.#paneInstance.create(id, title, arrayBufferWrapper, memoryAddress);
     void UI.ViewManager.ViewManager.instance().showView('linear-memory-inspector');
   }
 

package/front_end/{panels/elements/components → ui/components/node_text}/NodeText.ts

@@ -2,8 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as ComponentHelpers from '../helpers/helpers.js';
+
 import nodeTextStyles from './nodeText.css.js';
 
 const {render, html} = LitHtml;

package/front_end/ui/components/node_text/node_text.ts

@@ -0,0 +1,9 @@
+// Copyright 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as NodeText from './NodeText.js';
+
+export {
+  NodeText,
+};

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -359,7 +359,7 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
     // TypedArrays DataViews are also supported, but showing the icon next to their
     // previews is quite a significant visual overhead, and users can easily get to
     // their buffers and open the memory inspector from there.
-    if (obj.type !== 'object' || (obj.subtype !== 'arraybuffer' && obj.subtype !== 'webassemblymemory')) {
+    if (!LinearMemoryInspector.LinearMemoryInspectorController.isMemoryObjectProperty(obj)) {
       return;
     }
     const memoryIcon = new IconButton.Icon.Icon();
@@ -369,12 +369,15 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
       width: '13px',
       height: '13px',
     };
-    memoryIcon.onclick = (event: MouseEvent): void => {
-      Host.userMetrics.linearMemoryInspectorRevealedFrom(Host.UserMetrics.LinearMemoryInspectorRevealedFrom.MemoryIcon);
-      void LinearMemoryInspector.LinearMemoryInspectorController.LinearMemoryInspectorController.instance()
-          .openInspectorView(obj);
+
+    memoryIcon.onclick = async(event: MouseEvent): Promise<void> => {
       event.stopPropagation();
+      const controller =
+          LinearMemoryInspector.LinearMemoryInspectorController.LinearMemoryInspectorController.instance();
+      Host.userMetrics.linearMemoryInspectorRevealedFrom(Host.UserMetrics.LinearMemoryInspectorRevealedFrom.MemoryIcon);
+      void controller.openInspectorView(obj, 0);
     };
+
     UI.Tooltip.Tooltip.install(memoryIcon, 'Reveal in Memory Inspector panel');
     element.classList.add('object-value-with-memory-icon');
     element.appendChild(memoryIcon);

package/front_end/ui/legacy/components/object_ui/objectValue.css

@@ -56,10 +56,7 @@
   display: inline-flex;
 }
 
-.object-value-arraybuffer devtools-icon,
-.object-value-dataview devtools-icon,
-.object-value-typedarray devtools-icon,
-.object-value-webassemblymemory devtools-icon {
+.object-value-with-memory-icon > devtools-icon {
   cursor: pointer;
 }
 

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "vpython third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.1014346"
+  "version": "1.0.1015658"
 }