Fix durations in the network panel

src/components/network-chart/index.js

@@ -196,8 +196,8 @@ function _getVirtualListItems(props: Props): NetworkChartRowProps[] {
       };
     }
     // Compute the positioning of the network markers.
-    const startPosition = _timeToCssPixels(props, networkPayload.startTime);
-    const endPosition = _timeToCssPixels(props, networkPayload.endTime);
+    const startPosition = _timeToCssPixels(props, marker.start);
+    const endPosition = _timeToCssPixels(props, marker.start + marker.dur);
 
     // Set min-width for marker bar.
     let markerWidth = endPosition - startPosition;

src/profile-logic/marker-data.js

@@ -9,7 +9,7 @@ import type {
   IndexIntoStringTable,
 } from '../types/profile';
 import type { Marker } from '../types/profile-derived';
-import type { BailoutPayload } from '../types/markers';
+import type { BailoutPayload, NetworkPayload } from '../types/markers';
 import type { UniqueStringArray } from '../utils/unique-string-array';
 import { getNumberPropertyOrNull } from '../utils/flow';
 
@@ -473,9 +473,14 @@ export function mergeStartAndEndNetworkMarker(markers: Marker[]): Marker[] {
             marker.data.status === 'STATUS_START'
               ? [marker, markerNext]
               : [markerNext, marker];
+          const startData: NetworkPayload = (startMarker.data: any);
+          const endData: NetworkPayload = (endMarker.data: any);
           const mergedMarker = {
-            data: endMarker.data,
-            dur: endMarker.dur,
+            data: {
+              ...endData,
+              startTime: startData.startTime,
+            },
+            dur: startMarker.dur + endMarker.dur,
             name: endMarker.name,
             title: endMarker.title,
             start: startMarker.start,

src/test/components/NetworkChart.test.js

@@ -15,15 +15,18 @@ import mockCanvasContext from '../fixtures/mocks/canvas-context';
 import { storeWithProfile } from '../fixtures/stores';
 import {
   getProfileWithMarkers,
-  getNetworkMarker,
+  getNetworkMarkers,
 } from '../fixtures/profiles/processed-profile';
 import { getBoundingBox } from '../fixtures/utils';
 import mockRaf from '../fixtures/mocks/request-animation-frame';
 import { type NetworkPayload } from '../../types/markers';
 
-const NETWORK_MARKERS = Array(10)
-  .fill()
-  .map((_, i) => getNetworkMarker(3 + 0.1 * i, i));
+const NETWORK_MARKERS = (function() {
+  const arrayOfNetworkMarkers = Array(10)
+    .fill()
+    .map((_, i) => getNetworkMarkers(3 + 0.1 * i, i));
+  return [].concat(...arrayOfNetworkMarkers);
+})();
 
 function setupWithProfile(profile) {
   const flushRafCalls = mockRaf();