AI: put calculator onto Network Request Context

Long term the plan here is to do something better to remove the need for
the calculator entirely, but doing it this way means at least that the
NetworkAgent doesn't have to import the entire Network Panel.

R=alexrudenko@chromium.org

Bug: 442509324, 442817305
Change-Id: Id76380cd32599de35c622ebea5784731a21c9558
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6911676
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>

Author: jackfranklin

front_end/models/ai_assistance/BUILD.gn

@@ -37,6 +37,7 @@ devtools_module("ai_assistance") {
     "../../core/host:bundle",
     "../../core/i18n:bundle",
     "../../core/root:bundle",
+    "../../models/network_time_calculator:bundle",
     "../../panels/elements:bundle",
     "../../panels/network:bundle",
     "../../panels/timeline/utils:bundle",

front_end/models/ai_assistance/ConversationHandler.ts

@@ -10,6 +10,7 @@ import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as NetworkTimeCalculator from '../network_time_calculator/network_time_calculator.js';
 
 import {
   type AiAgent,
@@ -313,11 +314,15 @@ export class ConversationHandler {
     if (!request) {
       return this.#generateErrorResponse(`Can't find request with the given selector ${requestUrl}`);
     }
+
+    const calculator = new NetworkTimeCalculator.NetworkTransferTimeCalculator();
+    calculator.updateBoundaries(request);
+
     return this.#createAndDoExternalConversation({
       conversationType: ConversationType.NETWORK,
       aiAgent: networkAgent,
       prompt,
-      selected: new RequestContext(request),
+      selected: new RequestContext(request, calculator),
     });
   }
 

front_end/models/ai_assistance/agents/NetworkAgent.test.ts

@@ -13,6 +13,7 @@ import {describeWithMockConnection} from '../../../testing/MockConnection.js';
 import {createNetworkPanelForMockConnection} from '../../../testing/NetworkHelpers.js';
 import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as Logs from '../../logs/logs.js';
+import * as NetworkTimeCalculator from '../../network_time_calculator/network_time_calculator.js';
 import {
   NetworkAgent,
   RequestContext,
@@ -67,6 +68,7 @@ describeWithMockConnection('NetworkAgent', () => {
   });
   describe('run', () => {
     let selectedNetworkRequest: SDK.NetworkRequest.NetworkRequest;
+    let calculator: NetworkTimeCalculator.NetworkTransferTimeCalculator;
     const timingInfo: Protocol.Network.ResourceTiming = {
       requestTime: 500,
       proxyStart: 0,
@@ -128,6 +130,9 @@ describeWithMockConnection('NetworkAgent', () => {
               [initiatedNetworkRequest2, selectedNetworkRequest],
             ]),
           });
+
+      calculator = new NetworkTimeCalculator.NetworkTransferTimeCalculator();
+      calculator.updateBoundaries(selectedNetworkRequest);
     });
 
     it('generates an answer', async () => {
@@ -141,7 +146,7 @@ describeWithMockConnection('NetworkAgent', () => {
       });
 
       const responses =
-          await Array.fromAsync(agent.run('test', {selected: new RequestContext(selectedNetworkRequest)}));
+          await Array.fromAsync(agent.run('test', {selected: new RequestContext(selectedNetworkRequest, calculator)}));
       assert.deepEqual(responses, [
         {
           type: ResponseType.USER_QUERY,

front_end/models/ai_assistance/agents/NetworkAgent.ts

@@ -6,6 +6,7 @@ import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
+import type * as NetworkTimeCalculator from '../../network_time_calculator/network_time_calculator.js';
 import {NetworkRequestFormatter} from '../data_formatters/NetworkRequestFormatter.js';
 
 import {
@@ -93,10 +94,13 @@ const lockedString = i18n.i18n.lockedString;
 
 export class RequestContext extends ConversationContext<SDK.NetworkRequest.NetworkRequest> {
   #request: SDK.NetworkRequest.NetworkRequest;
+  #calculator: NetworkTimeCalculator.NetworkTransferTimeCalculator;
 
-  constructor(request: SDK.NetworkRequest.NetworkRequest) {
+  constructor(
+      request: SDK.NetworkRequest.NetworkRequest, calculator: NetworkTimeCalculator.NetworkTransferTimeCalculator) {
     super();
     this.#request = request;
+    this.#calculator = calculator;
   }
 
   override getOrigin(): string {
@@ -107,6 +111,10 @@ export class RequestContext extends ConversationContext<SDK.NetworkRequest.Netwo
     return this.#request;
   }
 
+  get calculator(): NetworkTimeCalculator.NetworkTimeCalculator {
+    return this.#calculator;
+  }
+
   override getTitle(): string {
     return this.#request.name();
   }
@@ -133,34 +141,33 @@ export class NetworkAgent extends AiAgent<SDK.NetworkRequest.NetworkRequest> {
   }
 
   async *
-      handleContextDetails(selectedNetworkRequest: ConversationContext<SDK.NetworkRequest.NetworkRequest>|null):
-          AsyncGenerator<ContextResponse, void, void> {
+      handleContextDetails(selectedNetworkRequest: RequestContext|null): AsyncGenerator<ContextResponse, void, void> {
     if (!selectedNetworkRequest) {
       return;
     }
 
     yield {
       type: ResponseType.CONTEXT,
       title: lockedString(UIStringsNotTranslate.analyzingNetworkData),
-      details: createContextDetailsForNetworkAgent(selectedNetworkRequest.getItem()),
+      details: createContextDetailsForNetworkAgent(selectedNetworkRequest),
     };
   }
 
-  override async enhanceQuery(
-      query: string,
-      selectedNetworkRequest: ConversationContext<SDK.NetworkRequest.NetworkRequest>|null): Promise<string> {
+  override async enhanceQuery(query: string, selectedNetworkRequest: RequestContext|null): Promise<string> {
     const networkEnchantmentQuery = selectedNetworkRequest ?
         `# Selected network request \n${
-            new NetworkRequestFormatter(selectedNetworkRequest.getItem())
+            new NetworkRequestFormatter(selectedNetworkRequest.getItem(), selectedNetworkRequest.calculator)
                 .formatNetworkRequest()}\n\n# User request\n\n` :
         '';
     return `${networkEnchantmentQuery}${query}`;
   }
 }
 
-function createContextDetailsForNetworkAgent(request: SDK.NetworkRequest.NetworkRequest):
-    [ContextDetail, ...ContextDetail[]] {
-  const formatter = new NetworkRequestFormatter(request);
+function createContextDetailsForNetworkAgent(
+    selectedNetworkRequest: RequestContext,
+    ): [ContextDetail, ...ContextDetail[]] {
+  const request = selectedNetworkRequest.getItem();
+  const formatter = new NetworkRequestFormatter(request, selectedNetworkRequest.calculator);
   const requestContextDetail: ContextDetail = {
     title: lockedString(UIStringsNotTranslate.request),
     text: lockedString(UIStringsNotTranslate.requestUrl) + ': ' + request.url() + '\n\n' +

front_end/models/ai_assistance/data_formatters/FileFormatter.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Bindings from '../../bindings/bindings.js';
+import * as NetworkTimeCalculator from '../../network_time_calculator/network_time_calculator.js';
 import type * as Workspace from '../../workspace/workspace.js';
 
 import {NetworkRequestFormatter} from './NetworkRequestFormatter.js';
@@ -62,8 +63,10 @@ export class FileFormatter {
     ];
     const resource = Bindings.ResourceUtils.resourceForURL(this.#file.url());
     if (resource?.request) {
+      const calculator = new NetworkTimeCalculator.NetworkTransferTimeCalculator();
+      calculator.updateBoundaries(resource.request);
       lines.push(`Request initiator chain:
-${new NetworkRequestFormatter(resource.request).formatRequestInitiatorChain()}`);
+${new NetworkRequestFormatter(resource.request, calculator).formatRequestInitiatorChain()}`);
     }
     lines.push(`File content:
 ${this.#formatFileContent()}`);

front_end/models/ai_assistance/data_formatters/NetworkRequestFormatter.ts

@@ -6,6 +6,7 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
 import * as Network from '../../../panels/network/network.js';
 import * as Logs from '../../logs/logs.js';
+import type * as NetworkTimeCalculator from '../../network_time_calculator/network_time_calculator.js';
 
 const MAX_HEADERS_SIZE = 1000;
 
@@ -22,6 +23,7 @@ function sanitizeHeaders(headers: Array<{name: string, value: string}>): Array<{
 }
 
 export class NetworkRequestFormatter {
+  #calculator: NetworkTimeCalculator.NetworkTransferTimeCalculator;
   static allowHeader(headerName: string): boolean {
     return allowedHeaders.has(headerName.toLowerCase().trim());
   }
@@ -45,8 +47,10 @@ export class NetworkRequestFormatter {
 
   #request: SDK.NetworkRequest.NetworkRequest;
 
-  constructor(request: SDK.NetworkRequest.NetworkRequest) {
+  constructor(
+      request: SDK.NetworkRequest.NetworkRequest, calculator: NetworkTimeCalculator.NetworkTransferTimeCalculator) {
     this.#request = request;
+    this.#calculator = calculator;
   }
 
   formatRequestHeaders(): string {
@@ -99,9 +103,8 @@ Request initiator chain:\n${this.formatRequestInitiatorChain()}`;
   }
 
   formatNetworkRequestTiming(): string {
-    const calculator = Network.NetworkPanel.NetworkPanel.instance().networkLogView.timeCalculator();
     const results = Network.RequestTimingView.RequestTimingView.calculateRequestTimeRanges(
-        this.#request, calculator.minimumBoundary());
+        this.#request, this.#calculator.minimumBoundary());
 
     function getDuration(name: string): string|undefined {
       const result = results.find(r => r.name === name);
@@ -114,11 +117,11 @@ Request initiator chain:\n${this.formatRequestInitiatorChain()}`;
     const labels = [
       {
         label: 'Queued at (timestamp)',
-        value: calculator.formatValue(this.#request.issueTime(), 2),
+        value: this.#calculator.formatValue(this.#request.issueTime(), 2),
       },
       {
         label: 'Started at (timestamp)',
-        value: calculator.formatValue(this.#request.startTime, 2),
+        value: this.#calculator.formatValue(this.#request.startTime, 2),
       },
       {
         label: 'Queueing (duration)',

front_end/models/network_time_calculator/BUILD.gn

@@ -25,6 +25,7 @@ devtools_entrypoint("bundle") {
 
   visibility = [
     ":*",
+    "../*",
     "../../panels/network/*",
     "../../ui/legacy/components/perf_ui/*",
   ]

front_end/panels/ai_assistance/AiAssistancePanel.test.ts

@@ -7,6 +7,7 @@ import * as Host from '../../core/host/host.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
+import * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import {
   cleanup,
@@ -264,7 +265,9 @@ describeWithMockConnection('AI Assistance Panel', () => {
       {
         flavor: SDK.NetworkRequest.NetworkRequest,
         createContext: () => {
-          return new AiAssistanceModel.RequestContext(sinon.createStubInstance(SDK.NetworkRequest.NetworkRequest));
+          return new AiAssistanceModel.RequestContext(
+              sinon.createStubInstance(SDK.NetworkRequest.NetworkRequest),
+              sinon.createStubInstance(NetworkTimeCalculator.NetworkTransferDurationCalculator));
         },
         action: 'drjones.network-floating-button'
       },
@@ -458,7 +461,6 @@ describeWithMockConnection('AI Assistance Panel', () => {
          assert.isFalse(view.input.showChatActions);
          assert.isFalse(view.input.showActiveConversationActions);
        });
-
   });
 
   describe('history interactions', () => {

front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -20,6 +20,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as NetworkForward from '../network/forward/forward.js';
+import * as NetworkPanel from '../network/network.js';
 import * as TimelinePanel from '../timeline/timeline.js';
 import * as TimelineUtils from '../timeline/utils/utils.js';
 
@@ -428,7 +429,8 @@ function createRequestContext(request: SDK.NetworkRequest.NetworkRequest|null):
   if (!request) {
     return null;
   }
-  return new AiAssistanceModel.RequestContext(request);
+  const calculator = NetworkPanel.NetworkPanel.NetworkPanel.instance().networkLogView.timeCalculator();
+  return new AiAssistanceModel.RequestContext(request, calculator);
 }
 
 function createPerformanceTraceContext(focus: TimelineUtils.AIContext.AgentFocus|null):
@@ -826,7 +828,12 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           return;
         }
 
-        this.#selectedRequest = Boolean(ev.data) ? new AiAssistanceModel.RequestContext(ev.data) : null;
+        if (Boolean(ev.data)) {
+          const calculator = NetworkPanel.NetworkPanel.NetworkPanel.instance().networkLogView.timeCalculator();
+          this.#selectedRequest = new AiAssistanceModel.RequestContext(ev.data, calculator);
+        } else {
+          this.#selectedRequest = null;
+        }
         this.#updateConversationState({agent: this.#conversationAgent});
       };
 

front_end/panels/network/NetworkLogView.ts

@@ -513,7 +513,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
   private readonly progressBarContainer: Element;
   private readonly networkLogLargeRowsSetting: Common.Settings.Setting<boolean>;
   private rowHeightInternal: number;
-  private readonly timeCalculatorInternal: NetworkTimeCalculator.NetworkTimeCalculator;
+  private readonly timeCalculatorInternal: NetworkTimeCalculator.NetworkTransferTimeCalculator;
   private readonly durationCalculator: NetworkTimeCalculator.NetworkTimeCalculator;
   private calculatorInternal: NetworkTimeCalculator.NetworkTimeCalculator;
   private readonly columnsInternal: NetworkLogViewColumns;
@@ -1330,7 +1330,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     }
   }
 
-  timeCalculator(): NetworkTimeCalculator.NetworkTimeCalculator {
+  timeCalculator(): NetworkTimeCalculator.NetworkTransferTimeCalculator {
     return this.timeCalculatorInternal;
   }