chrome-devtools-frontend 1.0.1608453 → 1.0.1609381

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

@@ -41,11 +41,11 @@ const UIStringsNotTranslated = {
   /**
    * @description Shown when the agent is investigating network activity
    */
-  networkActivitySummary: 'Investigating network activity…',
+  networkActivitySummary: 'Investigating network activity',
   /**
    * @description Shown when the agent is investigating main thread activity
    */
-  mainThreadActivity: 'Investigating main thread activity…',
+  mainThreadActivity: 'Investigating main thread activity',
 } as const;
 const lockedString = i18n.i18n.lockedString;
 
@@ -141,7 +141,8 @@ Note: if the user asks a specific question about the trace (such as "What is my
 - Use the provided functions to get detailed performance data. Prioritize functions that provide context relevant to the performance issue being investigated.
 - Before finalizing your advice, look over it and validate using any relevant functions. If something seems off, refine the advice before giving it to the user.
 - Base your analysis and advice solely on the data retrieved through the provided functions. Always use the provided functions to gather sufficient data when needed.
-- Use the track summary functions to get high-level detail about portions of the trace. For the \`bounds\` parameter, default to using the bounds of the trace. Never specifically ask the user for a bounds. You can use more narrow bounds (such as the bounds relevant to a specific insight) when appropriate. Narrow the bounds given functions when possible.
+- Use absolute microsecond timestamps for any function that requires a \`min\` and \`max\` bounds. These timestamps can be found in the trace summary or within the details of an insight.
+- Example: If the trace bounds are {min: 1000, max: 5000} and you want to investigate a specific interaction that happened between 2000 and 3000, you should call \`getMainThreadTrackSummary({min: 2000, max: 3000})\`.
 - Use \`getEventByKey\` to get data on a specific trace event. This is great for root-cause analysis or validating any assumptions.
 - Provide clear, actionable recommendations. Avoid technical jargon unless necessary, and explain any technical terms used.
 - If you see a generic task like "Task", "Evaluate script" or "(anonymous)" in the main thread activity, try to look at its children to see what actual functions are executed and refer to those. When referencing the main thread activity, be as specific as you can. Ensure you identify to the user relevant functions and which script they were defined in. Avoid referencing "Task", "Evaluate script" and "(anonymous)" nodes if possible and instead focus on their children.
@@ -805,7 +806,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       },
       displayInfoFromArgs: params => {
         return {
-          title: lockedString(`Investigating insight ${params.insightName}…`),
+          title: lockedString(`Investigating insight ${params.insightName}`),
           action: `getInsightDetails('${params.insightSetId}', '${params.insightName}')`
         };
       },
@@ -903,7 +904,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
         required: ['eventKey']
       },
       displayInfoFromArgs: params => {
-        return {title: lockedString('Looking at trace event…'), action: `getEventByKey('${params.eventKey}')`};
+        return {title: lockedString('Looking at trace event'), action: `getEventByKey('${params.eventKey}')`};
       },
       handler: async params => {
         debugLog('Function call: getEventByKey', params);
@@ -922,13 +923,11 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     });
 
     const createBounds =
-        (min: Trace.Types.Timing.Micro, max: Trace.Types.Timing.Micro): Trace.Types.Timing.TraceWindowMicro|null => {
-          if (min > max) {
-            return null;
-          }
+        (min?: Trace.Types.Timing.Micro, max?: Trace.Types.Timing.Micro): Trace.Types.Timing.TraceWindowMicro|null => {
+          const {min: bMin, max: bMax} = parsedTrace.data.Meta.traceBounds;
+          const clampedMin = Math.max(min ?? bMin, bMin);
+          const clampedMax = Math.min(max ?? bMax, bMax);
 
-          const clampedMin = Math.max(min ?? 0, parsedTrace.data.Meta.traceBounds.min);
-          const clampedMax = Math.min(max ?? Number.POSITIVE_INFINITY, parsedTrace.data.Meta.traceBounds.max);
           if (clampedMin > clampedMax) {
             return null;
           }
@@ -937,7 +936,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
               clampedMin as Trace.Types.Timing.Micro, clampedMax as Trace.Types.Timing.Micro);
         };
 
-    this.declareFunction<{min: Trace.Types.Timing.Micro, max: Trace.Types.Timing.Micro}, {
+    this.declareFunction<{min?: Trace.Types.Timing.Micro, max?: Trace.Types.Timing.Micro}, {
       summary: string,
     }>('getMainThreadTrackSummary', {
       description:
@@ -949,21 +948,25 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
         properties: {
           min: {
             type: Host.AidaClient.ParametersTypes.INTEGER,
-            description: 'The minimum time of the bounds, in microseconds',
-            nullable: false,
+            description: `The minimum time of the bounds, in microseconds (the current trace starts at ${
+                parsedTrace.data.Meta.traceBounds.min})`,
+            nullable: true,
           },
           max: {
             type: Host.AidaClient.ParametersTypes.INTEGER,
-            description: 'The maximum time of the bounds, in microseconds',
-            nullable: false,
+            description: `The maximum time of the bounds, in microseconds (the current trace ends at ${
+                parsedTrace.data.Meta.traceBounds.max})`,
+            nullable: true,
           },
         },
-        required: ['min', 'max']
+        required: []
       },
       displayInfoFromArgs: args => {
+        const min = args.min ?? parsedTrace.data.Meta.traceBounds.min;
+        const max = args.max ?? parsedTrace.data.Meta.traceBounds.max;
         return {
           title: lockedString(UIStringsNotTranslated.mainThreadActivity),
-          action: `getMainThreadTrackSummary({min: ${args.min}, max: ${args.max}})`
+          action: `getMainThreadTrackSummary({min: ${min}, max: ${max}})`
         };
       },
       handler: async args => {
@@ -1019,7 +1022,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     });
 
     this.declareFunction<
-        {min: Trace.Types.Timing.Micro, max: Trace.Types.Timing.Micro}, {summary: string}>('getNetworkTrackSummary', {
+        {min?: Trace.Types.Timing.Micro, max?: Trace.Types.Timing.Micro}, {summary: string}>('getNetworkTrackSummary', {
       description: 'Returns a summary of the network for the given bounds.',
       parameters: {
         type: Host.AidaClient.ParametersTypes.OBJECT,
@@ -1028,21 +1031,25 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
         properties: {
           min: {
             type: Host.AidaClient.ParametersTypes.INTEGER,
-            description: 'The minimum time of the bounds, in microseconds',
-            nullable: false,
+            description: `The minimum time of the bounds, in microseconds (the current trace starts at ${
+                parsedTrace.data.Meta.traceBounds.min})`,
+            nullable: true,
           },
           max: {
             type: Host.AidaClient.ParametersTypes.INTEGER,
-            description: 'The maximum time of the bounds, in microseconds',
-            nullable: false,
+            description: `The maximum time of the bounds, in microseconds (the current trace ends at ${
+                parsedTrace.data.Meta.traceBounds.max})`,
+            nullable: true,
           },
         },
-        required: ['min', 'max']
+        required: []
       },
       displayInfoFromArgs: args => {
+        const min = args.min ?? parsedTrace.data.Meta.traceBounds.min;
+        const max = args.max ?? parsedTrace.data.Meta.traceBounds.max;
         return {
           title: lockedString(UIStringsNotTranslated.networkActivitySummary),
-          action: `getNetworkTrackSummary({min: ${args.min}, max: ${args.max}})`
+          action: `getNetworkTrackSummary({min: ${min}, max: ${max}})`
         };
       },
       handler: async args => {
@@ -1093,7 +1100,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
         required: ['eventKey']
       },
       displayInfoFromArgs: args => {
-        return {title: lockedString('Looking at call tree…'), action: `getDetailedCallTree('${args.eventKey}')`};
+        return {title: lockedString('Looking at call tree'), action: `getDetailedCallTree('${args.eventKey}')`};
       },
       handler: async args => {
         debugLog('Function call: getDetailedCallTree');
@@ -1117,7 +1124,19 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
 
         const key = `getDetailedCallTree(${args.eventKey})`;
         this.#cacheFunctionResult(focus, key, callTree);
-        return {result: {callTree}};
+
+        const {startTime, endTime} = Trace.Helpers.Timing.eventTimingsMicroSeconds(event);
+        const bounds = Trace.Helpers.Timing.traceWindowFromMicroSeconds(startTime, endTime);
+
+        const widgets: AiWidget[] = [{
+          name: 'BOTTOM_UP_TREE',
+          data: {
+            bounds,
+            parsedTrace,
+          },
+        }];
+
+        return {result: {callTree}, widgets};
       },
 
     });
@@ -1213,7 +1232,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       },
       displayInfoFromArgs: args => {
         return {
-          title: lockedString('Looking up function code…'),
+          title: lockedString('Looking up function code'),
           action: `getFunctionCode('${args.scriptUrl}', ${args.line}, ${args.column})`
         };
       },
@@ -1271,7 +1290,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
         required: ['url']
       },
       displayInfoFromArgs: args => {
-        return {title: lockedString('Looking at resource content…'), action: `getResourceContent('${args.url}')`};
+        return {title: lockedString('Looking at resource content'), action: `getResourceContent('${args.url}')`};
       },
       handler: async args => {
         debugLog('Function call: getResourceContent');
@@ -1326,7 +1345,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
           required: ['eventKey']
         },
         displayInfoFromArgs: params => {
-          return {title: lockedString('Selecting event…'), action: `selectEventByKey('${params.eventKey}')`};
+          return {title: lockedString('Selecting event'), action: `selectEventByKey('${params.eventKey}')`};
         },
         handler: async params => {
           debugLog('Function call: selectEventByKey', params);

package/front_end/models/ai_assistance/agents/StylingAgent.snapshot.txt

@@ -57,7 +57,7 @@ Content:
   "function_declarations": [
     {
       "name": "getStyles",
-      "description": "Get computed and source styles for one or multiple elements on the inspected page for multiple elements at once by uid.\n\n**CRITICAL** An element uid is a number, not a selector.\n**CRITICAL** Use selectors to refer to elements in the text output. Do not use uids.\n**CRITICAL** Always provide the explanation argument to explain what and why you query.",
+      "description": "Get computed and source styles for one or multiple elements on the inspected page for multiple elements at once by uid.\n\n**CRITICAL** An element uid is a number, not a selector.\n**CRITICAL** Use selectors to refer to elements in the text output. Do not use uids.\n**CRITICAL** Always provide the explanation argument to explain what and why you query.\n**CRITICAL** You MUST provide a specific list of CSS property names. Do not use generic values like \"all\" or \"*\".",
       "parameters": {
         "type": 6,
         "description": "",
@@ -79,7 +79,7 @@ Content:
           },
           "styleProperties": {
             "type": 5,
-            "description": "One or more CSS style property names to fetch.",
+            "description": "One or more specific CSS style property names to fetch. Generic values like \"all\" or \"*\" are not supported.",
             "nullable": false,
             "items": {
               "type": 1,

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

@@ -75,7 +75,7 @@ First, examine the provided context, then use the functions to gather additional
 * Use the precision of Strunk & White, the brevity of Hemingway, and the simple clarity of Vonnegut. Don't add repeated information, and keep the whole answer short.
 * **CRITICAL** NEVER write full Python programs - you should only write individual statements that invoke a single function from the provided library.
 * **CRITICAL** NEVER output text before a function call. Always do a function call first.
-* **CRITICAL** When answering questions about positioning or layout, ALWAYS inspect \`position\`, \`display\` and ALL related properties.
+* **CRITICAL** When answering questions about positioning or layout, ALWAYS inspect \`position\`, \`display\` and all other related properties. You MUST provide a specific list of CSS property names when calling functions to get styles. Do not use generic values like "all" or "*".
 * **CRITICAL** You are a CSS/DOM/HTML debugging assistant. NEVER provide answers to questions of unrelated topics such as legal advice, financial advice, personal opinions, medical advice, religion, race, politics, sexuality, gender, or any other non web-development topics. Answer "Sorry, I can't answer that. I'm best at questions about debugging web pages." to such questions.
 
 ## Response Structure
@@ -308,7 +308,8 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
 
 **CRITICAL** An element uid is a number, not a selector.
 **CRITICAL** Use selectors to refer to elements in the text output. Do not use uids.
-**CRITICAL** Always provide the explanation argument to explain what and why you query.`,
+**CRITICAL** Always provide the explanation argument to explain what and why you query.
+**CRITICAL** You MUST provide a specific list of CSS property names. Do not use generic values like "all" or "*".`,
       parameters: {
         type: Host.AidaClient.ParametersTypes.OBJECT,
         description: '',
@@ -327,7 +328,8 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
           },
           styleProperties: {
             type: Host.AidaClient.ParametersTypes.ARRAY,
-            description: 'One or more CSS style property names to fetch.',
+            description:
+                'One or more specific CSS style property names to fetch. Generic values like "all" or "*" are not supported.',
             nullable: false,
             items: {
               type: Host.AidaClient.ParametersTypes.STRING,