[DrJones] Add computed timings

This data matches the calculations in the timing tab of a network request.

Fixed: 370024636
Change-Id: Ifcf44e3a8c209cd96f975654eef521248c403207
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5934527
Commit-Queue: Alex Rudenko <[email protected]>
Reviewed-by: Nikolay Vitkov <[email protected]>
Auto-Submit: Alex Rudenko <[email protected]>
Commit-Queue: Nikolay Vitkov <[email protected]>

Author: OrKoN

front_end/panels/freestyler/BUILD.gn

@@ -40,7 +40,7 @@ devtools_module("freestyler") {
     "../../models/logs:bundle",
     "../../models/trace:bundle",
     "../../models/workspace:bundle",
-    "../../panels/network/forward:bundle",
+    "../../panels/network:bundle",
     "../../panels/utils:bundle",
     "../../third_party/marked:bundle",
     "../../ui/components/markdown_view:bundle",

front_end/panels/freestyler/DrJonesNetworkAgent.test.ts

@@ -7,14 +7,21 @@ import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as Logs from '../../models/logs/logs.js';
+import type * as Network from '../../panels/network/network.js';
 import {
-  describeWithEnvironment,
   getGetHostConfigStub,
 } from '../../testing/EnvironmentHelpers.js';
+import {describeWithMockConnection} from '../../testing/MockConnection.js';
+import {createNetworkPanelForMockConnection} from '../../testing/NetworkHelpers.js';
+import * as Coordinator from '../../ui/components/render_coordinator/render_coordinator.js';
 
 import {DrJonesNetworkAgent, ResponseType} from './freestyler.js';
 
-describeWithEnvironment('DrJonesNetworkAgent', () => {
+const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
+
+describeWithMockConnection('DrJonesNetworkAgent', () => {
+  let networkPanel: Network.NetworkPanel.NetworkPanel;
+
   function mockHostConfig(modelId?: string, temperature?: number) {
     getGetHostConfigStub({
       devToolsExplainThisResourceDogfood: {
@@ -24,6 +31,15 @@ describeWithEnvironment('DrJonesNetworkAgent', () => {
     });
   }
 
+  beforeEach(async () => {
+    networkPanel = await createNetworkPanelForMockConnection();
+  });
+
+  afterEach(async () => {
+    await coordinator.done();
+    networkPanel.detach();
+  });
+
   describe('buildRequest', () => {
     beforeEach(() => {
       sinon.restore();
@@ -222,20 +238,8 @@ describeWithEnvironment('DrJonesNetworkAgent', () => {
             },
             {
               title: 'Timing',
-              text: `Request start time: 500
-Request end time: -1
-Receiving response headers start time: 1000
-Receiving response headers end time: 0
-Proxy negotiation start time: 0
-Proxy negotiation end time: 0
-DNS lookup start time: 0
-DNS lookup end time: 0
-TCP start time: 0
-TCP end time: 0
-SSL start time: 0
-SSL end time: 0
-Sending start: 800
-Sending end: 900`,
+              text:
+                  'Queued at (timestamp): 0 μs\nStarted at (timestamp): 8.3 min\nQueueing (duration): 8.3 min\nConnection start (stalled) (duration): 800.00 ms\nRequest sent (duration): 100.00 ms\nDuration (duration): 8.3 min',
             },
             {
               title: 'Request Initiator Chain',
@@ -270,20 +274,12 @@ foo3: bar3
 
 Response status: 200 \n
 Request Timing:
-Request start time: 500
-Request end time: -1
-Receiving response headers start time: 1000
-Receiving response headers end time: 0
-Proxy negotiation start time: 0
-Proxy negotiation end time: 0
-DNS lookup start time: 0
-DNS lookup end time: 0
-TCP start time: 0
-TCP end time: 0
-SSL start time: 0
-SSL end time: 0
-Sending start: 800
-Sending end: 900
+Queued at (timestamp): 0 μs
+Started at (timestamp): 8.3 min
+Queueing (duration): 8.3 min
+Connection start (stalled) (duration): 800.00 ms
+Request sent (duration): 100.00 ms
+Duration (duration): 8.3 min
 
 Request Initiator Chain:
 - URL: https://www.initiator.com

front_end/panels/freestyler/DrJonesNetworkAgent.ts

@@ -7,6 +7,7 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as Logs from '../../models/logs/logs.js';
+import * as Network from '../../panels/network/network.js';
 
 import {
   AiAgent,
@@ -180,22 +181,54 @@ export function formatHeaders(title: string, headers: SDK.NetworkRequest.NameVal
 }
 
 export function formatNetworkRequestTiming(request: SDK.NetworkRequest.NetworkRequest): string {
-  const timing = request.timing;
-
-  return `Request start time: ${request.startTime}
-Request end time: ${request.endTime}
-Receiving response headers start time: ${timing?.receiveHeadersStart}
-Receiving response headers end time: ${timing?.receiveHeadersEnd}
-Proxy negotiation start time: ${timing?.proxyStart}
-Proxy negotiation end time: ${timing?.proxyEnd}
-DNS lookup start time: ${timing?.dnsStart}
-DNS lookup end time: ${timing?.dnsEnd}
-TCP start time: ${timing?.connectStart}
-TCP end time: ${timing?.connectEnd}
-SSL start time: ${timing?.sslStart}
-SSL end time: ${timing?.sslEnd}
-Sending start: ${timing?.sendStart}
-Sending end: ${timing?.sendEnd}`;
+  const calculator = Network.NetworkPanel.NetworkPanel.instance().networkLogView.timeCalculator();
+  const results =
+      Network.RequestTimingView.RequestTimingView.calculateRequestTimeRanges(request, calculator.minimumBoundary());
+
+  function getDuration(name: string): string|undefined {
+    const result = results.find(r => r.name === name);
+    if (!result) {
+      return;
+    }
+    return i18n.TimeUtilities.secondsToString(result.end - result.start, true);
+  }
+
+  const labels = [
+    {
+      label: 'Queued at (timestamp)',
+      value: calculator.formatValue(request.issueTime(), 2),
+    },
+    {
+      label: 'Started at (timestamp)',
+      value: calculator.formatValue(request.startTime, 2),
+    },
+    {
+      label: 'Queueing (duration)',
+      value: getDuration('queueing'),
+    },
+    {
+      label: 'Connection start (stalled) (duration)',
+      value: getDuration('blocking'),
+    },
+    {
+      label: 'Request sent (duration)',
+      value: getDuration('sending'),
+    },
+    {
+      label: 'Waiting for server response (duration)',
+      value: getDuration('waiting'),
+    },
+    {
+      label: 'Content download (duration)',
+      value: getDuration('receiving'),
+    },
+    {
+      label: 'Duration (duration)',
+      value: getDuration('total'),
+    },
+  ];
+
+  return labels.filter(label => Boolean(label.value)).map(label => `${label.label}: ${label.value}`).join('\n');
 }
 
 function formatRequestInitiated(

front_end/panels/network/BUILD.gn

@@ -112,6 +112,7 @@ devtools_entrypoint("bundle") {
   visibility = [
     ":*",
     "../../entrypoints/*",
+    "../../panels/freestyler/*",
     "../../ui/components/request_link_icon/*",
     "../application/*",
   ]

front_end/panels/network/NetworkPanel.test.ts

@@ -6,8 +6,9 @@ import * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Logs from '../../models/logs/logs.js';
 import * as Trace from '../../models/trace/trace.js';
-import {createTarget, registerNoopActions} from '../../testing/EnvironmentHelpers.js';
+import {createTarget} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
+import {createNetworkPanelForMockConnection} from '../../testing/NetworkHelpers.js';
 import * as Coordinator from '../../ui/components/render_coordinator/render_coordinator.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -20,28 +21,8 @@ describeWithMockConnection('NetworkPanel', () => {
   let networkPanel: Network.NetworkPanel.NetworkPanel;
 
   beforeEach(async () => {
-    registerNoopActions(['network.toggle-recording', 'network.clear']);
-
     target = createTarget();
-    const dummyStorage = new Common.Settings.SettingsStorage({});
-    for (const settingName
-             of ['network-color-code-resource-types', 'network.group-by-frame', 'network-record-film-strip-setting']) {
-      Common.Settings.registerSettingExtension({
-        settingName,
-        settingType: Common.Settings.SettingType.BOOLEAN,
-        defaultValue: false,
-      });
-    }
-    Common.Settings.Settings.instance({
-      forceNew: true,
-      syncedStorage: dummyStorage,
-      globalStorage: dummyStorage,
-      localStorage: dummyStorage,
-    });
-    networkPanel = Network.NetworkPanel.NetworkPanel.instance({forceNew: true, displayScreenshotDelay: 0});
-    networkPanel.markAsRoot();
-    networkPanel.show(document.body);
-    await coordinator.done();
+    networkPanel = await createNetworkPanelForMockConnection();
   });
 
   afterEach(async () => {

front_end/testing/BUILD.gn

@@ -28,6 +28,7 @@ ts_library("testing") {
     "MockScopeChain.ts",
     "MutationHelpers.test.ts",
     "MutationHelpers.ts",
+    "NetworkHelpers.ts",
     "OverridesHelpers.ts",
     "PersistenceHelpers.ts",
     "PropertyParser.ts",

front_end/testing/NetworkHelpers.ts

@@ -0,0 +1,38 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Common from '../core/common/common.js';
+import * as Network from '../panels/network/network.js';
+import * as Coordinator from '../ui/components/render_coordinator/render_coordinator.js';
+
+import {
+  registerNoopActions,
+} from './EnvironmentHelpers.js';
+
+const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
+
+export async function createNetworkPanelForMockConnection(): Promise<Network.NetworkPanel.NetworkPanel> {
+  registerNoopActions(['network.toggle-recording', 'network.clear']);
+
+  const dummyStorage = new Common.Settings.SettingsStorage({});
+  for (const settingName
+           of ['network-color-code-resource-types', 'network.group-by-frame', 'network-record-film-strip-setting']) {
+    Common.Settings.registerSettingExtension({
+      settingName,
+      settingType: Common.Settings.SettingType.BOOLEAN,
+      defaultValue: false,
+    });
+  }
+  Common.Settings.Settings.instance({
+    forceNew: true,
+    syncedStorage: dummyStorage,
+    globalStorage: dummyStorage,
+    localStorage: dummyStorage,
+  });
+  const networkPanel = Network.NetworkPanel.NetworkPanel.instance({forceNew: true, displayScreenshotDelay: 0});
+  networkPanel.markAsRoot();
+  networkPanel.show(document.body);
+  await coordinator.done();
+  return networkPanel;
+}