feat: Improve spacing network details (#38307)

Author: cpAdm

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

@@ -23,20 +23,9 @@
   flex: none;
 }
 
-.network-request-details-url {
-  white-space: normal;
-  word-wrap: break-word;
-  margin-left: 10px;
-}
-
-.network-request-details-headers {
-  white-space: pre;
-  overflow: hidden;
-  margin-left: 10px;
-}
-
 .network-request-details-tab .expandable-title {
   padding-left: 3px;
+  background-color: var(--vscode-sideBar-background);
 }
 
 .network-request-details-tab .expandable-content {
@@ -50,9 +39,22 @@
   font-weight: bold;
 }
 
-.network-request-details-general {
-  white-space: pre;
-  margin-left: 10px;
+.network-request-details-table {
+  width: 100%;
+  line-height: 18px;
+  padding: 8px 0 8px 8px;
+  white-space: pre-wrap;
+}
+
+.network-request-details-table td:first-of-type {
+  width: 30%;
+  min-width: 160px;
+  vertical-align: top;
+}
+
+.network-request-details-table td:nth-of-type(2) {
+  word-break: break-all;
+  vertical-align: center;
 }
 
 .network-request-details-tab .cm-wrapper {

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

@@ -108,9 +108,10 @@ const CopyDropdown: React.FC<{
 
 const ExpandableSection: React.FC<{
   title: string;
+  data?: { name: string, value: React.ReactNode }[],
   children?: React.ReactNode
   className?: string;
-}> = ({ title, children, className }) => {
+}> = ({ title, data, children, className }) => {
   const [expanded, setExpanded] = useSetting(`trace-viewer-network-details-${title.replaceAll(' ', '-')}`, true);
   return <Expandable
     expanded={expanded}
@@ -119,6 +120,17 @@ const ExpandableSection: React.FC<{
     title={<span className='network-request-details-header'>{title}</span>}
     className={className}
   >
+    {data && <table className='network-request-details-table'>
+      <tbody>
+        {data.map(({ name, value }, index) => (
+          value !== null &&
+          (<tr key={index}>
+            <td>{name}</td>
+            <td>{value}</td>
+          </tr>)
+        ))}
+      </tbody>
+    </table>}
     {children}
   </Expandable>;
 };
@@ -128,33 +140,26 @@ const RequestTab: React.FunctionComponent<{
   startTimeOffset: number;
   requestBody: RequestBody,
 }> = ({ resource, startTimeOffset, requestBody }) => {
-  return <div className='vbox network-request-details-tab'>
-    <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}
+  const generalData = React.useMemo(() =>
+    Object.entries({
+      'URL': resource.request.url,
+      'Method': resource.request.method,
+      'Status Code': resource.response.status !== -1 && <span className={statusClass(resource.response.status)}> {resource.response.status} {resource.response.statusText}</span>,
+    }).map(([name, value]) => ({ name, value })),
+  [resource]);
 
-    <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>
+  const timeData = React.useMemo(() =>
+    Object.entries({
+      'Start': msToString(startTimeOffset),
+      'Duration': msToString(resource.time),
+    }).map(([name, value]) => ({ name, value })),
+  [startTimeOffset, resource]);
 
+  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}/>
+    <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}/>
     </ExpandableSection>}
@@ -165,9 +170,7 @@ const ResponseTab: React.FunctionComponent<{
   resource: ResourceSnapshot;
 }> = ({ resource }) => {
   return <div className='vbox network-request-details-tab'>
-    <ExpandableSection title='Response Headers'>
-      <div className='network-request-details-headers'>{resource.response.headers.map(pair => `${pair.name}: ${pair.value}`).join('\n')}</div>
-    </ExpandableSection>
+    <ExpandableSection title='Response Headers' data={resource.response.headers} />
   </div>;
 };
 

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

@@ -197,9 +197,14 @@ 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' });
-  await expect(region.getByText('param1: value1')).toBeVisible();
-  await expect(region.getByText('param1: value2')).toBeVisible();
-  await expect(region.getByText('param2: value2')).toBeVisible();
+  await expect(region).toMatchAriaSnapshot(
+      `- table:
+         - rowgroup:
+           - 'row "param1 value1"'
+           - 'row "param1 value2"'
+           - 'row "param2 value2"'
+      `
+  );
 
   await page.getByText('endpoint').click();
 
@@ -260,19 +265,19 @@ test('should toggle sections inside network details', async ({ runUITest, server
 
   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 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/);
+  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/);
+  await expect(requestPanel.getByRole('region', { name: 'Time' })).toHaveText(/Start.+Duration\d+ms/);
 });