chrome-devtools-frontend 1.0.1518653 → 1.0.1519267

package/config/owner/COMMON_OWNERS

@@ -16,15 +16,15 @@ kprokopenko@chromium.org
 leese@chromium.org
 mathias@chromium.org
 nancyly@chromium.org
-nechaev@chromium.org
 nharshunova@chromium.org
+nroscino@chromium.org
 nvitkov@chromium.org
 paulirish@chromium.org
 petermueller@chromium.org
 pfaffe@chromium.org
 piotrpaulski@chromium.org
 sadym@chromium.org
-samiyac@chromium.org
+samiyac@google.com
 szuend@chromium.org
 victorporof@chromium.org
 wolfi@chromium.org

package/eslint.config.mjs

@@ -720,6 +720,7 @@ export default defineConfig([
       'rulesdir/no-assert-deep-strict-equal': 'error',
       'rulesdir/no-assert-equal': 'error',
       'rulesdir/no-assert-equal-boolean-null-undefined': 'error',
+      'rulesdir/no-capture-screenshot': 'error',
       'rulesdir/no-imperative-dom-api': 'off',
       'rulesdir/no-lit-render-outside-of-view': 'off',
       'rulesdir/prefer-assert-instance-of': 'error',

package/front_end/core/sdk/EnhancedTracesParser.ts

@@ -459,11 +459,11 @@ export class EnhancedTracesParser {
     for (const orphanScript of orphanScripts) {
       const orphanScriptExecutionContextIsolateId =
           this.getExecutionContextIsolateId(orphanScript.isolate, orphanScript.executionContextId);
-      if (orphanScriptExecutionContextIsolateId in executionContextIsolateToTarget) {
-        const frameId = executionContextIsolateToTarget.get(orphanScriptExecutionContextIsolateId);
-        if (frameId) {
-          targetToScripts.get(frameId)?.push(orphanScript);
-        }
+      const frameId = executionContextIsolateToTarget.get(orphanScriptExecutionContextIsolateId);
+
+      if (frameId) {
+        // Found a link via execution context, use it.
+        targetToScripts.get(frameId)?.push(orphanScript);
       } else if (orphanScript.pid) {
         const target = targets.find(target => target.pid === orphanScript.pid);
         if (target) {

package/front_end/core/sdk/RehydratingConnection.snapshot.txt

@@ -992,6 +992,217 @@ Content:
   "sessionId": 1
 }
 
+/* RehydratingConnection says: */
+{
+  "method": "Debugger.scriptParsed",
+  "params": {
+    "scriptId": "6",
+    "isolate": "7348673817420155000",
+    "buildId": "",
+    "executionContextId": 1,
+    "startLine": 0,
+    "startColumn": 0,
+    "endLine": 0,
+    "endColumn": 0,
+    "hash": "",
+    "isModule": false,
+    "url": "",
+    "hasSourceURL": false,
+    "sourceURL": "",
+    "pid": 97964,
+    "sourceText": "(async function(){ a…",
+    "length": 32
+  },
+  "sessionId": 1
+}
+
+/* fakeDevToolsFrontend says: */
+{
+  "id": 21,
+  "sessionId": 1,
+  "method": "Debugger.getScriptSource",
+  "params": {
+    "scriptId": "6"
+  }
+}
+
+/* RehydratingConnection says: */
+{
+  "id": 21,
+  "result": {
+    "scriptSource": "(async function(){ a…"
+  },
+  "sessionId": 1
+}
+
+/* RehydratingConnection says: */
+{
+  "method": "Debugger.scriptParsed",
+  "params": {
+    "scriptId": "1",
+    "isolate": "7348673817420155000",
+    "buildId": "",
+    "executionContextId": 1,
+    "startLine": 0,
+    "startColumn": 0,
+    "endLine": 0,
+    "endColumn": 0,
+    "hash": "",
+    "isModule": false,
+    "url": "",
+    "hasSourceURL": false,
+    "sourceURL": "",
+    "pid": 97964
+  },
+  "sessionId": 1
+}
+
+/* fakeDevToolsFrontend says: */
+{
+  "id": 22,
+  "sessionId": 1,
+  "method": "Debugger.getScriptSource",
+  "params": {
+    "scriptId": "1"
+  }
+}
+
+/* RehydratingConnection says: */
+{
+  "id": 22,
+  "result": {
+    "scriptSource": "No source text avail…"
+  },
+  "sessionId": 1
+}
+
+/* RehydratingConnection says: */
+{
+  "method": "Debugger.scriptParsed",
+  "params": {
+    "scriptId": "2",
+    "isolate": "7348673817420155000",
+    "buildId": "",
+    "executionContextId": 1,
+    "startLine": 0,
+    "startColumn": 0,
+    "endLine": 0,
+    "endColumn": 0,
+    "hash": "",
+    "isModule": false,
+    "url": "",
+    "hasSourceURL": false,
+    "sourceURL": "",
+    "pid": 97964,
+    "sourceText": "() {}…",
+    "length": 5
+  },
+  "sessionId": 1
+}
+
+/* fakeDevToolsFrontend says: */
+{
+  "id": 23,
+  "sessionId": 1,
+  "method": "Debugger.getScriptSource",
+  "params": {
+    "scriptId": "2"
+  }
+}
+
+/* RehydratingConnection says: */
+{
+  "id": 23,
+  "result": {
+    "scriptSource": "() {}…"
+  },
+  "sessionId": 1
+}
+
+/* RehydratingConnection says: */
+{
+  "method": "Debugger.scriptParsed",
+  "params": {
+    "scriptId": "3",
+    "isolate": "7348673817420155000",
+    "buildId": "",
+    "executionContextId": 1,
+    "startLine": 0,
+    "startColumn": 0,
+    "endLine": 0,
+    "endColumn": 0,
+    "hash": "",
+    "isModule": false,
+    "url": "extensions::SafeBuiltins",
+    "hasSourceURL": false,
+    "sourceURL": "",
+    "pid": 97964
+  },
+  "sessionId": 1
+}
+
+/* fakeDevToolsFrontend says: */
+{
+  "id": 24,
+  "sessionId": 1,
+  "method": "Debugger.getScriptSource",
+  "params": {
+    "scriptId": "3"
+  }
+}
+
+/* RehydratingConnection says: */
+{
+  "id": 24,
+  "result": {
+    "scriptSource": "No source text avail…"
+  },
+  "sessionId": 1
+}
+
+/* RehydratingConnection says: */
+{
+  "method": "Debugger.scriptParsed",
+  "params": {
+    "scriptId": "4",
+    "isolate": "7348673817420155000",
+    "buildId": "",
+    "executionContextId": 1,
+    "startLine": 0,
+    "startColumn": 0,
+    "endLine": 0,
+    "endColumn": 0,
+    "hash": "",
+    "isModule": false,
+    "url": "v8/LoadTimes",
+    "hasSourceURL": false,
+    "sourceURL": "",
+    "pid": 97964,
+    "sourceText": "var chrome;if (!chro…",
+    "length": 198
+  },
+  "sessionId": 1
+}
+
+/* fakeDevToolsFrontend says: */
+{
+  "id": 25,
+  "sessionId": 1,
+  "method": "Debugger.getScriptSource",
+  "params": {
+    "scriptId": "4"
+  }
+}
+
+/* RehydratingConnection says: */
+{
+  "id": 25,
+  "result": {
+    "scriptSource": "var chrome;if (!chro…"
+  },
+  "sessionId": 1
+}
+
 /* RehydratingConnection says: */
 {
   "id": 2,

package/front_end/core/sdk/TargetManager.ts

@@ -318,6 +318,10 @@ export class TargetManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes
    *    (eg., tab URL of `devtools://devtools/bundled/devtools_app.html` uses a MainConnection but has no CDP server behind it).
    */
   hasFakeConnection(): boolean {
+    // Rehydrated DevTools always has a fake connection, so we shortcut and avoid the race.
+    if (Root.Runtime.getPathName().includes('rehydrated_devtools_app')) {
+      return true;
+    }
     // There _may_ be a race condition hiding here on the router/connection creation.
     // So we play it safe and consider "no connection yet" as "not fake".
     const connection = this.primaryPageTarget()?.router()?.connection();

package/front_end/generated/SupportedCSSProperties.js

@@ -641,6 +641,7 @@ export const generatedProperties = [
    "row-rule-style",
    "row-rule-width",
    "ruby-align",
+   "ruby-overhang",
    "ruby-position",
    "rx",
    "ry",
@@ -738,7 +739,7 @@ export const generatedProperties = [
    "timeline-trigger-name",
    "timeline-trigger-range-end",
    "timeline-trigger-range-start",
-   "timeline-trigger-timeline",
+   "timeline-trigger-source",
    "top",
    "touch-action",
    "transform",
@@ -3732,6 +3733,14 @@ export const generatedProperties = [
   ],
   "name": "ruby-align"
  },
+ {
+  "inherited": true,
+  "keywords": [
+   "auto",
+   "none"
+  ],
+  "name": "ruby-overhang"
+ },
  {
   "inherited": true,
   "keywords": [
@@ -4422,7 +4431,7 @@ export const generatedProperties = [
  {
   "longhands": [
    "timeline-trigger-name",
-   "timeline-trigger-timeline",
+   "timeline-trigger-source",
    "timeline-trigger-behavior",
    "timeline-trigger-range-start",
    "timeline-trigger-range-end",
@@ -4460,7 +4469,7 @@ export const generatedProperties = [
    "none",
    "auto"
   ],
-  "name": "timeline-trigger-timeline"
+  "name": "timeline-trigger-source"
  },
  {
   "keywords": [
@@ -6482,6 +6491,12 @@ export const generatedPropertyValues = {
    "space-between"
   ]
  },
+ "ruby-overhang": {
+  "values": [
+   "auto",
+   "none"
+  ]
+ },
  "ruby-position": {
   "values": [
    "over",
@@ -6839,7 +6854,7 @@ export const generatedPropertyValues = {
    "state"
   ]
  },
- "timeline-trigger-timeline": {
+ "timeline-trigger-source": {
   "values": [
    "none",
    "auto"

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';
@@ -420,53 +418,6 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     });
   }
 
-  #parseSuggestions(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;
-  }
-
   #parseMarkdown(response: string): string {
     /**
      * Sometimes the LLM responds with code chunks that wrap a text based markdown response.
@@ -482,10 +433,10 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
   }
 
   override parseTextResponse(response: string): ParsedResponse {
-    response = response.trim();
-    response = this.#parseForKnownUrls(response);
-    response = this.#parseMarkdown(response);
-    return this.#parseSuggestions(response);
+    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> {

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;
 

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

@@ -100,6 +100,12 @@ export class PerformanceInsightFormatter extends PerformanceTraceFormatter {
   }
 
   insightIsSupported(): boolean {
+    // Although our types don't show it, Insights can end up as Errors if there
+    // is an issue in the processing stage. In this case we should gracefully
+    // ignore this error.
+    if (this.#insight instanceof Error) {
+      return false;
+    }
     return this.#description().length > 0;
   }
 

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

@@ -95,7 +95,7 @@ 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;
       }
 

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),
           })
         });
 
@@ -414,6 +415,10 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
     this.#aidaRequestCache = {request, response};
   }
 
+  #clearCachedRequest(): void {
+    this.#aidaRequestCache = undefined;
+  }
+
   #registerUserImpression(rpcGlobalId: Host.AidaClient.RpcGlobalId, sampleId: number, latency: number): void {
     const seconds = Math.floor(latency / 1_000);
     const remainingMs = latency % 1_000;

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,6 +10,7 @@ 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'
@@ -36,6 +37,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;