yujunjun/playwright
1
0
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-06-26 21:40:17 +00:00
Code Issues Packages 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 _version: number | undefined;
private _backend!: TraceModelBackend; private _backend!: TraceModelBackend;
private _attachments = new Map<string, trace.AfterActionTraceEventAttachment>(); private _attachments = new Map<string, trace.AfterActionTraceEventAttachment>();
private _resourceToContentType = new Map<string, string>();
constructor() { constructor() {
} }
@ -100,6 +101,13 @@ export class TraceModel {
} }
unzipProgress(++done, total); 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); this.contextEntries.push(contextEntry);
} }
@ -111,7 +119,10 @@ export class TraceModel {
} }
async resourceForSha1(sha1: string): Promise<Blob | undefined> { 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 { 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-details-header'>Request Headers</div>
<div className='network-request-headers'>{resource.request.headers.map(pair => `${pair.name}: ${pair.value}`).join('\n')}</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 && <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>, </div>,
}, },
{ {
@ -126,7 +126,7 @@ const NetworkResourceDetails: React.FunctionComponent<{
render: () => <div className='network-request-details'> render: () => <div className='network-request-details'>
{!resource.response.content._sha1 && <div>Response body is not available for this request.</div>} {!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.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>, </div>,
}, },
]} selectedTab={selectedTab} setSelectedTab={setSelectedTab}/>; ]} selectedTab={selectedTab} setSelectedTab={setSelectedTab}/>;