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

feat(ui-mode): add font preview to network tab

Browse source
This commit is contained in:
Kuba Janik 2024-08-17 19:24:37 +02:00
parent 570e05699e
commit 561b4b6362
2 changed files with 38 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
packages/trace-viewer/src/ui/networkResourceDetails.css
View file

@ -48,6 +48,17 @@
overflow: hidden; overflow: hidden;
} }
.network-font-preview {
font-family: font-preview;
font-size: 30px;
line-height: 40px;
padding: 16px;
padding-left: 6px;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
.tab-network .toolbar { .tab-network .toolbar {
min-height: 30px !important; min-height: 30px !important;
background-color: initial !important; background-color: initial !important;

28
packages/trace-viewer/src/ui/networkResourceDetails.tsx
View file

@ -101,12 +101,13 @@ const ResponseTab: React.FunctionComponent<{
const BodyTab: React.FunctionComponent<{ const BodyTab: React.FunctionComponent<{
resource: ResourceSnapshot; resource: ResourceSnapshot;
}> = ({ resource }) => { }> = ({ resource }) => {
const [responseBody, setResponseBody] = React.useState<{ dataUrl?: string, text?: string, mimeType?: string } | null>(null); const [responseBody, setResponseBody] = React.useState<{ dataUrl?: string, text?: string, mimeType?: string, font?: BinaryData } | null>(null);
React.useEffect(() => { React.useEffect(() => {
const readResources = async () => { const readResources = async () => {
if (resource.response.content._sha1) { if (resource.response.content._sha1) {
const useBase64 = resource.response.content.mimeType.includes('image'); const useBase64 = resource.response.content.mimeType.includes('image');
const isFont = resource.response.content.mimeType.includes('font');
const response = await fetch(`sha1/${resource.response.content._sha1}`); const response = await fetch(`sha1/${resource.response.content._sha1}`);
if (useBase64) { if (useBase64) {
const blob = await response.blob(); const blob = await response.blob();
@ -114,6 +115,9 @@ const BodyTab: React.FunctionComponent<{
const eventPromise = new Promise<any>(f => reader.onload = f); const eventPromise = new Promise<any>(f => reader.onload = f);
reader.readAsDataURL(blob); reader.readAsDataURL(blob);
setResponseBody({ dataUrl: (await eventPromise).target.result }); setResponseBody({ dataUrl: (await eventPromise).target.result });
} else if (isFont) {
const font = await response.blob().then(blob => blob.arrayBuffer());
setResponseBody({ font });
} else { } else {
const formattedBody = formatBody(await response.text(), resource.response.content.mimeType); const formattedBody = formatBody(await response.text(), resource.response.content.mimeType);
setResponseBody({ text: formattedBody, mimeType: resource.response.content.mimeType }); setResponseBody({ text: formattedBody, mimeType: resource.response.content.mimeType });
@ -128,11 +132,33 @@ const BodyTab: React.FunctionComponent<{
return <div className='network-request-details-tab'> return <div className='network-request-details-tab'>
{!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.font && <FontPreview font={responseBody.font} />}
{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} mimeType={responseBody.mimeType} readOnly lineNumbers={true}/>} {responseBody && responseBody.text && <CodeMirrorWrapper text={responseBody.text} mimeType={responseBody.mimeType} readOnly lineNumbers={true}/>}
</div>; </div>;
}; };
const FontPreview: React.FunctionComponent<{
font: BinaryData;
}> = ({ font }) => {
React.useEffect(() => {
const fontFace = new FontFace('font-preview', font);
document.fonts.add(fontFace);
return () => {
document.fonts.delete(fontFace);
};
}, [font]);
return <div className='network-font-preview'>
ABCDEFGHIJKLM<br />
NOPQRSTUVWXYZ<br />
abcdefghijklm<br />
nopqrstuvwxyz<br />
1234567890
</div>;
};
function statusClass(statusCode: number): string { function statusClass(statusCode: number): string {
if (statusCode < 300 || statusCode === 304) if (statusCode < 300 || statusCode === 304)
return 'green-circle'; return 'green-circle';