Handle StreamingContentData updates in BinaryResourceViewFactory

This is the last piece of the puzzle: Update the ResourceSourceFrame
views that the BinaryResourceViewFactory produces when the content
updates.

The "cleaner" approach would be to pass a custom "ContentProvider"
to "ResourceSourceFrame" that spits out a wrapped
"StreamingContentData" that applies the utf8/base64 transformation to
the original "StreamingContentData". That is because the
"ResourceSourceFrame" actually knows how to subscribe to
"StreamingContentData" updates. This is a lot of boilerplate code
though and not very readable, so the next best thing is this CL.

[email protected]

Fixed: 375546679
Change-Id: I982859fd255354ea8a73cc928bc34640ec78a87b
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5993272
Commit-Queue: Simon Zünd <[email protected]>
Reviewed-by: Philip Pfaffe <[email protected]>

Author: szuend

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

@@ -5,6 +5,7 @@
 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';
@@ -44,4 +45,38 @@ describeWithEnvironment('BinaryResourceViewFactory', () => {
         '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();
+  });
 });

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

@@ -37,21 +37,29 @@ export class BinaryResourceViewFactory {
   }
 
   createBase64View(): ResourceSourceFrame {
-    return new ResourceSourceFrame(
+    const resourceFrame = new ResourceSourceFrame(
         TextUtils.StaticContentProvider.StaticContentProvider.fromString(
             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(): StreamingContentHexView {
     return new StreamingContentHexView(this.streamingContent);
   }
 
   createUtf8View(): ResourceSourceFrame {
-    return new ResourceSourceFrame(
+    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 {