From 105768fa38fec1c4326bacac51004ea815ec500a Mon Sep 17 00:00:00 2001
From: Nilesh Suthar <nileshsuthar@live.in>
Date: Thu, 7 Jul 2022 23:56:31 +0530
Subject: [PATCH] feat(trace-viewer): show request time in trace viewer network
 tab (#14353)

---
 packages/trace-viewer/src/ui/networkResourceDetails.css | 4 ++++
 packages/trace-viewer/src/ui/networkResourceDetails.tsx | 1 +
 2 files changed, 5 insertions(+)

diff --git a/packages/trace-viewer/src/ui/networkResourceDetails.css b/packages/trace-viewer/src/ui/networkResourceDetails.css
index 989d67c679..a3dda99e30 100644
--- a/packages/trace-viewer/src/ui/networkResourceDetails.css
+++ b/packages/trace-viewer/src/ui/networkResourceDetails.css
@@ -96,3 +96,7 @@
   margin: 3px 0;
   font-weight: bold;
 }
+
+.network-request-details-time {
+  float: right;
+}
diff --git a/packages/trace-viewer/src/ui/networkResourceDetails.tsx b/packages/trace-viewer/src/ui/networkResourceDetails.tsx
index 7e99133146..fed5b23096 100644
--- a/packages/trace-viewer/src/ui/networkResourceDetails.tsx
+++ b/packages/trace-viewer/src/ui/networkResourceDetails.tsx
@@ -127,6 +127,7 @@ export const NetworkResourceDetails: React.FunctionComponent<{
     className={'network-request ' + (selected ? 'selected' : '')} onClick={() => setSelected(index)}>
     <Expandable expanded={expanded} setExpanded={setExpanded} style={{ width: '100%' }} title={ renderTitle() }>
       <div className='network-request-details'>
+        <div className='network-request-details-time'>{resource.time}ms</div>
         <div className='network-request-details-header'>URL</div>
         <div className='network-request-details-url'>{resource.request.url}</div>
         <div className='network-request-details-header'>Request Headers</div>