chrome-devtools-frontend 1.0.1555430 → 1.0.1556696

package/front_end/models/ai_assistance/agents/PerformanceAgent.ts

@@ -10,8 +10,10 @@ import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Tracing from '../../../services/tracing/tracing.js';
 import * as Annotations from '../../annotations/annotations.js';
+import * as Logs from '../../logs/logs.js';
 import * as SourceMapScopes from '../../source_map_scopes/source_map_scopes.js';
 import * as Trace from '../../trace/trace.js';
+import {ArtifactsManager} from '../ArtifactsManager.js';
 import {
   PerformanceInsightFormatter,
 } from '../data_formatters/PerformanceInsightFormatter.js';
@@ -67,7 +69,49 @@ const greenDevAdditionalAnnotationsGuidelines = `
 - The annotationMessage should be descriptive and relevant to why the element or network request is being highlighted.
 `;
 
-const greenDevAdditionalWidgetGuidelines = `
+const getGreenDevAdditionalWidgetGuidelines = (): string => {
+  // GreenDev is experimenting with multiple ways to display widget:
+  // if widgetsFromFunctionCalls is true, then we use function calls to add widgets
+  // otherwise we use ai-insight tags
+  const widgetsFromFunctionCalls = true;
+
+  if (widgetsFromFunctionCalls) {
+    return `
+- CRITICAL: You have access to three functions for adding rich, interactive widgets to your response:
+  \`addInsightWidget\`, \`addNetworkRequestWidget\`, and \`addFlameChartWidget\`.
+  You MUST use these functions whenever you refer to a corresponding entity.
+
+- **\`addInsightWidget({insightType: '...'})\`**:
+  - **When to use**: Call this function every time you mention a specific performance insight (e.g., LCP, INP,
+    CLS culprits).
+  - **Purpose**: It embeds an interactive widget that provides a detailed breakdown and visualization of the
+    insight.
+  - **Example**: If you are explaining the causes of a poor LCP score, you MUST also call
+    \`addInsightWidget({insightType: 'LCPBreakdown'})\`. This provides the user with the data to explore
+    alongside your explanation.
+- **\`addNetworkRequestWidget({eventKey: '...'})\`**:
+  - **When to use**: Call this function whenever you discuss a specific network request.
+  - **Purpose**: It adds a widget displaying the full details of the network request, such as its timing,
+    headers, and priority.
+  - **Critical**: The eventKey should be the trace event key (only the number, no letters prefix or -) of that
+    script's network request.
+  - **Example**: If you identify a render-blocking script, you MUST also call
+    \`addNetworkRequestWidget({eventKey: '...'})\` with the trace event key (only the number, no letters prefix
+    or -) of that script's network request.
+- **\`addFlameChartWidget({start: ..., end: ...})\`**:
+  - **When to use**: Call this function to highlight a specific time range within the trace, especially when
+    discussing long tasks, specific events, or periods of high activity.
+    - **Purpose**: It embeds a focused flame chart visualization for the given time range (in microseconds).
+    - **Example**: If you find a long task that is blocking the main thread, you MUST also call
+      \`addFlameChartWidget({start: 123456, end: 789012})\`. This provides the user with the data to explore
+      alongside your explanation.
+- **General Rules**:
+  - You MUST call these functions as soon as you identify the entity you are discussing.
+  - Do NOT add more than one widget for the same insight, network request, or time range to avoid redundancy.
+`;
+  }
+
+  return `
 - **Visualizing Insights**: When discussing the breakdown of specific metrics or a performance problem,
 you must render the appropriate Insight Overview component. Use these tags on a new line within your response:
   - For LCP breakdown: <ai-insight value="LCPBreakdown">
@@ -102,6 +146,7 @@ you must render the appropriate Insight Overview component. Use these tags on a
   - For example, for LCP, the phases like Time to First Byte will be part of the insight widget, so you must not state them in the text. This applies to other insights and network request timings.
 - Do not display any of the same widgets more than once. For example, if you have already displayed a network request widget for a specific event, do not display it again in the same response.
 `;
+};
 
 /**
  * Preamble clocks in at ~1341 tokens.
@@ -111,7 +156,7 @@ you must render the appropriate Insight Overview component. Use these tags on a
  * Check token length in https://aistudio.google.com/
  */
 const buildPreamble = (): string => {
-  const greenDevEnabled = Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled;
+  const greenDevEnabled = Boolean(Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled);
   const annotationsEnabled = Annotations.AnnotationRepository.annotationsEnabled();
   return `You are an assistant, expert in web performance and highly skilled with Chrome DevTools.
 
@@ -166,7 +211,7 @@ Note: if the user asks a specific question about the trace (such as "What is my
 - Be direct and to the point. Avoid unnecessary introductory phrases or filler content. Focus on delivering actionable advice efficiently.
 
 ${annotationsEnabled ? greenDevAdditionalAnnotationsGuidelines : ''}
-${greenDevEnabled ? greenDevAdditionalWidgetGuidelines : ''}
+${greenDevEnabled ? getGreenDevAdditionalWidgetGuidelines() : ''}
 
 ## Strict Constraints
 
@@ -1200,6 +1245,109 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
         },
       });
     }
+
+    if (Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled) {
+      this.declareFunction<{insightType: Trace.Insights.Types.InsightKeys}>('addInsightWidget', {
+        description:
+            'Adds an insight widget to the response. When mentioning an insight, call this function to also display an appropriate widget.',
+        parameters: {
+          type: Host.AidaClient.ParametersTypes.OBJECT,
+          description: '',
+          nullable: false,
+          properties: {
+            insightType: {
+              type: Host.AidaClient.ParametersTypes.STRING,
+              description:
+                  'The name of the insight. Only use the insight names given in the "Available insights" list.',
+              nullable: false,
+            },
+          },
+        },
+        handler: async _params => {
+          ArtifactsManager.instance().addArtifact({type: 'insight', insightType: _params.insightType});
+          return {result: {success: true}};
+        },
+      });
+
+      this.declareFunction<{eventKey: string}, object|{error: string}>('addNetworkRequestWidget', {
+        description:
+            'Adds a network request widget to the response. When mentioning a network request, call this function with its trace event key.',
+        parameters: {
+          type: Host.AidaClient.ParametersTypes.OBJECT,
+          description: '',
+          nullable: false,
+          properties: {
+            eventKey: {
+              type: Host.AidaClient.ParametersTypes.STRING,
+              description: 'The trace event key for the network request.',
+              nullable: false,
+            },
+          },
+        },
+        handler: async _params => {
+          const rawTraceEvent =
+              Trace.Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().getRawTraceEvents().at(
+                  Number(_params.eventKey));
+          // Get the trace event object if it is available.
+          // If the trace is uploaded, we need to use the synthetic event.
+          if (rawTraceEvent && Trace.Types.Events.isSyntheticNetworkRequest(rawTraceEvent)) {
+            const rawTraceEventId = rawTraceEvent?.args?.data?.requestId;
+            const rawTraceEventUrl = rawTraceEvent?.args?.data?.url;
+            const networkRequest = rawTraceEvent ? Logs.NetworkLog.NetworkLog.instance()
+                                                       .requestsForId(rawTraceEventId)
+                                                       .find(r => r.url() === rawTraceEventUrl) :
+                                                   null;
+            if (networkRequest) {
+              ArtifactsManager.instance().addArtifact({type: 'network-request', request: networkRequest});
+              return {result: {success: true}};
+            }
+          }
+
+          const syntheticRequest =
+              Trace.Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().syntheticEventForRawEventIndex(
+                  Number(_params.eventKey));
+
+          if (syntheticRequest && Trace.Types.Events.isSyntheticNetworkRequest(syntheticRequest)) {
+            ArtifactsManager.instance().addArtifact({
+              type: 'network-request',
+              request: syntheticRequest,
+            });
+            return {result: {success: true}};
+          }
+
+          return {result: {error: 'Could not find network request'}};
+        },
+      });
+
+      this.declareFunction<{start: number, end: number}, object|{error: string}>('addFlameChartWidget', {
+        description: 'Adds a flame chart widget to the response.',
+        parameters: {
+          type: Host.AidaClient.ParametersTypes.OBJECT,
+          description: '',
+          nullable: false,
+          properties: {
+            start: {
+              type: Host.AidaClient.ParametersTypes.INTEGER,
+              description: 'The start time of the flame chart in microseconds.',
+              nullable: false,
+            },
+            end: {
+              type: Host.AidaClient.ParametersTypes.INTEGER,
+              description: 'The end time of the flame chart in microseconds.',
+              nullable: false,
+            },
+          },
+        },
+        handler: async _params => {
+          ArtifactsManager.instance().addArtifact({
+            type: 'flamechart',
+            start: Trace.Types.Timing.Micro(_params.start),
+            end: Trace.Types.Timing.Micro(_params.end),
+          });
+          return {result: {success: true}};
+        },
+      });
+    }
   }
 
   async addElementAnnotation(elementId: string, annotationMessage: string):

package/front_end/models/ai_assistance/agents/StylingAgent.ts

@@ -275,7 +275,7 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
     this.#changes = opts.changeManager || new ChangeManager();
     this.#execJs = opts.execJs ?? executeJsCode;
     this.#createExtensionScope = opts.createExtensionScope ?? ((changes: ChangeManager) => {
-                                   return new ExtensionScope(changes, this.id, this.context?.getItem() ?? null);
+                                   return new ExtensionScope(changes, this.sessionId, this.context?.getItem() ?? null);
                                  });
 
     this.declareFunction<{

package/front_end/models/ai_assistance/ai_assistance.ts

@@ -13,6 +13,7 @@ import * as StylingAgent from './agents/StylingAgent.js';
 import * as AiConversation from './AiConversation.js';
 import * as AiHistoryStorage from './AiHistoryStorage.js';
 import * as AiUtils from './AiUtils.js';
+import * as ArtifactsManager from './ArtifactsManager.js';
 import * as BuiltInAi from './BuiltInAi.js';
 import * as ChangeManager from './ChangeManager.js';
 import * as ConversationHandler from './ConversationHandler.js';
@@ -38,6 +39,7 @@ export {
   AiHistoryStorage,
   AIQueries,
   AiUtils,
+  ArtifactsManager,
   BuiltInAi,
   ChangeManager,
   ConversationHandler,

package/front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.ts

@@ -262,8 +262,6 @@ export class PerformanceInsightFormatter {
       });
 
       rootCauses.unsizedImages.forEach(img => {
-        // TODO(b/413284569): if we store a nice human readable name for this
-        // image in the trace metadata, we can do something much nicer here.
         const url = img.paintImageEvent.args.data.url;
         const nodeName = img.paintImageEvent.args.data.nodeName;
         const extraText = url ? `url: ${this.#formatUrl(url)}` : `id: ${img.backendNodeId}`;

package/front_end/models/annotations/AnnotationRepository.ts

@@ -3,8 +3,8 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
-import * as Root from '../../core/root/root.js';
 import type * as SDK from '../../core/sdk/sdk.js';
+import * as GreenDev from '../greendev/greendev.js';
 
 import {AnnotationType} from './AnnotationType.js';
 
@@ -63,7 +63,7 @@ export class AnnotationRepository {
   }
 
   static annotationsEnabled(): boolean {
-    const enabled = Boolean(Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled);
+    const enabled = GreenDev.Prototypes.instance().isEnabled('aiAnnotations');
     // TODO(finnur): Fix race when Repository is created before feature flags have been set properly.
     if (!enabled) {
       this.#hasRepliedGreenDevDisabled = true;

package/front_end/models/greendev/Prototypes.ts

@@ -0,0 +1,56 @@
+// Copyright 2025 The Chromium Authors
+// 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 Root from '../../core/root/root.js';
+
+let instance: Prototypes|null = null;
+
+export interface GreenDevSettings {
+  inDevToolsFloaty: Common.Settings.Setting<boolean>;
+  inlineWidgets: Common.Settings.Setting<boolean>;
+  artifactViewer: Common.Settings.Setting<boolean>;
+  aiAnnotations: Common.Settings.Setting<boolean>;
+}
+
+export class Prototypes {
+  private constructor() {
+  }
+
+  static instance(): Prototypes {
+    if (instance) {
+      return instance;
+    }
+    instance = new Prototypes();
+    return instance;
+  }
+
+  /**
+   * Returns true if the specific setting is turned on AND the GreenDev flag is enabled
+   */
+  isEnabled(setting: keyof GreenDevSettings): boolean {
+    const greendevFlagEnabled = Boolean(Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled);
+
+    return greendevFlagEnabled && this.settings()[setting].get();
+  }
+
+  settings(): Readonly<GreenDevSettings> {
+    const settings = Common.Settings.Settings.instance();
+    const inDevToolsFloaty =
+        settings.createSetting('greendev-in-devtools-floaty-enabled', false, Common.Settings.SettingStorageType.LOCAL);
+
+    const inlineWidgets =
+        settings.createSetting('greendev-inline-widgets-enabled', false, Common.Settings.SettingStorageType.LOCAL);
+
+    const aiAnnotations = settings.createSetting(
+        'greendev-ai-annotations-enabled',
+        false,
+        Common.Settings.SettingStorageType.LOCAL,
+    );
+
+    const artifactViewer =
+        settings.createSetting('greendev-artifact-viewer-enabled', false, Common.Settings.SettingStorageType.LOCAL);
+    return {inDevToolsFloaty, inlineWidgets, aiAnnotations, artifactViewer};
+  }
+}

package/front_end/models/greendev/README.md

@@ -0,0 +1,5 @@
+# GreenDev Model
+
+As part of GreenDev we are building a bunch of prototypes into DevTools to user test. This model holds which prototypes are enabled for a given user.
+
+The settings is only stored in local storage, and not synced across devices or persisted in anyway beyond that.

package/front_end/models/greendev/greendev.ts

@@ -0,0 +1,5 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+export * from './Prototypes.js';

package/front_end/models/trace/extras/TraceTree.ts

@@ -493,8 +493,10 @@ export class BottomUpRootNode extends Node {
         node.totalTime += totalTimeById.get(id) || 0;
         totalTimeById.delete(id);
       }
-      // TODO: this may be wrong. See the skipped test in TraceTree.test.ts.
-      if (firstNodeStack.length) {
+
+      // An item on this stack means that this current node has a caller. Therefore,
+      // in a bottom-up view it has children.
+      if (idStack.length > 0) {
         node.setHasChildren(true);
       }
     }

package/front_end/models/trace/insights/LCPDiscovery.ts

@@ -129,8 +129,6 @@ export function generateInsight(
   }
 
   const initiatorUrl = lcpRequest.args.data.initiator?.url;
-  // TODO(b/372319476): Explore using trace event HTMLDocumentParser::FetchQueuedPreloads to determine if the request
-  // is discovered by the preload scanner.
   const initiatedByMainDoc =
       lcpRequest?.args.data.initiator?.type === 'parser' && docRequest.args.data.url === initiatorUrl;
   const imgPreloadedOrFoundInHTML = lcpRequest?.args.data.isLinkPreload || initiatedByMainDoc;

package/front_end/models/trace/types/TraceEvents.ts

@@ -1078,7 +1078,6 @@ export interface ResourceSendRequest extends Instant {
       resourceType?: Protocol.Network.ResourceType,
       /** Added Feb 2024. https://crrev.com/c/5297615 */
       fetchPriorityHint?: FetchPriorityHint,
-      // TODO(crbug.com/1457985): change requestMethod to enum when confirm in the backend code.
       requestMethod?: string,
       renderBlocking?: RenderBlocking,
       initiator?: Initiator,