[network] Use BinaryResourceView for binary response content

Screenshot: https://imgur.com/a/HguIx06

This CL changes two things:

  - For binary network requests we'll show the BinaryResourceView
    instead of the linear memory inspector.

  - In the BinaryResourceView we use the linear memory inspector when
    the "hex" option is selected instead of showing an editor with
    a hex dump.

This allows users to see binary network request response data not
just in hex view, but also in base64 and even force utf-8 decode it.

[email protected]

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

Author: szuend

front_end/panels/network/RequestResponseView.test.ts

@@ -42,7 +42,7 @@ describeWithEnvironment('RequestResponseView', () => {
     component.detach();
   });
 
-  it('shows the StreamingContentHexView for binary content', async () => {
+  it('shows the BinaryResourceView 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, SourceFrame.StreamingContentHexView.StreamingContentHexView);
+    assert.instanceOf(widget, Network.BinaryResourceView.BinaryResourceView);
 
     await raf();
     component.detach();

front_end/panels/network/RequestResponseView.ts

@@ -37,6 +37,8 @@ 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 {BinaryResourceView} from './BinaryResourceView.js';
+
 const UIStrings = {
   /**
    *@description Text in Request Response View of the Network panel
@@ -94,7 +96,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 SourceFrame.StreamingContentHexView.StreamingContentHexView(contentData);
+      sourceView = new BinaryResourceView(contentData, request.url(), request.resourceType());
     }
 
     requestToSourceView.set(request, sourceView);

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

@@ -26,12 +26,7 @@ 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...');
   });

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

@@ -7,6 +7,7 @@ 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 streamingContent: TextUtils.StreamingContentData.StreamingContentData;
@@ -71,15 +72,8 @@ export class BinaryResourceViewFactory {
         this.resourceType.canonicalMimeType(), {lineNumbers: false, lineWrapping: true});
   }
 
-  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 {