feat: Make request tab sections collapsible with visual hierarchy

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

@@ -65,6 +65,65 @@
   text-align: center;
 }
 
+.codicon-chevron {
+  margin-right: 4px;
+}
+
+.network-collapsible-section {
+  margin-bottom: 12px;
+}
+
+.network-collapsible-header {
+  font-weight: bold;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  margin-bottom: 4px;
+  position: relative;
+}
+
+.network-collapsible-header::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-color: currentColor;
+  opacity: 0.07;
+  pointer-events: none;
+  border-radius: 4px;
+}
+
+.network-collapsible-content {
+  padding-left: 16px;
+  white-space: pre-wrap;
+  font-family: monospace;
+}
+
+.network-collapsible-suffix {
+  margin-left: 6px;
+  opacity: 0.7;
+  font-size: 14px;
+}
+
+.network-key-value {
+  display: flex;
+  margin-bottom: 4px;
+  align-items: center;
+}
+
+.network-key {
+  font-weight: 400;
+  margin-right: 8px;
+  min-width: 144px;
+  white-space: nowrap;
+}
+
+.network-value {
+  font-weight: 600;
+  word-break: break-word;
+  flex: 1;
+  display: 'inline-flex';
+}
+
 .tab-network .toolbar {
   min-height: 30px !important;
   background-color: initial !important;

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

@@ -103,33 +103,109 @@ const CopyDropdown: React.FC<{
   );
 };
 
+const CollapsibleSection: React.FC<{
+  title: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+  collapsedSuffix?: React.ReactNode;
+}> = ({ title, children, defaultOpen = true, collapsedSuffix }) => {
+  const [isOpen, setIsOpen] = React.useState(defaultOpen);
+
+  return (
+    <div className='network-collapsible-section'>
+      <div
+        className='network-collapsible-header'
+        onClick={() => setIsOpen(!isOpen)}
+      >
+        <span
+          className={`codicon ${isOpen ? 'codicon-chevron-down' : 'codicon-chevron-right'}`}
+        />
+        <span>{title}</span>
+        {!isOpen && collapsedSuffix && (
+          <span
+            className='network-collapsible-suffix'
+          >
+            {collapsedSuffix}
+          </span>
+        )}
+      </div>
+      {isOpen && <div className='network-collapsible-content'>{children}</div>}
+    </div>
+  );
+};
+
 const RequestTab: React.FunctionComponent<{
   resource: ResourceSnapshot;
   startTimeOffset: number;
   requestBody: RequestBody,
 }> = ({ resource, startTimeOffset, requestBody }) => {
   return <div className='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')}
+    <CollapsibleSection title='General' defaultOpen={true}>
+      <div className='network-key-value'>
+        <div className='network-key'>URL</div>
+        <div className='network-value'>{resource.request.url}</div>
       </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}/>}
+      <div className='network-key-value'>
+        <div className='network-key'>Method</div>
+        <div className='network-value'>{resource.request.method}</div>
+      </div>
+      {resource.response.status !== -1 && (
+        <div className='network-key-value'>
+          <div className='network-key'>Status Code</div>
+          <div className='network-value'>
+            <span className={statusClass(resource.response.status)}>
+              {`${resource.response.status} ${resource.response.statusText}`}
+            </span>
+          </div>
+        </div>
+      )}
+    </CollapsibleSection>
+
+    {resource.request.queryString.length > 0 && (
+      <CollapsibleSection title='Query String Parameters' defaultOpen={false}>
+        {resource.request.queryString.map(param => (
+          <div className='network-key-value' key={param.name}>
+            <div className='network-key'>{param.name}</div>
+            <div className='network-value'>{param.value}</div>
+          </div>
+        ))}
+      </CollapsibleSection>
+    )}
+
+    <CollapsibleSection
+      title='Request Headers'
+      collapsedSuffix={`(${resource.request.headers.length})`}
+      defaultOpen={true}
+    >
+      {resource.request.headers.map(header => (
+        <div className='network-key-value' key={header.name}>
+          <div className='network-key'>{header.name}</div>
+          <div className='network-value'>{header.value}</div>
+        </div>
+      ))}
+    </CollapsibleSection>
+
+    <CollapsibleSection title='Time' defaultOpen={true}>
+      <div className='network-key-value'>
+        <div className='network-key'>Start</div>
+        <div className='network-value'>{msToString(startTimeOffset)}</div>
+      </div>
+      <div className='network-key-value'>
+        <div className='network-key'>Duration</div>
+        <div className='network-value'>{msToString(resource.time)}</div>
+      </div>
+    </CollapsibleSection>
+
+    {requestBody && (
+      <CollapsibleSection title='Request Body' defaultOpen={true}>
+        <CodeMirrorWrapper
+          text={requestBody.text}
+          mimeType={requestBody.mimeType}
+          readOnly
+          lineNumbers={true}
+        />
+      </CollapsibleSection>
+    )}
   </div>;
 };
 

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

@@ -156,9 +156,19 @@ 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();
+  await page.getByText('Query String Parameters').click();
+
+  await expect(
+      page.locator('.network-key-value:has(.network-key:text("param1"))').nth(0).locator('.network-value')
+  ).toHaveText('value1');
+
+  await expect(
+      page.locator('.network-key-value:has(.network-key:text("param1"))').nth(1).locator('.network-value')
+  ).toHaveText('value2');
+
+  await expect(
+      page.locator('.network-key-value:has(.network-key:text("param2"))').locator('.network-value')
+  ).toHaveText('value2');
 
   await page.getByText('endpoint').click();