chrome-devtools-frontend 1.0.1555430 → 1.0.1556696

package/front_end/entrypoints/formatter_worker/FormatterActions.ts

@@ -55,6 +55,8 @@ export interface ScopeTreeNode {
   variables: Array<{name: string, kind: DefinitionKind, offsets: number[]}>;
   start: number;
   end: number;
+  // If present, apply source map mappings to these locations to figure out the original function name.
+  nameMappingLocations?: number[];
   kind: ScopeKind;
   children: ScopeTreeNode[];
 }

package/front_end/entrypoints/formatter_worker/ScopeParser.ts

@@ -17,7 +17,7 @@ export function parseScopes(expression: string, sourceType: 'module'|'script' =
   } catch {
     return null;
   }
-  return new ScopeVariableAnalysis(root).run();
+  return new ScopeVariableAnalysis(root, expression).run();
 }
 
 export interface Use {
@@ -37,13 +37,15 @@ export class Scope {
   readonly start: number;
   readonly end: number;
   readonly kind: ScopeKind;
+  readonly nameMappingLocations?: number[];
   readonly children: Scope[] = [];
 
-  constructor(start: number, end: number, parent: Scope|null, kind: ScopeKind) {
+  constructor(start: number, end: number, parent: Scope|null, kind: ScopeKind, nameMappingLocations?: number[]) {
     this.start = start;
     this.end = end;
     this.parent = parent;
     this.kind = kind;
+    this.nameMappingLocations = nameMappingLocations;
     if (parent) {
       parent.children.push(this);
     }
@@ -64,6 +66,7 @@ export class Scope {
       end: this.end,
       variables,
       kind: this.kind,
+      nameMappingLocations: this.nameMappingLocations,
       children,
     };
   }
@@ -137,9 +140,12 @@ export class ScopeVariableAnalysis {
   readonly #allNames = new Set<string>();
   #currentScope: Scope;
   readonly #rootNode: Acorn.ESTree.Node;
+  readonly #sourceText: string;
+  #additionalMappingLocations: number[] = [];
 
-  constructor(node: Acorn.ESTree.Node) {
+  constructor(node: Acorn.ESTree.Node, sourceText: string) {
     this.#rootNode = node;
+    this.#sourceText = sourceText;
     this.#rootScope = new Scope(node.start, node.end, null, ScopeKind.GLOBAL);
     this.#currentScope = this.#rootScope;
   }
@@ -253,7 +259,9 @@ export class ScopeVariableAnalysis {
         break;
       case 'FunctionDeclaration':
         this.#processNodeAsDefinition(DefinitionKind.VAR, false, node.id);
-        this.#pushScope(node.id?.end ?? node.start, node.end, ScopeKind.FUNCTION);
+        this.#pushScope(
+            node.id?.end ?? node.start, node.end, ScopeKind.FUNCTION,
+            mappingLocationsForFunctionDeclaration(node, this.#sourceText));
         this.#addVariable('this', node.start, DefinitionKind.FIXED);
         this.#addVariable('arguments', node.start, DefinitionKind.FIXED);
         node.params.forEach(this.#processNodeAsDefinition.bind(this, DefinitionKind.LET, false));
@@ -262,7 +270,9 @@ export class ScopeVariableAnalysis {
         this.#popScope(true);
         break;
       case 'FunctionExpression':
-        this.#pushScope(node.id?.end ?? node.start, node.end, ScopeKind.FUNCTION);
+        this.#pushScope(
+            node.id?.end ?? node.start, node.end, ScopeKind.FUNCTION,
+            [...this.#additionalMappingLocations, ...mappingLocationsForFunctionExpression(node, this.#sourceText)]);
         this.#addVariable('this', node.start, DefinitionKind.FIXED);
         this.#addVariable('arguments', node.start, DefinitionKind.FIXED);
         node.params.forEach(this.#processNodeAsDefinition.bind(this, DefinitionKind.LET, false));
@@ -286,8 +296,11 @@ export class ScopeVariableAnalysis {
       case 'MethodDefinition':
         if (node.computed) {
           this.#processNode(node.key);
+        } else {
+          this.#additionalMappingLocations = mappingLocationsForMethodDefinition(node);
         }
         this.#processNode(node.value);
+        this.#additionalMappingLocations = [];
         break;
       case 'NewExpression':
         this.#processNode(node.callee);
@@ -424,8 +437,8 @@ export class ScopeVariableAnalysis {
     return this.#allNames;
   }
 
-  #pushScope(start: number, end: number, kind: ScopeKind): void {
-    this.#currentScope = new Scope(start, end, this.#currentScope, kind);
+  #pushScope(start: number, end: number, kind: ScopeKind, nameMappingLocations?: number[]): void {
+    this.#currentScope = new Scope(start, end, this.#currentScope, kind, nameMappingLocations);
   }
 
   #popScope(isFunctionContext: boolean): void {
@@ -488,3 +501,58 @@ export class ScopeVariableAnalysis {
     this.#processNode(decl.init ?? null);
   }
 }
+
+function mappingLocationsForFunctionDeclaration(node: Acorn.ESTree.FunctionDeclaration, sourceText: string): number[] {
+  // For function declarations we prefer the position of the identifier as per spec, but we'll also return
+  // the beginning of the opening parenthesis '('.
+  const result = [node.id.start];
+
+  const searchParenEndPos = node.params.length ? node.params[0].start : node.body.start;
+  const parenPos = indexOfCharInBounds(sourceText, '(', node.id.end, searchParenEndPos);
+  if (parenPos >= 0) {
+    // Note that this is not 100% accurate as there might be a comment containing a open parenthesis between
+    // the identifier the and the argument list (unlikely though).
+    result.push(parenPos);
+  }
+
+  return result;
+}
+
+function mappingLocationsForFunctionExpression(node: Acorn.ESTree.FunctionExpression, sourceText: string): number[] {
+  // For function expressions we prefer the position of the identifier or '(' if none is present, as per spec.
+  const result = [];
+  if (node.id) {
+    result.push(node.id.start);
+  }
+
+  const searchParenStartPos = node.id ? node.id.end : node.start;
+  const searchParenEndPos = node.params.length ? node.params[0].start : node.body.start;
+  const parenPos = indexOfCharInBounds(sourceText, '(', searchParenStartPos, searchParenEndPos);
+  if (parenPos >= 0) {
+    // Note that this is not 100% accurate as there might be a comment containing a open parenthesis between
+    // the identifier the and the argument list (unlikely though).
+    result.push(parenPos);
+  }
+
+  return result;
+}
+
+function mappingLocationsForMethodDefinition(node: Acorn.ESTree.MethodDefinition): number[] {
+  // Method definitions use a FunctionExpression as their "value" child. So we only
+  // record the start of the "key" here and let 'mappingLocationsForFunctionExpression' handle
+  // the parenthesis.
+  if (node.key.type === 'Identifier' || node.key.type === 'PrivateIdentifier') {
+    const id = node.key as Acorn.ESTree.Identifier | Acorn.ESTree.PrivateIdentifier;
+    return [id.start];
+  }
+  return [];
+}
+
+function indexOfCharInBounds(str: string, needle: string, start: number, end: number): number {
+  for (let i = start; i < end; ++i) {
+    if (str[i] === needle) {
+      return i;
+    }
+  }
+  return -1;
+}

package/front_end/entrypoints/formatter_worker/Substitute.ts

@@ -35,7 +35,7 @@ function computeSubstitution(expression: string, nameMap: Map<string, string|nul
     checkPrivateFields: false,
     ranges: false,
   } as acorn.Options) as Acorn.ESTree.Node;
-  const scopeVariables = new ScopeVariableAnalysis(root);
+  const scopeVariables = new ScopeVariableAnalysis(root, expression);
   scopeVariables.run();
   const freeVariables = scopeVariables.getFreeVariables();
   const result: Replacement[] = [];

package/front_end/generated/InspectorBackendCommands.ts

@@ -340,7 +340,7 @@ inspectorBackend.registerCommand("Cast.stopCasting", [{"name": "sinkName", "type
 inspectorBackend.registerType("Cast.Sink", [{"name": "name", "type": "string", "optional": false, "description": "", "typeRef": null}, {"name": "id", "type": "string", "optional": false, "description": "", "typeRef": null}, {"name": "session", "type": "string", "optional": true, "description": "Text describing the current session. Present only if there is an active session on the sink.", "typeRef": null}]);
 
 // DOM.
-inspectorBackend.registerEnum("DOM.PseudoType", {FirstLine: "first-line", FirstLetter: "first-letter", Checkmark: "checkmark", Before: "before", After: "after", PickerIcon: "picker-icon", InterestHint: "interest-hint", Marker: "marker", Backdrop: "backdrop", Column: "column", Selection: "selection", SearchText: "search-text", TargetText: "target-text", SpellingError: "spelling-error", GrammarError: "grammar-error", Highlight: "highlight", FirstLineInherited: "first-line-inherited", ScrollMarker: "scroll-marker", ScrollMarkerGroup: "scroll-marker-group", ScrollButton: "scroll-button", Scrollbar: "scrollbar", ScrollbarThumb: "scrollbar-thumb", ScrollbarButton: "scrollbar-button", ScrollbarTrack: "scrollbar-track", ScrollbarTrackPiece: "scrollbar-track-piece", ScrollbarCorner: "scrollbar-corner", Resizer: "resizer", InputListButton: "input-list-button", ViewTransition: "view-transition", ViewTransitionGroup: "view-transition-group", ViewTransitionImagePair: "view-transition-image-pair", ViewTransitionGroupChildren: "view-transition-group-children", ViewTransitionOld: "view-transition-old", ViewTransitionNew: "view-transition-new", Placeholder: "placeholder", FileSelectorButton: "file-selector-button", DetailsContent: "details-content", Picker: "picker", PermissionIcon: "permission-icon", OverscrollAreaParent: "overscroll-area-parent", OverscrollClientArea: "overscroll-client-area"});
+inspectorBackend.registerEnum("DOM.PseudoType", {FirstLine: "first-line", FirstLetter: "first-letter", Checkmark: "checkmark", Before: "before", After: "after", PickerIcon: "picker-icon", InterestHint: "interest-hint", Marker: "marker", Backdrop: "backdrop", Column: "column", Selection: "selection", SearchText: "search-text", TargetText: "target-text", SpellingError: "spelling-error", GrammarError: "grammar-error", Highlight: "highlight", FirstLineInherited: "first-line-inherited", ScrollMarker: "scroll-marker", ScrollMarkerGroup: "scroll-marker-group", ScrollButton: "scroll-button", Scrollbar: "scrollbar", ScrollbarThumb: "scrollbar-thumb", ScrollbarButton: "scrollbar-button", ScrollbarTrack: "scrollbar-track", ScrollbarTrackPiece: "scrollbar-track-piece", ScrollbarCorner: "scrollbar-corner", Resizer: "resizer", InputListButton: "input-list-button", ViewTransition: "view-transition", ViewTransitionGroup: "view-transition-group", ViewTransitionImagePair: "view-transition-image-pair", ViewTransitionGroupChildren: "view-transition-group-children", ViewTransitionOld: "view-transition-old", ViewTransitionNew: "view-transition-new", Placeholder: "placeholder", FileSelectorButton: "file-selector-button", DetailsContent: "details-content", Picker: "picker", PermissionIcon: "permission-icon", OverscrollAreaParent: "overscroll-area-parent"});
 inspectorBackend.registerEnum("DOM.ShadowRootType", {UserAgent: "user-agent", Open: "open", Closed: "closed"});
 inspectorBackend.registerEnum("DOM.CompatibilityMode", {QuirksMode: "QuirksMode", LimitedQuirksMode: "LimitedQuirksMode", NoQuirksMode: "NoQuirksMode"});
 inspectorBackend.registerEnum("DOM.PhysicalAxes", {Horizontal: "Horizontal", Vertical: "Vertical", Both: "Both"});

package/front_end/generated/protocol.ts

@@ -4531,7 +4531,6 @@ export namespace DOM {
     Picker = 'picker',
     PermissionIcon = 'permission-icon',
     OverscrollAreaParent = 'overscroll-area-parent',
-    OverscrollClientArea = 'overscroll-client-area',
   }
 
   /**

package/front_end/models/ai_assistance/AiConversation.ts

@@ -58,7 +58,7 @@ export class AiConversation {
   }
 
   readonly id: string;
-  type: ConversationType;
+  #type: ConversationType;
   #isReadOnly: boolean;
   readonly history: ResponseData[];
   #isExternal: boolean;
@@ -66,6 +66,9 @@ export class AiConversation {
   #aidaClient: Host.AidaClient.AidaClient;
   #changeManager: ChangeManager|undefined;
   #agent: AiAgent<unknown>;
+  #origin?: string;
+
+  #contexts: Array<ConversationContext<unknown>> = [];
 
   constructor(
       type: ConversationType,
@@ -78,13 +81,13 @@ export class AiConversation {
   ) {
     this.#changeManager = changeManager;
     this.#aidaClient = aidaClient;
-    this.type = type;
-    this.#agent = this.#createAgent();
+    this.#type = type;
 
     this.id = id;
     this.#isReadOnly = isReadOnly;
     this.#isExternal = isExternal;
     this.history = this.#reconstructHistory(data);
+    this.#agent = this.#createAgent();
   }
 
   get isReadOnly(): boolean {
@@ -109,6 +112,25 @@ export class AiConversation {
     return this.history.length === 0;
   }
 
+  #setOriginIfEmpty(newOrigin: string|undefined): void {
+    if (!this.#origin) {
+      this.#origin = newOrigin;
+    }
+  }
+
+  setContext(updateContext: ConversationContext<unknown>|null): void {
+    if (!updateContext) {
+      this.#contexts = [];
+      return;
+    }
+
+    this.#contexts = [updateContext];
+  }
+
+  get selectedContext(): ConversationContext<unknown>|undefined {
+    return this.#contexts.at(0);
+  }
+
   #reconstructHistory(historyWithoutImages: ResponseData[]): ResponseData[] {
     const imageHistory = AiHistoryStorage.instance().getImageHistory();
     if (imageHistory && imageHistory.length > 0) {
@@ -214,7 +236,7 @@ export class AiConversation {
         }
         return item;
       }),
-      type: this.type,
+      type: this.#type,
       isExternal: this.#isExternal,
     };
   }
@@ -223,10 +245,11 @@ export class AiConversation {
     const options = {
       aidaClient: this.#aidaClient,
       serverSideLoggingEnabled: isAiAssistanceServerSideLoggingEnabled(),
+      sessionId: this.id,
       changeManager: this.#changeManager,
     };
     let agent: AiAgent<unknown>;
-    switch (this.type) {
+    switch (this.#type) {
       case ConversationType.STYLING: {
         agent = new StylingAgent(options);
         break;
@@ -326,24 +349,62 @@ Time: ${micros(time)}`;
   async *
       run(
           initialQuery: string,
-          options: {selected: ConversationContext<unknown>|null, signal?: AbortSignal, extraContext?: ExtraContext[]},
-          multimodalInput?: MultimodalInput,
+          options: {
+
+            signal?: AbortSignal,
+            extraContext?: ExtraContext[],
+            multimodalInput?: MultimodalInput,
+          } = {},
           ): AsyncGenerator<ResponseData, void, void> {
     if (options.extraContext) {
       await this.#createFactsForExtraContext(options.extraContext);
     }
-    for await (const data of this.#agent.run(initialQuery, options, multimodalInput)) {
+    this.#setOriginIfEmpty(this.selectedContext?.getOrigin());
+
+    if (this.isBlockedByOrigin) {
+      throw new Error('Cross-origin context data should not be included');
+    }
+
+    function shouldAddToHistory(data: ResponseData): boolean {
       // We don't want to save partial responses to the conversation history.
       // TODO(crbug.com/463325400): We should save interleaved answers to the history as well.
-      if (data.type !== ResponseType.ANSWER || data.complete) {
+      if (data.type === ResponseType.ANSWER && !data.complete) {
+        return false;
+      }
+
+      return true;
+    }
+
+    for await (const data of this.#agent.run(
+        initialQuery,
+        {
+          signal: options.signal,
+          selected: this.selectedContext ?? null,
+        },
+        options.multimodalInput,
+        )) {
+      if (shouldAddToHistory(data)) {
         void this.addHistoryItem(data);
       }
       yield data;
     }
   }
 
+  /**
+   * Indicates whether the new conversation context is blocked due to cross-origin restrictions.
+   * This happens when the conversation's context has a different
+   * origin than the selected context.
+   */
+  get isBlockedByOrigin(): boolean {
+    return !this.#contexts.every(context => context.isOriginAllowed(this.#origin));
+  }
+
   get origin(): string|undefined {
-    return this.#agent.origin;
+    return this.#origin;
+  }
+
+  get type(): ConversationType {
+    return this.#type;
   }
 }
 

package/front_end/models/ai_assistance/ArtifactsManager.ts

@@ -0,0 +1,67 @@
+// 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 type * as SDK from '../../core/sdk/sdk.js';
+import type * as Trace from '../../models/trace/trace.js';
+import type {InsightKeys} from '../trace/insights/types.js';
+
+export interface InsightArtifact {
+  type: 'insight';
+  insightType: InsightKeys;
+}
+
+export interface NetworkRequestArtifact {
+  type: 'network-request';
+  request: SDK.NetworkRequest.NetworkRequest|Trace.Types.Events.SyntheticNetworkRequest;
+}
+
+export interface FlameChartArtifact {
+  type: 'flamechart';
+  start: Trace.Types.Timing.Micro;
+  end: Trace.Types.Timing.Micro;
+}
+
+export type Artifact = InsightArtifact|NetworkRequestArtifact|FlameChartArtifact;
+
+export class ArtifactAddedEvent extends Event {
+  static readonly eventName = 'artifactadded';
+
+  constructor(public artifact: Artifact) {
+    super(ArtifactAddedEvent.eventName);
+  }
+}
+
+let instance: ArtifactsManager|null = null;
+
+export class ArtifactsManager extends EventTarget {
+  #artifacts: Artifact[] = [];
+
+  static instance(): ArtifactsManager {
+    if (!instance) {
+      instance = new ArtifactsManager();
+    }
+    return instance;
+  }
+
+  static removeInstance(): void {
+    instance = null;
+  }
+
+  private constructor() {
+    super();
+  }
+
+  get artifacts(): Artifact[] {
+    return this.#artifacts;
+  }
+
+  addArtifact(artifact: Artifact): void {
+    this.#artifacts.push(artifact);
+    this.dispatchEvent(new ArtifactAddedEvent(artifact));
+  }
+
+  clear(): void {
+    this.#artifacts = [];
+  }
+}

package/front_end/models/ai_assistance/ConversationHandler.ts

@@ -213,7 +213,7 @@ export class ConversationHandler extends Common.ObjectWrapper.ObjectWrapper<Even
     const conversation = new AiConversation(
         conversationType,
         [],
-        aiAgent.id,
+        aiAgent.sessionId,
         /* isReadOnly */ true,
         this.#aidaClient,
         undefined,
@@ -228,7 +228,8 @@ export class ConversationHandler extends Common.ObjectWrapper.ObjectWrapper<Even
     selected: NodeContext|PerformanceTraceContext|RequestContext|null,
   }): AsyncGenerator<ExternalRequestResponse, ExternalRequestResponse> {
     const {conversation, prompt, selected} = opts;
-    const generator = conversation.run(prompt, {selected});
+    conversation.setContext(selected);
+    const generator = conversation.run(prompt);
     const devToolsLogs: object[] = [];
     for await (const data of generator) {
       if (data.type !== ResponseType.ANSWER || data.complete) {

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

@@ -125,6 +125,7 @@ export interface RequestOptions {
 export interface AgentOptions {
   aidaClient: Host.AidaClient.AidaClient;
   serverSideLoggingEnabled?: boolean;
+  sessionId?: string;
   confirmSideEffectForTest?: typeof Promise.withResolvers;
 }
 
@@ -270,7 +271,7 @@ export abstract class AiAgent<T> {
   abstract readonly userTier: string|undefined;
   abstract handleContextDetails(select: ConversationContext<T>|null): AsyncGenerator<ContextResponse, void, void>;
 
-  readonly #sessionId: string = crypto.randomUUID();
+  readonly #sessionId: string;
   readonly #aidaClient: Host.AidaClient.AidaClient;
   readonly #serverSideLoggingEnabled: boolean;
   readonly confirmSideEffect: typeof Promise.withResolvers;
@@ -284,12 +285,6 @@ export abstract class AiAgent<T> {
     aidaResponse: Host.AidaClient.DoConversationResponse,
   }> = [];
 
-  /**
-   * Might need to be part of history in case we allow chatting in
-   * historical conversations.
-   */
-  #origin?: string;
-
   /**
    * `context` does not change during `AiAgent.run()`, ensuring that calls to JS
    * have the correct `context`. We don't want element selection by the user to
@@ -297,7 +292,6 @@ export abstract class AiAgent<T> {
    */
   protected context?: ConversationContext<T>;
 
-  #id: string = crypto.randomUUID();
   #history: Host.AidaClient.Content[] = [];
 
   #facts: Set<Host.AidaClient.RequestFact> = new Set<Host.AidaClient.RequestFact>();
@@ -305,6 +299,7 @@ export abstract class AiAgent<T> {
   constructor(opts: AgentOptions) {
     this.#aidaClient = opts.aidaClient;
     this.#serverSideLoggingEnabled = opts.serverSideLoggingEnabled ?? false;
+    this.#sessionId = opts.sessionId ?? crypto.randomUUID();
     this.confirmSideEffect = opts.confirmSideEffectForTest ?? (() => Promise.withResolvers());
   }
 
@@ -393,12 +388,8 @@ export abstract class AiAgent<T> {
     return request;
   }
 
-  get id(): string {
-    return this.#id;
-  }
-
-  get origin(): string|undefined {
-    return this.#origin;
+  get sessionId(): string {
+    return this.#sessionId;
   }
 
   /**
@@ -496,15 +487,8 @@ export abstract class AiAgent<T> {
           multimodalInput?: MultimodalInput,
           ): AsyncGenerator<ResponseData, void, void> {
     await options.selected?.refresh();
-
     if (options.selected) {
-      // First context set on the agent determines its origin from now on.
-      if (this.#origin === undefined) {
-        this.#origin = options.selected.getOrigin();
-      }
-      if (options.selected.isOriginAllowed(this.#origin)) {
-        this.context = options.selected;
-      }
+      this.context = options.selected;
     }
 
     const enhancedQuery = await this.enhanceQuery(initialQuery, options.selected, multimodalInput?.type);
@@ -596,10 +580,16 @@ export abstract class AiAgent<T> {
 
       if (functionCall) {
         try {
-          const result = yield* this.#callFunction(functionCall.name, functionCall.args, {
-            ...options,
-            explanation: textResponse,
-          });
+          const result = yield*
+              this.#callFunction(
+                  functionCall.name,
+                  functionCall.args,
+                  {
+                    ...options,
+                    explanation: textResponse,
+                  },
+              );
+
           if (options.signal?.aborted) {
             yield this.#createErrorResponse(ErrorType.ABORT);
             break;
@@ -720,7 +710,7 @@ export abstract class AiAgent<T> {
 
       result = await call.handler(args, {
         ...options,
-        approved: approvedRun,
+        approved: true,
       });
     }