[network] Move RequestBinaryResponseView to different module

This CL renames the "RequestBinaryResponseView" to
"StreamingContentHexView" and moves it to "source_frame" components.

We want to re-use the linear memory inspector in the
BinaryResourceView(Factory) and importing the network panel there would
be a layering violation.

At the same time, we also can't depend on the linear memory inspector
panel directly as well, as that would also be a layering violation.
To solve this, this CL re-implements the "LinearMemoryInspectorView"
in a way that doesn't have a dependency on the
"LinearMemoryInspectorController".

In a follow-up CL the "StreamingContentHexView", will replace the
"hex" view portion of the "BinaryResourceView(Factory)". The utf-8 and
base64 will stay as-is modulo supporting streaming content.

[email protected]

Bug: 375546679
Change-Id: If2f3ce62e8f72bd29d207b998aba17613d3b8237
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5972706
Reviewed-by: Kim-Anh Tran <[email protected]>
Commit-Queue: Simon Zünd <[email protected]>

Author: szuend

config/gni/devtools_grd_files.gni

@@ -1515,7 +1515,6 @@ grd_files_debug_sources = [
   "front_end/panels/network/NetworkSearchScope.js",
   "front_end/panels/network/NetworkTimeCalculator.js",
   "front_end/panels/network/NetworkWaterfallColumn.js",
-  "front_end/panels/network/RequestBinaryResponseView.js",
   "front_end/panels/network/RequestCookiesView.js",
   "front_end/panels/network/RequestHTMLView.js",
   "front_end/panels/network/RequestInitiatorView.js",
@@ -2407,6 +2406,7 @@ grd_files_debug_sources = [
   "front_end/ui/legacy/components/source_frame/PreviewFactory.js",
   "front_end/ui/legacy/components/source_frame/ResourceSourceFrame.js",
   "front_end/ui/legacy/components/source_frame/SourceFrame.js",
+  "front_end/ui/legacy/components/source_frame/StreamingContentHexView.js",
   "front_end/ui/legacy/components/source_frame/XMLView.js",
   "front_end/ui/legacy/components/source_frame/fontView.css.legacy.js",
   "front_end/ui/legacy/components/source_frame/imageView.css.legacy.js",

front_end/panels/linear_memory_inspector/components/BUILD.gn

@@ -59,6 +59,7 @@ devtools_entrypoint("bundle") {
     ":*",
     "../:*",
     "../../../ui/components/docs/linear_memory_inspector/*",
+    "../../../ui/legacy/components/source_frame/*",
     "../../network:*",
   ]
 

front_end/panels/network/BUILD.gn

@@ -49,7 +49,6 @@ devtools_module("network") {
     "NetworkSearchScope.ts",
     "NetworkTimeCalculator.ts",
     "NetworkWaterfallColumn.ts",
-    "RequestBinaryResponseView.ts",
     "RequestCookiesView.ts",
     "RequestHTMLView.ts",
     "RequestInitiatorView.ts",
@@ -151,7 +150,6 @@ ts_library("unittests") {
     "NetworkOverview.test.ts",
     "NetworkPanel.test.ts",
     "NetworkSearchScope.test.ts",
-    "RequestBinaryResponseView.test.ts",
     "RequestCookiesView.test.ts",
     "RequestHTMLView.test.ts",
     "RequestPayloadView.test.ts",

front_end/panels/network/RequestBinaryResponseView.ts

@@ -42,7 +42,7 @@ describeWithEnvironment('RequestResponseView', () => {
     component.detach();
   });
 
-  it('shows the RequestBinaryResponseView for binary content', async () => {
+  it('shows the StreamingContentHexView for binary content', async () => {
     const request = SDK.NetworkRequest.NetworkRequest.create(
         'requestId' as Protocol.Network.RequestId,
         'http://devtools-frontend.test/image.png' as Platform.DevToolsPath.UrlString,
@@ -60,7 +60,7 @@ describeWithEnvironment('RequestResponseView', () => {
     component.show(document.body);
     const widget = await showPreviewSpy.returnValues[0];
 
-    assert.instanceOf(widget, Network.RequestBinaryResponseView.RequestBinaryResponseView);
+    assert.instanceOf(widget, SourceFrame.StreamingContentHexView.StreamingContentHexView);
 
     await raf();
     component.detach();

front_end/panels/network/RequestResponseView.test.ts

@@ -37,8 +37,6 @@ import * as SourceFrame from '../../ui/legacy/components/source_frame/source_fra
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import {RequestBinaryResponseView} from './RequestBinaryResponseView.js';
-
 const UIStrings = {
   /**
    *@description Text in Request Response View of the Network panel
@@ -96,7 +94,7 @@ export class RequestResponseView extends UI.Widget.VBox {
       // Note: Even though WASM is binary data, the source view will disassemble it and show a text representation.
       sourceView = SourceFrame.ResourceSourceFrame.ResourceSourceFrame.createSearchableView(request, mimeType);
     } else {
-      sourceView = new RequestBinaryResponseView(contentData);
+      sourceView = new SourceFrame.StreamingContentHexView.StreamingContentHexView(contentData);
     }
 
     requestToSourceView.set(request, sourceView);

front_end/panels/network/RequestResponseView.ts

@@ -41,7 +41,6 @@ import * as NetworkPanel from './NetworkPanel.js';
 import * as NetworkSearchScope from './NetworkSearchScope.js';
 import * as NetworkTimeCalculator from './NetworkTimeCalculator.js';
 import * as NetworkWaterfallColumn from './NetworkWaterfallColumn.js';
-import * as RequestBinaryResponseView from './RequestBinaryResponseView.js';
 import * as RequestCookiesView from './RequestCookiesView.js';
 import * as RequestHTMLView from './RequestHTMLView.js';
 import * as RequestInitiatorView from './RequestInitiatorView.js';
@@ -68,7 +67,6 @@ export {
   NetworkSearchScope,
   NetworkTimeCalculator,
   NetworkWaterfallColumn,
-  RequestBinaryResponseView,
   RequestCookiesView,
   RequestHTMLView,
   RequestInitiatorView,

front_end/panels/network/network.ts

@@ -31,6 +31,7 @@ devtools_module("source_frame") {
     "PreviewFactory.ts",
     "ResourceSourceFrame.ts",
     "SourceFrame.ts",
+    "StreamingContentHexView.ts",
     "XMLView.ts",
   ]
 
@@ -43,6 +44,7 @@ devtools_module("source_frame") {
     "../../../../models/formatter:bundle",
     "../../../../models/text_utils:bundle",
     "../../../../models/workspace:bundle",
+    "../../../../panels/linear_memory_inspector/components:bundle",
     "../../../../third_party/diff:bundle",
     "../../../../ui/components/text_editor:bundle",
     "../../../../ui/legacy:bundle",
@@ -92,6 +94,7 @@ ts_library("unittests") {
     "BinaryResourceViewFactory.test.ts",
     "ResourceSourceFrame.test.ts",
     "SourceFrame.test.ts",
+    "StreamingContentHexView.test.ts",
   ]
 
   deps = [

front_end/ui/legacy/components/source_frame/BUILD.gn

@@ -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,15 +20,15 @@ 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);
 
     const byteCells = [...viewer.shadowRoot.querySelectorAll('.byte-cell')];
     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();

front_end/panels/network/RequestBinaryResponseView.test.ts renamed to front_end/ui/legacy/components/source_frame/StreamingContentHexView.test.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);
+  }
+}