chrome-devtools-frontend 1.0.1565595 → 1.0.1567721

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

@@ -77,37 +77,29 @@ const getGreenDevAdditionalWidgetGuidelines = (): string => {
 
   if (widgetsFromFunctionCalls) {
     return `
-- CRITICAL: You have access to three functions for adding rich, interactive widgets to your response:
-  \`addInsightWidget\`, \`addNetworkRequestWidget\`, and \`addFlameChartWidget\`.
-  You MUST use these functions whenever you refer to a corresponding entity.
-
-- **\`addInsightWidget({insightType: '...'})\`**:
-  - **When to use**: Call this function every time you mention a specific performance insight (e.g., LCP, INP,
-    CLS culprits).
-  - **Purpose**: It embeds an interactive widget that provides a detailed breakdown and visualization of the
-    insight.
-  - **Example**: If you are explaining the causes of a poor LCP score, you MUST also call
-    \`addInsightWidget({insightType: 'LCPBreakdown'})\`. This provides the user with the data to explore
-    alongside your explanation.
-- **\`addNetworkRequestWidget({eventKey: '...'})\`**:
+- CRITICAL: You have access to a function for adding rich, interactive widgets to your response: \`addWidget\`.
+  You MUST use this function whenever you refer to a corresponding entity.
+
+- **\`addWidget({widget: {type: 'insight', insightType: '...'}})\`**:
+  - **When to use**: Call this function every time you mention a specific performance insight (e.g., LCP, INP, CLS culprits).
+  - **Purpose**: It embeds an interactive widget that provides a detailed breakdown and visualization of the insight.
+  - **Example**: If you are explaining the causes of a poor LCP score, you MUST also call \`addWidget({widget: {type: 'insight', insightType: 'LCPBreakdown'}})\`.
+
+- **\`addWidget({widget: {type: 'network-request', eventKey: '...'}})\`**:
   - **When to use**: Call this function whenever you discuss a specific network request.
-  - **Purpose**: It adds a widget displaying the full details of the network request, such as its timing,
-    headers, and priority.
-  - **Critical**: The eventKey should be the trace event key (only the number, no letters prefix or -) of that
-    script's network request.
-  - **Example**: If you identify a render-blocking script, you MUST also call
-    \`addNetworkRequestWidget({eventKey: '...'})\` with the trace event key (only the number, no letters prefix
-    or -) of that script's network request.
-- **\`addFlameChartWidget({start: ..., end: ...})\`**:
-  - **When to use**: Call this function to highlight a specific time range within the trace, especially when
-    discussing long tasks, specific events, or periods of high activity.
+  - **Purpose**: It adds a widget displaying the full details of the network request, such as its timing, headers, and priority.
+  - **Critical**: The eventKey should be the trace event key (only the number, no letters prefix or -) of that script's network request.
+  - **Example**: If you identify a render-blocking script, you MUST also call \`addWidget({widget: {type: 'network-request', eventKey: '...'}})\`.
+
+- **\`addWidget({widget: {type: 'flamechart', start: ..., end: ...}})\`**:
+  - **When to use**: Call this function to highlight a specific time range within the trace, especially when discussing long tasks, specific events, or periods of high activity.
     - **Purpose**: It embeds a focused flame chart visualization for the given time range (in microseconds).
-    - **Example**: If you find a long task that is blocking the main thread, you MUST also call
-      \`addFlameChartWidget({start: 123456, end: 789012})\`. This provides the user with the data to explore
-      alongside your explanation.
+    - **Example**: If you find a long task that is blocking the main thread, you MUST also call \`addWidget({widget: {type: 'flamechart', start: 123456, end: 789012}})\`.
+
 - **General Rules**:
-  - You MUST call these functions as soon as you identify the entity you are discussing.
+  - You MUST call this function as soon as you identify the entity you are discussing.
   - Do NOT add more than one widget for the same insight, network request, or time range to avoid redundancy.
+  - If you have already shown a widget for any specific insight, network request, or time range, do not show it again.
 `;
   }
 
@@ -1247,104 +1239,105 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     }
 
     if (Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled) {
-      this.declareFunction<{insightType: Trace.Insights.Types.InsightKeys}>('addInsightWidget', {
+      this.declareFunction<
+          {
+            type: 'insight' | 'network-request' | 'flamechart',
+            insightType?: Trace.Insights.Types.InsightKeys,
+            eventKey?: number,
+            start?: number,
+            end?: number,
+          },
+          object|{error: string}>('addWidget', {
         description:
-            'Adds an insight widget to the response. When mentioning an insight, call this function to also display an appropriate widget.',
+            'Adds an insight widget to the response. When mentioning an insight, call this function to also display an appropriate widget. Use this as much as possible to provide a better user experience.',
         parameters: {
           type: Host.AidaClient.ParametersTypes.OBJECT,
           description: '',
           nullable: false,
           properties: {
-            insightType: {
+            type: {
               type: Host.AidaClient.ParametersTypes.STRING,
-              description:
-                  'The name of the insight. Only use the insight names given in the "Available insights" list.',
+              description: 'The type of the widget to add. Possible values: insight, network-request, flamechart',
               nullable: false,
             },
-          },
-        },
-        handler: async _params => {
-          ArtifactsManager.instance().addArtifact({type: 'insight', insightType: _params.insightType});
-          return {result: {success: true}};
-        },
-      });
-
-      this.declareFunction<{eventKey: string}, object|{error: string}>('addNetworkRequestWidget', {
-        description:
-            'Adds a network request widget to the response. When mentioning a network request, call this function with its trace event key.',
-        parameters: {
-          type: Host.AidaClient.ParametersTypes.OBJECT,
-          description: '',
-          nullable: false,
-          properties: {
+            insightType: {
+              type: Host.AidaClient.ParametersTypes.STRING,
+              description: 'The type of the insight widget. Include for insight widgets.',
+              nullable: true,
+            },
             eventKey: {
               type: Host.AidaClient.ParametersTypes.STRING,
-              description: 'The trace event key for the network request.',
-              nullable: false,
+              description: 'The event key for the network request widget. Include for network request widgets.',
+              nullable: true,
             },
-          },
-        },
-        handler: async _params => {
-          const rawTraceEvent =
-              Trace.Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().getRawTraceEvents().at(
-                  Number(_params.eventKey));
-          // Get the trace event object if it is available.
-          // If the trace is uploaded, we need to use the synthetic event.
-          if (rawTraceEvent && Trace.Types.Events.isSyntheticNetworkRequest(rawTraceEvent)) {
-            const rawTraceEventId = rawTraceEvent?.args?.data?.requestId;
-            const rawTraceEventUrl = rawTraceEvent?.args?.data?.url;
-            const networkRequest = rawTraceEvent ? Logs.NetworkLog.NetworkLog.instance()
-                                                       .requestsForId(rawTraceEventId)
-                                                       .find(r => r.url() === rawTraceEventUrl) :
-                                                   null;
-            if (networkRequest) {
-              ArtifactsManager.instance().addArtifact({type: 'network-request', request: networkRequest});
-              return {result: {success: true}};
-            }
-          }
-
-          const syntheticRequest =
-              Trace.Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().syntheticEventForRawEventIndex(
-                  Number(_params.eventKey));
-
-          if (syntheticRequest && Trace.Types.Events.isSyntheticNetworkRequest(syntheticRequest)) {
-            ArtifactsManager.instance().addArtifact({
-              type: 'network-request',
-              request: syntheticRequest,
-            });
-            return {result: {success: true}};
-          }
-
-          return {result: {error: 'Could not find network request'}};
-        },
-      });
-
-      this.declareFunction<{start: number, end: number}, object|{error: string}>('addFlameChartWidget', {
-        description: 'Adds a flame chart widget to the response.',
-        parameters: {
-          type: Host.AidaClient.ParametersTypes.OBJECT,
-          description: '',
-          nullable: false,
-          properties: {
             start: {
               type: Host.AidaClient.ParametersTypes.INTEGER,
-              description: 'The start time of the flame chart in microseconds.',
-              nullable: false,
+              description: 'The start time for the flame chart widget. Include for flame chart widgets.',
+              nullable: true,
             },
             end: {
               type: Host.AidaClient.ParametersTypes.INTEGER,
-              description: 'The end time of the flame chart in microseconds.',
-              nullable: false,
+              description: 'The end time for the flame chart widget. Include for flame chart widgets.',
+              nullable: true,
             },
           },
         },
-        handler: async _params => {
-          ArtifactsManager.instance().addArtifact({
-            type: 'flamechart',
-            start: Trace.Types.Timing.Micro(_params.start),
-            end: Trace.Types.Timing.Micro(_params.end),
-          });
-          return {result: {success: true}};
+        handler: async params => {
+          switch (params.type) {
+            case 'insight':
+              if (!params.insightType) {
+                return {error: 'Missing insightType for insight widget'};
+              }
+              ArtifactsManager.instance().addArtifact({type: 'insight', insightType: params.insightType});
+              return {result: {success: true}};
+            case 'network-request': {
+              if (!params.eventKey) {
+                return {error: 'Missing eventKey for network-request widget'};
+              }
+              const rawTraceEvent =
+                  Trace.Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().getRawTraceEvents().at(
+                      Number(params.eventKey));
+              // Get the trace event object if it is available.
+              // If the trace is uploaded, we need to use the synthetic event.
+              if (rawTraceEvent && Trace.Types.Events.isSyntheticNetworkRequest(rawTraceEvent)) {
+                const rawTraceEventId = rawTraceEvent?.args?.data?.requestId;
+                const rawTraceEventUrl = rawTraceEvent?.args?.data?.url;
+                const networkRequest = rawTraceEvent ? Logs.NetworkLog.NetworkLog.instance()
+                                                           .requestsForId(rawTraceEventId)
+                                                           .find(r => r.url() === rawTraceEventUrl) :
+                                                       null;
+                if (networkRequest) {
+                  ArtifactsManager.instance().addArtifact({type: 'network-request', request: networkRequest});
+                  return {result: {success: true}};
+                }
+              }
+
+              const syntheticRequest = Trace.Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager()
+                                           .syntheticEventForRawEventIndex(Number(params.eventKey));
+
+              if (syntheticRequest && Trace.Types.Events.isSyntheticNetworkRequest(syntheticRequest)) {
+                ArtifactsManager.instance().addArtifact({
+                  type: 'network-request',
+                  request: syntheticRequest,
+                });
+                return {result: {success: true}};
+              }
+
+              return {result: {error: 'Could not find network request'}};
+            }
+            case 'flamechart':
+              if (params.start === undefined || params.end === undefined) {
+                return {error: 'Missing start or end for flamechart widget'};
+              }
+              ArtifactsManager.instance().addArtifact({
+                type: 'flamechart',
+                start: Trace.Types.Timing.Micro(params.start),
+                end: Trace.Types.Timing.Micro(params.end),
+              });
+              return {result: {success: true}};
+            default:
+              return {error: 'Invalid widget type'};
+          }
         },
       });
     }

package/front_end/models/emulation/DeviceModeModel.ts

@@ -122,7 +122,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.#preferredSize = new Geometry.Size(1, 1);
     this.#initialized = false;
     this.#appliedDeviceSize = new Geometry.Size(1, 1);
-    this.#appliedDeviceScaleFactor = window.devicePixelRatio;
+    this.#appliedDeviceScaleFactor = globalThis.devicePixelRatio;
     this.#appliedUserAgentType = UA.DESKTOP;
 
     this.#scaleSetting = Common.Settings.Settings.instance().createSetting('emulation.device-scale', 1);

package/front_end/models/formatter/FormatterWorkerPool.ts

@@ -13,15 +13,18 @@ let formatterWorkerPoolInstance: FormatterWorkerPool|undefined;
 export class FormatterWorkerPool {
   private taskQueue: Task[];
   private workerTasks: Map<PlatformApi.HostRuntime.Worker, Task|null>;
+  private entrypointURL: string;
 
-  constructor() {
+  constructor(entrypointURL?: string) {
     this.taskQueue = [];
     this.workerTasks = new Map();
+    this.entrypointURL =
+        entrypointURL ?? import.meta.resolve('../../entrypoints/formatter_worker/formatter_worker-entrypoint.js');
   }
 
-  static instance(): FormatterWorkerPool {
-    if (!formatterWorkerPoolInstance) {
-      formatterWorkerPoolInstance = new FormatterWorkerPool();
+  static instance(opts?: {forceNew: true, entrypointURL: string}): FormatterWorkerPool {
+    if (!formatterWorkerPoolInstance || opts?.forceNew) {
+      formatterWorkerPoolInstance = new FormatterWorkerPool(opts?.entrypointURL);
     }
 
     return formatterWorkerPoolInstance;
@@ -44,8 +47,7 @@ export class FormatterWorkerPool {
   }
 
   private createWorker(): PlatformApi.HostRuntime.Worker {
-    const worker = Platform.HostRuntime.HOST_RUNTIME.createWorker(
-        new URL('../../entrypoints/formatter_worker/formatter_worker-entrypoint.js', import.meta.url).toString());
+    const worker = Platform.HostRuntime.HOST_RUNTIME.createWorker(this.entrypointURL);
     worker.onmessage = this.onWorkerMessage.bind(this, worker);
     worker.onerror = this.onWorkerError.bind(this, worker);
     return worker;

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -170,7 +170,7 @@ export const NativeFunctions = [
   {
     name: "set",
     signatures: [["key","value"]],
-    receivers: ["Map","WeakMap","CrashReportStorage"]
+    receivers: ["Map","WeakMap","CrashReportContext"]
   },
   {
     name: "set",
@@ -1493,7 +1493,7 @@ export const NativeFunctions = [
   {
     name: "item",
     signatures: [["index"]],
-    receivers: ["CSSRuleList","CSSStyleDeclaration","DOMRectList","DOMStringList","DOMTokenList","FileList","HTMLCollectionBase","HTMLCollectionOf","HTMLSelectElement","MediaList","MimeTypeArray","NamedNodeMap","NodeList","NodeListOf","Plugin","PluginArray","SpeechRecognitionResult","SpeechRecognitionResultList","StyleSheetList","TouchList","HTMLCollection","SpeechGrammarList"]
+    receivers: ["CSSRuleList","CSSStyleDeclaration","DOMRectList","DOMStringList","DOMTokenList","FileList","HTMLCollectionBase","HTMLCollectionOf","HTMLSelectElement","MediaList","MimeTypeArray","NamedNodeMap","NodeList","NodeListOf","Plugin","PluginArray","SpeechRecognitionResult","SpeechRecognitionResultList","StyleSheetList","TouchList","TimelineTriggerRangeList","HTMLCollection","SpeechGrammarList"]
   },
   {
     name: "item",
@@ -1575,7 +1575,7 @@ export const NativeFunctions = [
   {
     name: "delete",
     signatures: [["key"]],
-    receivers: ["Map","WeakMap"]
+    receivers: ["Map","WeakMap","CrashReportContext"]
   },
   {
     name: "delete",
@@ -1998,11 +1998,6 @@ export const NativeFunctions = [
     signatures: [["start","end"]],
     receivers: ["SourceBuffer"]
   },
-  {
-    name: "remove",
-    signatures: [["key"]],
-    receivers: ["CrashReportStorage"]
-  },
   {
     name: "remove",
     signatures: [["?options"]],
@@ -3863,7 +3858,7 @@ export const NativeFunctions = [
   {
     name: "initialize",
     signatures: [["length"]],
-    receivers: ["CrashReportStorage"]
+    receivers: ["CrashReportContext"]
   },
   {
     name: "initialize",

package/front_end/models/persistence/PersistenceImpl.ts

@@ -285,6 +285,14 @@ export class PersistenceImpl extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     return bindings.get(uiSourceCode) || null;
   }
 
+  /**
+   * Returns whether the UISourceCode has editable content - either its project
+   * supports file content changes, or it has a persistence binding to a file system.
+   */
+  hasEditableContent(uiSourceCode: Workspace.UISourceCode.UISourceCode): boolean {
+    return uiSourceCode.project().canSetFileContent() || this.binding(uiSourceCode) !== null;
+  }
+
   subscribeForBindingEvent(uiSourceCode: Workspace.UISourceCode.UISourceCode, listener: () => void): void {
     this.#subscribedBindingEventListeners.set(uiSourceCode, listener);
   }

package/front_end/models/text_utils/TextUtils.snapshot.txt

@@ -0,0 +1,83 @@
+Title: TextUtils BalancedJSONTokenizer matches quotes
+Content:
+Parsing {"odd back slashes with text around":"tes\\\"t"}
+{"odd back slashes with text around":"tes\\\"t"}
+Parsing {"escaped double quotes":"\"test\""}
+{"escaped double quotes":"\"test\""}
+Parsing {"escaped back slash before double quote":"test\\"}
+{"escaped back slash before double quote":"test\\"}
+Parsing {"1":2}
+{"1":2}
+Parsing {"":""}
+{"":""}
+Parsing {"nested brackets":{}}
+{"nested brackets":{}}
+Parsing {"nested brackets with double quotes":{"":""}}
+{"nested brackets with double quotes":{"":""}}
+Parsing {"etc":{"\\":"\""}}
+{"etc":{"\\":"\""}}
+Parsing {"etc":{"\\\\":"\\"}}
+{"etc":{"\\\\":"\\"}}
+Parsing {"etc":{"\\\\\"":"\\\\\""}}
+{"etc":{"\\\\\"":"\\\\\""}}
+=== end content
+
+Title: TextUtils BalancedJSONTokenizer matches sequence using one shot
+Content:
+Parsing {"one":"one"}
+{"one":"one"}
+Parsing [{"one":"one"},{"two":"two"}]
+[{"one":"one"}
+Parsing [{"one":"one"},{"two":"two"},{"three":"three"}]
+[{"one":"one"}
+=== end content
+
+Title: TextUtils BalancedJSONTokenizer matches sequence using multiple
+Content:
+Parsing {"one":"one"}
+{"one":"one"}
+Parsing [{"one":"one"},{"two":"two"}]
+[{"one":"one"},{"two":"two"}
+Parsing [{"one":"one"},{"two":"two"},{"three":"three"}]
+[{"one":"one"},{"two":"two"},{"three":"three"}
+=== end content
+
+Title: TextUtils BalancedJSONTokenizer incremental writes
+Content:
+Running at once:
+[{"odd back slashes with text around":"tes\\\"t"},{"escaped double quotes":"\"test\""},{"escaped back slash before double quote":"test\\"},{"1":2},{"":""},{"nested brackets":{}},{"nested brackets with double quotes":{"":""}},{"etc":{"\\":"\""}},{"etc":{"\\\\":"\\"}},{"etc":{"\\\\\"":"\\\\\""}}
+Running by 3:
+[{"odd back slashes with text around":"tes\\\"t"}
+,{"escaped double quotes":"\"test\""}
+,{"escaped back slash before double quote":"test\\"}
+,{"1":2}
+,{"":""}
+,{"nested brackets":{}}
+,{"nested brackets with double quotes":{"":""}}
+,{"etc":{"\\":"\""}}
+,{"etc":{"\\\\":"\\"}}
+,{"etc":{"\\\\\"":"\\\\\""}}
+Running by 15:
+[{"odd back slashes with text around":"tes\\\"t"}
+,{"escaped double quotes":"\"test\""}
+,{"escaped back slash before double quote":"test\\"},{"1":2}
+,{"":""}
+,{"nested brackets":{}}
+,{"nested brackets with double quotes":{"":""}}
+,{"etc":{"\\":"\""}}
+,{"etc":{"\\\\":"\\"}}
+,{"etc":{"\\\\\"":"\\\\\""}}
+Running by 50:
+[{"odd back slashes with text around":"tes\\\"t"}
+,{"escaped double quotes":"\"test\""}
+,{"escaped back slash before double quote":"test\\"},{"1":2}
+,{"":""},{"nested brackets":{}}
+,{"nested brackets with double quotes":{"":""}},{"etc":{"\\":"\""}}
+,{"etc":{"\\\\":"\\"}},{"etc":{"\\\\\"":"\\\\\""}}
+=== end content
+
+Title: TextUtils BalancedJSONTokenizer garbage after object
+Content:
+Parsing [{a: 'b'}], {'x': {a: 'b'}}
+[{a: 'b'}
+=== end content

package/front_end/panels/ai_assistance/ai_assistance-meta.ts

@@ -148,7 +148,6 @@ UI.ActionRegistration.registerActionExtension({
   category: UI.ActionRegistration.ActionCategory.GLOBAL,
   title: i18nLazyString(UIStrings.debugWithAi),
   configurableBindings: false,
-  featurePromotionId: 'ai-assistance',
   async loadActionDelegate() {
     const AiAssistance = await loadAiAssistanceModule();
     return new AiAssistance.ActionDelegate();

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

@@ -5,14 +5,17 @@
 import './CollapsibleAssistanceContentWidget.js';
 import './PerformanceAgentFlameChart.js';
 
+import * as Common from '../../../core/common/common.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import * as Logs from '../../../models/logs/logs.js';
 import * as NetworkTimeCalculator from '../../../models/network_time_calculator/network_time_calculator.js';
 import * as Trace from '../../../models/trace/trace.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
+import * as NetworkForward from '../../network/forward/forward.js';
 import * as Network from '../../network/network.js';
 import * as Insights from '../../timeline/components/insights/insights.js';
+import * as Timeline from '../../timeline/timeline.js';
 
 import artifactsViewerStyles from './artifactsViewer.css.js';
 import type * as PerformanceAgentFlameChart from './PerformanceAgentFlameChart.js';
@@ -39,7 +42,14 @@ export function renderArtifact(
       }
 
       return html`
-        <devtools-collapsible-assistance-content-widget .data=${{headerText: `Insight - ${componentName}`}}>
+        <devtools-collapsible-assistance-content-widget .data=${{
+          headerText: `Insight - ${componentName}`,
+          onReveal: () => {
+            void UI.InspectorView.InspectorView.instance().showPanel('timeline').then(() => {
+              Timeline.TimelinePanel.TimelinePanel.instance().revealInsight(insightModel);
+            });
+          },
+        }}>
           ${insightRenderer.renderInsightToWidgetElement(parsedTrace, insightSet, insightModel, componentName, {
             selected: true,
             isAIAssistanceContext: true,
@@ -59,8 +69,16 @@ export function renderArtifact(
         }
         return html`
         <devtools-collapsible-assistance-content-widget
-          .data=${{headerText: `Network Request: ${
-              sdkRequest.url().length > 80 ? sdkRequest.url().slice(0, 80) + '...' : sdkRequest.url()}`}}>
+          .data=${{
+            headerText: `Network Request: ${
+              sdkRequest.url().length > 80 ? sdkRequest.url().slice(0, 80) + '...' : sdkRequest.url()}`,
+            onReveal: () => {
+              void UI.InspectorView.InspectorView.instance().showPanel('network').then(() => {
+                void Common.Revealer.reveal(NetworkForward.UIRequestLocation.UIRequestLocation.tab(
+                    sdkRequest, NetworkForward.UIRequestLocation.UIRequestTabs.TIMING));
+              });
+            },
+          }}>
           <devtools-widget class="actions" .widgetConfig=${UI.Widget.widgetConfig(Network.RequestTimingView.RequestTimingView, {
             request: sdkRequest,
             calculator,
@@ -71,7 +89,13 @@ export function renderArtifact(
     }
     case 'flamechart': {
       return html`
-        <devtools-collapsible-assistance-content-widget .data=${{headerText: `Flamechart`}}>
+        <devtools-collapsible-assistance-content-widget .data=${{
+          headerText: `Flamechart`,
+          onReveal: () => {
+            // eslint-disable-next-line no-console
+            console.log('Reveal flamechart', artifact.start, artifact.end);
+          },
+        }}>
           <devtools-performance-agent-flame-chart .data=${{
             parsedTrace,
             start: artifact.start,