chrome-devtools-frontend 1.0.1518653 → 1.0.1520139

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

@@ -9,7 +9,7 @@ import type {AgentFocus} from '../performance/AIContext.js';
 import {AIQueries} from '../performance/AIQueries.js';
 
 import {NetworkRequestFormatter} from './NetworkRequestFormatter.js';
-import {PerformanceInsightFormatter} from './PerformanceInsightFormatter.js';
+import type {PerformanceInsightFormatter} from './PerformanceInsightFormatter.js';
 import {bytes, micros, millis} from './UnitFormatters.js';
 
 export interface NetworkRequestFormatOptions {
@@ -17,17 +17,27 @@ export interface NetworkRequestFormatOptions {
   customTitle?: string;
 }
 
+type GetInsightFormatter = (focus: AgentFocus, model: Trace.Insights.Types.InsightModel) => PerformanceInsightFormatter;
+
 export class PerformanceTraceFormatter {
   #focus: AgentFocus;
   #parsedTrace: Trace.TraceModel.ParsedTrace;
   #insightSet: Trace.Insights.Types.InsightSet|null;
+  #getInsightFormatter: GetInsightFormatter|null = null;
   protected eventsSerializer: Trace.EventsSerializer.EventsSerializer;
 
-  constructor(focus: AgentFocus) {
+  /**
+   * We inject the insight formatter because otherwise we get a circular
+   * dependency between PerformanceInsightFormatter and
+   * PerformanceTraceFormatter. This is OK in the browser build, but breaks when
+   * we reuse this code in NodeJS for DevTools MCP.
+   */
+  constructor(focus: AgentFocus, getInsightFormatter: GetInsightFormatter|null) {
     this.#focus = focus;
-    this.#parsedTrace = focus.data.parsedTrace;
-    this.#insightSet = focus.data.insightSet;
+    this.#parsedTrace = focus.parsedTrace;
+    this.#insightSet = focus.insightSet;
     this.eventsSerializer = focus.eventsSerializer;
+    this.#getInsightFormatter = getInsightFormatter;
   }
 
   serializeEvent(event: Trace.Types.Events.Event): string {
@@ -133,7 +143,10 @@ export class PerformanceTraceFormatter {
     if (lcp || cls || inp) {
       parts.push('Metrics (lab / observed):');
       if (lcp) {
-        parts.push(`  - LCP: ${Math.round(lcp.value / 1000)} ms, event: ${this.serializeEvent(lcp.event)}`);
+        const nodeId = insightSet?.model.LCPBreakdown.lcpEvent?.args.data?.nodeId;
+        const nodeIdText = nodeId !== undefined ? `, nodeId: ${nodeId}` : '';
+        parts.push(
+            `  - LCP: ${Math.round(lcp.value / 1000)} ms, event: ${this.serializeEvent(lcp.event)}${nodeIdText}`);
         const subparts = insightSet?.model.LCPBreakdown.subparts;
         if (subparts) {
           const serializeSubpart = (subpart: Trace.Insights.Models.LCPBreakdown.Subpart): string => {
@@ -175,7 +188,10 @@ export class PerformanceTraceFormatter {
           continue;
         }
 
-        const formatter = new PerformanceInsightFormatter(this.#focus, model);
+        const formatter = this.#getInsightFormatter?.(this.#focus, model);
+        if (!formatter) {
+          continue;
+        }
         if (!formatter.insightIsSupported()) {
           continue;
         }
@@ -442,19 +458,7 @@ export class PerformanceTraceFormatter {
   }
 
   formatCallTree(tree: AICallTree, headerLevel = 1): string {
-    const results = [tree.serialize(headerLevel), ''];
-
-    // TODO(b/425270067): add eventKey to tree.serialize, but need to wait for other
-    // performance agent to be consolidated.
-    results.push('#'.repeat(headerLevel) + ' Node id to eventKey\n');
-    results.push('These node ids correspond to the call tree nodes listed in the above section.\n');
-    tree.breadthFirstWalk(tree.rootNode.children().values(), (node, nodeId) => {
-      results.push(`${nodeId}: ${this.eventsSerializer.keyForEvent(node.event)}`);
-    });
-
-    results.push('\nIMPORTANT: Never show eventKey to the user.');
-
-    return results.join('\n');
+    return `${tree.serialize(headerLevel)}\n\nIMPORTANT: Never show eventKey to the user.`;
   }
 
   formatNetworkRequests(

package/front_end/models/ai_assistance/performance/AICallTree.snapshot.txt

@@ -0,0 +1,75 @@
+Title: AICallTree supports NodeJS traces that do not have a "main thread"
+Content:
+# All URLs:
+
+  * 0: node:internal/main/run_main_module
+  * 1: node:internal/modules/run_main
+  * 2: node:internal/modules/cjs/loader
+  * 3: file:///Users/andoli/Desktop/mocks/fixnodeinspector/app.js
+
+# Call tree:
+
+1;p-1-1-0-2;(anonymous);2370;;0;2
+2;p-1-1-0-3;executeUserEntryPoint;2370;;1;3
+3;p-1-1-0-4;Module._load;2370;;2;4
+4;p-1-1-0-5;Module.load;2370;;2;5
+5;p-1-1-0-6;Module._extensions..js;2370;;2;6
+6;p-1-1-0-7;Module._compile;2370;;2;7
+7;p-1-1-0-8;callAndPauseOnStart;2370;;;8;S
+8;p-1-1-0-9;(anonymous);2370;2370;3;
+=== end content
+
+Title: AICallTree serializes a simple tree
+Content:
+# All URLs:
+
+  * 0: https://www.gstatic.com/devrel-devsite/prod/vafe2e13ca17bb026e70df42a2ead1c8192750e86a12923a88eda839025dabf95/js/devsite_app_module.js
+
+# Call tree:
+
+1;r-36071;Task;0.2;;;2
+2;r-36072;Timer fired;0.2;;;3
+3;r-36076;Function call;0.2;;0;4
+4;p-74406-259-16342-528;_ds.q.ns;0.2;;0;5;S
+5;p-74406-259-16342-529;clearTimeout;0.2;0;;6
+6;r-36082;Recalculate style;0.2;0.2;;
+=== end content
+
+Title: AICallTree serializes a simple tree in a concise format
+Content:
+# All URLs:
+
+  * 0: https://www.gstatic.com/devrel-devsite/prod/vafe2e13ca17bb026e70df42a2ead1c8192750e86a12923a88eda839025dabf95/js/devsite_app_module.js
+
+# Call tree:
+
+1;r-36071;Task;0.2;;;2
+2;r-36072;Timer fired;0.2;;;3
+3;r-36076;Function call;0.2;;0;4
+4;p-74406-259-16342-528;_ds.q.ns;0.2;;0;5;S
+5;p-74406-259-16342-529;clearTimeout;0.2;0;;6
+6;r-36082;Recalculate style;0.2;0.2;;
+=== end content
+
+Title: AICallTree serializes a tree in a concise format
+Content:
+# All URLs:
+
+  * 0: https://www.gstatic.com/firebasejs/6.6.1/firebase-performance.js
+
+# Call tree:
+
+1;r-5764;Task;0.9;0;;2;S
+2;r-5765;Timer fired;0.9;0;;3
+3;r-5766;Function call;0.9;0.1;0;4
+4;p-73704-775-2873-705;(anonymous);0.8;;0;5
+5;p-73704-775-2873-706;(anonymous);0.8;;0;6-8
+6;p-73704-775-2873-707;Ot.getEntriesByType;0.1;;0;8
+7;p-73704-775-2874-709;le.createOobTrace;0.6;0.2;0;9-11
+8;p-73704-775-2873-708;getEntriesByType;0.1;0.1;;
+9;p-73704-775-2875-710;le;0.1;0.1;0;
+10;p-73704-775-2877-711;ie;0.2;;0;11-13
+11;p-73704-775-2877-712;Ot.requiredApisAvailable;0.2;0.2;0;
+12;p-73704-775-2879-713;oe;0;;0;13
+13;p-73704-775-2879-714;setTimeout;0;0;;
+=== end content

package/front_end/models/ai_assistance/performance/AICallTree.ts

@@ -24,6 +24,10 @@ export interface FromTimeOnThreadOptions {
 }
 
 export class AICallTree {
+  // Note: ideally this is passed in (or lived on ParsedTrace), but this class is
+  // stateless (mostly, there's a cache for some stuff) so it doesn't match much.
+  #eventsSerializer = new Trace.EventsSerializer.EventsSerializer();
+
   constructor(
       public selectedNode: Trace.Extras.TraceTree.Node|null,
       public rootNode: Trace.Extras.TraceTree.TopDownRootNode,
@@ -307,7 +311,10 @@ export class AICallTree {
     // 1. ID
     const idStr = String(nodeId);
 
-    // 2. Name
+    // 2. eventKey
+    const eventKey = this.#eventsSerializer.keyForEvent(node.event);
+
+    // 3. Name
     const name = Trace.Name.forEntry(event, parsedTrace);
 
     // Round milliseconds to one decimal place, return empty string if zero/undefined
@@ -318,13 +325,13 @@ export class AICallTree {
       return String(Math.round(num * 10) / 10);
     };
 
-    // 3. Duration
+    // 4. Duration
     const durationStr = roundToTenths(node.totalTime);
 
-    // 4. Self Time
+    // 5. Self Time
     const selfTimeStr = roundToTenths(node.selfTime);
 
-    // 5. URL Index
+    // 6. URL Index
     const url = SourceMapsResolver.SourceMapsResolver.resolvedURLForEntry(parsedTrace, event);
     let urlIndexStr = '';
     if (url) {
@@ -336,7 +343,7 @@ export class AICallTree {
       }
     }
 
-    // 6. Child Range
+    // 7. Child Range
     const children = Array.from(node.children().values());
     let childRangeStr = '';
     if (childStartingNodeIndex) {
@@ -344,11 +351,12 @@ export class AICallTree {
                                                 `${childStartingNodeIndex}-${childStartingNodeIndex + children.length}`;
     }
 
-    // 7. Selected Marker
+    // 8. Selected Marker
     const selectedMarker = selectedNode?.event === node.event ? 'S' : '';
 
     // Combine fields
     let line = idStr;
+    line += ';' + eventKey;
     line += ';' + name;
     line += ';' + durationStr;
     line += ';' + selfTimeStr;

package/front_end/models/ai_assistance/performance/AIContext.ts

@@ -4,11 +4,14 @@
 
 import * as Trace from '../../../models/trace/trace.js';
 
-import type {AICallTree} from './AICallTree.js';
+import {AICallTree} from './AICallTree.js';
 
-export interface AgentFocusData {
+interface AgentFocusData {
   parsedTrace: Trace.TraceModel.ParsedTrace;
   insightSet: Trace.Insights.Types.InsightSet|null;
+  /** Note: at most one of event or callTree is non-null. */
+  event: Trace.Types.Events.Event|null;
+  /** Note: at most one of event or callTree is non-null. */
   callTree: AICallTree|null;
   insight: Trace.Insights.Types.InsightModel|null;
 }
@@ -30,6 +33,7 @@ export class AgentFocus {
     return new AgentFocus({
       parsedTrace,
       insightSet,
+      event: null,
       callTree: null,
       insight: null,
     });
@@ -45,11 +49,22 @@ export class AgentFocus {
     return new AgentFocus({
       parsedTrace,
       insightSet,
+      event: null,
       callTree: null,
       insight,
     });
   }
 
+  static fromEvent(parsedTrace: Trace.TraceModel.ParsedTrace, event: Trace.Types.Events.Event): AgentFocus {
+    if (!parsedTrace.insights) {
+      throw new Error('missing insights');
+    }
+
+    const insightSet = getFirstInsightSet(parsedTrace.insights);
+    const result = AgentFocus.#getCallTreeOrEvent(parsedTrace, event);
+    return new AgentFocus({parsedTrace, insightSet, event: result.event, callTree: result.callTree, insight: null});
+  }
+
   static fromCallTree(callTree: AICallTree): AgentFocus {
     const insights = callTree.parsedTrace.insights;
 
@@ -65,7 +80,7 @@ export class AgentFocus {
           getFirstInsightSet(insights);
     }
 
-    return new AgentFocus({parsedTrace: callTree.parsedTrace, insightSet, callTree, insight: null});
+    return new AgentFocus({parsedTrace: callTree.parsedTrace, insightSet, event: null, callTree, insight: null});
   }
 
   #data: AgentFocusData;
@@ -75,8 +90,26 @@ export class AgentFocus {
     this.#data = data;
   }
 
-  get data(): AgentFocusData {
-    return this.#data;
+  get parsedTrace(): Trace.TraceModel.ParsedTrace {
+    return this.#data.parsedTrace;
+  }
+
+  get insightSet(): Trace.Insights.Types.InsightSet|null {
+    return this.#data.insightSet;
+  }
+
+  /** Note: at most one of event or callTree is non-null. */
+  get event(): Trace.Types.Events.Event|null {
+    return this.#data.event;
+  }
+
+  /** Note: at most one of event or callTree is non-null. */
+  get callTree(): AICallTree|null {
+    return this.#data.callTree;
+  }
+
+  get insight(): Trace.Insights.Types.InsightModel|null {
+    return this.#data.insight;
   }
 
   withInsight(insight: Trace.Insights.Types.InsightModel|null): AgentFocus {
@@ -85,9 +118,11 @@ export class AgentFocus {
     return focus;
   }
 
-  withCallTree(callTree: AICallTree|null): AgentFocus {
+  withEvent(event: Trace.Types.Events.Event|null): AgentFocus {
     const focus = new AgentFocus(this.#data);
-    focus.#data.callTree = callTree;
+    const result = AgentFocus.#getCallTreeOrEvent(this.#data.parsedTrace, event);
+    focus.#data.callTree = result.callTree;
+    focus.#data.event = result.event;
     return focus;
   }
 
@@ -95,13 +130,33 @@ export class AgentFocus {
     try {
       return this.eventsSerializer.eventForKey(key, this.#data.parsedTrace);
     } catch (err) {
-      if (err.toString().includes('Unknown trace event')) {
+      if (err.toString().includes('Unknown trace event') || err.toString().includes('Unknown profile call')) {
         return null;
       }
 
       throw err;
     }
   }
+
+  /**
+   * If an event is a call tree, this returns that call tree and a null event.
+   * If not a call tree, this only returns a non-null event if the event is a network
+   * request.
+   * This is an arbitrary limitation – it should be removed, but first we need to
+   * improve the agent's knowledge of events that are not main-thread or network
+   * events.
+   */
+  static #getCallTreeOrEvent(parsedTrace: Trace.TraceModel.ParsedTrace, event: Trace.Types.Events.Event|null):
+      {callTree: AICallTree|null, event: Trace.Types.Events.Event|null} {
+    const callTree = event && AICallTree.fromEvent(event, parsedTrace);
+    if (callTree) {
+      return {callTree, event: null};
+    }
+    if (event && Trace.Types.Events.isSyntheticNetworkRequest(event)) {
+      return {callTree: null, event};
+    }
+    return {callTree: null, event: null};
+  }
 }
 
 export function getPerformanceAgentFocusFromModel(model: Trace.TraceModel.Model): AgentFocus|null {

package/front_end/models/ai_code_completion/AiCodeCompletion.ts

@@ -332,6 +332,7 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
             sampleId,
             startTime,
             onImpression: this.#registerUserImpression.bind(this),
+            clearCachedRequest: this.clearCachedRequest.bind(this),
           })
         });
 
@@ -456,6 +457,10 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeCompletionSuggestionAccepted);
   }
 
+  clearCachedRequest(): void {
+    this.#aidaRequestCache = undefined;
+  }
+
   onTextChanged(
       prefix: string, suffix: string, cursorPositionAtRequest: number,
       inferenceLanguage?: Host.AidaClient.AidaInferenceLanguage): void {

package/front_end/models/badges/AiExplorerBadge.ts

@@ -2,20 +2,36 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {Badge, type BadgeAction} from './Badge.js';
+import * as Common from '../../core/common/common.js';
+
+import {Badge, BadgeAction} from './Badge.js';
 
 const AI_EXPLORER_BADGE_URI = new URL('../../Images/ai-explorer-badge.svg', import.meta.url).toString();
+const AI_CONVERSATION_COUNT_SETTING_NAME = 'gdp.ai-conversation-count';
+const AI_CONVERSATION_COUNT_LIMIT = 5;
+
 export class AiExplorerBadge extends Badge {
   override readonly name =
       'profiles/me/awards/developers.google.com%2Fprofile%2Fbadges%2Factivity%2Fchrome-devtools%2Fai-explorer';
   override readonly title = 'AI Explorer';
+  override readonly jslogContext = 'ai-explorer';
   override readonly imageUri = AI_EXPLORER_BADGE_URI;
+  #aiConversationCountSetting: Common.Settings.Setting<number> = Common.Settings.Settings.instance().createSetting(
+      AI_CONVERSATION_COUNT_SETTING_NAME, 0, Common.Settings.SettingStorageType.SYNCED);
 
   override readonly interestedActions = [
-    // TODO(ergunsh): Instrument related actions.
+    BadgeAction.STARTED_AI_CONVERSATION,
   ] as const;
 
   handleAction(_action: BadgeAction): void {
-    this.trigger();
+    const currentCount = this.#aiConversationCountSetting.get();
+    if (currentCount >= AI_CONVERSATION_COUNT_LIMIT) {
+      return;
+    }
+
+    this.#aiConversationCountSetting.set(currentCount + 1);
+    if (this.#aiConversationCountSetting.get() === AI_CONVERSATION_COUNT_LIMIT) {
+      this.trigger();
+    }
   }
 }

package/front_end/models/badges/Badge.ts

@@ -10,9 +10,15 @@ export enum BadgeAction {
   CSS_RULE_MODIFIED = 'css-rule-modified',
   DOM_ELEMENT_OR_ATTRIBUTE_EDITED = 'dom-element-or-attribute-edited',
   MODERN_DOM_BADGE_CLICKED = 'modern-dom-badge-clicked',
+  STARTED_AI_CONVERSATION = 'started-ai-conversation',
   // TODO(ergunsh): Instrument performance insight clicks.
   PERFORMANCE_INSIGHT_CLICKED = 'performance-insight-clicked',
-  DEBUGGER_PAUSED = 'debugger-paused'
+  DEBUGGER_PAUSED = 'debugger-paused',
+  BREAKPOINT_ADDED = 'breakpoint-added',
+  CONSOLE_PROMPT_EXECUTED = 'console-prompt-executed',
+  PERFORMANCE_RECORDING_STARTED = 'performance-recording-started',
+  NETWORK_SPEED_THROTTLED = 'network-speed-throttled',
+  RECORDER_RECORDING_STARTED = 'recorder-recording-started',
 }
 
 export type BadgeActionEvents = Record<BadgeAction, void>;
@@ -36,6 +42,7 @@ export abstract class Badge {
   abstract readonly title: string;
   abstract readonly imageUri: string;
   abstract readonly interestedActions: readonly BadgeAction[];
+  abstract readonly jslogContext: string;
   readonly isStarterBadge: boolean = false;
 
   constructor(context: BadgeContext) {

package/front_end/models/badges/CodeWhispererBadge.ts

@@ -9,6 +9,7 @@ export class CodeWhispererBadge extends Badge {
   override readonly name =
       'profiles/me/awards/developers.google.com%2Fprofile%2Fbadges%2Factivity%2Fchrome-devtools%2Fcode-whisperer';
   override readonly title = 'Code Whisperer';
+  override readonly jslogContext = 'code-whisperer';
   override readonly imageUri = CODE_WHISPERER_BADGE_IMAGE_URI;
 
   override readonly interestedActions = [BadgeAction.DEBUGGER_PAUSED] as const;

package/front_end/models/badges/DOMDetectiveBadge.ts

@@ -9,6 +9,7 @@ export class DOMDetectiveBadge extends Badge {
   override readonly name =
       'profiles/me/awards/developers.google.com%2Fprofile%2Fbadges%2Factivity%2Fchrome-devtools%2Fdom-detective';
   override readonly title = 'DOM Detective';
+  override readonly jslogContext = 'dom-detective';
   override readonly imageUri = DOM_DETECTIVE_BADGE_IMAGE_URI;
 
   override readonly interestedActions = [

package/front_end/models/badges/SpeedsterBadge.ts

@@ -9,6 +9,7 @@ export class SpeedsterBadge extends Badge {
   override readonly name =
       'profiles/me/awards/developers.google.com%2Fprofile%2Fbadges%2Factivity%2Fchrome-devtools%2Fspeedster';
   override readonly title = 'Speedster';
+  override readonly jslogContext = 'speedster';
   override readonly interestedActions = [
     BadgeAction.PERFORMANCE_INSIGHT_CLICKED,
   ] as const;

package/front_end/models/badges/StarterBadge.ts

@@ -10,6 +10,7 @@ export class StarterBadge extends Badge {
   override readonly name =
       'profiles/me/awards/developers.google.com%2Fprofile%2Fbadges%2Factivity%2Fchrome-devtools%2Fchrome-devtools-user';
   override readonly title = 'Chrome DevTools User';
+  override readonly jslogContext = 'chrome-devtools-user';
   override readonly imageUri = STARTER_BADGE_IMAGE_URI;
 
   // TODO(ergunsh): Add remaining non-trivial event definitions
@@ -18,6 +19,11 @@ export class StarterBadge extends Badge {
     BadgeAction.RECEIVE_BADGES_SETTING_ENABLED,
     BadgeAction.CSS_RULE_MODIFIED,
     BadgeAction.DOM_ELEMENT_OR_ATTRIBUTE_EDITED,
+    BadgeAction.BREAKPOINT_ADDED,
+    BadgeAction.CONSOLE_PROMPT_EXECUTED,
+    BadgeAction.PERFORMANCE_RECORDING_STARTED,
+    BadgeAction.NETWORK_SPEED_THROTTLED,
+    BadgeAction.RECORDER_RECORDING_STARTED,
   ] as const;
 
   handleAction(action: BadgeAction): void {

package/front_end/models/badges/badges.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+export * from './AiExplorerBadge.js';
 export * from './SpeedsterBadge.js';
 export * from './StarterBadge.js';
 export * from './Badge.js';

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -7277,6 +7277,10 @@ export const NativeFunctions = [
     name: "unregisterTool",
     signatures: [["tool_name"]]
   },
+  {
+    name: "provideContext",
+    signatures: [["params"]]
+  },
   {
     name: "SnapEvent",
     signatures: [["type","?eventInitDict"]]

package/front_end/models/trace/EventsSerializer.ts

@@ -39,7 +39,7 @@ export class EventsSerializer {
     if (EventsSerializer.isLegacyTimelineFrameKey(eventValues)) {
       const event = parsedTrace.data.Frames.frames.at(eventValues.rawIndex);
       if (!event) {
-        throw new Error(`Could not find frame with index ${eventValues.rawIndex}`);
+        throw new Error(`Unknown trace event. Could not find frame with index ${eventValues.rawIndex}`);
       }
       return event;
     }
@@ -48,7 +48,8 @@ export class EventsSerializer {
       const syntheticEvents = Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().getSyntheticTraces();
       const syntheticEvent = syntheticEvents.at(eventValues.rawIndex);
       if (!syntheticEvent) {
-        throw new Error(`Attempted to get a synthetic event from an unknown raw event index: ${eventValues.rawIndex}`);
+        throw new Error(`Unknown trace event. Attempted to get a synthetic event from an unknown raw event index: ${
+            eventValues.rawIndex}`);
       }
       return syntheticEvent;
     }
@@ -57,7 +58,7 @@ export class EventsSerializer {
       const rawEvents = Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().getRawTraceEvents();
       return rawEvents[eventValues.rawIndex];
     }
-    throw new Error(`Unknown trace event serializable key values: ${(eventValues as unknown[]).join('-')}`);
+    throw new Error(`Unknown trace event. Serializable key values: ${(eventValues as unknown[]).join('-')}`);
   }
 
   static isProfileCallKey(key: Types.File.SerializableKeyValues): key is Types.File.ProfileCallKeyValues {