From 0678f48289f2717468034407cea5cd5c2846c064 Mon Sep 17 00:00:00 2001
From: Pavel Feldman <pavel.feldman@gmail.com>
Date: Thu, 13 May 2021 16:07:38 -0700
Subject: [PATCH] chore(tracing): trim network urls for readability (#6566)

---
 src/server/snapshot/snapshotTypes.ts            |  1 +
 src/server/snapshot/snapshotter.ts              |  1 +
 .../traceViewer/ui/networkResourceDetails.css   | 11 +++++++++--
 .../traceViewer/ui/networkResourceDetails.tsx   | 17 +++++++++--------
 4 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/server/snapshot/snapshotTypes.ts b/src/server/snapshot/snapshotTypes.ts
index e31cde8051..c0b117c38a 100644
--- a/src/server/snapshot/snapshotTypes.ts
+++ b/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 }[],
diff --git a/src/server/snapshot/snapshotter.ts b/src/server/snapshot/snapshotter.ts
index b894b3c569..2458554bd4 100644
--- a/src/server/snapshot/snapshotter.ts
+++ b/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,
diff --git a/src/web/traceViewer/ui/networkResourceDetails.css b/src/web/traceViewer/ui/networkResourceDetails.css
index 776af9510d..989d67c679 100644
--- a/src/web/traceViewer/ui/networkResourceDetails.css
+++ b/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;
+}
diff --git a/src/web/traceViewer/ui/networkResourceDetails.tsx b/src/web/traceViewer/ui/networkResourceDetails.tsx
index d7efe121ac..204e32ad4d 100644
--- a/src/web/traceViewer/ui/networkResourceDetails.tsx
+++ b/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-url'>{resource.url}</div>
-        <div className='network-request-title-content-type'>{resource.contentType}</div>
+        <div className='network-request-title-method'>{resource.method}</div>
+        <div className='network-request-title-url'>{resourceName}</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> : ''}