From 8c65871b252951c7abfdff7257de4182535e152e Mon Sep 17 00:00:00 2001
From: Dominik Deren <dominik.deren@windowslive.com>
Date: Tue, 2 Feb 2021 07:56:53 +0100
Subject: [PATCH] fix(trace viewer): Bringing back the ability to display
 images in Network 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 | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/web/traceViewer/ui/networkResourceDetails.tsx b/src/web/traceViewer/ui/networkResourceDetails.tsx
index 2e444fed59..b8614efb7b 100644
--- a/src/web/traceViewer/ui/networkResourceDetails.tsx
+++ b/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>;