Skip to content

feat(trace-viewer): Show count in network details sections #38323

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+21 −11
Open

feat(trace-viewer): Show count in network details sections #38323

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eabd8c0
feat(trace-viewer): Show count in network details sections
cpAdm Nov 24, 2025
63be6fd
chore: Apply suggested css change
cpAdm Nov 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions packages/trace-viewer/src/ui/networkResourceDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,16 +108,17 @@ const CopyDropdown: React.FC<{

const ExpandableSection: React.FC<{
title: string;
showCount?: boolean,
data?: { name: string, value: React.ReactNode }[],
children?: React.ReactNode
className?: string;
}> = ({ title, data, children, className }) => {
}> = ({ title, data, showCount, children, className }) => {
const [expanded, setExpanded] = useSetting(`trace-viewer-network-details-${title.replaceAll(' ', '-')}`, true);
return <Expandable
expanded={expanded}
setExpanded={setExpanded}
expandOnTitleClick
title={<span className='network-request-details-header'>{title}</span>}
title={<span className='network-request-details-header'>{title}{showCount && ` (${data?.length ?? 0})`}</span>}
className={className}
>
{data && <table className='network-request-details-table'>
Expand Down Expand Up @@ -157,8 +158,8 @@ const RequestTab: React.FunctionComponent<{

return <div className='vbox network-request-details-tab'>
<ExpandableSection title='General' data={generalData}/>
{resource.request.queryString.length > 0 && <ExpandableSection title='Query String Parameters' data={resource.request.queryString}/>}
<ExpandableSection title='Request Headers' data={resource.request.headers}/>
{resource.request.queryString.length > 0 && <ExpandableSection title='Query String Parameters' showCount data={resource.request.queryString}/>}
<ExpandableSection title='Request Headers' showCount data={resource.request.headers}/>
<ExpandableSection title='Time' data={timeData}/>
{requestBody && <ExpandableSection title='Request Body' className='network-request-request-body'>
<CodeMirrorWrapper text={requestBody.text} mimeType={requestBody.mimeType} readOnly lineNumbers={true}/>
Expand All @@ -170,7 +171,7 @@ const ResponseTab: React.FunctionComponent<{
resource: ResourceSnapshot;
}> = ({ resource }) => {
return <div className='vbox network-request-details-tab'>
<ExpandableSection title='Response Headers' data={resource.response.headers} />
<ExpandableSection title='Response Headers' showCount data={resource.response.headers} />
</div>;
};

Expand Down
12 changes: 6 additions & 6 deletions tests/playwright-test/ui-mode-test-network-tab.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,7 +196,7 @@ test('should display list of query parameters (only if present)', async ({ runUI

await page.getByText('call-with-query-params').click();

const region = page.getByRole('region', { name: 'Query String Parameters' });
const region = page.getByRole('region', { name: 'Query String Parameters (3)' });
await expect(region).toMatchAriaSnapshot(
`- table:
- rowgroup:
Expand Down Expand Up @@ -263,21 +263,21 @@ test('should toggle sections inside network details', async ({ runUITest, server
await page.getByRole('listitem').filter({ hasText: 'post-data-1' }).click();
const requestPanel = page.getByRole('tabpanel', { name: 'Request' });

await requestPanel.getByRole('button', { name: 'Request Headers' }).click();
await expect(requestPanel.getByRole('region', { name: 'Request Headers' })).toBeHidden();
await requestPanel.getByRole('button', { name: 'Request Headers (16)' }).click();
await expect(requestPanel.getByRole('region', { name: 'Request Headers (16)' })).toBeHidden();
await expect(requestPanel.getByRole('region', { name: 'Time' })).toHaveText(/Start.+Duration\d+ms/);

await requestPanel.getByRole('button', { name: 'Time' }).click();
await expect(requestPanel.getByRole('region', { name: 'Request Headers' })).toBeHidden();
await expect(requestPanel.getByRole('region', { name: 'Request Headers (16)' })).toBeHidden();
await expect(requestPanel.getByRole('region', { name: 'Time' })).toBeHidden();

await requestPanel.getByRole('button', { name: 'Time' }).click();
await expect(requestPanel.getByRole('region', { name: 'Request Headers' })).toBeHidden();
await expect(requestPanel.getByRole('region', { name: 'Request Headers (16)' })).toBeHidden();
await expect(requestPanel.getByRole('region', { name: 'Time' })).toHaveText(/Start.+Duration\d+ms/);

// Re-opening should preserve open state
await page.getByRole('tabpanel', { name: 'Network' }).getByRole('button', { name: 'Close' }).click();
await page.getByRole('listitem').filter({ hasText: 'post-data-1' }).click();
await expect(requestPanel.getByRole('region', { name: 'Request Headers' })).toBeHidden();
await expect(requestPanel.getByRole('region', { name: 'Request Headers (16)' })).toBeHidden();
await expect(requestPanel.getByRole('region', { name: 'Time' })).toHaveText(/Start.+Duration\d+ms/);
});