From eabd8c09dd3cfb416683ac6e1c78a2705144177a Mon Sep 17 00:00:00 2001 From: cpadm <57954026+cpAdm@users.noreply.github.com> Date: Mon, 24 Nov 2025 22:04:17 +0100 Subject: [PATCH 1/2] feat(trace-viewer): Show count in network details sections --- .../trace-viewer/src/ui/networkResourceDetails.tsx | 11 ++++++----- .../playwright-test/ui-mode-test-network-tab.spec.ts | 12 ++++++------ 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/packages/trace-viewer/src/ui/networkResourceDetails.tsx b/packages/trace-viewer/src/ui/networkResourceDetails.tsx index cab1d9c3e212a..d58aa6663bc8b 100644 --- a/packages/trace-viewer/src/ui/networkResourceDetails.tsx +++ b/packages/trace-viewer/src/ui/networkResourceDetails.tsx @@ -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 {title}} + title={{title}{showCount && ` (${data?.length ?? 0})`}} className={className} > {data && @@ -157,8 +158,8 @@ const RequestTab: React.FunctionComponent<{ return
- {resource.request.queryString.length > 0 && } - + {resource.request.queryString.length > 0 && } + {requestBody && @@ -170,7 +171,7 @@ const ResponseTab: React.FunctionComponent<{ resource: ResourceSnapshot; }> = ({ resource }) => { return
- +
; }; diff --git a/tests/playwright-test/ui-mode-test-network-tab.spec.ts b/tests/playwright-test/ui-mode-test-network-tab.spec.ts index 0e7014b5e76a6..50185370b5123 100644 --- a/tests/playwright-test/ui-mode-test-network-tab.spec.ts +++ b/tests/playwright-test/ui-mode-test-network-tab.spec.ts @@ -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: @@ -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/); }); From 63be6fd73b22b20f925f09701880960adfc31e5f Mon Sep 17 00:00:00 2001 From: cpadm <57954026+cpAdm@users.noreply.github.com> Date: Thu, 27 Nov 2025 17:54:54 +0100 Subject: [PATCH 2/2] chore: Apply suggested css change --- .../trace-viewer/src/ui/networkResourceDetails.css | 5 +++++ .../trace-viewer/src/ui/networkResourceDetails.tsx | 6 +++++- .../playwright-test/ui-mode-test-network-tab.spec.ts | 12 ++++++------ 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/packages/trace-viewer/src/ui/networkResourceDetails.css b/packages/trace-viewer/src/ui/networkResourceDetails.css index fff88aa577f5e..de65c5b3a6b4f 100644 --- a/packages/trace-viewer/src/ui/networkResourceDetails.css +++ b/packages/trace-viewer/src/ui/networkResourceDetails.css @@ -39,6 +39,11 @@ font-weight: bold; } +.network-request-details-header-count { + color: var(--vscode-editorCodeLens-foreground); + font-weight: normal; +} + .network-request-details-table { width: 100%; line-height: 18px; diff --git a/packages/trace-viewer/src/ui/networkResourceDetails.tsx b/packages/trace-viewer/src/ui/networkResourceDetails.tsx index d58aa6663bc8b..b419434aa99ca 100644 --- a/packages/trace-viewer/src/ui/networkResourceDetails.tsx +++ b/packages/trace-viewer/src/ui/networkResourceDetails.tsx @@ -118,7 +118,11 @@ const ExpandableSection: React.FC<{ expanded={expanded} setExpanded={setExpanded} expandOnTitleClick - title={{title}{showCount && ` (${data?.length ?? 0})`}} + title={ + {title} + {showCount && × {data?.length ?? 0}} + + } className={className} > {data &&
diff --git a/tests/playwright-test/ui-mode-test-network-tab.spec.ts b/tests/playwright-test/ui-mode-test-network-tab.spec.ts index 50185370b5123..0b74757cf70cc 100644 --- a/tests/playwright-test/ui-mode-test-network-tab.spec.ts +++ b/tests/playwright-test/ui-mode-test-network-tab.spec.ts @@ -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 (3)' }); + const region = page.getByRole('region', { name: 'Query String Parameters × 3' }); await expect(region).toMatchAriaSnapshot( `- table: - rowgroup: @@ -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 (16)' }).click(); - await expect(requestPanel.getByRole('region', { name: 'Request Headers (16)' })).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 (16)' })).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 (16)' })).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 (16)' })).toBeHidden(); + await expect(requestPanel.getByRole('region', { name: 'Request Headers × 16' })).toBeHidden(); await expect(requestPanel.getByRole('region', { name: 'Time' })).toHaveText(/Start.+Duration\d+ms/); });