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

chore: nicer network grid header (#27102)

Browse source
This commit is contained in:
Pavel Feldman 2023-09-15 09:16:29 -07:00 committed by GitHub
parent 0d44405762
commit c914d62c69
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 29 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -14,7 +14,7 @@
limitations under the License. limitations under the License.
*/ */
.network-request-details { .network-request-details-tab {
width: 100%; width: 100%;
user-select: text; user-select: text;
line-height: 24px; line-height: 24px;
@ -39,6 +39,21 @@
font-weight: bold; font-weight: bold;
} }
.network-request-details .cm-wrapper { .network-request-details-tab .cm-wrapper {
overflow: hidden; overflow: hidden;
} }
.tab-network .toolbar {
margin-top: 3px !important;
min-height: 30px !important;
background-color: initial !important;
border-bottom: 1px solid var(--vscode-panel-border);
}
.tab-network .toolbar::after {
box-shadow: none !important;
}
.tab-network .tabbed-pane-tab.selected {
font-weight: bold;
}

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

@ -30,7 +30,10 @@ export const NetworkResourceDetails: React.FunctionComponent<{
return <TabbedPane return <TabbedPane
dataTestId='network-request-details' dataTestId='network-request-details'
leftToolbar={[<ToolbarButton icon='arrow-left' title='Back' onClick={onClose}></ToolbarButton>]} leftToolbar={[
<ToolbarButton icon='arrow-left' title='Back' onClick={onClose}></ToolbarButton>,
<div style={{ width: 30 }}></div>
]}
rightToolbar={[<ToolbarButton icon='close' title='Close' onClick={onClose}></ToolbarButton>]} rightToolbar={[<ToolbarButton icon='close' title='Close' onClick={onClose}></ToolbarButton>]}
tabs={[ tabs={[
{ {
@ -75,7 +78,7 @@ const RequestTab: React.FunctionComponent<{
readResources(); readResources();
}, [resource]); }, [resource]);
return <div className='network-request-details'> return <div className='network-request-details-tab'>
<div className='network-request-details-header'>URL</div> <div className='network-request-details-header'>URL</div>
<div className='network-request-details-url'>{resource.request.url}</div> <div className='network-request-details-url'>{resource.request.url}</div>
<div className='network-request-details-header'>Request Headers</div> <div className='network-request-details-header'>Request Headers</div>
@ -88,7 +91,7 @@ const RequestTab: React.FunctionComponent<{
const ResponseTab: React.FunctionComponent<{ const ResponseTab: React.FunctionComponent<{
resource: ResourceSnapshot; resource: ResourceSnapshot;
}> = ({ resource }) => { }> = ({ resource }) => {
return <div className='network-request-details'> return <div className='network-request-details-tab'>
<div className='network-request-details-header'>Response Headers</div> <div className='network-request-details-header'>Response Headers</div>
<div className='network-request-details-headers'>{resource.response.headers.map(pair => `${pair.name}: ${pair.value}`).join('\n')}</div> <div className='network-request-details-headers'>{resource.response.headers.map(pair => `${pair.name}: ${pair.value}`).join('\n')}</div>
</div>; </div>;
@ -121,7 +124,7 @@ const BodyTab: React.FunctionComponent<{
readResources(); readResources();
}, [resource]); }, [resource]);
return <div className='network-request-details'> 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.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} readOnly lineNumbers={true}/>} {responseBody && responseBody.text && <CodeMirrorWrapper text={responseBody.text} language={responseBody.language} readOnly lineNumbers={true}/>}

3
packages/trace-viewer/src/ui/networkTab.css
View file

@ -68,7 +68,8 @@
} }
.network-request-header { .network-request-header {
height: 28px; margin-top: 3px;
height: 30px;
border-bottom: 1px solid var(--vscode-panel-border); border-bottom: 1px solid var(--vscode-panel-border);
flex: none; flex: none;
align-items: center; align-items: center;

5
packages/web/src/components/tabbedPane.tsx
View file

@ -59,10 +59,11 @@ export const TabbedPane: React.FunctionComponent<{
</Toolbar> </Toolbar>
{ {
tabs.map(tab => { tabs.map(tab => {
const className = 'tab-content tab-' + tab.id;
if (tab.component) if (tab.component)
return <div key={tab.id} className='tab-content' style={{ display: selectedTab === tab.id ? 'inherit' : 'none' }}>{tab.component}</div>; return <div key={tab.id} className={className} style={{ display: selectedTab === tab.id ? 'inherit' : 'none' }}>{tab.component}</div>;
if (selectedTab === tab.id) if (selectedTab === tab.id)
return <div key={tab.id} className='tab-content'>{tab.render!()}</div>; return <div key={tab.id} className={className}>{tab.render!()}</div>;
}) })
} }
</div> </div>