chrome-devtools-frontend 1.0.1030070 → 1.0.1031400

package/front_end/third_party/codemirror.next/codemirror.next.js

@@ -1,2 +1 @@
-export{$ as cursorMatchingBracket,_ as closeBracketsKeymap,A as cpp,a$ as gutters,a0 as cursorSubwordBackward,a1 as cursorSubwordForward,a2 as indentLess,a3 as indentMore,a4 as insertNewlineAndIndent,a5 as selectMatchingBracket,a6 as selectSubwordBackward,a7 as selectSubwordForward,a8 as standardKeymap,a9 as toggleComment,a_ as GutterMarker,aA as Compartment,aa as history,aB as EditorState,ab as historyKeymap,aC as Facet,ac as redo,aD as MapMode,ad as redoSelection,aE as SelectionRange,ae as undo,aF as StateEffect,af as undoSelection,aG as StateEffectType,ag as css,aH as StateField,ah as html,aI as Transaction,ai as javascript,aJ as Range,aj as ensureSyntaxTree,aK as RangeSet,ak as indentOnInput,aL as RangeSetBuilder,al as indentUnit,aM as Line,am as codeFolding,aN as Text,an as foldGutter,aO as Decoration,ao as foldKeymap,ap as HighlightStyle,aP as drawSelection,aQ as EditorView,aq as syntaxHighlighting,ar as bracketMatching,aR as highlightSpecialChars,aS as MatchDecorator,as as StreamLanguage,at as StringStream,aT as placeholder,au as highlightSelectionMatches,aU as scrollPastEnd,aV as ViewPlugin,av as selectNextOccurrence,aw as Annotation,aW as ViewUpdate,ax as AnnotationType,aX as WidgetType,ay as ChangeDesc,aY as showPanel,az as ChangeSet,aZ as gutter,B as java,b0 as lineNumberMarkers,b1 as lineNumbers,b2 as repositionTooltips,b3 as showTooltip,b4 as tooltips,b5 as TreeCursor,b6 as highlightTree,b7 as StyleModule,D as json,e as LanguageSupport,F as markdown,g as NodeProp,G as php,h as NodeSet,H as python,I as shell,j as Tree,J as cssStreamParser,k as Language,K as wast,L as LRParser,l as syntaxTree,m as EditorSelection,M as xml,N as NodeType,n as Prec,O as acceptCompletion,o as keymap,P as Parser,Q as autocompletion,R as closeCompletion,S as completeAnyWord,T as Tag,t as tags,U as CompletionContext,V as currentCompletions,W as ifNotIn,X as selectedCompletion,y as clojure,Y as startCompletion,Z as closeBrackets,z as coffeescript}from"./chunk/codemirror.js";
-
+export{aw as Annotation,ax as AnnotationType,ay as ChangeDesc,az as ChangeSet,aA as Compartment,W as CompletionContext,aO as Decoration,m as EditorSelection,aB as EditorState,aQ as EditorView,aC as Facet,aS as GutterMarker,ao as HighlightStyle,L as LRParser,k as Language,e as LanguageSupport,aD as Line,aE as MapMode,aX as MatchDecorator,g as NodeProp,h as NodeSet,N as NodeType,P as Parser,n as Prec,aF as Range,aG as RangeSet,aH as RangeSetBuilder,aI as SelectionRange,aJ as StateEffect,aK as StateEffectType,aL as StateField,ar as StreamLanguage,as as StringStream,b7 as StyleModule,T as Tag,aM as Text,aN as Transaction,j as Tree,b5 as TreeCursor,b2 as ViewPlugin,b3 as ViewUpdate,b4 as WidgetType,O as acceptCompletion,Q as autocompletion,aj as bracketMatching,y as clojure,R as closeBrackets,S as closeBracketsKeymap,U as closeCompletion,ak as codeFolding,z as coffeescript,V as completeAnyWord,A as cpp,ag as css,J as cssStreamParser,X as currentCompletions,$ as cursorMatchingBracket,a0 as cursorSubwordBackward,a1 as cursorSubwordForward,aP as drawSelection,al as ensureSyntaxTree,am as foldGutter,an as foldKeymap,aR as gutter,aT as gutters,au as highlightSelectionMatches,aU as highlightSpecialChars,b6 as highlightTree,a2 as history,a3 as historyKeymap,ah as html,Y as ifNotIn,a4 as indentLess,a5 as indentMore,ap as indentOnInput,aq as indentUnit,a6 as insertNewlineAndIndent,B as java,ai as javascript,D as json,o as keymap,aV as lineNumberMarkers,aW as lineNumbers,F as markdown,G as php,aY as placeholder,H as python,a7 as redo,a8 as redoSelection,aZ as repositionTooltips,a_ as scrollPastEnd,a9 as selectMatchingBracket,av as selectNextOccurrence,aa as selectSubwordBackward,ab as selectSubwordForward,Z as selectedCompletion,I as shell,a$ as showPanel,b0 as showTooltip,ac as standardKeymap,_ as startCompletion,at as syntaxHighlighting,l as syntaxTree,t as tags,ad as toggleComment,b1 as tooltips,ae as undo,af as undoSelection,K as wast,M as xml}from"./chunk/codemirror.js";

package/front_end/ui/components/data_grid/DataGrid.ts

@@ -58,6 +58,7 @@ export interface DataGridData {
   activeSort: SortState|null;
   contextMenus?: DataGridContextMenusConfiguration;
   label?: string;
+  paddingRowsCount?: number;
 }
 
 const enum UserScrollState {
@@ -69,7 +70,6 @@ const enum UserScrollState {
 const KEYS_TREATED_AS_CLICKS = new Set([' ', 'Enter']);
 
 const ROW_HEIGHT_PIXELS = 18;
-const PADDING_ROWS_COUNT = 10;
 
 export class DataGrid extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-data-grid`;
@@ -82,6 +82,7 @@ export class DataGrid extends HTMLElement {
   #userScrollState: UserScrollState = UserScrollState.NOT_SCROLLED;
   #contextMenus?: DataGridContextMenusConfiguration = undefined;
   #label?: string = undefined;
+  #paddingRowsCount = 10;
   #currentResize: {
     rightCellCol: HTMLTableColElement,
     leftCellCol: HTMLTableColElement,
@@ -139,6 +140,7 @@ export class DataGrid extends HTMLElement {
       activeSort: this.#sortState,
       contextMenus: this.#contextMenus,
       label: this.#label,
+      paddingRowsCount: this.#paddingRowsCount,
     };
   }
 
@@ -171,6 +173,10 @@ export class DataGrid extends HTMLElement {
       this.#cellToFocusIfUserTabsIn = calculateFirstFocusableCell({columns: this.#columns, rows: this.#rows});
     }
 
+    if (data.paddingRowsCount !== undefined) {
+      this.#paddingRowsCount = data.paddingRowsCount;
+    }
+
     if (this.#hasRenderedAtLeastOnce && this.#userHasCellFocused()) {
       const [selectedColIndex, selectedRowIndex] = this.#tabbableCell();
       const columnOutOfBounds = selectedColIndex > this.#columns.length;
@@ -220,15 +226,14 @@ export class DataGrid extends HTMLElement {
       return;
     }
 
-    void coordinator.read(() => {
-      const wrapper = this.#shadow.querySelector('.wrapping-container');
-      if (!wrapper) {
-        return;
-      }
+    const wrapper = this.#shadow.querySelector('.wrapping-container');
+    if (!wrapper) {
+      return;
+    }
+
+    void coordinator.scroll(() => {
       const scrollHeight = wrapper.scrollHeight;
-      void coordinator.scroll(() => {
-        wrapper.scrollTo(0, scrollHeight);
-      });
+      wrapper.scrollTo(0, scrollHeight);
     });
   }
 
@@ -643,7 +648,7 @@ export class DataGrid extends HTMLElement {
         scrollTop = wrapper.scrollTop;
         clientHeight = wrapper.clientHeight;
       }
-      const padding = ROW_HEIGHT_PIXELS * PADDING_ROWS_COUNT;
+      const padding = ROW_HEIGHT_PIXELS * this.#paddingRowsCount;
       let topVisibleRow = Math.floor((scrollTop - padding) / ROW_HEIGHT_PIXELS);
       let bottomVisibleRow = Math.ceil((scrollTop + clientHeight + padding) / ROW_HEIGHT_PIXELS);
 

package/front_end/ui/components/data_grid/DataGridController.ts

@@ -31,6 +31,7 @@ export interface DataGridControllerData {
   initialSort?: SortState;
   contextMenus?: DataGridContextMenusConfiguration;
   label?: string;
+  paddingRowsCount?: number;
 }
 
 export class DataGridController extends HTMLElement {
@@ -55,6 +56,8 @@ export class DataGridController extends HTMLElement {
   #sortState: Readonly<SortState>|null = null;
   #filters: readonly TextUtils.TextUtils.ParsedFilter[] = [];
 
+  #paddingRowsCount?: number;
+
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [dataGridControllerStyles];
   }
@@ -66,6 +69,7 @@ export class DataGridController extends HTMLElement {
       filters: this.#filters,
       contextMenus: this.#contextMenus,
       label: this.#label,
+      paddingRowsCount: this.#paddingRowsCount,
     };
   }
 
@@ -88,6 +92,8 @@ export class DataGridController extends HTMLElement {
       this.#sortRows(this.#sortState);
     }
 
+    this.#paddingRowsCount = data.paddingRowsCount;
+
     this.#render();
   }
 
@@ -222,6 +228,7 @@ export class DataGridController extends HTMLElement {
           activeSort: this.#sortState,
           contextMenus: this.#contextMenus,
           label: this.#label,
+          paddingRowsCount: this.#paddingRowsCount,
         } as DataGridData}
         @columnheaderclick=${this.#onColumnHeaderClick}
         @contextmenucolumnsortclick=${this.#onContextMenuColumnSortClick}

package/front_end/ui/components/docs/building-ui-documentation/StylingComponents.md

@@ -0,0 +1,64 @@
+# Styling Components
+
+Components are styled by a CSS file that is co-located next to the TypeScript source file. The only difference in file name is the extension and that for CSS files, the first letter is lowercase:
+
+```
+- ElementsBreadcrumbs.ts
+- elementsBreadcrumbs.css
+```
+
+To import this file you use a regular `import` statement, and import the filename with `.js` appended:
+
+```ts
+import elementsBreadcrumbsStyles from './elementsBreadcrumbs.css.js';
+```
+
+As part of the build tool step, each CSS file is converted into a JS file that exports a `CSSStyleSheet` instance. This is done by Rollup in [`generate_css_js_files`](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/scripts/build/generate_css_js_files.js;l=1;drc=28af9fbe783d82aa64bfa5f9b9509572dc2b3efe).
+
+## `BUILD.gn` changes
+
+Use the `generate_css` action (`scripts/build/ninja/generate_css.gni`) to declare stylesheets:
+
+```gn
+import("scripts/build/ninja/generate_css.gni") // Edit path correctly: this must be relative
+
+generate_css("css_files") {
+  sources = [ "elementsBreadcrumbs.css"]
+}
+```
+
+And then add `:css_files` as a dependency to the `devtools_entrypoint`:
+
+```gn
+devtools_entrypoint("bundle") {
+  deps = [  ":css_files" ,  "..."]
+}
+```
+
+## Adopting the stylesheet
+
+Importing the stylesheet is not enough to have it apply to the component's ShadowDOM, it must be adopted. The `connectedCallback` method is the best place for this:
+
+```ts
+connectedCallback() {
+  this.#shadow.adoptedStyleSheets = [elementsBreadcrumbs];
+}
+```
+
+## Tips for writing CSS.
+
+Use `:host` to style the component itself. By default elements are `display: inline`. Often it can be useful to set `display: block`.
+
+Remember to use theme colors (`var(--color-text-primary)`) when styling elements to ensure consistency across DevTools.
+
+If you want your component to have its colors configurable by users, consider defining `--override` variables. In your component's CSS, you would have something like:
+
+```css
+:host {
+  color: var(--override-custom-color, var(--color-text-primary));
+}
+```
+
+This allows someone to define that `--override-custom-color` variable, but also ensures if it isn't defined that the default `color-text-primary` will be used. **Be careful with this!** We try to ensure consistent colors across DevTools; so most of the time you shouldn't allow configurable colors and should use the correct theme variables.
+
+

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

@@ -160,12 +160,11 @@ export class LinearMemoryInspector extends HTMLElement {
       throw new Error('Memory offset has to be greater or equal to zero.');
     }
 
-    if (data.highlightInfo !== undefined) {
+    if (data.highlightInfo) {
       if (data.highlightInfo.size < 0) {
         throw new Error('Object size has to be greater than or equal to zero');
       }
-      if (data.highlightInfo.startAddress > data.memoryOffset + data.memory.length ||
-          data.highlightInfo.startAddress < 0) {
+      if (data.highlightInfo.startAddress < 0 || data.highlightInfo.startAddress >= data.outerMemoryLength) {
         throw new Error('Object start address is out of bounds.');
       }
     }

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

@@ -164,6 +164,21 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
     return await memoryWrapper.getRange(start, chunkEnd);
   }
 
+  async evaluateExpression(callFrame: SDK.DebuggerModel.CallFrame, expressionName: string):
+      Promise<SDK.RemoteObject.RemoteObject|undefined> {
+    const result = await callFrame.evaluate({expression: expressionName});
+    if ('error' in result) {
+      console.error(`Tried to evaluate the expression '${expressionName}' but got an error: ${result.error}`);
+      return undefined;
+    }
+    if ('exceptionDetails' in result && result?.exceptionDetails?.text) {
+      console.error(
+          `Tried to evaluate the expression '${expressionName}' but got an exception: ${result.exceptionDetails.text}`);
+      return undefined;
+    }
+    return result.object;
+  }
+
   saveSettings(data: Settings): void {
     const valueTypes = Array.from(data.valueTypes);
     const modes = [...data.modes];
@@ -233,14 +248,15 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
   // This function returns the size of the source language value represented
   // by the ValueNode. If the value is a pointer, the function returns the size of
   // the pointed-to value. If the pointed-to value is also a pointer, it returns
-  // the size of the pointer (usually 4 bytes) to stay consistent with the DWARF extension.
+  // the size of the pointer (usually 4 bytes). This is the convention taken
+  // by the DWARF extension.
   // > double x = 42.0;
   // > double *ptr = &x;
   // > double **dblptr = &ptr;
   //
   // retrieveObjectSize(ptr_ValueNode) -> 8, the size of a double
   // retrieveObjectSize(dblptr_ValueNode) -> 4, the size of a pointer
-  static retrieveObjectSize(obj: Bindings.DebuggerLanguagePlugins.ValueNode): number {
+  static extractObjectSize(obj: Bindings.DebuggerLanguagePlugins.ValueNode): number {
     let typeInfo = obj.sourceType.typeInfo;
     const pointerMembers = typeInfo.members.filter(member => member.name === '*');
     if (pointerMembers.length === 1) {
@@ -257,7 +273,34 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
     return typeInfo.size;
   }
 
-  async openInspectorView(obj: SDK.RemoteObject.RemoteObject, address?: number): Promise<void> {
+  // The object type description corresponds to the type of the highlighted memory
+  // that the user sees in the memory inspector. For pointers, we highlight the pointed to object.
+  //
+  // Example: The variable `x` has the type `int *`. Assume that `x` points to the value 3.
+  // -> The memory inspector will jump to the address where 3 is stored.
+  // -> The memory inspector will highlight the bytes that represent the 3.
+  // -> The object type description of what we show will thus be `int` and not `int *`.
+  static extractObjectTypeDescription(obj: Bindings.DebuggerLanguagePlugins.ValueNode): string {
+    const objType = obj.description;
+    if (!objType) {
+      return '';
+    }
+    const lastChar = objType.charAt(objType.length - 1);
+    const secondToLastChar = objType.charAt(objType.length - 2);
+    const isPointerType = lastChar === '*' || lastChar === '&';
+    const isOneLevelPointer = secondToLastChar === ' ';
+    if (!isPointerType) {
+      return objType;
+    }
+    if (isOneLevelPointer) {
+      // For example, 'int *'and 'int &' become 'int'.
+      return objType.slice(0, objType.length - 2);
+    }
+    // For example, 'int **' becomes 'int *'.
+    return objType.slice(0, objType.length - 1);
+  }
+
+  async openInspectorView(obj: SDK.RemoteObject.RemoteObject, address?: number, expression?: string): Promise<void> {
     const response = await LinearMemoryInspectorController.retrieveDWARFMemoryObjectAndAddress(obj);
     let memoryObj = obj;
     let memoryAddress = address;
@@ -288,8 +331,8 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
     }
     const memoryProperty = internalProperties?.find(({name}) => name === '[[WebAssemblyMemory]]');
     const memory = memoryProperty?.value;
-    const highlightInfo = LinearMemoryInspectorController.extractHighlightInfo(obj, memoryAddress);
-    if (highlightInfo !== undefined) {
+    const highlightInfo = LinearMemoryInspectorController.extractHighlightInfo(obj, expression);
+    if (highlightInfo) {
       this.#setHighlightInfo(id, highlightInfo);
     } else {
       this.#resetHighlightInfo(id);
@@ -308,17 +351,21 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
     void UI.ViewManager.ViewManager.instance().showView('linear-memory-inspector');
   }
 
-  static extractHighlightInfo(obj: SDK.RemoteObject.RemoteObject, memoryAddress?: number): HighlightInfo|undefined {
+  static extractHighlightInfo(obj: SDK.RemoteObject.RemoteObject, expression?: string): HighlightInfo|undefined {
+    if (!(obj instanceof Bindings.DebuggerLanguagePlugins.ValueNode)) {
+      return undefined;
+    }
+
     let highlightInfo;
-    if (obj instanceof Bindings.DebuggerLanguagePlugins.ValueNode) {
-      try {
-        highlightInfo = {
-          startAddress: memoryAddress || 0,
-          size: LinearMemoryInspectorController.retrieveObjectSize(obj),
-        };
-      } catch (err) {
-        highlightInfo = undefined;
-      }
+    try {
+      highlightInfo = {
+        startAddress: obj.inspectableAddress || 0,
+        size: LinearMemoryInspectorController.extractObjectSize(obj),
+        name: expression,
+        type: LinearMemoryInspectorController.extractObjectTypeDescription(obj),
+      };
+    } catch (err) {
+      highlightInfo = undefined;
     }
     return highlightInfo;
   }
@@ -337,8 +384,16 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
     const debuggerModel = event.data;
     for (const [bufferId, remoteObject] of this.#bufferIdToRemoteObject) {
       if (debuggerModel.runtimeModel() === remoteObject.runtimeModel()) {
-        this.#resetHighlightInfo(bufferId);
-        this.#paneInstance.refreshView(bufferId);
+        const topCallFrame = debuggerModel.debuggerPausedDetails()?.callFrames[0];
+        if (topCallFrame) {
+          void this
+              .updateHighlightedMemory(bufferId, topCallFrame)
+              // Need to call refreshView in the callback to trigger re-render.
+              .then(() => this.#paneInstance.refreshView(bufferId));
+        } else {
+          this.#resetHighlightInfo(bufferId);
+          this.#paneInstance.refreshView(bufferId);
+        }
       }
     }
   }
@@ -355,4 +410,29 @@ export class LinearMemoryInspectorController extends SDK.TargetManager.SDKModelO
     this.#bufferIdToRemoteObject.delete(bufferId);
     this.#resetHighlightInfo(bufferId);
   }
+
+  async updateHighlightedMemory(bufferId: string, callFrame: SDK.DebuggerModel.CallFrame): Promise<void> {
+    const oldHighlightInfo = this.getHighlightInfo(bufferId);
+    const expressionName = oldHighlightInfo?.name;
+    if (!oldHighlightInfo || !expressionName) {
+      this.#resetHighlightInfo(bufferId);
+      return;
+    }
+    const obj = await this.evaluateExpression(callFrame, expressionName);
+    if (!obj) {
+      this.#resetHighlightInfo(bufferId);
+      return;
+    }
+
+    const newHighlightInfo = LinearMemoryInspectorController.extractHighlightInfo(obj, expressionName);
+    if (!newHighlightInfo || !this.#pointToSameMemoryObject(newHighlightInfo, oldHighlightInfo)) {
+      this.#resetHighlightInfo(bufferId);
+    } else {
+      this.#setHighlightInfo(bufferId, newHighlightInfo);
+    }
+  }
+
+  #pointToSameMemoryObject(highlightInfoA: HighlightInfo, highlightInfoB: HighlightInfo): boolean {
+    return highlightInfoA.type === highlightInfoB.type && highlightInfoA.startAddress === highlightInfoB.startAddress;
+  }
 }

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

@@ -226,7 +226,7 @@ class LinearMemoryInspectorView extends UI.Widget.VBox {
     const highlightInfo = LinearMemoryInspectorController.instance().getHighlightInfo(this.#tabId);
     if (highlightInfo !== undefined) {
       if (highlightInfo.startAddress < 0 || highlightInfo.startAddress >= this.#memoryWrapper.length()) {
-        throw new Error('Highlight info start address is out of bounds.');
+        throw new Error('HighlightInfo start address is out of bounds.');
       }
       if (highlightInfo.size <= 0) {
         throw new Error('Highlight size must be a positive number.');

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

@@ -5,4 +5,8 @@
 export interface HighlightInfo {
   startAddress: number;
   size: number;
+  // If the inspector is opened from a different UI location
+  // than the scope view, we don't have guaranteed access to the name.
+  name?: string;
+  type: string;
 }

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

@@ -386,16 +386,17 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
 
   static createPropertyValueWithCustomSupport(
       value: SDK.RemoteObject.RemoteObject, wasThrown: boolean, showPreview: boolean, parentElement?: Element,
-      linkifier?: Components.Linkifier.Linkifier): ObjectPropertyValue {
+      linkifier?: Components.Linkifier.Linkifier, variableName?: string): ObjectPropertyValue {
     if (value.customPreview()) {
       const result = (new CustomPreviewComponent(value)).element;
       result.classList.add('object-properties-section-custom-section');
       return new ObjectPropertyValue(result);
     }
-    return ObjectPropertiesSection.createPropertyValue(value, wasThrown, showPreview, parentElement, linkifier);
+    return ObjectPropertiesSection.createPropertyValue(
+        value, wasThrown, showPreview, parentElement, linkifier, variableName);
   }
 
-  static appendMemoryIcon(element: Element, obj: SDK.RemoteObject.RemoteObject): void {
+  static appendMemoryIcon(element: Element, obj: SDK.RemoteObject.RemoteObject, variableName?: string): void {
     // We show the memory icon only on ArrayBuffer, WebAssembly.Memory and DWARF memory instances.
     // 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
@@ -418,7 +419,7 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
       const controller =
           LinearMemoryInspector.LinearMemoryInspectorController.LinearMemoryInspectorController.instance();
       Host.userMetrics.linearMemoryInspectorRevealedFrom(Host.UserMetrics.LinearMemoryInspectorRevealedFrom.MemoryIcon);
-      void controller.openInspectorView(obj);
+      void controller.openInspectorView(obj, undefined /* address */, variableName);
     };
 
     UI.Tooltip.Tooltip.install(memoryIcon, 'Reveal in Memory Inspector panel');
@@ -428,7 +429,7 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
 
   static createPropertyValue(
       value: SDK.RemoteObject.RemoteObject, wasThrown: boolean, showPreview: boolean, parentElement?: Element,
-      linkifier?: Components.Linkifier.Linkifier): ObjectPropertyValue {
+      linkifier?: Components.Linkifier.Linkifier, variableName?: string): ObjectPropertyValue {
     let propertyValue;
     const type = value.type;
     const subtype = value.subtype;
@@ -464,7 +465,7 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
         propertyValue.element.textContent = description;
         UI.Tooltip.Tooltip.install(propertyValue.element as HTMLElement, description);
       }
-      this.appendMemoryIcon(valueElement, value);
+      this.appendMemoryIcon(valueElement, value, variableName);
     }
 
     if (wasThrown) {
@@ -1090,7 +1091,8 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     } else if (this.property.value) {
       const showPreview = this.property.name !== '[[Prototype]]';
       this.propertyValue = ObjectPropertiesSection.createPropertyValueWithCustomSupport(
-          this.property.value, this.property.wasThrown, showPreview, this.listItemElement, this.linkifier);
+          this.property.value, this.property.wasThrown, showPreview, this.listItemElement, this.linkifier,
+          this.path() /* variableName */);
       this.valueElement = (this.propertyValue.element as HTMLElement);
     } else if (this.property.getter) {
       this.valueElement = document.createElement('span');

package/front_end/ui/legacy/components/source_frame/ImageView.ts

@@ -95,7 +95,7 @@ export class ImageView extends UI.View.SimpleView {
   private readonly mimeTypeLabel: UI.Toolbar.ToolbarText;
   private readonly container: HTMLElement;
   private imagePreviewElement: HTMLImageElement;
-  private cachedContent?: string|null;
+  private cachedContent?: TextUtils.ContentProvider.DeferredContent;
   constructor(mimeType: string, contentProvider: TextUtils.ContentProvider.ContentProvider) {
     super(i18nString(UIStrings.image));
     this.registerRequiredCSS(imageViewStyles);
@@ -153,20 +153,21 @@ export class ImageView extends UI.View.SimpleView {
   }
 
   private async updateContentIfNeeded(): Promise<void> {
-    const {content} = await this.contentProvider.requestContent();
-    if (this.cachedContent === content) {
+    const content = await this.contentProvider.requestContent();
+    if (this.cachedContent?.content === content.content) {
       return;
     }
 
-    const contentEncoded = await this.contentProvider.contentEncoded();
     this.cachedContent = content;
-    const imageSrc = TextUtils.ContentProvider.contentAsDataURL(content, this.mimeType, contentEncoded) || this.url;
+    const imageSrc =
+        TextUtils.ContentProvider.contentAsDataURL(content.content, this.mimeType, content.isEncoded) || this.url;
     const loadPromise = new Promise(x => {
       this.imagePreviewElement.onload = x;
     });
     this.imagePreviewElement.src = imageSrc;
     this.imagePreviewElement.alt = i18nString(UIStrings.imageFromS, {PH1: this.url});
-    const size = content && !contentEncoded ? content.length : Platform.StringUtilities.base64ToSize(content);
+    const size = content.content && !content.isEncoded ? content.content.length :
+                                                         Platform.StringUtilities.base64ToSize(content.content);
     this.sizeLabel.setText(Platform.NumberUtilities.bytesToString(size));
     await loadPromise;
     this.dimensionsLabel.setText(i18nString(
@@ -203,13 +204,11 @@ export class ImageView extends UI.View.SimpleView {
   }
 
   private async saveImage(): Promise<void> {
-    const contentEncoded = await this.contentProvider.contentEncoded();
-    if (!this.cachedContent) {
+    if (!this.cachedContent || !this.cachedContent.content) {
       return;
     }
-    const cachedContent = this.cachedContent;
-    const imageDataURL =
-        TextUtils.ContentProvider.contentAsDataURL(cachedContent, this.mimeType, contentEncoded, '', false);
+    const imageDataURL = TextUtils.ContentProvider.contentAsDataURL(
+        this.cachedContent.content, this.mimeType, this.cachedContent.isEncoded, '', false);
 
     if (!imageDataURL) {
       return;

package/front_end/ui/legacy/components/source_frame/PreviewFactory.ts

@@ -45,7 +45,7 @@ export class PreviewFactory {
     }
 
     let content: string = deferredContent.content;
-    if (await provider.contentEncoded()) {
+    if (deferredContent.isEncoded) {
       content = window.atob(content);
     }
 

package/front_end/ui/legacy/components/source_frame/SourceFrame.ts

@@ -460,6 +460,55 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
         }
       }
 
+      // If the input is wasm but v8-based wasm disassembly failed, fall back to wasmparser for backwards compatibility.
+      if (content && this.contentType === 'application/wasm' && !this.wasmDisassemblyInternal) {
+        const worker = Common.Worker.WorkerWrapper.fromURL(
+            new URL('../../../../entrypoints/wasmparser_worker/wasmparser_worker-entrypoint.js', import.meta.url));
+        const promise = new Promise<{
+          lines: string[],
+          offsets: number[],
+          functionBodyOffsets: {
+            start: number,
+            end: number,
+          }[],
+        }>((resolve, reject) => {
+          worker.onmessage =
+              // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration)
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              ({data}: MessageEvent<any>): void => {
+                if ('event' in data) {
+                  switch (data.event) {
+                    case 'progress':
+                      progressIndicator.setWorked(data.params.percentage);
+                      break;
+                  }
+                } else if ('method' in data) {
+                  switch (data.method) {
+                    case 'disassemble':
+                      if ('error' in data) {
+                        reject(data.error);
+                      } else if ('result' in data) {
+                        resolve(data.result);
+                      }
+                      break;
+                  }
+                }
+              };
+          worker.onerror = reject;
+        });
+        worker.postMessage({method: 'disassemble', params: {content}});
+        try {
+          const {lines, offsets, functionBodyOffsets} = await promise;
+          this.rawContent = content = CodeMirror.Text.of(lines);
+          this.wasmDisassemblyInternal =
+              new Common.WasmDisassembly.WasmDisassembly(lines, offsets, functionBodyOffsets);
+        } catch (e) {
+          this.rawContent = content = error = e.message;
+        } finally {
+          worker.terminate();
+        }
+      }
+
       progressIndicator.setWorked(100);
       progressIndicator.done();