feat(trace-viewer): Collapse sections inside network request

packages/trace-viewer/src/ui/networkResourceDetails.css

@@ -16,8 +16,6 @@
 
 .network-request-details-tab {
   user-select: text;
-  line-height: 24px;
-  margin-left: 10px;
   overflow: auto;
 }
 
@@ -37,8 +35,17 @@
   margin-left: 10px;
 }
 
+.expandable-title {
+  padding-left: 3px;
+}
+
+.expandable-content {
+  margin-left: 0;
+  padding-left: 28px;
+}
+
 .network-request-details-header {
-  margin: 3px 0;
+  margin: 3px 0 3px 14px;
   font-weight: bold;
 }
 
@@ -51,6 +58,18 @@
   overflow: hidden;
 }
 
+.network-request-request-body {
+  max-height: 100%;
+}
+
+.network-request-request-body .expandable-content {
+  height: 100%;
+}
+
+.expandable-content {
+  line-height: 24px;
+}
+
 .network-font-preview {
   font-family: font-preview;
   font-size: 30px;

packages/trace-viewer/src/ui/networkResourceDetails.tsx

@@ -24,9 +24,10 @@ import { generateCurlCommand, generateFetchCall } from '../third_party/devtools'
 import { CopyToClipboardTextButton } from './copyToClipboard';
 import { getAPIRequestCodeGen } from './codegen';
 import type { Language } from '@isomorphic/locatorGenerators';
-import { msToString, useAsyncMemo } from '@web/uiUtils';
+import { msToString, useAsyncMemo, useSetting } from '@web/uiUtils';
 import type { Entry } from '@trace/har';
 import { useTraceModel } from './traceModelContext';
+import { Expandable } from '@web/components/expandable';
 
 type RequestBody = { text: string, mimeType?: string } | null;
 
@@ -105,42 +106,68 @@ const CopyDropdown: React.FC<{
   );
 };
 
+const ExpandableSection: React.FC<{
+  title: string;
+  children?: React.ReactNode
+  className?: string;
+}> = ({ title, 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>}
+    className={className}
+  >
+    {children}
+  </Expandable>;
+};
+
 const RequestTab: React.FunctionComponent<{
   resource: ResourceSnapshot;
   startTimeOffset: number;
   requestBody: RequestBody,
 }> = ({ resource, startTimeOffset, requestBody }) => {
   return <div className='vbox network-request-details-tab'>
-    <div className='network-request-details-header'>General</div>
-    <div className='network-request-details-url'>{`URL: ${resource.request.url}`}</div>
-    <div className='network-request-details-general'>{`Method: ${resource.request.method}`}</div>
-    {resource.response.status !== -1 && <div className='network-request-details-general' style={{ display: 'flex' }}>
-      Status Code: <span className={statusClass(resource.response.status)} style={{ display: 'inline-flex' }}>
-        {`${resource.response.status} ${resource.response.statusText}`}
-      </span></div>}
-    {resource.request.queryString.length ? <>
-      <div className='network-request-details-header'>Query String Parameters</div>
-      <div className='network-request-details-headers'>
-        {resource.request.queryString.map(param => `${param.name}: ${param.value}`).join('\n')}
-      </div>
-    </> : null}
-    <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-header'>Time</div>
-    <div className='network-request-details-general'>{`Start: ${msToString(startTimeOffset)}`}</div>
-    <div className='network-request-details-general'>{`Duration: ${msToString(resource.time)}`}</div>
-
-    {requestBody && <div className='network-request-details-header'>Request Body</div>}
-    {requestBody && <CodeMirrorWrapper text={requestBody.text} mimeType={requestBody.mimeType} readOnly lineNumbers={true}/>}
+    <ExpandableSection title='General'>
+      <div className='network-request-details-url'>{`URL: ${resource.request.url}`}</div>
+      <div className='network-request-details-general'>{`Method: ${resource.request.method}`}</div>
+      {resource.response.status !== -1 && <div className='network-request-details-general' style={{ display: 'flex' }}>
+        Status Code: <span className={statusClass(resource.response.status)} style={{ display: 'inline-flex' }}>
+          {`${resource.response.status} ${resource.response.statusText}`}
+        </span></div>}
+    </ExpandableSection>
+
+    {resource.request.queryString.length ?
+      <ExpandableSection title='Query String Parameters'>
+        <div className='network-request-details-headers'>
+          {resource.request.queryString.map(param => `${param.name}: ${param.value}`).join('\n')}
+        </div>
+      </ExpandableSection>
+      : null}
+
+    <ExpandableSection title='Request Headers'>
+      <div className='network-request-details-headers'>{resource.request.headers.map(pair => `${pair.name}: ${pair.value}`).join('\n')}</div>
+    </ExpandableSection>
+
+    <ExpandableSection title='Time'>
+      <div className='network-request-details-general'>{`Start: ${msToString(startTimeOffset)}`}</div>
+      <div className='network-request-details-general'>{`Duration: ${msToString(resource.time)}`}</div>
+    </ExpandableSection>
+
+    {requestBody && <ExpandableSection title='Request Body' className='network-request-request-body'>
+      <CodeMirrorWrapper text={requestBody.text} mimeType={requestBody.mimeType} readOnly lineNumbers={true}/>
+    </ExpandableSection>}
   </div>;
 };
 
 const ResponseTab: React.FunctionComponent<{
   resource: ResourceSnapshot;
 }> = ({ resource }) => {
   return <div className='vbox network-request-details-tab'>
-    <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>
+    <ExpandableSection title='Response Headers'>
+      <div className='network-request-details-headers'>{resource.response.headers.map(pair => `${pair.name}: ${pair.value}`).join('\n')}</div>
+    </ExpandableSection>
   </div>;
 };
 

packages/web/src/components/expandable.css

@@ -29,3 +29,7 @@
   user-select: none;
   cursor: pointer;
 }
+
+.expandable-content {
+  margin-left: 25px;
+}

packages/web/src/components/expandable.tsx

@@ -23,8 +23,10 @@ export const Expandable: React.FunctionComponent<React.PropsWithChildren<{
   setExpanded: (expanded: boolean) => void,
   expanded: boolean,
   expandOnTitleClick?: boolean,
-}>> = ({ title, children, setExpanded, expanded, expandOnTitleClick }) => {
-  const id = React.useId();
+  className?: string;
+}>> = ({ title, children, setExpanded, expanded, expandOnTitleClick, className }) => {
+  const titleId = React.useId();
+  const regionId = React.useId();
 
   const onClick = React.useCallback(() => setExpanded(!expanded), [expanded, setExpanded]);
 
@@ -33,12 +35,13 @@ export const Expandable: React.FunctionComponent<React.PropsWithChildren<{
     style={{ cursor: 'pointer', color: 'var(--vscode-foreground)', marginLeft: '5px' }}
     onClick={!expandOnTitleClick ? onClick : undefined} />;
 
-  return <div className={clsx('expandable', expanded && 'expanded')}>
+  return <div className={clsx('expandable', expanded && 'expanded', className)}>
     {expandOnTitleClick ?
       <div
+        id={titleId}
         role='button'
         aria-expanded={expanded}
-        aria-controls={id}
+        aria-controls={regionId}
         className='expandable-title'
         onClick={onClick}>
         {chevron}
@@ -48,6 +51,6 @@ export const Expandable: React.FunctionComponent<React.PropsWithChildren<{
         {chevron}
         {title}
       </div>}
-    {expanded && <div id={id} role='region' style={{ marginLeft: 25 }}>{children}</div>}
+    {expanded && <div id={regionId} aria-labelledby={titleId} role='region' className='expandable-content'>{children}</div>}
   </div>;
 };

tests/playwright-test/ui-mode-test-network-tab.spec.ts

@@ -196,14 +196,14 @@ test('should display list of query parameters (only if present)', async ({ runUI
 
   await page.getByText('call-with-query-params').click();
 
-  await expect(page.getByText('Query String Parameters')).toBeVisible();
-  await expect(page.getByText('param1: value1')).toBeVisible();
-  await expect(page.getByText('param1: value2')).toBeVisible();
-  await expect(page.getByText('param2: value2')).toBeVisible();
+  const region = page.getByRole('region', { name: 'Query String Parameters' });
+  await expect(region.getByText('param1: value1')).toBeVisible();
+  await expect(region.getByText('param1: value2')).toBeVisible();
+  await expect(region.getByText('param2: value2')).toBeVisible();
 
   await page.getByText('endpoint').click();
 
-  await expect(page.getByText('Query String Parameters')).not.toBeVisible();
+  await expect(region).toBeHidden();
 });
 
 test('should not duplicate network entries from beforeAll', {
@@ -241,3 +241,38 @@ test('should not duplicate network entries from beforeAll', {
   await page.getByText('Network', { exact: true }).click();
   await expect(page.getByRole('list', { name: 'Network requests' }).getByText('empty.html')).toHaveCount(1);
 });
+
+test('should toggle sections inside network details', async ({ runUITest, server }) => {
+  const { page } = await runUITest({
+    'network-tab.test.ts': `
+      import { test, expect } from '@playwright/test';
+      test('network tab test', async ({ page }) => {
+        await page.goto('${server.PREFIX}/network-tab/network.html');
+        await page.evaluate(() => (window as any).donePromise);
+      });
+    `,
+  });
+
+  await page.getByRole('treeitem', { name: 'network tab test' }).dblclick();
+  await page.getByRole('tab', { name: 'Network' }).click();
+  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 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: 'Time' })).toBeHidden();
+
+  await requestPanel.getByRole('button', { name: 'Time' }).click();
+  await expect(requestPanel.getByRole('region', { name: 'Request Headers' })).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: 'Time' })).toHaveText(/Start: .+Duration: \d+ms/);
+});