chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

package/front_end/ui/legacy/components/source_frame/BinaryResourceViewFactory.test.ts

@@ -5,16 +5,18 @@
 import * as Common from '../../../../core/common/common.js';
 import type * as Platform from '../../../../core/platform/platform.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
+import {raf} from '../../../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../../../testing/EnvironmentHelpers.js';
 
 import * as SourceFrame from './source_frame.js';
 
 describeWithEnvironment('BinaryResourceViewFactory', () => {
   it('interprets base64 content correctly', async () => {
-    const base64content = 'c2VuZGluZyB0aGlzIHV0Zi04IHN0cmluZyBhcyBhIGJpbmFyeSBtZXNzYWdlLi4u';
+    const base64content = new TextUtils.ContentData.ContentData(
+        'c2VuZGluZyB0aGlzIHV0Zi04IHN0cmluZyBhcyBhIGJpbmFyeSBtZXNzYWdlLi4u', true, '');
     const factory = new SourceFrame.BinaryResourceViewFactory.BinaryResourceViewFactory(
-        base64content, 'http://example.com' as Platform.DevToolsPath.UrlString,
-        Common.ResourceType.resourceTypes.WebSocket);
+        TextUtils.StreamingContentData.StreamingContentData.from(base64content),
+        'http://example.com' as Platform.DevToolsPath.UrlString, Common.ResourceType.resourceTypes.WebSocket);
 
     async function getResourceText(view: SourceFrame.ResourceSourceFrame.ResourceSourceFrame): Promise<string> {
       const contentData =
@@ -25,13 +27,56 @@ describeWithEnvironment('BinaryResourceViewFactory', () => {
     assert.strictEqual(
         await getResourceText(factory.createBase64View()),
         'c2VuZGluZyB0aGlzIHV0Zi04IHN0cmluZyBhcyBhIGJpbmFyeSBtZXNzYWdlLi4u');
-    assert.strictEqual(
-        await getResourceText(factory.createHexView()),
-        `00000000: 7365 6e64 696e 6720 7468 6973 2075 7466  sending this utf
-00000001: 2d38 2073 7472 696e 6720 6173 2061 2062  -8 string as a b
-00000002: 696e 6172 7920 6d65 7373 6167 652e 2e2e  inary message...
-`);
+    assert.instanceOf(factory.createHexView(), SourceFrame.StreamingContentHexView.StreamingContentHexView);
     assert.strictEqual(
         await getResourceText(factory.createUtf8View()), 'sending this utf-8 string as a binary message...');
   });
+
+  it('returns the right content for the "copy-to-clipboard" getters', async () => {
+    const base64content = new TextUtils.ContentData.ContentData(
+        'c2VuZGluZyB0aGlzIHV0Zi04IHN0cmluZyBhcyBhIGJpbmFyeSBtZXNzYWdlLi4u', true, '');
+    const factory = new SourceFrame.BinaryResourceViewFactory.BinaryResourceViewFactory(
+        TextUtils.StreamingContentData.StreamingContentData.from(base64content),
+        'http://example.com' as Platform.DevToolsPath.UrlString, Common.ResourceType.resourceTypes.WebSocket);
+
+    assert.strictEqual(factory.base64(), 'c2VuZGluZyB0aGlzIHV0Zi04IHN0cmluZyBhcyBhIGJpbmFyeSBtZXNzYWdlLi4u');
+    assert.strictEqual(
+        factory.hex(),
+        '73656e64696e672074686973207574662d3820737472696e6720617320612062696e617279206d6573736167652e2e2e');
+    assert.strictEqual(factory.utf8(), 'sending this utf-8 string as a binary message...');
+  });
+
+  it('produces views for utf8/base64 that update when the StreamingContentData changes', async () => {
+    const base64content = new TextUtils.ContentData.ContentData(
+        'c2VuZGluZyB0aGlzIHV0Zi04IHN0cmluZyBhcyBhIGJpbmFyeSBtZXNzYWdlLi4u', true, '');
+    const streamingContent = TextUtils.StreamingContentData.StreamingContentData.from(base64content);
+    const factory = new SourceFrame.BinaryResourceViewFactory.BinaryResourceViewFactory(
+        streamingContent, 'http://example.com' as Platform.DevToolsPath.UrlString,
+        Common.ResourceType.resourceTypes.WebSocket);
+
+    const utf8View = factory.createUtf8View();
+    utf8View.markAsRoot();
+    utf8View.show(document.body);
+    const base64View = factory.createBase64View();
+    base64View.markAsRoot();
+    base64View.show(document.body);
+
+    await raf();
+    assert.strictEqual(utf8View.textEditor.state.doc.toString(), 'sending this utf-8 string as a binary message...');
+    assert.strictEqual(
+        base64View.textEditor.state.doc.toString(), 'c2VuZGluZyB0aGlzIHV0Zi04IHN0cmluZyBhcyBhIGJpbmFyeSBtZXNzYWdlLi4u');
+
+    streamingContent.addChunk(window.btoa('\nadded another line'));
+
+    await raf();
+    assert.strictEqual(
+        utf8View.textEditor.state.doc.toString(),
+        'sending this utf-8 string as a binary message...\nadded another line');
+    assert.strictEqual(
+        base64View.textEditor.state.doc.toString(),
+        'c2VuZGluZyB0aGlzIHV0Zi04IHN0cmluZyBhcyBhIGJpbmFyeSBtZXNzYWdlLi4uCmFkZGVkIGFub3RoZXIgbGluZQ==');
+
+    utf8View.detach();
+    base64View.detach();
+  });
 });

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

@@ -7,148 +7,74 @@ import type * as Platform from '../../../../core/platform/platform.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 
 import {ResourceSourceFrame} from './ResourceSourceFrame.js';
+import {StreamingContentHexView} from './StreamingContentHexView.js';
 
 export class BinaryResourceViewFactory {
-  private base64content: string;
+  private streamingContent: TextUtils.StreamingContentData.StreamingContentData;
   private readonly contentUrl: Platform.DevToolsPath.UrlString;
   private readonly resourceType: Common.ResourceType.ResourceType;
-  private arrayPromise: Promise<Uint8Array>|null;
-  private hexPromise: Promise<string>|null;
-  private utf8Promise: Promise<string>|null;
+
   constructor(
-      base64content: string, contentUrl: Platform.DevToolsPath.UrlString,
+      content: TextUtils.StreamingContentData.StreamingContentData, contentUrl: Platform.DevToolsPath.UrlString,
       resourceType: Common.ResourceType.ResourceType) {
-    this.base64content = base64content;
+    this.streamingContent = content;
     this.contentUrl = contentUrl;
     this.resourceType = resourceType;
-    this.arrayPromise = null;
-    this.hexPromise = null;
-    this.utf8Promise = null;
   }
 
-  private async fetchContentAsArray(): Promise<Uint8Array> {
-    if (!this.arrayPromise) {
-      this.arrayPromise = new Promise(async resolve => {
-        const fetchResponse = await fetch('data:;base64,' + this.base64content);
-        resolve(new Uint8Array(await fetchResponse.arrayBuffer()));
-      });
-    }
-    return await this.arrayPromise;
-  }
-
-  async hex(): Promise<string> {
-    if (!this.hexPromise) {
-      this.hexPromise = new Promise(async resolve => {
-        const content = await this.fetchContentAsArray();
-        const hexString = BinaryResourceViewFactory.uint8ArrayToHexString(content);
-        resolve(hexString);
-      });
-    }
-
-    return this.hexPromise;
+  hex(): string {
+    const binaryString = window.atob(this.base64());
+    const array = Uint8Array.from(binaryString, m => m.codePointAt(0) as number);
+    return BinaryResourceViewFactory.#uint8ArrayToHexString(array);
   }
 
   base64(): string {
-    return this.base64content;
+    return this.streamingContent.content().base64;
   }
 
-  async utf8(): Promise<string> {
-    if (!this.utf8Promise) {
-      this.utf8Promise = new Promise(async resolve => {
-        const content = await this.fetchContentAsArray();
-        const utf8String = new TextDecoder('utf8').decode(content);
-        resolve(utf8String);
-      });
-    }
-
-    return this.utf8Promise;
+  utf8(): string {
+    return new TextUtils.ContentData.ContentData(this.base64(), /* isBase64 */ true, 'text/plain', 'utf-8').text;
   }
 
   createBase64View(): ResourceSourceFrame {
-    return new ResourceSourceFrame(
+    const resourceFrame = new ResourceSourceFrame(
         TextUtils.StaticContentProvider.StaticContentProvider.fromString(
-            this.contentUrl, this.resourceType, this.base64content),
+            this.contentUrl, this.resourceType, this.streamingContent.content().base64),
         this.resourceType.canonicalMimeType(), {lineNumbers: false, lineWrapping: true});
+    this.streamingContent.addEventListener(TextUtils.StreamingContentData.Events.CHUNK_ADDED, () => {
+      void resourceFrame.setContent(this.base64());
+    });
+    return resourceFrame;
   }
 
-  createHexView(): ResourceSourceFrame {
-    const hexViewerContentProvider =
-        new TextUtils.StaticContentProvider.StaticContentProvider(this.contentUrl, this.resourceType, async () => {
-          const contentAsArray = await this.fetchContentAsArray();
-          const content = BinaryResourceViewFactory.uint8ArrayToHexViewer(contentAsArray);
-          return new TextUtils.ContentData.ContentData(content, /* isBase64 */ false, 'text/plain');
-        });
-    return new ResourceSourceFrame(
-        hexViewerContentProvider, this.resourceType.canonicalMimeType(), {lineNumbers: false, lineWrapping: false});
+  createHexView(): StreamingContentHexView {
+    return new StreamingContentHexView(this.streamingContent);
   }
 
   createUtf8View(): ResourceSourceFrame {
-    const utf8fn = (): Promise<TextUtils.ContentData.ContentData> =>
-        this.utf8().then(str => new TextUtils.ContentData.ContentData(str, /* isBase64 */ false, 'text/plain'));
-    const utf8ContentProvider =
-        new TextUtils.StaticContentProvider.StaticContentProvider(this.contentUrl, this.resourceType, utf8fn);
-    return new ResourceSourceFrame(
-        utf8ContentProvider, this.resourceType.canonicalMimeType(), {lineNumbers: true, lineWrapping: true});
+    const resourceFrame = new ResourceSourceFrame(
+        TextUtils.StaticContentProvider.StaticContentProvider.fromString(
+            this.contentUrl, this.resourceType, this.utf8()),
+        this.resourceType.canonicalMimeType(), {lineNumbers: true, lineWrapping: true});
+    this.streamingContent.addEventListener(TextUtils.StreamingContentData.Events.CHUNK_ADDED, () => {
+      void resourceFrame.setContent(this.utf8());
+    });
+    return resourceFrame;
   }
 
-  static uint8ArrayToHexString(uint8Array: Uint8Array): string {
+  static #uint8ArrayToHexString(uint8Array: Uint8Array): string {
     let output = '';
     for (let i = 0; i < uint8Array.length; i++) {
-      output += BinaryResourceViewFactory.numberToHex(uint8Array[i], 2);
+      output += BinaryResourceViewFactory.#numberToHex(uint8Array[i], 2);
     }
     return output;
   }
 
-  static numberToHex(number: number, padding: number): string {
+  static #numberToHex(number: number, padding: number): string {
     let hex = number.toString(16);
     while (hex.length < padding) {
       hex = '0' + hex;
     }
     return hex;
   }
-
-  static uint8ArrayToHexViewer(array: Uint8Array): string {
-    let output = '';
-    let line = 0;
-
-    while ((line * 16) < array.length) {
-      const lineArray = array.slice(line * 16, (line + 1) * 16);
-
-      // line number
-      output += BinaryResourceViewFactory.numberToHex(line, 8) + ':';
-
-      // hex
-      let hexColsPrinted = 0;
-      for (let i = 0; i < lineArray.length; i++) {
-        if (i % 2 === 0) {
-          output += ' ';
-          hexColsPrinted++;
-        }
-        output += BinaryResourceViewFactory.numberToHex(lineArray[i], 2);
-        hexColsPrinted += 2;
-      }
-
-      // hex-ascii padding
-      while (hexColsPrinted < 42) {
-        output += ' ';
-        hexColsPrinted++;
-      }
-
-      // ascii
-      for (let i = 0; i < lineArray.length; i++) {
-        const code = lineArray[i];
-        if (code >= 32 && code <= 126) {
-          // printable ascii character
-          output += String.fromCharCode(code);
-        } else {
-          // non-printable
-          output += '.';
-        }
-      }
-
-      output += '\n';
-      line++;
-    }
-    return output;
-  }
 }

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

@@ -168,7 +168,7 @@ export class ImageView extends UI.View.SimpleView {
     this.imagePreviewElement.src = imageSrc;
     this.imagePreviewElement.alt = i18nString(UIStrings.imageFromS, {PH1: this.url});
     const size = content.isTextContent ? content.text.length : Platform.StringUtilities.base64ToSize(content.base64);
-    this.sizeLabel.setText(Platform.NumberUtilities.bytesToString(size));
+    this.sizeLabel.setText(i18n.ByteUtilities.bytesToString(size));
     await loadPromise;
     this.dimensionsLabel.setText(i18nString(
         UIStrings.dD, {PH1: this.imagePreviewElement.naturalWidth, PH2: this.imagePreviewElement.naturalHeight}));

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

@@ -10,6 +10,7 @@ import {
   dispatchPasteEvent,
 } from '../../../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../../../testing/EnvironmentHelpers.js';
+import {expectCall} from '../../../../testing/ExpectStubCall.js';
 import * as Buttons from '../../../components/buttons/buttons.js';
 import * as UI from '../../legacy.js';
 
@@ -125,4 +126,21 @@ describeWithEnvironment('SourceFrame', () => {
     assert.isNull(dialogContainer);
     stub.restore();
   });
+
+  it('disassembles wasm', async () => {
+    const contentData = new TextUtils.ContentData.ContentData(
+        'AGFzbQEAAAABBQFgAAF/AwIBAAcHAQNiYXIAAAoGAQQAQQILACQEbmFtZQAQD3Nob3ctd2FzbS0yLndhdAEGAQADYmFyAgMBAAA=', true,
+        'application/wasm');
+    const sourceFrame = new SourceFrame.SourceFrame.SourceFrameImpl(async () => contentData);
+
+    sourceFrame.markAsRoot();
+    const setContentStub = sinon.stub(sourceFrame, 'setContent');
+    sourceFrame.show(document.body);
+    const content = await expectCall(setContentStub);
+
+    assert.strictEqual(
+        content.toString(), '(module\n  (func $bar (;0;) (export \"bar\") (result i32)\n    i32.const 2\n  )\n)');
+
+    sourceFrame.detach();
+  });
 });

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

@@ -33,6 +33,7 @@ import * as Host from '../../../../core/host/host.js';
 import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as Root from '../../../../core/root/root.js';
+import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Formatter from '../../../../models/formatter/formatter.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as CodeMirror from '../../../../third_party/codemirror.next/codemirror.next.js';
@@ -113,6 +114,12 @@ const UIStrings = {
    *@example {allow pasting} PH1
    */
   typeAllowPasting: 'Type \'\'{PH1}\'\'',
+  /**
+   * @description Error message shown when the user tries to open a file that contains non-readable data. "Editor" refers to
+   * a text editor.
+   */
+  binaryContentError:
+      'Editor can\'t show binary data. Use the "Response" tab in the "Network" panel to inspect this resource.',
 };
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/source_frame/SourceFrame.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -550,7 +557,8 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     progressIndicator.setWorked(1);
     const contentData = await contentDataPromise;
 
-    let error, content;
+    let error: string|undefined;
+    let content: CodeMirror.Text|string|null;
     let isMinified = false;
     if (TextUtils.ContentData.ContentData.isError(contentData)) {
       error = contentData.error;
@@ -558,16 +566,25 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
     } else if (contentData instanceof TextUtils.WasmDisassembly.WasmDisassembly) {
       content = CodeMirror.Text.of(contentData.lines);
       this.wasmDisassemblyInternal = contentData;
-    } else {
+    } else if (contentData.isTextContent) {
       content = contentData.text;
       isMinified = TextUtils.TextUtils.isMinified(contentData.text);
       this.wasmDisassemblyInternal = null;
+    } else if (contentData.mimeType === 'application/wasm') {
+      // The network panel produces ContentData with raw WASM inside. We have to manually disassemble that
+      // as V8 might not know about it.
+      this.wasmDisassemblyInternal = await SDK.Script.disassembleWasm(contentData.base64);
+      content = CodeMirror.Text.of(this.wasmDisassemblyInternal.lines);
+    } else {
+      error = i18nString(UIStrings.binaryContentError);
+      content = null;
+      this.wasmDisassemblyInternal = null;
     }
 
     progressIndicator.setWorked(100);
     progressIndicator.done();
 
-    if (this.rawContent === content) {
+    if (this.rawContent === content && error === undefined) {
       return;
     }
     this.rawContent = content;

package/front_end/{panels/network/RequestBinaryResponseView.test.ts → ui/legacy/components/source_frame/StreamingContentHexView.test.ts}

@@ -1,16 +1,16 @@
-// Copyright (c) 2024 The Chromium Authors. All rights reserved.
+// Copyright 2024 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 TextUtils from '../../models/text_utils/text_utils.js';
-import {raf} from '../../testing/DOMHelpers.js';
-import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
-import * as LinearMemoryInspectorComponents from '../linear_memory_inspector/components/components.js';
+import * as TextUtils from '../../../../models/text_utils/text_utils.js';
+import * as LinearMemoryInspectorComponents from '../../../../panels/linear_memory_inspector/components/components.js';
+import {raf} from '../../../../testing/DOMHelpers.js';
+import {describeWithEnvironment} from '../../../../testing/EnvironmentHelpers.js';
 
-import * as Network from './network.js';
+import * as SourceFrame from './source_frame.js';
 
-describeWithEnvironment('RequestBinaryResponseView', () => {
-  function getMemoryViewer(view: Network.RequestBinaryResponseView.RequestBinaryResponseView):
+describeWithEnvironment('StreamingContentHexView', () => {
+  function getMemoryViewer(view: SourceFrame.StreamingContentHexView.StreamingContentHexView):
       LinearMemoryInspectorComponents.LinearMemoryViewer.LinearMemoryViewer {
     const inspector = view.contentElement.firstChild as HTMLElement;
     assert.isNotNull(inspector.shadowRoot);
@@ -20,7 +20,7 @@ describeWithEnvironment('RequestBinaryResponseView', () => {
     return viewer;
   }
 
-  function getAllByteCells(view: Network.RequestBinaryResponseView.RequestBinaryResponseView): string {
+  function getAllByteCells(view: SourceFrame.StreamingContentHexView.StreamingContentHexView): string {
     const viewer = getMemoryViewer(view);
     assert.isNotNull(viewer.shadowRoot);
 
@@ -28,7 +28,7 @@ describeWithEnvironment('RequestBinaryResponseView', () => {
     return byteCells.map(c => c.textContent).join('');
   }
 
-  function getAllTextCells(view: Network.RequestBinaryResponseView.RequestBinaryResponseView): string {
+  function getAllTextCells(view: SourceFrame.StreamingContentHexView.StreamingContentHexView): string {
     const viewer = getMemoryViewer(view);
     assert.isNotNull(viewer.shadowRoot);
 
@@ -39,7 +39,7 @@ describeWithEnvironment('RequestBinaryResponseView', () => {
   it('shows the initial content of a StreamingContentData', async () => {
     const streamingContentData = TextUtils.StreamingContentData.StreamingContentData.from(
         new TextUtils.ContentData.ContentData(window.btoa('abc'), /* isBase64 */ true, 'application/octet-stream'));
-    const view = new Network.RequestBinaryResponseView.RequestBinaryResponseView(streamingContentData);
+    const view = new SourceFrame.StreamingContentHexView.StreamingContentHexView(streamingContentData);
     view.markAsRoot();
     view.show(document.body);
     await raf();
@@ -53,7 +53,7 @@ describeWithEnvironment('RequestBinaryResponseView', () => {
   it('shows the updated content of a StreamingContentData', async () => {
     const streamingContentData = TextUtils.StreamingContentData.StreamingContentData.from(
         new TextUtils.ContentData.ContentData(window.btoa('abc'), /* isBase64 */ true, 'application/octet-stream'));
-    const view = new Network.RequestBinaryResponseView.RequestBinaryResponseView(streamingContentData);
+    const view = new SourceFrame.StreamingContentHexView.StreamingContentHexView(streamingContentData);
     view.markAsRoot();
     view.show(document.body);
     await raf();

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

@@ -0,0 +1,122 @@
+// Copyright 2024 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 TextUtils from '../../../../models/text_utils/text_utils.js';
+import * as LinearMemoryInspectorComponents from '../../../../panels/linear_memory_inspector/components/components.js';
+import * as UI from '../../legacy.js';
+
+const MEMORY_TRANSFER_MIN_CHUNK_SIZE = 1000;
+
+/**
+ * This is a slightly reduced version of `panels/LinearMemoryInspectorPane.LinearMemoryInspectorView.
+ *
+ * It's not hooked up to the LinearMemoryInspectorController and it operates on a fixed memory array thats
+ * known upfront.
+ */
+class LinearMemoryInspectorView extends UI.Widget.VBox {
+  #memory = new Uint8Array([0]);
+  #address = 0;
+  #inspector = new LinearMemoryInspectorComponents.LinearMemoryInspector.LinearMemoryInspector();
+
+  constructor() {
+    super(false);
+    this.#inspector.addEventListener(
+        LinearMemoryInspectorComponents.LinearMemoryInspector.MemoryRequestEvent.eventName,
+        this.#memoryRequested.bind(this));
+    this.#inspector.addEventListener(
+        LinearMemoryInspectorComponents.LinearMemoryInspector.AddressChangedEvent.eventName, event => {
+          this.#address = event.data;
+        });
+    this.contentElement.appendChild(this.#inspector);
+  }
+
+  override wasShown(): void {
+    this.refreshData();
+  }
+
+  setMemory(memory: Uint8Array): void {
+    this.#memory = memory;
+    this.refreshData();
+  }
+
+  refreshData(): void {
+    // TODO(szuend): The following lines are copied from `LinearMemoryInspectorController`. We can't reuse them
+    // as depending on a module in `panels/` from a component is a layering violation.
+
+    // Provide a chunk of memory that covers the address to show and some before and after
+    // as 1. the address shown is not necessarily at the beginning of a page and
+    // 2. to allow for fewer memory requests.
+    const memoryChunkStart = Math.max(0, this.#address - MEMORY_TRANSFER_MIN_CHUNK_SIZE / 2);
+    const memoryChunkEnd = memoryChunkStart + MEMORY_TRANSFER_MIN_CHUNK_SIZE;
+    const memory = this.#memory.slice(memoryChunkStart, memoryChunkEnd);
+    this.#inspector.data = {
+      memory,
+      address: this.#address,
+      memoryOffset: memoryChunkStart,
+      outerMemoryLength: this.#memory.length,
+      hideValueInspector: true,
+    };
+  }
+
+  #memoryRequested(event: LinearMemoryInspectorComponents.LinearMemoryInspector.MemoryRequestEvent): void {
+    // TODO(szuend): The following lines are copied from `LinearMemoryInspectorController`. We can't reuse them
+    // as depending on a module in `panels/` from a component is a layering violation.
+
+    const {start, end, address} = event.data;
+    if (address < start || address >= end) {
+      throw new Error('Requested address is out of bounds.');
+    }
+
+    // Check that the requested start is within bounds.
+    // If the requested end is larger than the actual
+    // memory, it will be automatically capped when
+    // requesting the range.
+    if (start < 0 || start > end || start >= this.#memory.length) {
+      throw new Error('Requested range is out of bounds.');
+    }
+
+    const chunkEnd = Math.max(end, start + MEMORY_TRANSFER_MIN_CHUNK_SIZE);
+    const memory = this.#memory.slice(start, chunkEnd);
+
+    this.#inspector.data = {
+      memory,
+      address,
+      memoryOffset: start,
+      outerMemoryLength: this.#memory.length,
+      hideValueInspector: true,
+    };
+  }
+}
+
+/**
+ * Adapter for the linear memory inspector that can show a {@link StreamingContentData}.
+ */
+export class StreamingContentHexView extends LinearMemoryInspectorView {
+  readonly #streamingContentData: TextUtils.StreamingContentData.StreamingContentData;
+
+  constructor(streamingContentData: TextUtils.StreamingContentData.StreamingContentData) {
+    super();
+    this.#streamingContentData = streamingContentData;
+  }
+
+  override wasShown(): void {
+    this.#updateMemoryFromContentData();
+    this.#streamingContentData.addEventListener(
+        TextUtils.StreamingContentData.Events.CHUNK_ADDED, this.#updateMemoryFromContentData, this);
+
+    // No need to call super.wasShown() as we call super.refreshData() ourselves.
+  }
+
+  override willHide(): void {
+    super.willHide();
+    this.#streamingContentData.removeEventListener(
+        TextUtils.StreamingContentData.Events.CHUNK_ADDED, this.#updateMemoryFromContentData, this);
+  }
+
+  #updateMemoryFromContentData(): void {
+    const binaryString = window.atob(this.#streamingContentData.content().base64);
+    const memory = Uint8Array.from(binaryString, m => m.codePointAt(0) as number);
+    this.setMemory(memory);
+  }
+}

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

@@ -9,6 +9,7 @@ import * as JSONView from './JSONView.js';
 import * as PreviewFactory from './PreviewFactory.js';
 import * as ResourceSourceFrame from './ResourceSourceFrame.js';
 import * as SourceFrame from './SourceFrame.js';
+import * as StreamingContentHexView from './StreamingContentHexView.js';
 import * as XMLView from './XMLView.js';
 
 export {
@@ -19,5 +20,6 @@ export {
   PreviewFactory,
   ResourceSourceFrame,
   SourceFrame,
+  StreamingContentHexView,
   XMLView,
 };

package/front_end/ui/legacy/components/utils/ImagePreview.ts

@@ -100,7 +100,7 @@ export class ImagePreview {
     const content = resource.content ? resource.content : resource.url.split('base64,')[1];
     const contentSize = resource.contentSize();
     const resourceSize = contentSize ? contentSize : Platform.StringUtilities.base64ToSize(content);
-    const resourceSizeText = resourceSize > 0 ? Platform.NumberUtilities.bytesToString(resourceSize) : '';
+    const resourceSizeText = resourceSize > 0 ? i18n.ByteUtilities.bytesToString(resourceSize) : '';
 
     return new Promise(resolve => {
       const imageElement = document.createElement('img');