chrome-devtools-frontend 1.0.1613465 → 1.0.1613625

package/.agents/skills/verification/SKILL.md

@@ -25,9 +25,13 @@ description: MANDATORY: Activate this skill ANY TIME you need to build the proje
 - `npm run lint` will execute ESLint and StyleLint. It will report any violations and automatically fix them where possible.
 - To run the linter on a specific file or directory, you can run `npm run lint -- <PATH>` where `PATH` is a path to a file or directory. This will also automatically fix violations where possible.
 
+## Presubmit
+
+- `git cl presubmit -u` will check if the current change is ready for upload. It will also format and lint the change.
+
 ## Best practices
 
 - Run tests often to verify your changes.
 - Prefer using a fast build, if it exists, to keep the feedback loop shorter.
 - Periodically compile with TypeScript to check for type errors.
-- Run linting at the end of your code changes.
+- Run `git cl presubmit -u` at the end of your code changes.

package/front_end/core/common/MapWithDefault.ts

@@ -8,7 +8,7 @@
  * TODO: Once the proposal is merged, just replace `MapWithDefault` with `Map` and remove it.
  **/
 export class MapWithDefault<K, V> extends Map<K, V> {
-  getOrInsert(key: K, defaultValue: V): V {
+  override getOrInsert(key: K, defaultValue: V): V {
     if (!this.has(key)) {
       this.set(key, defaultValue);
     }
@@ -16,7 +16,7 @@ export class MapWithDefault<K, V> extends Map<K, V> {
     return this.get(key) as V;
   }
 
-  getOrInsertComputed(key: K, callbackFunction: (key: K) => V): V {
+  override getOrInsertComputed(key: K, callbackFunction: (key: K) => V): V {
     if (!this.has(key)) {
       this.set(key, callbackFunction(key));
     }

package/front_end/core/common/Object.ts

@@ -119,31 +119,34 @@ export class ObjectWrapper<Events> implements EventTarget<Events> {
 export function eventMixin<Events, Base extends Platform.Constructor.Constructor<object>>(base: Base) {
   console.assert(base !== HTMLElement);
   return class EventHandling extends base implements EventTarget<Events> {
-    #events = new ObjectWrapper<Events>();
+    // Note that the weird name is due to TSC disallowing private/protected fields in
+    // anonmous exported classes. We use a `__` prefix to prevent clashes with `base`.
+    // eslint-disable-next-line @devtools/no-underscored-properties, @typescript-eslint/naming-convention
+    __events = new ObjectWrapper<Events>();
 
     addEventListener<T extends keyof Events>(
         eventType: T, listener: (arg0: EventTargetEvent<Events[T]>) => void,
         thisObject?: Object): EventDescriptor<Events, T> {
-      return this.#events.addEventListener(eventType, listener, thisObject);
+      return this.__events.addEventListener(eventType, listener, thisObject);
     }
 
     once<T extends keyof Events>(eventType: T): Promise<Events[T]> {
-      return this.#events.once(eventType);
+      return this.__events.once(eventType);
     }
 
     removeEventListener<T extends keyof Events>(
         eventType: T, listener: (arg0: EventTargetEvent<Events[T]>) => void, thisObject?: Object): void {
-      this.#events.removeEventListener(eventType, listener, thisObject);
+      this.__events.removeEventListener(eventType, listener, thisObject);
     }
 
     hasEventListeners(eventType: keyof Events): boolean {
-      return this.#events.hasEventListeners(eventType);
+      return this.__events.hasEventListeners(eventType);
     }
 
     dispatchEventToListeners<T extends keyof Events>(
         eventType: Platform.TypeScriptUtilities.NoUnion<T>,
         ...eventData: EventPayloadToRestParameters<Events, T>): void {
-      this.#events.dispatchEventToListeners(eventType, ...eventData);
+      this.__events.dispatchEventToListeners(eventType, ...eventData);
     }
   };
 }

package/front_end/models/ai_assistance/agents/README.md

@@ -0,0 +1,77 @@
+# AI Agents
+
+This directory contains the implementations of various AI agents used in the AI Assistance panel in Chrome DevTools.
+
+## Performance Agent
+
+The `PerformanceAgent` analyzes performance traces. This documentation details the specific data provided to the agent and the data it can retrieve via functions.
+
+### Initial Data Provided to the Agent
+
+When a conversation starts or the context changes, the agent is provided with a set of "facts" and query enhancements. This data forms the agent's base knowledge about the trace.
+
+#### Trace Facts (Initial Context)
+
+Facts are text-based data summaries injected into the conversation. The agent receives:
+
+- **Data Schema Descriptions**: Text explaining the format of call frame and network data to help the agent interpret subsequent tool outputs.
+- **Environment State**: Flags indicating if the trace is a fresh recording or loaded from an external file.
+- **Trace Summary Data**: A text summary containing key performance metrics (LCP, INP, CLS) and basic trace metadata.
+- **Critical Requests Data**: A text list of the most critical network requests identified in the trace.
+- **Main Thread Activity Data**: A bottom-up aggregated summary of where time was spent on the main thread.
+- **Longest Tasks Data**: A list of the longest tasks found on the main thread.
+- **Third Party Activity Data**: A summary of time spent on third-party scripts.
+
+#### Context Selection (Additional initial context)
+
+The agent receives additional initial context based on the user's context selection. The context can be a Trace, an Insight, or a specific Event:
+
+- **Trace Context**: No additional context is added beyond the base trace facts.
+- **Insight Context**: The agent receives the name and key of the specific performance insight selected.
+- **Event Context**: The agent receives the serialized details of the specific trace event selected.
+
+
+### Data Retrieval Functions (Tools)
+
+The agent can request additional data by calling functions. Here is the data the agent receives from each function:
+
+#### `getInsightDetails`
+- **Arguments**: `insightSetId` (string), `insightName` (string)
+- **Data Returned to Agent**: A detailed text representation of the specific insight (e.g., LCP breakdown components, render-blocking resource URLs).
+
+#### `getEventByKey`
+- **Arguments**: `eventKey` (string)
+- **Data Returned to Agent**: The full JSON representation of the specific trace event.
+
+#### `getMainThreadTrackSummary`
+- **Arguments**: `min` (integer, optional), `max` (integer, optional)
+- **Data Returned to Agent**: A comprehensive text summary of main thread activity *within the specified bounds*.
+  - **Note**: This differs from the initial "Main Thread Activity Data" fact as it is scoped to the provided time range and includes significantly more data: a **top-down tree**, a **bottom-up tree**, a **third-parties summary**, and a list of **related insights** for events in that range.
+
+#### `getNetworkTrackSummary`
+- **Arguments**: `min` (integer, optional), `max` (integer, optional)
+- **Data Returned to Agent**: A text summary of network requests and activity within the bounds.
+
+#### `getDetailedCallTree`
+- **Arguments**: `eventKey` (string)
+- **Data Returned to Agent**: A detailed call tree representation for the specified event.
+
+#### `addElementAnnotation`
+- **Arguments**: `elementId` (string), `annotationMessage` (string)
+- **Data Returned to Agent**: Confirmation of success or an error message. (Note: This function also modifies the DevTools UI by adding a visual annotation).
+
+#### `addNetworkRequestAnnotation`
+- **Arguments**: `eventKey` (string), `annotationMessage` (string)
+- **Data Returned to Agent**: Confirmation of success or an error message. (Note: This function also modifies the DevTools UI by adding a visual annotation).
+
+#### `getFunctionCode`
+- **Arguments**: `scriptUrl` (string), `line` (integer), `column` (integer)
+- **Data Returned to Agent**: The source code lines for the function, annotated with performance cost per line if available.
+
+#### `getResourceContent`
+- **Arguments**: `url` (string)
+- **Data Returned to Agent**: The full text content of the specified resource (e.g., script file).
+
+#### `selectEventByKey`
+- **Arguments**: `eventKey` (string)
+- **Data Returned to Agent**: Confirmation of success or an error message. (Note: This function also modifies the DevTools UI by selecting the event in the flamechart).

package/front_end/models/heap_snapshot/HeapSnapshotProxy.ts

@@ -17,13 +17,15 @@ export class HeapSnapshotWorkerProxy extends Common.ObjectWrapper.ObjectWrapper<
   readonly previousCallbacks = new Set<number>();
   readonly worker: PlatformApi.HostRuntime.Worker;
   interval?: number;
+  readonly workerUrl?: string;
 
-  constructor(eventHandler: (arg0: string, arg1: string) => void) {
+  constructor(eventHandler: (arg0: string, arg1: string) => void, workerUrl?: string) {
     super();
     this.eventHandler = eventHandler;
+    this.workerUrl = workerUrl;
     this.worker = Platform.HostRuntime.HOST_RUNTIME.createWorker(
-        new URL('../../entrypoints/heap_snapshot_worker/heap_snapshot_worker-entrypoint.js', import.meta.url)
-            .toString());
+        workerUrl ?? import.meta.resolve('../../entrypoints/heap_snapshot_worker/heap_snapshot_worker-entrypoint.js'),
+    );
     this.worker.onmessage = this.messageReceived.bind(this);
   }
 
@@ -236,7 +238,7 @@ export class HeapSnapshotLoaderProxy extends HeapSnapshotProxyObject implements
 
   async close(): Promise<void> {
     await this.callMethodPromise('close');
-    const secondWorker = new HeapSnapshotWorkerProxy(() => {});
+    const secondWorker = new HeapSnapshotWorkerProxy(() => {}, this.worker.workerUrl);
     const channel = new MessageChannel();
     await secondWorker.setupForSecondaryInit(channel.port2);
     const snapshotProxy = await this.callFactoryMethodPromise('buildSnapshot', HeapSnapshotProxy, [channel.port1]);

package/front_end/panels/ai_assistance/components/ChatMessage.ts

@@ -729,7 +729,7 @@ export function renderStep({step, isLoading, markdownRenderer, isLast}: {
   // clang-format off
   return html`
     <details class=${stepClasses}
-      jslog=${VisualLogging.section('step')}
+      jslog=${VisualLogging.expand('step').track({click: true})}
       .open=${Boolean(step.requestApproval)}>
       <summary>
         <div class="summary">
@@ -755,6 +755,7 @@ interface WidgetMakerResponse {
   customRevealTitle?: Platform.UIString.LocalizedString;
   // Can be null if the widget is only used to add the Reveal CTA.
   title: Lit.LitTemplate|Platform.UIString.LocalizedString|null;
+  jslogContext?: string;
 }
 
 const nodeCache = new Map<Protocol.DOM.BackendNodeId, SDK.DOMModel.DOMNode>();
@@ -823,6 +824,7 @@ async function makeComputedStyleWidget(widgetData: ComputedStyleAiWidget): Promi
         </span>
       </span>`,
     // clang-format on
+    jslogContext: 'computed-styles',
   };
 }
 
@@ -836,6 +838,7 @@ async function makeCoreWebVitalsWidget(widgetData: CoreVitalsAiWidget): Promise<
     renderedWidget,
     revealable: new TimelineUtils.Helpers.RevealableCoreVitals(widgetData.data.insightSetKey),
     title: lockedString(UIStringsNotTranslate.coreVitals),
+    jslogContext: 'core-web-vitals',
   };
 }
 
@@ -872,6 +875,7 @@ async function makeStylePropertiesWidget(widgetData: StylePropertiesAiWidget): P
       node: domNodeForId,
     })}
     ></devtools-widget>`,
+    jslogContext: 'standalone-styles',
   };
 }
 
@@ -894,6 +898,7 @@ async function makeLcpBreakdownWidget(widgetData: LcpBreakdownAiWidget): Promise
     renderedWidget,
     revealable: new TimelineUtils.Helpers.RevealableInsight(insight),
     title: lockedString(UIStringsNotTranslate.lcpBreakdown),
+    jslogContext: 'lcp-breakdown',
   };
 }
 
@@ -922,7 +927,8 @@ async function makeBottomUpTimelineTreeWidget(widgetData: BottomUpTreeAiWidget):
   return {
     renderedWidget,
     revealable: new TimelineUtils.Helpers.RevealableBottomUpProfile(widgetData.data.bounds),
-    title: lockedString(UIStringsNotTranslate.bottomUpTree)
+    title: lockedString(UIStringsNotTranslate.bottomUpTree),
+    jslogContext: 'bottom-up',
   };
 }
 
@@ -947,6 +953,7 @@ function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTempla
     <devtools-button class="widget-reveal-button"
       .variant=${Buttons.Button.Variant.TEXT}
       .accessibleLabel=${lockedString(UIStringsNotTranslate.reveal)}
+      .jslogContext=${'reveal'}
       @click=${onReveal}
     >
       ${response.customRevealTitle ?? lockedString(UIStringsNotTranslate.reveal)}
@@ -956,7 +963,7 @@ function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTempla
 
   // clang-format off
   return html`
-    <div class=${classes}>
+    <div class=${classes} jslog=${ifDefined(response.jslogContext ? VisualLogging.section(response.jslogContext) : undefined)}>
       ${response.title ? html`
         <div class="widget-header">
           <h3 class="widget-name">${response.title}</h3>
@@ -986,6 +993,7 @@ async function makePerformanceTraceWidget(widgetData: PerformanceTraceAiWidget):
     title: null,
     revealable: new Timeline.TimelinePanel.ParsedTraceRevealable(widgetData.data.parsedTrace),
     customRevealTitle: lockedString(UIStringsNotTranslate.revealTrace),
+    jslogContext: 'performance-trace',
   };
 }
 
@@ -1045,6 +1053,7 @@ async function makeDomTreeWidget(widgetData: DomTreeAiWidget): Promise<WidgetMak
     renderedWidget,
     revealable: new SDK.DOMModel.DeferredDOMNode(root.domModel().target(), root.backendNodeId()),
     title: lockedString(UIStringsNotTranslate.lcpElement),
+    jslogContext: 'dom-snapshot',
   };
 }
 
@@ -1607,5 +1616,6 @@ async function makeTimelineRangeSummaryWidget(widgetData: TimelineRangeSummaryAi
     renderedWidget: template,
     revealable: new TimelineUtils.Helpers.RevealableTimeRange(bounds),
     title: lockedString(UIStringsNotTranslate.performanceSummary),
+    jslogContext: 'timeline-range-summary',
   };
 }

package/front_end/panels/ai_assistance/components/ExportForAgentsDialog.ts

@@ -10,6 +10,7 @@ import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Snackbars from '../../../ui/components/snackbars/snackbars.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
+import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import styles from './exportForAgentsDialog.css.js';
 
@@ -85,7 +86,7 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
 
   render(html`
     <style>${styles}</style>
-    <div class="export-for-agents-dialog">
+    <div class="export-for-agents-dialog" jslog=${VisualLogging.dialog('ai-export-for-agents')}>
       <header>
         <h1 id="export-for-agents-dialog-title" tabindex="-1">
           ${i18nString(UIStrings.exportForAgents)}

package/front_end/panels/ai_assistance/components/WalkthroughView.ts

@@ -9,6 +9,7 @@ import * as Input from '../../../ui/components/input/input.js';
 import type {MarkdownLitRenderer} from '../../../ui/components/markdown_view/MarkdownView.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
+import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import chatMessageStyles from './chatMessage.css.js';
 import {type ModelChatMessage, renderStep, type Step, titleForStep} from './ChatMessage.js';
@@ -119,14 +120,14 @@ function renderInlineWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate,
 
   // clang-format off
   return html`
-    <div class="inline-wrapper" ?data-open=${input.isExpanded}>
+    <div class="inline-wrapper" ?data-open=${input.isExpanded} jslog=${VisualLogging.section('walkthrough-container')}>
       <span class="inline-icon">
         ${input.isLoading ?
             html`<devtools-spinner aria-label=${lockedString(UIStrings.inProgress)}></devtools-spinner>` :
             html`<devtools-icon name=${icon}></devtools-icon>`
         }
       </span>
-      <details class="walkthrough-inline" ?open=${input.isExpanded} @toggle=${onToggle}>
+      <details class="walkthrough-inline" ?open=${input.isExpanded} @toggle=${onToggle} jslog=${VisualLogging.expand('walkthrough').track({click: true})}>
         <summary ?data-has-widgets=${!input.isLoading && hasWidgets}>
           <span class="walkthrough-inline-title">
             ${input.isExpanded ?
@@ -151,7 +152,7 @@ function renderSidebarWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate
 
   // clang-format off
   return html`
-    <div class="walkthrough-view">
+    <div class="walkthrough-view" jslog=${VisualLogging.section('walkthrough-container')}>
       <div class="walkthrough-header">
          <h2 class="walkthrough-title">${i18nString(UIStrings.title)}</h2>
          <devtools-button

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -2290,7 +2290,7 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
             do {
               if (cursor.name === ':') {
                 name = suggestionText.slice(node.from, cursor.from);
-                value = suggestionText.slice(cursor.to + 1, node.to);
+                value = suggestionText.slice(cursor.to, node.to);
               }
             } while (cursor.nextSibling());
           }
@@ -2350,6 +2350,8 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
       }
 
       if (suggestionForCurrentPrompt !== textAfterAccept) {
+        // Explicitly set the query range as it is cleared during `acceptAutoComplete`
+        this.queryRange = new TextUtils.TextRange.TextRange(0, 0, 0, textAfterAccept.length);
         // Re-apply the ghost text for the remainder
         this.applySuggestion({text: suggestionForCurrentPrompt}, true);
       }

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -217,6 +217,7 @@ export class DeviceModeToolbar {
   private widthInput: EmulationComponents.DeviceSizeInputElement.SizeInputElement;
   private heightInput: EmulationComponents.DeviceSizeInputElement.SizeInputElement;
   private deviceScaleItem!: UI.Toolbar.ToolbarComboBox;
+  private deviceScaleItems: UI.Toolbar.ToolbarItem[] = [];
   private deviceSelectItem!: UI.Toolbar.ToolbarComboBox;
   private scaleItem!: UI.Toolbar.ToolbarComboBox;
   private uaItem!: UI.Toolbar.ToolbarComboBox;
@@ -341,10 +342,14 @@ export class DeviceModeToolbar {
     this.deviceScaleItem = new UI.Toolbar.ToolbarComboBox(
         this.onDeviceScaleChange.bind(this), i18nString(UIStrings.devicePixelRatio), 'dark-text', 'device-pixel-ratio');
     this.deviceScaleItem.turnShrinkable();
-    this.deviceScaleItem.setVisible(this.showDeviceScaleFactorSetting.get());
     const deviceScaleSpan = uiI18n.getFormatLocalizedString(str_, UIStrings.dpr, {PH1: this.deviceScaleItem.element});
-    mainToolbar.append(...deviceScaleSpan.childNodes);
-    mainToolbar.appendToolbarItem(this.deviceScaleItem);
+    for (const node of Array.from(deviceScaleSpan.childNodes)) {
+      const item = node === this.deviceScaleItem.element ? this.deviceScaleItem :
+                                                           new UI.Toolbar.ToolbarText(node.textContent || '');
+      item.setVisible(this.showDeviceScaleFactorSetting.get());
+      this.deviceScaleItems.push(item);
+      mainToolbar.appendToolbarItem(item);
+    }
     mainToolbar.appendToolbarItem(new UI.Toolbar.ToolbarItem(this.createEmptyToolbarElement()));
     this.uaItem = new UI.Toolbar.ToolbarComboBox(
         this.onUAChange.bind(this), i18nString(UIStrings.deviceType), 'dark-text', 'device-type');
@@ -758,7 +763,11 @@ export class DeviceModeToolbar {
 
   private updateDeviceScaleFactorVisibility(): void {
     if (this.deviceScaleItem) {
-      this.deviceScaleItem.setVisible(this.showDeviceScaleFactorSetting.get());
+      const visible = this.showDeviceScaleFactorSetting.get();
+      this.deviceScaleItem.setVisible(visible);
+      for (const item of this.deviceScaleItems) {
+        item.setVisible(visible);
+      }
     }
   }
 

package/front_end/panels/profiler/HeapSnapshotDataGrids.ts

@@ -300,7 +300,7 @@ export class HeapSnapshotSortableDataGrid extends Common.ObjectWrapper
       let field1 = nodeA[sortFields.fieldName1];
       // @ts-expect-error
       let field2 = nodeB[sortFields.fieldName1];
-      let result: number|(0 | 1 | -1) = field1 < field2 ? -1 : (field1 > field2 ? 1 : 0);
+      let result: number = field1 < field2 ? -1 : (field1 > field2 ? 1 : 0);
       if (!sortFields.ascending1) {
         result = -result;
       }

package/front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -136,31 +136,23 @@ export class HeapSnapshotGridNode extends
     Common.ObjectWrapper.eventMixin<HeapSnapshotGridNode.EventTypes, typeof HeapSnapshotGridNodeBase>(
         HeapSnapshotGridNodeBase) {
   dataGridInternal: HeapSnapshotSortableDataGrid;
-  instanceCount: number;
-  readonly savedChildren: Map<number, HeapSnapshotGridNode>;
+  instanceCount = 0;
+  readonly savedChildren = new Map<number, HeapSnapshotGridNode>();
+  /**
+   * List of position ranges for all visible nodes: [startPos1, endPos1),...,[startPosN, endPosN)
+   * Position is an item position in the provider.
+   */
   retrievedChildrenRanges: Array<{
     from: number,
     to: number,
-  }>;
-  providerObject: HeapSnapshotModel.ChildrenProvider.ChildrenProvider|null;
-  reachableFromWindow: boolean;
+  }> = [];
+  providerObject: HeapSnapshotModel.ChildrenProvider.ChildrenProvider|null = null;
+  reachableFromWindow = false;
   populated?: boolean;
 
   constructor(tree: HeapSnapshotSortableDataGrid, hasChildren: boolean) {
     super(null, hasChildren);
     this.dataGridInternal = tree;
-    this.instanceCount = 0;
-
-    this.savedChildren = new Map();
-
-    /**
-     * List of position ranges for all visible nodes: [startPos1, endPos1),...,[startPosN, endPosN)
-     * Position is an item position in the provider.
-     */
-    this.retrievedChildrenRanges = [];
-
-    this.providerObject = null;
-    this.reachableFromWindow = false;
   }
 
   get name(): string|undefined {

package/front_end/panels/protocol_monitor/JSONEditor.ts

@@ -64,6 +64,7 @@ export const enum ParameterType {
   BOOLEAN = 'boolean',
   ARRAY = 'array',
   OBJECT = 'object',
+  UNKNOWN = 'unknown',
 }
 
 interface BaseParameter {
@@ -100,7 +101,13 @@ interface ObjectParameter extends BaseParameter {
   value?: Parameter[];
 }
 
-export type Parameter = ArrayParameter|NumberParameter|StringParameter|BooleanParameter|ObjectParameter;
+interface UnknownParameter extends BaseParameter {
+  type: ParameterType.UNKNOWN;
+  value?: string;
+}
+
+export type Parameter =
+    ArrayParameter|NumberParameter|StringParameter|BooleanParameter|ObjectParameter|UnknownParameter;
 
 export interface Command {
   command: string;
@@ -128,6 +135,8 @@ interface ViewInput {
   onParameterKeydown: (event: KeyboardEvent) => void;
   onParameterKeyBlur: (event: Event) => void;
   onParameterValueBlur: (event: Event) => void;
+  displayTargetSelector?: boolean;
+  displayCommandInput?: boolean;
 }
 
 export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
@@ -149,6 +158,7 @@ const defaultValueByType = new Map<string, string|number|boolean>([
   ['string', ''],
   ['number', 0],
   ['boolean', false],
+  ['unknown', ''],
 ]);
 
 const DUMMY_DATA = 'dummy';
@@ -176,6 +186,8 @@ export class JSONEditor extends Common.ObjectWrapper.eventMixin<EventTypes, type
   #targetId?: string;
   #hintPopoverHelper?: UI.PopoverHelper.PopoverHelper;
   #view: View;
+  displayTargetSelector = true;
+  displayCommandInput = true;
 
   constructor(element: HTMLElement, view = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
@@ -240,6 +252,10 @@ export class JSONEditor extends Common.ObjectWrapper.eventMixin<EventTypes, type
     }
   }
 
+  set commandToDisplay(command: string) {
+    this.displayCommand(command, {});
+  }
+
   get targetId(): string|undefined {
     return this.#targetId;
   }
@@ -312,6 +328,13 @@ export class JSONEditor extends Common.ObjectWrapper.eventMixin<EventTypes, type
           }
           return nestedArrayParameters.length === 0 ? [] : nestedArrayParameters;
         }
+        case ParameterType.UNKNOWN: {
+          try {
+            return JSON.parse(parameter.value as string);
+          } catch {
+            return parameter.value;
+          }
+        }
         default: {
           return parameter.value;
         }
@@ -387,7 +410,7 @@ export class JSONEditor extends Common.ObjectWrapper.eventMixin<EventTypes, type
       typeRef: schema?.typeRef,
       value,
       description,
-    } as Parameter;
+    } as unknown as Parameter;
   }
 
   #convertPrimitiveParameter(key: string, value: unknown, schema?: Parameter): Parameter {
@@ -967,6 +990,8 @@ export class JSONEditor extends Common.ObjectWrapper.eventMixin<EventTypes, type
       computeDropdownValues: (parameter: Parameter) => {
         return this.#computeDropdownValues(parameter);
       },
+      displayTargetSelector: this.displayTargetSelector,
+      displayCommandInput: this.displayCommandInput,
     };
     const viewOutput = {};
     this.#view(viewInput, viewOutput, this.contentElement);
@@ -1229,7 +1254,8 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
   render(html`
     <div class="wrapper" @keydown=${input.onKeydown} jslog=${VisualLogging.pane('command-editor').track({resize: true})}>
       <div class="editor-wrapper">
-        ${renderTargetSelectorRow(input)}
+        ${input.displayTargetSelector !== false ? renderTargetSelectorRow(input) : nothing}
+        ${input.displayCommandInput !== false ? html`
         <div class="row attribute padded">
           <div class="command">command<span class="separator">:</span></div>
           <devtools-suggestion-input
@@ -1241,7 +1267,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
             @blur=${input.onCommandInputBlur}
             class=${classMap({'json-input': true})}
           ></devtools-suggestion-input>
-        </div>
+        </div>` : nothing}
         ${input.parameters.length ? html`
         <div class="row attribute padded">
           <div>parameters<span class="separator">:</span></div>

package/front_end/panels/recorder/models/RecordingPlayer.ts

@@ -133,7 +133,7 @@ export class RecordingPlayer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       throw new Error('could not find main page!');
     }
 
-    browser.on('targetdiscovered', (targetInfo: Protocol.Target.TargetInfo) => {
+    browser.on('targetdiscovered', (targetInfo: ReturnType<puppeteer.Target['_getTargetInfo']>) => {
       // Pop-ups opened by the main target won't be auto-attached. Therefore,
       // we need to create a session for them explicitly. We user openedId
       // and type to classify a target as requiring a session.

package/front_end/panels/settings/AISettingsTab.ts

@@ -684,9 +684,20 @@ export class AISettingsTab extends UI.Widget.VBox {
             .createSetting('console-insights-skip-reminder', true, Common.Settings.SettingStorageType.SESSION)
             .set(true);
       }
-    } else if (setting.name === 'ai-assistance-enabled' && !setting.get()) {
-      // If the "AI Assistance" is toggled off, we remove all the history entries related to the feature.
-      void AiAssistanceModel.AiHistoryStorage.AiHistoryStorage.instance().deleteAll();
+    } else if (setting.name === 'ai-assistance-enabled') {
+      if (!setting.get()) {
+        // If the "AI Assistance" is toggled off, we remove all the history entries related to the feature.
+        void AiAssistanceModel.AiHistoryStorage.AiHistoryStorage.instance().deleteAll();
+      }
+
+      if (Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled && setting.get()) {
+        // If the user turns on ai-assistance whilst on the V2 experiment, they
+        // do not need to see the opt-in change management dialog. This dialog
+        // exists to inform users who opted-in to "V1" that in "V2" there are
+        // some data access changes. But if a user opts-in when on "V2", they
+        // do not need to see that dialog.
+        Common.Settings.Settings.instance().moduleSetting('ai-assistance-v2-opt-in-change-dialog-seen').set(true);
+      }
     }
     this.requestUpdate();
   }

package/front_end/services/puppeteer/PuppeteerConnection.ts

@@ -91,7 +91,7 @@ export class PuppeteerConnectionHelper {
         undefined /* process */,
         undefined /* closeCallback */,
         undefined /* targetFilterCallback */,
-        target => isPageTargetCallback((target as puppeteer.Target)._getTargetInfo()),
+        target => isPageTargetCallback((target as puppeteer.Target)._getTargetInfo() as Protocol.Target.TargetInfo),
         false /* waitForInitiallyDiscoveredTargets */,
     );
 

package/front_end/ui/kit/icons/Icon.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
+// @ts-expect-error tsc 6 can't find type declarations for this file.
 import '../../../Images/Images.js';
 
 import iconStyles from './icon.css.js';

package/front_end/ui/legacy/TextPrompt.ts

@@ -251,7 +251,7 @@ export class TextPrompt extends Common.ObjectWrapper.ObjectWrapper<EventTypes> i
   private proxyElementDisplay: string;
   private autocompletionTimeout: number;
   #title: string;
-  private queryRange: TextUtils.TextRange.TextRange|null;
+  protected queryRange: TextUtils.TextRange.TextRange|null;
   private previousText: string;
   private currentSuggestion: Suggestion|null;
   private completionRequestId: number;

package/front_end/ui/legacy/Treeoutline.ts

@@ -1932,7 +1932,7 @@ export namespace TreeViewElement {
   }
 }
 
-export const ifExpanded = Lit.Directive.directive(class extends Lit.Directive.Directive {
+class IfExpandedDirective extends Lit.Directive.Directive {
   #partInfo: {type: Lit.Directive.PartType, startNode: Node};
   constructor(partInfo: Lit.Directive.PartInfo) {
     if (partInfo.type !== Lit.Directive.PartType.CHILD) {
@@ -1969,7 +1969,8 @@ export const ifExpanded = Lit.Directive.directive(class extends Lit.Directive.Di
     }
     return node.expanded;
   }
-});
+}
+export const ifExpanded = Lit.Directive.directive(IfExpandedDirective);
 
 export class TreeElementWrapper extends HTMLElement {
   #treeElement?: TreeElement;

package/front_end/ui/legacy/components/data_grid/DataGridElement.ts

@@ -50,7 +50,7 @@ const DUMMY_COLUMN_ID = 'dummy';  // SortableDataGrid.create requires at least o
  * @attribute striped If true, the data grid will have striped rows.
  * @attribute displayName
  */
-class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
+export class DataGridElement extends UI.UIUtils.HTMLElementWithLightDOMTemplate {
   static readonly observedAttributes = ['striped', 'name', 'inline', 'resize'];
 
   #dataGrid = SortableDataGrid.create([DUMMY_COLUMN_ID], [], '') as SortableDataGrid<DataGridElementNode>;
@@ -609,7 +609,7 @@ const INTERNAL_TOKEN: DataGridInternalToken = {
   token: 'DataGridInternalToken'
 };
 
-export const ifExpanded = Lit.Directive.directive(class extends Lit.Directive.Directive {
+class IfExpandedDirective extends Lit.Directive.Directive {
   #partInfo: {type: Lit.Directive.PartType, startNode: Node};
   constructor(partInfo: Lit.Directive.PartInfo) {
     if (partInfo.type !== Lit.Directive.PartType.CHILD) {
@@ -639,4 +639,5 @@ export const ifExpanded = Lit.Directive.directive(class extends Lit.Directive.Di
     }
     return node.expanded;
   }
-});
+}
+export const ifExpanded = Lit.Directive.directive(IfExpandedDirective);

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -1050,6 +1050,7 @@ export const knownContextValues = new Set([
   'copy-visible-styled-selection',
   'copy-watch-expression-value',
   'copy-xpath',
+  'core-web-vitals',
   'corner-block-end-shape',
   'corner-block-start-shape',
   'corner-bottom-left-shape',
@@ -1363,6 +1364,7 @@ export const knownContextValues = new Set([
   'dom-node-inserted-into-document',
   'dom-node-removed',
   'dom-node-removed-from-document',
+  'dom-snapshot',
   'dom-subtree-modified',
   'dom-window.close',
   'dom-word-wrap',
@@ -2248,6 +2250,7 @@ export const knownContextValues = new Set([
   'layout',
   'layout-count',
   'layout-shifts',
+  'lcp-breakdown',
   'learn-more',
   'learn-more.ai-annotations',
   'learn-more.ai-assistance',
@@ -2975,6 +2978,7 @@ export const knownContextValues = new Set([
   'performance-full-default',
   'performance-insights',
   'performance-insights-default',
+  'performance-trace',
   'performance.history-item',
   'performance.monitor',
   'performance.sidebar-insights-category-select',
@@ -3962,6 +3966,7 @@ export const knownContextValues = new Set([
   'timeline-overview',
   'timeline-persisted-main-flamechart-track-config',
   'timeline-persisted-network-flamechart-track-config',
+  'timeline-range-summary',
   'timeline-save-as-gz',
   'timeline-scope',
   'timeline-settings-pane',
@@ -4313,6 +4318,8 @@ export const knownContextValues = new Set([
   'vw',
   'waiting',
   'waiting-entry-inspect',
+  'walkthrough',
+  'walkthrough-container',
   'warning',
   'wasm',
   'wasm-auto-stepping',

package/package.json

@@ -89,7 +89,7 @@
     "svgo": "3.3.2",
     "terser": "5.44.1",
     "ts-lit-plugin": "2.0.2",
-    "typescript": "5.9.3",
+    "typescript": "6.0.2",
     "typescript-eslint": "8.58.0",
     "uuid": "13.0.0",
     "webidl2": "24.5.0",
@@ -104,5 +104,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1613465"
+  "version": "1.0.1613625"
 }