Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix(trace viewer): Bringing back the ability to display images in Network Tab in Trace Viewer. (#5232)

Browse source 
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>
This commit is contained in:
Dominik Deren 2021-02-02 07:56:53 +01:00 committed by GitHub
parent e53c9c35db
commit 8c65871b25
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/web/traceViewer/ui/networkResourceDetails.tsx
View file

@ -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>;