diff --git a/src/components/shared/MarkerTooltipContents.js b/src/components/shared/MarkerTooltipContents.js index 12a32e6483..55b2c88e36 100644 --- a/src/components/shared/MarkerTooltipContents.js +++ b/src/components/shared/MarkerTooltipContents.js @@ -63,6 +63,17 @@ function _markerDetailNullable( 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 (
- {_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 + )}
); } 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 { implementationFilter, } = this.props; const details = getMarkerDetails(marker, thread, implementationFilter); - return (
diff --git a/src/test/components/__snapshots__/MarkerTooltipContents.test.js.snap b/src/test/components/__snapshots__/MarkerTooltipContents.test.js.snap index 454f48afe5..85318d0b29 100644 --- a/src/test/components/__snapshots__/MarkerTooltipContents.test.js.snap +++ b/src/test/components/__snapshots__/MarkerTooltipContents.test.js.snap @@ -217,24 +217,24 @@ Array [
- URL + Status :
- http://wikia.com/ + STATUS_START
- pri + URL :
- 8 + http://wikia.com/
- Status + Priority :
- STATUS_START + 8
,
- pri + Status :
- 8 + STATUS_READING
- Status + Priority :
- STATUS_READING + 8 ,
- pri + Priority :
8
- count - : -
- 47027 -
- requestStart @ + Requested bytes :
- -2239.159199062502 + 46KB
- response + Response time :
- 3.514498000000458 + 3.5ms ,
- pri + Priority :
-20
- count + Requested bytes :
- 0 + 0.000B , ]