fix(trace viewer): Bringing back the ability to display images in Net…

…work Tab in Trace Viewer. (#5232)

This fix restores the ability to display images in the Network Tab inside Trace Viewer. Previously data returned from the server was coming back as base64 encoded string, but now it is returned as a Buffer object. This required convertion to either base64 encoded string or utf8 encoded string on the frontend.

Co-authored-by: Dominik Deren <dominik.deren@live.com>

src/web/traceViewer/ui/networkResourceDetails.tsx

@@ -19,6 +19,7 @@ import * as React from 'react';
 import { Expandable } from './helpers';
 import { NetworkResourceTraceEvent } from '../../../trace/traceTypes';
 
+const utf8Encoder = new TextDecoder('utf-8');
 
 export const NetworkResourceDetails: React.FunctionComponent<{
   resource: NetworkResourceTraceEvent,
@@ -28,7 +29,7 @@ export const NetworkResourceDetails: React.FunctionComponent<{
 }> = ({ resource, index, selected, setSelected }) => {
   const [expanded, setExpanded] = React.useState(false);
   const [requestBody, setRequestBody] = React.useState<string | null>(null);
-  const [responseBody, setResponseBody] = React.useState<string | null>(null);
+  const [responseBody, setResponseBody] = React.useState<ArrayBuffer | null>(null);
 
   React.useEffect(() => {
     setExpanded(false);
@@ -38,12 +39,14 @@ export const NetworkResourceDetails: React.FunctionComponent<{
   React.useEffect(() => {
     const readResources = async  () => {
       if (resource.requestSha1 !== 'none') {
-        const requestResource = await fetch(`/sha1/${resource.requestSha1}`).then(response => response.text());
+        const response = await fetch(`/sha1/${resource.requestSha1}`);
+        const requestResource = await response.text();
         setRequestBody(requestResource);
       }
 
       if (resource.responseSha1 !== 'none') {
-        const responseResource = await fetch(`/sha1/${resource.responseSha1}`).then(response => response.text());
+        const response = await fetch(`/sha1/${resource.responseSha1}`);
+        const responseResource = await response.arrayBuffer();
         setResponseBody(responseResource);
       }
     };
@@ -108,8 +111,8 @@ export const NetworkResourceDetails: React.FunctionComponent<{
         {resource.requestSha1 !== 'none' ? <div className='network-request-body'>{formatBody(requestBody, requestContentType)}</div> : ''}
         <h4>Response Body</h4>
         {resource.responseSha1 === 'none' ? <div className='network-request-response-body'>Response body is not available for this request.</div> : ''}
-        {responseBody !== null && resource.contentType.includes('image') ? <img src={`data:${resource.contentType};base64,${responseBody}`} /> : ''}
-        {responseBody !== null && !resource.contentType.includes('image') ? <div className='network-request-response-body'>{formatBody(responseBody, resource.contentType)}</div> : ''}
+        {responseBody !== null && resource.contentType.includes('image') ? <img src={`data:${resource.contentType};base64,${btoa(String.fromCharCode(...new Uint8Array(responseBody)))}`} /> : ''}
+        {responseBody !== null && !resource.contentType.includes('image') ? <div className='network-request-response-body'>{formatBody(utf8Encoder.decode(responseBody), resource.contentType)}</div> : ''}
       </div>
     }/>
   </div>;