Simplify copy-to-clipboard helpers in BinaryResourceViewFactory

This CL replaces the utf8/hex methods on BinaryResourceViewFactory
with a slower but sync version and removes the caching. This makes
handling with the "StreamingContentData" easier since we don't have
to update the cached value when the "StreamingContentData" updates.

Note that this is not a big deal performance wise. The utf8/hex
helpers are not invoked often: When the user triggers a
"copy-to-clipboard" action and for utf8 when we create the view
initially. Using the sync version over `fetch` is also slightly
slower (by a factor of 2x for a 20MB string), but the sync code
is much simpler to deal with.

[email protected]

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

Author: szuend

front_end/panels/network/BinaryResourceView.ts

@@ -84,7 +84,7 @@ export class BinaryResourceView extends UI.Widget.VBox {
       new BinaryViewObject(
           'base64', i18n.i18n.lockedString('Base64'), i18nString(UIStrings.copiedAsBase),
           this.binaryResourceViewFactory.createBase64View.bind(this.binaryResourceViewFactory),
-          () => Promise.resolve(this.binaryResourceViewFactory.base64())),
+          this.binaryResourceViewFactory.base64.bind(this.binaryResourceViewFactory)),
       new BinaryViewObject(
           'hex', i18nString(UIStrings.hexViewer), i18nString(UIStrings.copiedAsHex),
           this.binaryResourceViewFactory.createHexView.bind(this.binaryResourceViewFactory),
@@ -105,7 +105,7 @@ export class BinaryResourceView extends UI.Widget.VBox {
 
     const copyButton = new UI.Toolbar.ToolbarButton(i18nString(UIStrings.copyToClipboard), 'copy');
     copyButton.addEventListener(UI.Toolbar.ToolbarButton.Events.CLICK, _event => {
-      void this.copySelectedViewToClipboard();
+      this.copySelectedViewToClipboard();
     }, this);
     this.toolbar.appendToolbarItem(copyButton);
 
@@ -129,12 +129,12 @@ export class BinaryResourceView extends UI.Widget.VBox {
     return binaryViewObject || null;
   }
 
-  private async copySelectedViewToClipboard(): Promise<void> {
+  private copySelectedViewToClipboard(): void {
     const viewObject = this.getCurrentViewObject();
     if (!viewObject) {
       return;
     }
-    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(await viewObject.content());
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(viewObject.content());
     this.copiedText.setText(viewObject.copiedMessage);
     this.copiedText.element.classList.remove('fadeout');
     function addFadeoutClass(this: BinaryResourceView): void {
@@ -208,13 +208,12 @@ export class BinaryViewObject {
   type: string;
   label: string;
   copiedMessage: string;
-  content: () => Promise<string>;
+  content: () => string;
   private createViewFn: () => UI.Widget.Widget;
   private view: UI.Widget.Widget|null;
 
   constructor(
-      type: string, label: string, copiedMessage: string, createViewFn: () => UI.Widget.Widget,
-      content: () => Promise<string>) {
+      type: string, label: string, copiedMessage: string, createViewFn: () => UI.Widget.Widget, content: () => string) {
     this.type = type;
     this.label = label;
     this.copiedMessage = copiedMessage;

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

@@ -30,4 +30,18 @@ describeWithEnvironment('BinaryResourceViewFactory', () => {
     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...');
+  });
 });

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

@@ -13,56 +13,27 @@ export class BinaryResourceViewFactory {
   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(
       content: TextUtils.StreamingContentData.StreamingContentData, contentUrl: Platform.DevToolsPath.UrlString,
       resourceType: Common.ResourceType.ResourceType) {
     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.streamingContent.content().base64);
-        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.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 {
@@ -77,23 +48,21 @@ export class BinaryResourceViewFactory {
   }
 
   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});
+        TextUtils.StaticContentProvider.StaticContentProvider.fromString(
+            this.contentUrl, this.resourceType, this.utf8()),
+        this.resourceType.canonicalMimeType(), {lineNumbers: true, lineWrapping: true});
   }
 
-  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;