chrome-devtools-frontend 1.0.1516909 → 1.0.1519267

package/front_end/generated/protocol.ts

@@ -1082,8 +1082,10 @@ export namespace Audits {
     WriteErrorInsufficientResources = 'WriteErrorInsufficientResources',
     WriteErrorInvalidMatchField = 'WriteErrorInvalidMatchField',
     WriteErrorInvalidStructuredHeader = 'WriteErrorInvalidStructuredHeader',
+    WriteErrorInvalidTTLField = 'WriteErrorInvalidTTLField',
     WriteErrorNavigationRequest = 'WriteErrorNavigationRequest',
     WriteErrorNoMatchField = 'WriteErrorNoMatchField',
+    WriteErrorNonIntegerTTLField = 'WriteErrorNonIntegerTTLField',
     WriteErrorNonListMatchDestField = 'WriteErrorNonListMatchDestField',
     WriteErrorNonSecureContext = 'WriteErrorNonSecureContext',
     WriteErrorNonStringIdField = 'WriteErrorNonStringIdField',
@@ -9962,6 +9964,10 @@ export namespace Network {
      * request corresponding to the main frame.
      */
     isSameSite?: boolean;
+    /**
+     * True when the resource request is ad-related.
+     */
+    isAdRelated?: boolean;
   }
 
   /**
@@ -10999,6 +11005,43 @@ export namespace Network {
     Zstd = 'zstd',
   }
 
+  export interface NetworkConditions {
+    /**
+     * Only matching requests will be affected by these conditions. Patterns use the URLPattern constructor string
+     * syntax (https://urlpattern.spec.whatwg.org/). If the pattern is empty, all requests are matched (including p2p
+     * connections).
+     */
+    urlPattern: string;
+    /**
+     * Minimum latency from request sent to response headers received (ms).
+     */
+    latency: number;
+    /**
+     * Maximal aggregated download throughput (bytes/sec). -1 disables download throttling.
+     */
+    downloadThroughput: number;
+    /**
+     * Maximal aggregated upload throughput (bytes/sec).  -1 disables upload throttling.
+     */
+    uploadThroughput: number;
+    /**
+     * Connection type if known.
+     */
+    connectionType?: ConnectionType;
+    /**
+     * WebRTC packet loss (percent, 0-100). 0 disables packet loss emulation, 100 drops all the packets.
+     */
+    packetLoss?: number;
+    /**
+     * WebRTC packet queue length (packet). 0 removes any queue length limitations.
+     */
+    packetQueueLength?: integer;
+    /**
+     * WebRTC packetReordering feature.
+     */
+    packetReordering?: boolean;
+  }
+
   export const enum DirectSocketDnsQueryType {
     Ipv4 = 'ipv4',
     Ipv6 = 'ipv6',
@@ -11364,6 +11407,50 @@ export namespace Network {
     packetReordering?: boolean;
   }
 
+  export interface EmulateNetworkConditionsByRuleRequest {
+    /**
+     * True to emulate internet disconnection.
+     */
+    offline: boolean;
+    /**
+     * Configure conditions for matching requests. If multiple entries match a request, the first entry wins.  Global
+     * conditions can be configured by leaving the urlPattern for the conditions empty. These global conditions are
+     * also applied for throttling of p2p connections.
+     */
+    matchedNetworkConditions: NetworkConditions[];
+  }
+
+  export interface EmulateNetworkConditionsByRuleResponse extends ProtocolResponseWithError {
+    /**
+     * An id for each entry in matchedNetworkConditions. The id will be included in the requestWillBeSentExtraInfo for
+     * requests affected by a rule.
+     */
+    ruleIds: string[];
+  }
+
+  export interface OverrideNetworkStateRequest {
+    /**
+     * True to emulate internet disconnection.
+     */
+    offline: boolean;
+    /**
+     * Minimum latency from request sent to response headers received (ms).
+     */
+    latency: number;
+    /**
+     * Maximal aggregated download throughput (bytes/sec). -1 disables download throttling.
+     */
+    downloadThroughput: number;
+    /**
+     * Maximal aggregated upload throughput (bytes/sec).  -1 disables upload throttling.
+     */
+    uploadThroughput: number;
+    /**
+     * Connection type if known.
+     */
+    connectionType?: ConnectionType;
+  }
+
   export interface EnableRequest {
     /**
      * Buffer size in bytes to use when preserving network payloads (XHRs, etc).
@@ -12358,6 +12445,11 @@ export namespace Network {
      * Whether the site has partitioned cookies stored in a partition different than the current one.
      */
     siteHasCookieInOtherPartition?: boolean;
+    /**
+     * The network conditions id if this request was affected by network conditions configured via
+     * emulateNetworkConditionsByRule.
+     */
+    appliedNetworkConditionsId?: string;
   }
 
   /**
@@ -20896,6 +20988,7 @@ export namespace Runtime {
     Dataview = 'dataview',
     Webassemblymemory = 'webassemblymemory',
     Wasmvalue = 'wasmvalue',
+    Trustedtype = 'trustedtype',
   }
 
   /**
@@ -20989,6 +21082,7 @@ export namespace Runtime {
     Dataview = 'dataview',
     Webassemblymemory = 'webassemblymemory',
     Wasmvalue = 'wasmvalue',
+    Trustedtype = 'trustedtype',
   }
 
   /**
@@ -21053,6 +21147,7 @@ export namespace Runtime {
     Dataview = 'dataview',
     Webassemblymemory = 'webassemblymemory',
     Wasmvalue = 'wasmvalue',
+    Trustedtype = 'trustedtype',
   }
 
   export interface PropertyPreview {

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

@@ -133,13 +133,7 @@ export interface ParsedAnswer {
   suggestions?: [string, ...string[]];
 }
 
-export interface ParsedStep {
-  thought?: string;
-  title?: string;
-  action?: string;
-}
-
-export type ParsedResponse = ParsedAnswer|ParsedStep;
+export type ParsedResponse = ParsedAnswer;
 
 export const MAX_STEPS = 10;
 
@@ -404,13 +398,66 @@ export abstract class AiAgent<T> {
     return this.#origin;
   }
 
+  /**
+   * The AI has instructions to emit structured suggestions in their response. This
+   * function parses for that.
+   *
+   * Note: currently only StylingAgent and PerformanceAgent utilize this, but
+   * eventually all agents should support this.
+   */
+  parseTextResponseForSuggestions(text: string): ParsedResponse {
+    if (!text) {
+      return {answer: ''};
+    }
+
+    const lines = text.split('\n');
+    const answerLines: string[] = [];
+    let suggestions: [string, ...string[]]|undefined;
+
+    for (const line of lines) {
+      const trimmed = line.trim();
+      if (trimmed.startsWith('SUGGESTIONS:')) {
+        try {
+          // TODO: Do basic validation this is an array with strings
+          suggestions = JSON.parse(trimmed.substring('SUGGESTIONS:'.length).trim());
+        } catch {
+        }
+      } else {
+        answerLines.push(line);
+      }
+    }
+
+    // Sometimes the model fails to put the SUGGESTIONS text on its own line. Handle
+    // the case where the suggestions are part of the last line of the answer.
+    if (!suggestions && answerLines.at(-1)?.includes('SUGGESTIONS:')) {
+      const [answer, suggestionsText] = answerLines[answerLines.length - 1].split('SUGGESTIONS:', 2);
+      try {
+        // TODO: Do basic validation this is an array with strings
+        suggestions = JSON.parse(suggestionsText.trim().substring('SUGGESTIONS:'.length).trim());
+      } catch {
+      }
+      answerLines[answerLines.length - 1] = answer;
+    }
+
+    const response: ParsedResponse = {
+      // If we could not parse the parts, consider the response to be an
+      // answer.
+      answer: answerLines.join('\n'),
+    };
+
+    if (suggestions) {
+      response.suggestions = suggestions;
+    }
+
+    return response;
+  }
+
   /**
    * Parses a streaming text response into a
-   * though/action/title/answer/suggestions component. This is only used
-   * by StylingAgent.
+   * though/action/title/answer/suggestions component.
    */
   parseTextResponse(response: string): ParsedResponse {
-    return {answer: response};
+    return this.parseTextResponseForSuggestions(response.trim());
   }
 
   /**

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

@@ -2,8 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../ui/components/icon_button/icon_button.js';
-
 import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -15,7 +13,6 @@ import * as Trace from '../../trace/trace.js';
 import {ConversationType} from '../AiHistoryStorage.js';
 import {
   PerformanceInsightFormatter,
-  TraceEventFormatter,
 } from '../data_formatters/PerformanceInsightFormatter.js';
 import {PerformanceTraceFormatter} from '../data_formatters/PerformanceTraceFormatter.js';
 import {debugLog} from '../debug.js';
@@ -62,7 +59,7 @@ const lockedString = i18n.i18n.lockedString;
  *
  * Check token length in https://aistudio.google.com/
  */
-const fullTracePreamble = `You are an assistant, expert in web performance and highly skilled with Chrome DevTools.
+const preamble = `You are an assistant, expert in web performance and highly skilled with Chrome DevTools.
 
 Your primary goal is to provide actionable advice to web developers about their web page by using the Chrome Performance Panel and analyzing a trace. You may need to diagnose problems yourself, or you may be given direction for what to focus on by the user.
 
@@ -129,6 +126,16 @@ Adhere to the following critical requirements:
 - Do not provide answers on non-web-development topics, such as legal, financial, medical, or personal advice.
 `;
 
+const extraPreambleWhenNotExternal = `Additional notes:
+
+When referring to a trace event that has a corresponding \`eventKey\`, annotate your output using markdown link syntax. For example:
+- When referring to an event that is a long task: [Long task](#r-123)
+- When referring to a URL for which you know the eventKey of: [https://www.example.com](#s-1827)
+- Never show the eventKey (like "eventKey: s-1852"); instead, use a markdown link as described above.
+
+When asking the user to make a choice between multiple options, output a list of choices at the end of your text response. The format is \`SUGGESTIONS: ["suggestion1", "suggestion2", "suggestion3"]\`. This MUST start on a newline, and be a single line.
+`;
+
 const callFrameDataFormatDescription = `Each call frame is presented in the following format:
 
 'id;name;duration;selfTime;urlIndex;childRange;[S]'
@@ -159,8 +166,8 @@ enum ScorePriority {
 }
 
 export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
-  static full(parsedTrace: Trace.TraceModel.ParsedTrace): PerformanceTraceContext {
-    return new PerformanceTraceContext(AgentFocus.full(parsedTrace));
+  static fromParsedTrace(parsedTrace: Trace.TraceModel.ParsedTrace): PerformanceTraceContext {
+    return new PerformanceTraceContext(AgentFocus.fromParsedTrace(parsedTrace));
   }
 
   static fromInsight(parsedTrace: Trace.TraceModel.ParsedTrace, insight: Trace.Insights.Types.InsightModel):
@@ -224,7 +231,7 @@ export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
     }
 
     if (data.insight) {
-      return new PerformanceInsightFormatter(data.parsedTrace, data.insight).getSuggestions();
+      return new PerformanceInsightFormatter(this.#focus, data.insight).getSuggestions();
     }
 
     const suggestions: ConversationSuggestions =
@@ -247,6 +254,15 @@ export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
       if (cls && ModelHandlers.LayoutShifts.scoreClassificationForLayoutShift(cls.value) !== GOOD) {
         suggestions.push({title: 'How can I improve CLS?', jslogContext: 'performance-default'});
       }
+
+      // Add up to 3 suggestions from the top failing insights.
+      const top3FailingInsightSuggestions =
+          Object.values(data.insightSet.model)
+              .filter(model => model.state !== 'pass')
+              .map(model => new PerformanceInsightFormatter(this.#focus, model).getSuggestions().at(-1))
+              .filter(suggestion => !!suggestion)
+              .slice(0, 3);
+      suggestions.push(...top3FailingInsightSuggestions);
     }
 
     return suggestions;
@@ -263,7 +279,6 @@ const MAX_FUNCTION_RESULT_BYTE_LENGTH = 16384 * 4;
 export class PerformanceAgent extends AiAgent<AgentFocus> {
   #formatter: PerformanceTraceFormatter|null = null;
   #lastInsightForEnhancedQuery: Trace.Insights.Types.InsightModel|undefined;
-  #eventsSerializer = new Trace.EventsSerializer.EventsSerializer();
   #hasShownAnalyzeTraceContext = false;
 
   /**
@@ -279,8 +294,12 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
    */
   #functionCallCacheForFocus = new Map<AgentFocus, Record<string, Host.AidaClient.RequestFact>>();
 
+  #notExternalExtraPreambleFact: Host.AidaClient.RequestFact = {
+    text: extraPreambleWhenNotExternal,
+    metadata: {source: 'devtools', score: ScorePriority.CRITICAL}
+  };
   #networkDataDescriptionFact: Host.AidaClient.RequestFact = {
-    text: TraceEventFormatter.networkDataFormatDescription,
+    text: PerformanceTraceFormatter.networkDataFormatDescription,
     metadata: {source: 'devtools', score: ScorePriority.CRITICAL}
   };
   #callFrameDataDescriptionFact: Host.AidaClient.RequestFact = {
@@ -290,7 +309,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
   #traceFacts: Host.AidaClient.RequestFact[] = [];
 
   get preamble(): string {
-    return fullTracePreamble;
+    return preamble;
   }
 
   get clientFeature(): Host.AidaClient.ClientFeature {
@@ -313,23 +332,6 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     return ConversationType.PERFORMANCE;
   }
 
-  #lookupEvent(key: Trace.Types.File.SerializableKey): Trace.Types.Events.Event|null {
-    const parsedTrace = this.context?.getItem().data.parsedTrace;
-    if (!parsedTrace) {
-      return null;
-    }
-
-    try {
-      return this.#eventsSerializer.eventForKey(key, parsedTrace);
-    } catch (err) {
-      if (err.toString().includes('Unknown trace event')) {
-        return null;
-      }
-
-      throw err;
-    }
-  }
-
   async *
       handleContextDetails(context: ConversationContext<AgentFocus>|null): AsyncGenerator<ContextResponse, void, void> {
     if (!context) {
@@ -360,21 +362,81 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     return response.length > MAX_FUNCTION_RESULT_BYTE_LENGTH;
   }
 
-  override parseTextResponse(response: string): ParsedResponse {
+  /**
+   * Sometimes the model will output URLs as plaintext; or a markdown link
+   * where the link is the actual URL. This function transforms such output
+   * to an eventKey link.
+   *
+   * A simple way to see when this gets utilized is:
+   *   1. go to paulirish.com, record a trace
+   *   2. say "What performance issues exist with my page?"
+   *   3. then say "images"
+   *
+   * TODO(cjamcl): reduce the reliance on this by making sure all URL references
+   * (such as the insight formatters) add the "eventKey" as a suffix, just like all
+   * other events.
+   */
+  #parseForKnownUrls(response: string): string {
+    const focus = this.context?.getItem();
+    if (!focus) {
+      return response;
+    }
+
+    // Regex with two main parts, separated by | (OR):
+    // 1. (\[(.*?)\]\((.*?)\)): Captures a full markdown link.
+    //    - Group 1: The whole link, e.g., "[text](url)"
+    //    - Group 2: The link text, e.g., "text"
+    //    - Group 3: The link destination, e.g., "url"
+    // 2. (https?:\/\/[^\s<>()]+): Captures a standalone URL.
+    //    - Group 4: The standalone URL, e.g., "https://google.com"
+    const urlRegex = /(\[(.*?)\]\((.*?)\))|(https?:\/\/[^\s<>()]+)/g;
+
+    return response.replace(urlRegex, (match, markdownLink, linkText, linkDest, standaloneUrlText) => {
+      if (markdownLink) {
+        if (linkDest.startsWith('#')) {
+          return match;
+        }
+      }
+
+      const urlText = linkDest ?? standaloneUrlText;
+      if (!urlText) {
+        return match;
+      }
+
+      const request =
+          focus.data.parsedTrace.data.NetworkRequests.byTime.find(request => request.args.data.url === urlText);
+      if (!request) {
+        return match;
+      }
+
+      const eventKey = focus.eventsSerializer.keyForEvent(request);
+      if (!eventKey) {
+        return match;
+      }
+
+      return `[${urlText}](#${eventKey})`;
+    });
+  }
+
+  #parseMarkdown(response: string): string {
     /**
      * Sometimes the LLM responds with code chunks that wrap a text based markdown response.
      * If this happens, we want to remove those before continuing.
      * See b/405054694 for more details.
      */
-    const trimmed = response.trim();
     const FIVE_BACKTICKS = '`````';
-    if (trimmed.startsWith(FIVE_BACKTICKS) && trimmed.endsWith(FIVE_BACKTICKS)) {
-      // Purposefully use the trimmed text here; we might as well remove any
-      // newlines that are at the very start or end.
-      const stripped = trimmed.slice(FIVE_BACKTICKS.length, -FIVE_BACKTICKS.length);
-      return super.parseTextResponse(stripped);
+    if (response.startsWith(FIVE_BACKTICKS) && response.endsWith(FIVE_BACKTICKS)) {
+      return response.slice(FIVE_BACKTICKS.length, -FIVE_BACKTICKS.length);
     }
-    return super.parseTextResponse(response);
+
+    return response;
+  }
+
+  override parseTextResponse(response: string): ParsedResponse {
+    const parsedResponse = super.parseTextResponse(response);
+    parsedResponse.answer = this.#parseForKnownUrls(parsedResponse.answer);
+    parsedResponse.answer = this.#parseMarkdown(parsedResponse.answer);
+    return parsedResponse;
   }
 
   override async enhanceQuery(query: string, context: PerformanceTraceContext|null): Promise<string> {
@@ -426,15 +488,15 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
   }
 
   override async * run(initialQuery: string, options: {
-    selected: ConversationContext<AgentFocus>|null,
+    selected: PerformanceTraceContext|null,
     signal?: AbortSignal,
   }): AsyncGenerator<ResponseData, void, void> {
     const focus = options.selected?.getItem();
 
     // Clear any previous facts in case the user changed the active context.
     this.clearFacts();
-    if (focus) {
-      this.#addFacts(focus);
+    if (options.selected && focus) {
+      this.#addFacts(options.selected);
     }
 
     return yield* super.run(initialQuery, options);
@@ -518,12 +580,18 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     });
   }
 
-  #addFacts(focus: AgentFocus): void {
+  #addFacts(context: PerformanceTraceContext): void {
+    const focus = context.getItem();
+
+    if (!context.external) {
+      this.addFact(this.#notExternalExtraPreambleFact);
+    }
+
     this.addFact(this.#callFrameDataDescriptionFact);
     this.addFact(this.#networkDataDescriptionFact);
 
     if (!this.#traceFacts.length) {
-      this.#formatter = new PerformanceTraceFormatter(focus, this.#eventsSerializer);
+      this.#formatter = new PerformanceTraceFormatter(focus);
       this.#createFactForTraceSummary();
       this.#createFactForCriticalRequests();
       this.#createFactForMainThreadBottomUpSummary();
@@ -585,7 +653,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
           return {error: 'No insight available'};
         }
 
-        const details = new PerformanceInsightFormatter(parsedTrace, insight).formatInsight();
+        const details = new PerformanceInsightFormatter(focus, insight).formatInsight();
 
         const key = `getInsightDetails('${params.insightName}')`;
         this.#cacheFunctionResult(focus, key, details);
@@ -613,7 +681,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       },
       handler: async params => {
         debugLog('Function call: getEventByKey', params);
-        const event = this.#lookupEvent(params.eventKey as Trace.Types.File.SerializableKey);
+        const event = focus.lookupEvent(params.eventKey as Trace.Types.File.SerializableKey);
         if (!event) {
           return {error: 'Invalid eventKey'};
         }
@@ -772,7 +840,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
         },
       },
       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');
@@ -781,7 +849,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
           throw new Error('missing formatter');
         }
 
-        const event = this.#lookupEvent(args.eventKey as Trace.Types.File.SerializableKey);
+        const event = focus.lookupEvent(args.eventKey as Trace.Types.File.SerializableKey);
         if (!event) {
           return {error: 'Invalid eventKey'};
         }
@@ -816,7 +884,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
           },
         },
         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');
@@ -829,14 +897,14 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
             }
           }
 
-          const content = resource.content;
-          if (!content) {
-            return {error: 'Resource has no content'};
+          const content = await resource.requestContentData();
+          if ('error' in content) {
+            return {error: `Could not get resource content: ${content.error}`};
           }
 
           const key = `getResourceContent(${args.url})`;
-          this.#cacheFunctionResult(focus, key, content);
-          return {result: {content}};
+          this.#cacheFunctionResult(focus, key, content.text);
+          return {result: {content: content.text}};
         },
 
       });
@@ -863,7 +931,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
         },
         handler: async params => {
           debugLog('Function call: selectEventByKey', params);
-          const event = this.#lookupEvent(params.eventKey as Trace.Types.File.SerializableKey);
+          const event = focus.lookupEvent(params.eventKey as Trace.Types.File.SerializableKey);
           if (!event) {
             return {error: 'Invalid eventKey'};
           }

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

@@ -21,7 +21,6 @@ import {
   type ConversationSuggestions,
   type FunctionCallHandlerResult,
   MultimodalInputType,
-  type ParsedResponse,
   type RequestOptions,
   ResponseType,
 } from './AiAgent.js';
@@ -265,36 +264,6 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
   override preambleFeatures(): string[] {
     return ['function_calling'];
   }
-  override parseTextResponse(text: string): ParsedResponse {
-    // We're returning an empty answer to denote the erroneous case.
-    if (!text.trim()) {
-      return {answer: ''};
-    }
-
-    const lines = text.split('\n');
-    const answerLines: string[] = [];
-    let suggestions: [string, ...string[]]|undefined;
-
-    for (const line of lines) {
-      const trimmed = line.trim();
-      if (trimmed.startsWith('SUGGESTIONS:')) {
-        try {
-          // TODO: Do basic validation this is an array with strings
-          suggestions = JSON.parse(trimmed.substring('SUGGESTIONS:'.length).trim());
-        } catch {
-        }
-      } else {
-        answerLines.push(line);
-      }
-    }
-
-    return {
-      // If we could not parse the parts, consider the response to be an
-      // answer.
-      answer: answerLines.join('\n'),
-      suggestions,
-    };
-  }
 
   #execJs: typeof executeJsCode;