Merge pull request firefox-devtools#1126 from zoepage/network-tooltip…

…-polish Fixes firefox-devtools#1111 - Network tooltip polish
m1rp · Jul 13, 2018 · 34d872b · 34d872b
2 parents d41b8af + c3d640b
commit 34d872b
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 46 deletions.
diff --git a/src/components/shared/MarkerTooltipContents.js b/src/components/shared/MarkerTooltipContents.js
@@ -63,6 +63,17 @@ function _markerDetailNullable<T: NotVoidOrNull>(
   return _markerDetail(key, label, value, fn);
 }
 
+function _markerDetailBytesNullable(
+  key: string,
+  label: string,
+  value: ?number
+): React.Node {
+  if (typeof value !== 'number') {
+    return null;
+  }
+  return _markerDetail(key, label, formatBytes(value));
+}
+
 function _markerDetailDeltaTimeNullable(
   key: string,
   label: string,
@@ -77,7 +88,8 @@ function _markerDetailDeltaTimeNullable(
   ) {
     return null;
   }
-  return _markerDetail(key, label, value1 - value2);
+  const valueResult = value1 - value2;
+  return _markerDetail(key, label, formatMilliseconds(valueResult));
 }
 
 type PhaseTimeTuple = {| name: string, time: Microseconds |};
@@ -522,10 +534,14 @@ function getMarkerDetails(
         ) {
           return (
             <div className="tooltipDetails">
-              {_markerDetailNullable('url', 'URL', data.URI)}
-              {_markerDetail('pri', 'pri', data.pri)}
-              {_markerDetailNullable('count', 'count', data.count)}
               {_markerDetail('status', 'Status', data.status)}
+              {_markerDetailNullable('url', 'URL', data.URI)}
+              {_markerDetail('pri', 'Priority', data.pri)}
+              {_markerDetailBytesNullable(
+                'count',
+                'Requested bytes',
+                data.count
+              )}
             </div>
           );
         } else {
@@ -538,40 +554,45 @@ function getMarkerDetails(
                 'Redirect URL',
                 data.RedirectURI
               )}
-              {_markerDetail('pri', 'pri', data.pri)}
-              {_markerDetailNullable('count', 'count', data.count)}
+              {_markerDetail('pri', 'Priority', data.pri)}
+              {_markerDetailBytesNullable(
+                'count',
+                'Requested bytes',
+                data.count
+              )}
               {_markerDetailDeltaTimeNullable(
                 'domainLookup',
-                'domainLookup',
+                'Domain lookup in total',
                 data.domainLookupEnd,
                 data.domainLookupStart
               )}
+              {_markerDetailDeltaTimeNullable(
+                'connect',
+                'Connection in total',
+                data.connectEnd,
+                data.connectStart
+              )}
               {_markerDetailDeltaTimeNullable(
                 'tcpConnect',
-                'tcpConnect',
+                'TCP connection in total',
                 data.tcpConnectEnd,
                 data.connectStart
               )}
-              {_markerDetailNullable(
-                'secureConnectionStart',
-                'secureConnectionStart',
-                data.secureConnectionStart
-              )}
               {_markerDetailDeltaTimeNullable(
-                'connect',
-                'connect',
-                data.connectEnd,
-                data.connectStart
+                'secureConnectionStart',
+                'Start of secure connection at',
+                data.secureConnectionStart,
+                data.tcpConnectEnd
               )}
               {_markerDetailDeltaTimeNullable(
                 'requestStart',
-                'requestStart @',
+                'Start of request at',
                 data.requestStart,
-                data.startTime
+                data.connectStart
               )}
               {_markerDetailDeltaTimeNullable(
                 'response',
-                'response',
+                'Response time',
                 data.responseEnd,
                 data.responseStart
               )}
@@ -636,7 +657,6 @@ class MarkerTooltipContents extends React.PureComponent<Props> {
       implementationFilter,
     } = this.props;
     const details = getMarkerDetails(marker, thread, implementationFilter);
-
     return (
       <div className={classNames('tooltipMarker', className)}>
         <div className={classNames({ tooltipHeader: details })}>

diff --git a/src/test/components/__snapshots__/MarkerTooltipContents.test.js.snap b/src/test/components/__snapshots__/MarkerTooltipContents.test.js.snap
@@ -217,24 +217,24 @@ Array [
       <div
         className="tooltipLabel"
       >
-        URL
+        Status
         :
       </div>
-      http://wikia.com/
+      STATUS_START
       <div
         className="tooltipLabel"
       >
-        pri
+        URL
         :
       </div>
-      8
+      http://wikia.com/
       <div
         className="tooltipLabel"
       >
-        Status
+        Priority
         :
       </div>
-      STATUS_START
+      8
     </div>
   </div>,
   <div
@@ -1203,17 +1203,17 @@ Array [
       <div
         className="tooltipLabel"
       >
-        pri
+        Status
         :
       </div>
-      8
+      STATUS_READING
       <div
         className="tooltipLabel"
       >
-        Status
+        Priority
         :
       </div>
-      STATUS_READING
+      8
     </div>
   </div>,
   <div
@@ -1267,31 +1267,24 @@ Array [
       <div
         className="tooltipLabel"
       >
-        pri
+        Priority
         :
       </div>
       8
       <div
         className="tooltipLabel"
       >
-        count
-        :
-      </div>
-      47027
-      <div
-        className="tooltipLabel"
-      >
-        requestStart @
+        Requested bytes
         :
       </div>
-      -2239.159199062502
+      46KB
       <div
         className="tooltipLabel"
       >
-        response
+        Response time
         :
       </div>
-      3.514498000000458
+      3.5ms
     </div>
   </div>,
   <div
@@ -1352,17 +1345,17 @@ Array [
       <div
         className="tooltipLabel"
       >
-        pri
+        Priority
         :
       </div>
       -20
       <div
         className="tooltipLabel"
       >
-        count
+        Requested bytes
         :
       </div>
-      0
+      0.000B
     </div>
   </div>,
 ]