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

chore: network panel ui polish (#26722)

Browse Source
This commit is contained in:
Pavel Feldman 2023-08-25 19:20:36 -07:00 committed by GitHub
parent 8348f66107
commit ee86b9bc94
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/trace-viewer/src/ui/networkResourceDetails.css
View File

@ -93,5 +93,5 @@
} }
.network-request .cm-wrapper { .network-request .cm-wrapper {
max-height: 300px; height: 300px;
} }

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

@ -51,7 +51,7 @@ export const NetworkResource: React.FunctionComponent<{
}, [contentType, resource, resourceName, routeStatus]); }, [contentType, resource, resourceName, routeStatus]);
return <div className='network-request'> return <div className='network-request'>
<Expandable expanded={expanded} setExpanded={setExpanded} title={renderTitle()}> <Expandable expanded={expanded} setExpanded={setExpanded} title={renderTitle()} expandOnTitleClick={true}>
{expanded && <NetworkResourceDetails resource={resource} />} {expanded && <NetworkResourceDetails resource={resource} />}
</Expandable> </Expandable>
</div>; </div>;
@ -78,7 +78,6 @@ const NetworkResourceDetails: React.FunctionComponent<{
} }
} }
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 response = await fetch(`sha1/${resource.response.content._sha1}`); const response = await fetch(`sha1/${resource.response.content._sha1}`);

7
packages/web/src/components/expandable.tsx
View File

@ -21,13 +21,14 @@ export const Expandable: React.FunctionComponent<React.PropsWithChildren<{
title: JSX.Element | string, title: JSX.Element | string,
setExpanded: Function, setExpanded: Function,
expanded: boolean, expanded: boolean,
}>> = ({ title, children, setExpanded, expanded }) => { expandOnTitleClick?: boolean,
}>> = ({ title, children, setExpanded, expanded, expandOnTitleClick }) => {
return <div className={'expandable' + (expanded ? ' expanded' : '')}> return <div className={'expandable' + (expanded ? ' expanded' : '')}>
<div className='expandable-title'> <div className='expandable-title' onClick={() => expandOnTitleClick && setExpanded(!expanded)}>
<div <div
className={'codicon codicon-' + (expanded ? 'chevron-down' : 'chevron-right')} className={'codicon codicon-' + (expanded ? 'chevron-down' : 'chevron-right')}
style={{ cursor: 'pointer', color: 'var(--vscode-foreground)', marginLeft: '5px' }} style={{ cursor: 'pointer', color: 'var(--vscode-foreground)', marginLeft: '5px' }}
onClick={() => setExpanded(!expanded)} /> onClick={() => !expandOnTitleClick && setExpanded(!expanded)} />
{title} {title}
</div> </div>
{ expanded && <div style={{ marginLeft: 25 }}>{children}</div> } { expanded && <div style={{ marginLeft: 25 }}>{children}</div> }