microsoft/playwright
1
1
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2024-12-01 08:34:02 +03:00
Code Issues Projects Releases Wiki Activity

cherry-pick(#31940): chore(trace-viewer): less bright status code icon (#31944)

Browse Source 
<img width="182" alt="image"

src="https://github.com/user-attachments/assets/8b381bcc-46e3-45c7-8fd2-e020436d1bff">

<img width="206" alt="image"

src="https://github.com/user-attachments/assets/4ea02b47-a4da-44f7-9c26-13b05374e89d">

<img width="213" alt="image"

src="https://github.com/user-attachments/assets/38b50e2a-f69c-4a78-abb2-2680453fc5fd">
This commit is contained in:
Yury Semikhatsky 2024-07-31 17:58:25 -07:00 committed by GitHub
parent 7ff46d4596
commit 71e5eade8c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 36 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -61,3 +61,27 @@
.tab-network .tabbed-pane-tab.selected { .tab-network .tabbed-pane-tab.selected {
font-weight: bold; font-weight: bold;
} }
.green-circle::before,
.red-circle::before,
.yellow-circle::before {
content: "";
display: inline-block;
width: 12px;
height: 12px;
border-radius: 6px;
margin-right: 2px;
align-self: center;
}
.green-circle::before {
background-color: var(--vscode-charts-green);
}
.red-circle::before {
background-color: var(--vscode-charts-red);
}
.yellow-circle::before {
background-color: var(--vscode-charts-yellow);
}

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

@ -80,11 +80,10 @@ const RequestTab: React.FunctionComponent<{
<div className='network-request-details-header'>General</div> <div className='network-request-details-header'>General</div>
<div className='network-request-details-url'>{`URL: ${resource.request.url}`}</div> <div className='network-request-details-url'>{`URL: ${resource.request.url}`}</div>
<div className='network-request-details-general'>{`Method: ${resource.request.method}`}</div> <div className='network-request-details-general'>{`Method: ${resource.request.method}`}</div>
<div className='network-request-details-general'>{`Status Code: ${ <div className='network-request-details-general' style={{ display: 'flex' }}>
resource.response.status >= 200 && resource.response.status < 400 Status Code: <span className={statusClass(resource.response.status)} style={{ display: 'inline-flex' }}>
? `🟢 ${resource.response.status} ${resource.response.statusText}` {`${resource.response.status} ${resource.response.statusText}`}
: `🔴 ${resource.response.status} ${resource.response.statusText}` </span></div>
}`}</div>
<div className='network-request-details-header'>Request Headers</div> <div className='network-request-details-header'>Request Headers</div>
<div className='network-request-details-headers'>{resource.request.headers.map(pair => `${pair.name}: ${pair.value}`).join('\n')}</div> <div className='network-request-details-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>}
@ -135,6 +134,14 @@ const BodyTab: React.FunctionComponent<{
</div>; </div>;
}; };
function statusClass(statusCode: number): string {
if (statusCode < 300 || statusCode === 304)
return 'green-circle';
if (statusCode < 400)
return 'yellow-circle';
return 'red-circle';
}
function formatBody(body: string | null, contentType: string): string { function formatBody(body: string | null, contentType: string): string {
if (body === null) if (body === null)
return 'Loading...'; return 'Loading...';