microsoft/playwright
1
1
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2024-11-24 14:55:38 +03:00
Code Issues Projects Releases Wiki Activity

fix(trace-viewer): SVG images were not loading (#26755)

Browse Source 
Fixes https://github.com/microsoft/playwright/issues/26745

Drive-by: make Codemirror read-only.
This commit is contained in:
Max Schmitt 2023-08-29 18:05:01 +02:00 committed by GitHub
parent f3ece09063
commit a9bc1a1707
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/trace-viewer/src/traceModel.ts
View File

@ -37,6 +37,7 @@ export class TraceModel {
private _version: number | undefined;
private _backend!: TraceModelBackend;
private _attachments = new Map<string, trace.AfterActionTraceEventAttachment>();
private _resourceToContentType = new Map<string, string>();
constructor() {
}
@ -100,6 +101,13 @@ export class TraceModel {
}
unzipProgress(++done, total);
for (const resource of contextEntry.resources) {
if (resource.request.postData?._sha1)
this._resourceToContentType.set(resource.request.postData._sha1, stripEncodingFromContentType(resource.request.postData.mimeType));
if (resource.response.content?._sha1)
this._resourceToContentType.set(resource.response.content._sha1, stripEncodingFromContentType(resource.response.content.mimeType));
}
this.contextEntries.push(contextEntry);
}
@ -111,7 +119,10 @@ export class TraceModel {
}
async resourceForSha1(sha1: string): Promise<Blob | undefined> {
return this._backend.readBlob('resources/' + sha1);
const blob = await this._backend.readBlob('resources/' + sha1);
if (!blob)
return;
return new Blob([blob], { type: this._resourceToContentType.get(sha1) || 'application/octet-stream' });
}
attachmentForSha1(sha1: string): trace.AfterActionTraceEventAttachment | undefined {
@ -324,3 +335,10 @@ export class TraceModel {
};
}
}
function stripEncodingFromContentType(contentType: string) {
const charset = contentType.match(/^(.*);\s*charset=.*$/);
if (charset)
return charset[1];
return contentType;
}

4
packages/trace-viewer/src/ui/networkResourceDetails.tsx
View File

@ -108,7 +108,7 @@ const NetworkResourceDetails: React.FunctionComponent<{
<div className='network-request-details-header'>Request Headers</div>
<div className='network-request-headers'>{resource.request.headers.map(pair => `${pair.name}: ${pair.value}`).join('\n')}</div>
{requestBody && <div className='network-request-details-header'>Request Body</div>}
{requestBody && <CodeMirrorWrapper text={requestBody.text} language={requestBody.language} />}
{requestBody && <CodeMirrorWrapper text={requestBody.text} language={requestBody.language} readOnly/>}
</div>,
},
{
@ -126,7 +126,7 @@ const NetworkResourceDetails: React.FunctionComponent<{
render: () => <div className='network-request-details'>
{!resource.response.content._sha1 && <div>Response body is not available for this request.</div>}
{responseBody && responseBody.dataUrl && <img draggable='false' src={responseBody.dataUrl} />}
{responseBody && responseBody.text && <CodeMirrorWrapper text={responseBody.text} language={responseBody.language} />}
{responseBody && responseBody.text && <CodeMirrorWrapper text={responseBody.text} language={responseBody.language} readOnly/>}
</div>,
},
]} selectedTab={selectedTab} setSelectedTab={setSelectedTab}/>;