chore(tracing): trim network urls for readability (#6566)

src/server/snapshot/snapshotTypes.ts

@@ -19,6 +19,7 @@ export type ResourceSnapshot = {
   pageId: string,
   frameId: string,
   url: string,
+  type: string,
   contentType: string,
   responseHeaders: { name: string, value: string }[],
   requestHeaders: { name: string, value: string }[],

src/server/snapshot/snapshotter.ts

@@ -201,6 +201,7 @@ export class Snapshotter {
       frameId: response.frame().guid,
       resourceId: 'resource@' + createGuid(),
       url,
+      type: response.request().resourceType(),
       contentType,
       responseHeaders: response.headers(),
       requestHeaders,

src/web/traceViewer/ui/networkResourceDetails.css

@@ -18,7 +18,7 @@
   white-space: nowrap;
   display: flex;
   align-items: center;
-  padding: 0 10px;
+  padding: 0 3px;
   background: #fdfcfc;
   width: 100%;
   flex: none;
@@ -41,7 +41,8 @@
   flex: 1;
 }
 
-.network-request-title-status {
+.network-request-title-status,
+.network-request-title-method {
   padding-right: 5px;
 }
 
@@ -62,6 +63,7 @@
 
 .network-request-details {
   width: 100%;
+  user-select: text;
 }
 
 .network-request-details-url {
@@ -89,3 +91,8 @@
   border: black 1px solid;
   max-height: 500px;
 }
+
+.network-request-details-header {
+  margin: 3px 0;
+  font-weight: bold;
+}

src/web/traceViewer/ui/networkResourceDetails.tsx

@@ -95,27 +95,28 @@ export const NetworkResourceDetails: React.FunctionComponent<{
 
   const requestContentTypeHeader = resource.requestHeaders.find(q => q.name === 'Content-Type');
   const requestContentType = requestContentTypeHeader ? requestContentTypeHeader.value : '';
+  const resourceName = resource.url.substring(resource.url.lastIndexOf('/') + 1);
 
   return <div
     className={'network-request ' + (selected ? 'selected' : '')} onClick={() => setSelected(index)}>
     <Expandable expanded={expanded} setExpanded={setExpanded} style={{ width: '100%' }} title={
       <div className='network-request-title'>
         <div className={'network-request-title-status ' + formatStatus(resource.status)}>{resource.status}</div>
-        <div className='network-request-title-method'>{resource.method}: &nbsp;</div>
+        <div className='network-request-title-method'>{resource.method}</div>
-        <div className='network-request-title-url'>{resource.url}</div>
+        <div className='network-request-title-url'>{resourceName}</div>
-        <div className='network-request-title-content-type'>{resource.contentType}</div>
+        <div className='network-request-title-content-type'>{resource.type}</div>
       </div>
     } body={
       <div className='network-request-details'>
-        <h4>URL</h4>
+        <div className='network-request-details-header'>URL</div>
         <div className='network-request-details-url'>{resource.url}</div>
-        <h4>Request Headers</h4>
+        <div className='network-request-details-header'>Request Headers</div>
         <div className='network-request-headers'>{resource.requestHeaders.map(pair => `${pair.name}: ${pair.value}`).join('\n')}</div>
-        <h4>Response Headers</h4>
+        <div className='network-request-details-header'>Response Headers</div>
         <div className='network-request-headers'>{resource.responseHeaders.map(pair => `${pair.name}: ${pair.value}`).join('\n')}</div>
-        {resource.requestSha1 ? <h4>Request Body</h4> : ''}
+        {resource.requestSha1 ? <div className='network-request-details-header'>Request Body</div> : ''}
         {resource.requestSha1 ? <div className='network-request-body'>{formatBody(requestBody, requestContentType)}</div> : ''}
-        <h4>Response Body</h4>
+        <div className='network-request-details-header'>Response Body</div>
         {!resource.responseSha1 ? <div className='network-request-response-body'>Response body is not available for this request.</div> : ''}
         {responseBody !== null && responseBody.dataUrl ? <img src={responseBody.dataUrl} /> : ''}
         {responseBody !== null && responseBody.text ? <div className='network-request-response-body'>{formatBody(responseBody.text, resource.contentType)}</div> : ''}