chrome-devtools-frontend 1.0.1520139 → 1.0.1521223

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

@@ -39,6 +39,13 @@ Content:
   "method": "Runtime.enable"
 }
 
+/* fakeDevToolsFrontend says: */
+{
+  "id": 2,
+  "sessionId": 1,
+  "method": "Debugger.enable"
+}
+
 /* RehydratingConnection says: */
 {
   "method": "Runtime.executionContextCreated",
@@ -130,13 +137,6 @@ Content:
   "sessionId": 1
 }
 
-/* fakeDevToolsFrontend says: */
-{
-  "id": 2,
-  "sessionId": 1,
-  "method": "Debugger.enable"
-}
-
 /* RehydratingConnection says: */
 {
   "method": "Debugger.scriptParsed",
@@ -171,15 +171,6 @@ Content:
   }
 }
 
-/* RehydratingConnection says: */
-{
-  "id": 3,
-  "result": {
-    "scriptSource": "(function () {\n  'us…"
-  },
-  "sessionId": 1
-}
-
 /* RehydratingConnection says: */
 {
   "method": "Debugger.scriptParsed",
@@ -217,15 +208,6 @@ Content:
   }
 }
 
-/* RehydratingConnection says: */
-{
-  "id": 4,
-  "result": {
-    "scriptSource": "No source text avail…"
-  },
-  "sessionId": 1
-}
-
 /* RehydratingConnection says: */
 {
   "method": "Debugger.scriptParsed",
@@ -265,15 +247,6 @@ Content:
   }
 }
 
-/* RehydratingConnection says: */
-{
-  "id": 5,
-  "result": {
-    "scriptSource": "\nvar firebaseConfig …"
-  },
-  "sessionId": 1
-}
-
 /* RehydratingConnection says: */
 {
   "method": "Debugger.scriptParsed",
@@ -313,15 +286,6 @@ Content:
   }
 }
 
-/* RehydratingConnection says: */
-{
-  "id": 6,
-  "result": {
-    "scriptSource": "\\n  window.dataLayer…"
-  },
-  "sessionId": 1
-}
-
 /* RehydratingConnection says: */
 {
   "method": "Debugger.scriptParsed",
@@ -361,15 +325,6 @@ Content:
   }
 }
 
-/* RehydratingConnection says: */
-{
-  "id": 7,
-  "result": {
-    "scriptSource": " …"
-  },
-  "sessionId": 1
-}
-
 /* RehydratingConnection says: */
 {
   "method": "Debugger.scriptParsed",
@@ -409,15 +364,6 @@ Content:
   }
 }
 
-/* RehydratingConnection says: */
-{
-  "id": 8,
-  "result": {
-    "scriptSource": "\\n\\tperformance.mark…"
-  },
-  "sessionId": 1
-}
-
 /* RehydratingConnection says: */
 {
   "method": "Debugger.scriptParsed",
@@ -457,15 +403,6 @@ Content:
   }
 }
 
-/* RehydratingConnection says: */
-{
-  "id": 9,
-  "result": {
-    "scriptSource": "/* Modernizr 2.0.4 (…"
-  },
-  "sessionId": 1
-}
-
 /* RehydratingConnection says: */
 {
   "method": "Debugger.scriptParsed",
@@ -506,15 +443,6 @@ Content:
   }
 }
 
-/* RehydratingConnection says: */
-{
-  "id": 10,
-  "result": {
-    "scriptSource": "!function(e,t){\"obje…"
-  },
-  "sessionId": 1
-}
-
 /* RehydratingConnection says: */
 {
   "method": "Debugger.scriptParsed",
@@ -554,15 +482,6 @@ Content:
   }
 }
 
-/* RehydratingConnection says: */
-{
-  "id": 11,
-  "result": {
-    "scriptSource": "/*!\n  * ============…"
-  },
-  "sessionId": 1
-}
-
 /* RehydratingConnection says: */
 {
   "method": "Debugger.scriptParsed",
@@ -602,15 +521,6 @@ Content:
   }
 }
 
-/* RehydratingConnection says: */
-{
-  "id": 12,
-  "result": {
-    "scriptSource": "function getNav() {\n…"
-  },
-  "sessionId": 1
-}
-
 /* RehydratingConnection says: */
 {
   "method": "Debugger.scriptParsed",
@@ -650,15 +560,6 @@ Content:
   }
 }
 
-/* RehydratingConnection says: */
-{
-  "id": 13,
-  "result": {
-    "scriptSource": "\nperformance.mark('e…"
-  },
-  "sessionId": 1
-}
-
 /* RehydratingConnection says: */
 {
   "method": "Debugger.scriptParsed",
@@ -698,15 +599,6 @@ Content:
   }
 }
 
-/* RehydratingConnection says: */
-{
-  "id": 14,
-  "result": {
-    "scriptSource": "\\n  (function(i,s,o,…"
-  },
-  "sessionId": 1
-}
-
 /* RehydratingConnection says: */
 {
   "method": "Debugger.scriptParsed",
@@ -746,15 +638,6 @@ Content:
   }
 }
 
-/* RehydratingConnection says: */
-{
-  "id": 15,
-  "result": {
-    "scriptSource": "\\n      var disqus_s…"
-  },
-  "sessionId": 1
-}
-
 /* RehydratingConnection says: */
 {
   "method": "Debugger.scriptParsed",
@@ -794,15 +677,6 @@ Content:
   }
 }
 
-/* RehydratingConnection says: */
-{
-  "id": 16,
-  "result": {
-    "scriptSource": "var DISQUSWIDGETS,di…"
-  },
-  "sessionId": 1
-}
-
 /* RehydratingConnection says: */
 {
   "method": "Debugger.scriptParsed",
@@ -841,15 +715,6 @@ Content:
   }
 }
 
-/* RehydratingConnection says: */
-{
-  "id": 17,
-  "result": {
-    "scriptSource": "No source text avail…"
-  },
-  "sessionId": 1
-}
-
 /* RehydratingConnection says: */
 {
   "method": "Debugger.scriptParsed",
@@ -887,15 +752,6 @@ Content:
   }
 }
 
-/* RehydratingConnection says: */
-{
-  "id": 18,
-  "result": {
-    "scriptSource": "No source text avail…"
-  },
-  "sessionId": 1
-}
-
 /* RehydratingConnection says: */
 {
   "method": "Debugger.scriptParsed",
@@ -935,15 +791,6 @@ Content:
   }
 }
 
-/* RehydratingConnection says: */
-{
-  "id": 19,
-  "result": {
-    "scriptSource": "\n// Copyright 2012 G…"
-  },
-  "sessionId": 1
-}
-
 /* RehydratingConnection says: */
 {
   "method": "Debugger.scriptParsed",
@@ -983,15 +830,6 @@ Content:
   }
 }
 
-/* RehydratingConnection says: */
-{
-  "id": 20,
-  "result": {
-    "scriptSource": "(function(){var aa=f…"
-  },
-  "sessionId": 1
-}
-
 /* RehydratingConnection says: */
 {
   "method": "Debugger.scriptParsed",
@@ -1026,15 +864,6 @@ Content:
   }
 }
 
-/* RehydratingConnection says: */
-{
-  "id": 21,
-  "result": {
-    "scriptSource": "(async function(){ a…"
-  },
-  "sessionId": 1
-}
-
 /* RehydratingConnection says: */
 {
   "method": "Debugger.scriptParsed",
@@ -1067,15 +896,6 @@ Content:
   }
 }
 
-/* RehydratingConnection says: */
-{
-  "id": 22,
-  "result": {
-    "scriptSource": "No source text avail…"
-  },
-  "sessionId": 1
-}
-
 /* RehydratingConnection says: */
 {
   "method": "Debugger.scriptParsed",
@@ -1110,15 +930,6 @@ Content:
   }
 }
 
-/* RehydratingConnection says: */
-{
-  "id": 23,
-  "result": {
-    "scriptSource": "() {}…"
-  },
-  "sessionId": 1
-}
-
 /* RehydratingConnection says: */
 {
   "method": "Debugger.scriptParsed",
@@ -1151,15 +962,6 @@ Content:
   }
 }
 
-/* RehydratingConnection says: */
-{
-  "id": 24,
-  "result": {
-    "scriptSource": "No source text avail…"
-  },
-  "sessionId": 1
-}
-
 /* RehydratingConnection says: */
 {
   "method": "Debugger.scriptParsed",
@@ -1196,18 +998,216 @@ Content:
 
 /* RehydratingConnection says: */
 {
-  "id": 25,
+  "id": 2,
   "result": {
-    "scriptSource": "var chrome;if (!chro…"
+    "debuggerId": "7777777777777777777.8888888888888888888"
   },
   "sessionId": 1
 }
 
 /* RehydratingConnection says: */
 {
-  "id": 2,
+  "id": 3,
   "result": {
-    "debuggerId": "7777777777777777777.8888888888888888888"
+    "scriptSource": "(function () {\n  'us…"
+  },
+  "sessionId": 1
+}
+
+/* RehydratingConnection says: */
+{
+  "id": 4,
+  "result": {
+    "scriptSource": "No source text avail…"
+  },
+  "sessionId": 1
+}
+
+/* RehydratingConnection says: */
+{
+  "id": 5,
+  "result": {
+    "scriptSource": "\nvar firebaseConfig …"
+  },
+  "sessionId": 1
+}
+
+/* RehydratingConnection says: */
+{
+  "id": 6,
+  "result": {
+    "scriptSource": "\\n  window.dataLayer…"
+  },
+  "sessionId": 1
+}
+
+/* RehydratingConnection says: */
+{
+  "id": 7,
+  "result": {
+    "scriptSource": " …"
+  },
+  "sessionId": 1
+}
+
+/* RehydratingConnection says: */
+{
+  "id": 8,
+  "result": {
+    "scriptSource": "\\n\\tperformance.mark…"
+  },
+  "sessionId": 1
+}
+
+/* RehydratingConnection says: */
+{
+  "id": 9,
+  "result": {
+    "scriptSource": "/* Modernizr 2.0.4 (…"
+  },
+  "sessionId": 1
+}
+
+/* RehydratingConnection says: */
+{
+  "id": 10,
+  "result": {
+    "scriptSource": "!function(e,t){\"obje…"
+  },
+  "sessionId": 1
+}
+
+/* RehydratingConnection says: */
+{
+  "id": 11,
+  "result": {
+    "scriptSource": "/*!\n  * ============…"
+  },
+  "sessionId": 1
+}
+
+/* RehydratingConnection says: */
+{
+  "id": 12,
+  "result": {
+    "scriptSource": "function getNav() {\n…"
+  },
+  "sessionId": 1
+}
+
+/* RehydratingConnection says: */
+{
+  "id": 13,
+  "result": {
+    "scriptSource": "\nperformance.mark('e…"
+  },
+  "sessionId": 1
+}
+
+/* RehydratingConnection says: */
+{
+  "id": 14,
+  "result": {
+    "scriptSource": "\\n  (function(i,s,o,…"
+  },
+  "sessionId": 1
+}
+
+/* RehydratingConnection says: */
+{
+  "id": 15,
+  "result": {
+    "scriptSource": "\\n      var disqus_s…"
+  },
+  "sessionId": 1
+}
+
+/* RehydratingConnection says: */
+{
+  "id": 16,
+  "result": {
+    "scriptSource": "var DISQUSWIDGETS,di…"
+  },
+  "sessionId": 1
+}
+
+/* RehydratingConnection says: */
+{
+  "id": 17,
+  "result": {
+    "scriptSource": "No source text avail…"
+  },
+  "sessionId": 1
+}
+
+/* RehydratingConnection says: */
+{
+  "id": 18,
+  "result": {
+    "scriptSource": "No source text avail…"
+  },
+  "sessionId": 1
+}
+
+/* RehydratingConnection says: */
+{
+  "id": 19,
+  "result": {
+    "scriptSource": "\n// Copyright 2012 G…"
+  },
+  "sessionId": 1
+}
+
+/* RehydratingConnection says: */
+{
+  "id": 20,
+  "result": {
+    "scriptSource": "(function(){var aa=f…"
+  },
+  "sessionId": 1
+}
+
+/* RehydratingConnection says: */
+{
+  "id": 21,
+  "result": {
+    "scriptSource": "(async function(){ a…"
+  },
+  "sessionId": 1
+}
+
+/* RehydratingConnection says: */
+{
+  "id": 22,
+  "result": {
+    "scriptSource": "No source text avail…"
+  },
+  "sessionId": 1
+}
+
+/* RehydratingConnection says: */
+{
+  "id": 23,
+  "result": {
+    "scriptSource": "() {}…"
+  },
+  "sessionId": 1
+}
+
+/* RehydratingConnection says: */
+{
+  "id": 24,
+  "result": {
+    "scriptSource": "No source text avail…"
+  },
+  "sessionId": 1
+}
+
+/* RehydratingConnection says: */
+{
+  "id": 25,
+  "result": {
+    "scriptSource": "var chrome;if (!chro…"
   },
   "sessionId": 1
 }

package/front_end/core/sdk/RehydratingConnection.ts

@@ -160,7 +160,6 @@ export class RehydratingConnection implements ProtocolClient.InspectorBackend.Co
 
     this.rehydratingConnectionState = RehydratingConnectionState.REHYDRATED;
     // Use revealer to load trace into performance panel
-
     await Common.Revealer.reveal(this.trace);
   }
 
@@ -220,7 +219,11 @@ class RehydratingSessionBase {
   }
 
   sendMessageToFrontend(payload: ServerMessage): void {
-    this.connection?.postToFrontend(payload);
+    // The frontend doesn't expect CDP responses within the same synchronous event loop, so it breaks unexpectedly.
+    //  Any async boundary will do, so we use setTimeout.
+    setTimeout(() => {
+      this.connection?.postToFrontend(payload);
+    });
   }
 
   handleFrontendMessageAsFakeCDPAgent(data: ProtocolMessage): void {

package/front_end/core/sdk/sdk.ts

@@ -35,6 +35,7 @@ import * as CSSPropertyParserMatchers from './CSSPropertyParserMatchers.js';
 import * as CSSQuery from './CSSQuery.js';
 import * as CSSRule from './CSSRule.js';
 import * as CSSScope from './CSSScope.js';
+import * as CSSStartingStyle from './CSSStartingStyle.js';
 import * as CSSStyleDeclaration from './CSSStyleDeclaration.js';
 import * as CSSStyleSheetHeader from './CSSStyleSheetHeader.js';
 import * as CSSSupports from './CSSSupports.js';
@@ -115,6 +116,7 @@ export {
   CSSQuery,
   CSSRule,
   CSSScope,
+  CSSStartingStyle,
   CSSStyleDeclaration,
   CSSStyleSheetHeader,
   CSSSupports,

package/front_end/entrypoints/rehydrated_devtools_app/rehydrated_devtools_app.ts

@@ -9,6 +9,7 @@ import '../../Images/Images.js';
 import '../../models/logs/logs-meta.js';
 import '../../models/persistence/persistence-meta.js';
 import '../../panels/browser_debugger/browser_debugger-meta.js';
+import '../../panels/developer_resources/developer_resources-meta.js';
 // panels/timeline depends on mobile_throttling for settings UI
 import '../../panels/mobile_throttling/mobile_throttling-meta.js';
 import '../../panels/protocol_monitor/protocol_monitor-meta.js';

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

@@ -145,30 +145,6 @@ When referring to an element for which you know the nodeId, annotate your output
 - When referring to the LCP, it's useful to also mention what the LCP element is via its nodeId. Use the markdown link syntax to do so.
 `;
 
-const callFrameDataFormatDescription = `Each call frame is presented in the following format:
-
-'id;eventKey;name;duration;selfTime;urlIndex;childRange;[S]'
-
-Key definitions:
-
-* id: A unique numerical identifier for the call frame. Never mention this id in the output to the user.
-* eventKey: String that uniquely identifies this event in the flame chart.
-* name: A concise string describing the call frame (e.g., 'Evaluate Script', 'render', 'fetchData').
-* duration: The total execution time of the call frame, including its children.
-* selfTime: The time spent directly within the call frame, excluding its children's execution.
-* urlIndex: Index referencing the "All URLs" list. Empty if no specific script URL is associated.
-* childRange: Specifies the direct children of this node using their IDs. If empty ('' or 'S' at the end), the node has no children. If a single number (e.g., '4'), the node has one child with that ID. If in the format 'firstId-lastId' (e.g., '4-5'), it indicates a consecutive range of child IDs from 'firstId' to 'lastId', inclusive.
-* S: _Optional_. The letter 'S' terminates the line if that call frame was selected by the user.
-
-Example Call Tree:
-
-1;r-123;main;500;100;;
-2;r-124;update;200;50;;3
-3;p-49575-15428179-2834-374;animate;150;20;0;4-5;S
-4;p-49575-15428179-3505-1162;calculatePosition;80;80;;
-5;p-49575-15428179-5391-2767;applyStyles;50;50;;
-`;
-
 enum ScorePriority {
   REQUIRED = 3,
   CRITICAL = 2,
@@ -321,7 +297,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     metadata: {source: 'devtools', score: ScorePriority.CRITICAL}
   };
   #callFrameDataDescriptionFact: Host.AidaClient.RequestFact = {
-    text: callFrameDataFormatDescription,
+    text: PerformanceTraceFormatter.callFrameDataFormatDescription,
     metadata: {source: 'devtools', score: ScorePriority.CRITICAL}
   };
   #traceFacts: Host.AidaClient.RequestFact[] = [];
@@ -617,7 +593,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     this.addFact(this.#networkDataDescriptionFact);
 
     if (!this.#traceFacts.length) {
-      this.#formatter = new PerformanceTraceFormatter(focus, PerformanceInsightFormatter.create);
+      this.#formatter = new PerformanceTraceFormatter(focus);
       this.#createFactForTraceSummary();
       this.#createFactForCriticalRequests();
       this.#createFactForMainThreadBottomUpSummary();