chrome-devtools-frontend 1.0.1603822 → 1.0.1605219

package/front_end/generated/SupportedCSSProperties.js

@@ -1747,10 +1747,16 @@ export const generatedProperties = [
  },
  {
   "inherited": false,
+  "keywords": [
+   "overlap-join"
+  ],
   "name": "column-rule-edge-inset-end"
  },
  {
   "inherited": false,
+  "keywords": [
+   "overlap-join"
+  ],
   "name": "column-rule-edge-inset-start"
  },
  {
@@ -1785,10 +1791,16 @@ export const generatedProperties = [
  },
  {
   "inherited": false,
+  "keywords": [
+   "overlap-join"
+  ],
   "name": "column-rule-interior-inset-end"
  },
  {
   "inherited": false,
+  "keywords": [
+   "overlap-join"
+  ],
   "name": "column-rule-interior-inset-start"
  },
  {
@@ -2805,7 +2817,8 @@ export const generatedProperties = [
   "keywords": [
    "normal",
    "running",
-   "paused"
+   "paused",
+   "stopped"
   ],
   "name": "image-animation"
  },
@@ -3814,10 +3827,16 @@ export const generatedProperties = [
  },
  {
   "inherited": false,
+  "keywords": [
+   "overlap-join"
+  ],
   "name": "row-rule-edge-inset-end"
  },
  {
   "inherited": false,
+  "keywords": [
+   "overlap-join"
+  ],
   "name": "row-rule-edge-inset-start"
  },
  {
@@ -3852,10 +3871,16 @@ export const generatedProperties = [
  },
  {
   "inherited": false,
+  "keywords": [
+   "overlap-join"
+  ],
   "name": "row-rule-interior-inset-end"
  },
  {
   "inherited": false,
+  "keywords": [
+   "overlap-join"
+  ],
   "name": "row-rule-interior-inset-start"
  },
  {
@@ -5598,6 +5623,26 @@ export const generatedPropertyValues = {
    "currentcolor"
   ]
  },
+ "column-rule-edge-inset-end": {
+  "values": [
+   "overlap-join"
+  ]
+ },
+ "column-rule-edge-inset-start": {
+  "values": [
+   "overlap-join"
+  ]
+ },
+ "column-rule-interior-inset-end": {
+  "values": [
+   "overlap-join"
+  ]
+ },
+ "column-rule-interior-inset-start": {
+  "values": [
+   "overlap-join"
+  ]
+ },
  "column-rule-style": {
   "values": [
    "none",
@@ -6220,7 +6265,8 @@ export const generatedPropertyValues = {
   "values": [
    "normal",
    "running",
-   "paused"
+   "paused",
+   "stopped"
   ]
  },
  "image-rendering": {
@@ -6737,6 +6783,26 @@ export const generatedPropertyValues = {
    "currentcolor"
   ]
  },
+ "row-rule-edge-inset-end": {
+  "values": [
+   "overlap-join"
+  ]
+ },
+ "row-rule-edge-inset-start": {
+  "values": [
+   "overlap-join"
+  ]
+ },
+ "row-rule-interior-inset-end": {
+  "values": [
+   "overlap-join"
+  ]
+ },
+ "row-rule-interior-inset-start": {
+  "values": [
+   "overlap-join"
+  ]
+ },
  "row-rule-style": {
   "values": [
    "none",

package/front_end/generated/protocol-mapping.d.ts

@@ -1892,6 +1892,13 @@ export namespace ProtocolMapping {
       paramsType: [Protocol.Cast.StopCastingRequest];
       returnType: void;
     };
+    /**
+     * Returns all entries in the CrashReportContext across all frames in the page.
+     */
+    'CrashReportContext.getEntries': {
+      paramsType: [];
+      returnType: Protocol.CrashReportContext.GetEntriesResponse;
+    };
     /**
      * Collects class names for the node with given id and all of it's child nodes.
      */

package/front_end/generated/protocol-proxy-api.d.ts

@@ -38,6 +38,8 @@ declare namespace ProtocolProxyApi {
 
     Cast: CastApi;
 
+    CrashReportContext: CrashReportContextApi;
+
     DOM: DOMApi;
 
     DOMDebugger: DOMDebuggerApi;
@@ -149,6 +151,8 @@ declare namespace ProtocolProxyApi {
 
     Cast: CastDispatcher;
 
+    CrashReportContext: CrashReportContextDispatcher;
+
     DOM: DOMDispatcher;
 
     DOMDebugger: DOMDebuggerDispatcher;
@@ -1046,6 +1050,16 @@ declare namespace ProtocolProxyApi {
 
   }
 
+  export interface CrashReportContextApi {
+    /**
+     * Returns all entries in the CrashReportContext across all frames in the page.
+     */
+    invoke_getEntries(): Promise<Protocol.CrashReportContext.GetEntriesResponse>;
+
+  }
+  export interface CrashReportContextDispatcher {
+  }
+
   export interface DOMApi {
     /**
      * Collects class names for the node with given id and all of it's child nodes.

package/front_end/generated/protocol.ts

@@ -4525,6 +4525,28 @@ export namespace Cast {
   }
 }
 
+/**
+ * This domain exposes the current state of the CrashReportContext API.
+ */
+export namespace CrashReportContext {
+
+  /**
+   * Key-value pair in CrashReportContext.
+   */
+  export interface CrashReportContextEntry {
+    key: string;
+    value: string;
+    /**
+     * The ID of the frame where the key-value pair was set.
+     */
+    frameId: Page.FrameId;
+  }
+
+  export interface GetEntriesResponse extends ProtocolResponseWithError {
+    entries: CrashReportContextEntry[];
+  }
+}
+
 /**
  * This domain exposes DOM read/write operations. Each DOM Node is represented with its mirror object
  * that has an `id`. This `id` can be used to get additional information on the Node, resolve it into

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

@@ -82,7 +82,7 @@ Your primary goal is to provide actionable advice to web developers about their
 
 You will be provided a summary of a trace: some performance metrics; the most critical network requests; a bottom-up call graph summary; and a brief overview of available insights. Each insight has information about potential performance issues with the page.
 
-Don't mention anything about an insight or the actual LCP element without first getting more data about it by calling \`getInsightDetails\`.
+Always call getInsightDetails to gather more data on an insight or the actual LCP element BEFORE mentioning any specific details about them.
 
 You have functions available to learn more about the trace. Use these to confirm hypotheses, or to further explore the trace when diagnosing performance issues.
 
@@ -105,23 +105,41 @@ Note: if the user asks a specific question about the trace (such as "What is my
 
 ### Step 1: Determine a performance problem to investigate
 
+- If the trace summary indicates that the main performance metrics (LCP, INP, CLS) are all within good thresholds, acknowledge this to the user. In this case, let the user know that they can try recording a trace with mobile emulation and throttling options and show them how.
 - With help from the user, determine what performance problem to focus on.
-- If the user is not specific about what problem to investigate, help them by doing a investigation yourself. Present to the user options with 1-sentence summaries. Mention what performance metrics each option impacts. Call as many functions and confirm the data thoroughly: never present an option without being certain it is a real performance issue. Don't suggest solutions yet.
-- Rank the options from most impactful to least impactful, and present them to the user in that order.
-- Don't present more than 2 options.
+- If the user is not specific about what problem to investigate, help them by doing a investigation yourself focus on performance improvements for better LCP, INP and CLS. Present to the user options with 1-sentence summaries. Mention what performance metrics each option impacts. Call as many functions and confirm the data thoroughly: never present an option without being certain it is a real performance issue.
+- Focus on identifying the problem in Step 1 and save solution suggestions for Step 2.
 - Once a performance problem has been identified for investigation, move on to step 2.
 
+#### Response Structure
+
+- Rank the options from most impactful to least impactful, and present them to the user in that order.
+- Limit the number of performance problem options presented to the user to a maximum of 2.
+
 ### Step 2: Suggest solutions
 
 - Suggest solutions to remedy the identified performance problem. Be as specific as possible, using data from the trace via the provided functions to back up everything you say. You should prefer specific solutions, but absent any specific solution you may suggest general solutions (such as from an insight's documentation links).
 - If you are unsure, be honest and present information that can be helpful for further investigation.
 - A good first step to discover solutions is to consider the insights, but you should also validate all potential advice by analyzing the trace until you are confident about the root cause of a performance issue.
 
+#### Response Structure
+
+- If available, point out the root cause(s) of the problem.
+  - Example: "**Root Cause**: The page is slow because of [reason]."
+  - Example: "**Root Causes**:"
+    - [Reason 1]
+    - [Reason 2]
+- if applicable, list actionable solution suggestion(s) in order of impact:
+  - Example: "**Suggestion**: [Suggestion 1]
+  - Example: "**Suggestions**:"
+    - [Suggestion 1]
+    - [Suggestion 2]
+
 ## Guidelines
 
 - Use the provided functions to get detailed performance data. Prioritize functions that provide context relevant to the performance issue being investigated.
 - Before finalizing your advice, look over it and validate using any relevant functions. If something seems off, refine the advice before giving it to the user.
-- Do not rely on assumptions or incomplete information. Use the provided functions to get more data when needed.
+- Base your analysis and advice solely on the data retrieved through the provided functions. Always use the provided functions to gather sufficient data when needed.
 - Use the track summary functions to get high-level detail about portions of the trace. For the \`bounds\` parameter, default to using the bounds of the trace. Never specifically ask the user for a bounds. You can use more narrow bounds (such as the bounds relevant to a specific insight) when appropriate. Narrow the bounds given functions when possible.
 - Use \`getEventByKey\` to get data on a specific trace event. This is great for root-cause analysis or validating any assumptions.
 - Provide clear, actionable recommendations. Avoid technical jargon unless necessary, and explain any technical terms used.
@@ -147,15 +165,6 @@ Adhere to the following critical requirements:
 - If asked about sensitive topics (religion, race, politics, sexuality, gender, etc.), respond with: "My expertise is limited to website performance analysis. I cannot provide information on that topic.".
 - Do not provide answers on non-web-development topics, such as legal, financial, medical, or personal advice.
 - Use the precision of Strunk & White, the brevity of Hemingway, and the simple clarity of Vonnegut. Don't add repeated information, and keep the whole answer short.
-
-## Response Structure
-
-- If available, point out the root cause of the problem. It may be a bullet point list.
-  - Example: "**Root Cause**: The page is slow because of [reason]."
-- if applicable, list actionable solution suggestion(s) in order of impact:
-  - Example: "**Suggestions**:
-    - [Suggestion 1]
-    - [Suggestion 2]
 `;
 };
 
@@ -166,7 +175,7 @@ When referring to a trace event that has a corresponding \`eventKey\`, annotate
 - When referring to a URL for which you know the eventKey of: [https://www.example.com](#s-1827)
 - Never show the eventKey (like "eventKey: s-1852"); instead, use a markdown link as described above.
 
-When asking the user to make a choice between multiple options, output a list of choices at the end of your text response. The format is \`SUGGESTIONS: ["suggestion1", "suggestion2", "suggestion3"]\`. This MUST start on a newline, and be a single line.
+When asking the user to make a choice between options, output a list of choices at the end of your text response. The format is \`SUGGESTIONS: ["suggestion1", "suggestion2", "suggestion3"]\`. This MUST start on a newline, and be a single line.
 `;
 
 const buildExtraPreambleWhenFreshTrace = (): string => {
@@ -231,8 +240,13 @@ export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
   }
 
   override getOrigin(): string {
-    const {min, max} = this.#focus.parsedTrace.data.Meta.traceBounds;
-    return `trace-${min}-${max}`;
+    try {
+      const url = new URL(this.#focus.parsedTrace.data.Meta.mainFrameURL);
+      return url.origin;
+    } catch {
+      const {min, max} = this.#focus.parsedTrace.data.Meta.traceBounds;
+      return `trace-${min}-${max}`;
+    }
   }
 
   override getItem(): AgentFocus {

package/front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.snapshot.txt

@@ -226,7 +226,7 @@ Response headers
 
 The result of the checks for this insight are:
 - fetchpriority=high should be applied: FAILED
-- lazy load not applied: PASSED
+- LCP resources should not use loading=lazy: PASSED
 - Request is discoverable in initial document: PASSED
 
 ## Estimated savings: none

package/front_end/models/bindings/TempFile.ts

@@ -7,10 +7,7 @@ import * as Common from '../../core/common/common.js';
 import {ChunkedFileReader, type ChunkedReader} from './FileUtils.js';
 
 export class TempFile {
-  #lastBlob: Blob|null;
-  constructor() {
-    this.#lastBlob = null;
-  }
+  #lastBlob: Blob|null = null;
 
   write(pieces: Array<string|Blob>): void {
     if (this.#lastBlob) {

package/front_end/models/emulation/DeviceModeModel.ts

@@ -795,35 +795,30 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       overlayModel.setShowViewportSizeOnResize(false);
     }
 
-    const screenshot = await screenCaptureModel.captureScreenshot(
-        Protocol.Page.CaptureScreenshotRequestFormat.Png, 100, screenshotMode, clip);
-
-    const deviceMetrics: Protocol.Page.SetDeviceMetricsOverrideRequest = {
-      width: 0,
-      height: 0,
-      deviceScaleFactor: 0,
-      mobile: false,
-    };
-    if (fullSize && this.#emulationModel) {
-      if (this.#device && this.#mode) {
-        const orientation = this.#device.orientationByName(this.#mode.orientation);
-        deviceMetrics.width = orientation.width;
-        deviceMetrics.height = orientation.height;
-        const dispFeature = this.getDisplayFeature();
-        if (dispFeature) {
-          // @ts-expect-error: displayFeature isn't in protocol.ts but is an
-          // experimental flag:
-          // https://chromedevtools.github.io/devtools-protocol/tot/Emulation/#method-setDeviceMetricsOverride
-          deviceMetrics.displayFeature = dispFeature;
-        }
-      } else {
-        deviceMetrics.width = 0;
-        deviceMetrics.height = 0;
+    if (this.#emulationModel && this.#device && this.#mode) {
+      const orientation = this.#device.orientationByName(this.#mode.orientation);
+      const deviceMetrics: Protocol.Emulation.SetDeviceMetricsOverrideRequest = {
+        width: orientation.width,
+        height: orientation.height,
+        deviceScaleFactor: this.#device.deviceScaleFactor,
+        mobile: this.isMobile(),
+      };
+      const dispFeature = this.getDisplayFeature();
+      if (dispFeature) {
+        deviceMetrics.displayFeature = dispFeature;
       }
       await this.#emulationModel.emulateDevice(deviceMetrics);
     }
-    this.calculateAndEmulate(false);
-    return screenshot;
+
+    try {
+      const screenshot = await screenCaptureModel.captureScreenshot(
+          Protocol.Page.CaptureScreenshotRequestFormat.Png, 100, screenshotMode, clip);
+      return screenshot;
+    } finally {
+      await this.#emulationModel?.emulateDevice(null);
+      overlayModel?.setShowViewportSizeOnResize(this.#type === Type.None);
+      this.calculateAndEmulate(false);
+    }
   }
 
   private applyTouch(touchEnabled: boolean, mobile: boolean): void {

package/front_end/models/extensions/ExtensionAPI.ts

@@ -616,7 +616,7 @@ self.injectedExtensionAPI = function(
           entries[i].__proto__ = new (Constructor(Request))(entries[i]._requestId as number);
           delete entries[i]._requestId;
         }
-        callback?.(result as Object);
+        callback?.(result);
       }
       extensionServer.sendRequest({command: PrivateAPI.Commands.GetHAR}, callback && callbackWrapper);
     },

package/front_end/models/heap_snapshot_model/HeapSnapshotModel.ts

@@ -71,13 +71,19 @@ export class Node {
   retainedSize: number;
   selfSize: number;
   type: string;
-  canBeQueried: boolean;
-  detachedDOMTreeNode: boolean;
-  isAddedNotRemoved: boolean|null;
-  ignored: boolean;
+  canBeQueried = false;
+  detachedDOMTreeNode = false;
+  isAddedNotRemoved: boolean|null = null;
+  ignored = false;
   constructor(
-      id: number, name: string, distance: number, nodeIndex: number, retainedSize: number, selfSize: number,
-      type: string) {
+      id: number,
+      name: string,
+      distance: number,
+      nodeIndex: number,
+      retainedSize: number,
+      selfSize: number,
+      type: string,
+  ) {
     this.id = id;
     this.name = name;
     this.distance = distance;
@@ -85,11 +91,6 @@ export class Node {
     this.retainedSize = retainedSize;
     this.selfSize = selfSize;
     this.type = type;
-
-    this.canBeQueried = false;
-    this.detachedDOMTreeNode = false;
-    this.isAddedNotRemoved = null;
-    this.ignored = false;
   }
 }
 
@@ -98,13 +99,12 @@ export class Edge {
   node: Node;
   type: string;
   edgeIndex: number;
-  isAddedNotRemoved: boolean|null;
+  isAddedNotRemoved: boolean|null = null;
   constructor(name: string, node: Node, type: string, edgeIndex: number) {
     this.name = name;
     this.node = node;
     this.type = type;
     this.edgeIndex = edgeIndex;
-    this.isAddedNotRemoved = null;
   }
 }
 
@@ -132,37 +132,19 @@ export class AggregateForDiff {
 
 export class Diff {
   name: string;
-  addedCount: number;
-  removedCount: number;
-  addedSize: number;
-  removedSize: number;
-  deletedIndexes: number[];
-  addedIndexes: number[];
+  addedCount = 0;
+  removedCount = 0;
+  addedSize = 0;
+  removedSize = 0;
+  deletedIndexes: number[] = [];
+  addedIndexes: number[] = [];
   countDelta!: number;
   sizeDelta!: number;
   constructor(name: string) {
     this.name = name;
-    this.addedCount = 0;
-    this.removedCount = 0;
-    this.addedSize = 0;
-    this.removedSize = 0;
-    this.deletedIndexes = [];
-    this.addedIndexes = [];
   }
 }
 
-export class DiffForClass {
-  name!: string;
-  addedCount!: number;
-  removedCount!: number;
-  addedSize!: number;
-  removedSize!: number;
-  deletedIndexes!: number[];
-  addedIndexes!: number[];
-  countDelta!: number;
-  sizeDelta!: number;
-}
-
 export class ComparatorConfig {
   fieldName1: string;
   ascending1: boolean;
@@ -176,16 +158,16 @@ export class ComparatorConfig {
   }
 }
 
-export class WorkerCommand {
-  callId!: number;
-  disposition!: string;
-  objectId!: number;
-  newObjectId!: number;
-  methodName!: string;
+export interface WorkerCommand {
+  callId: number;
+  disposition: string;
+  objectId: number;
+  newObjectId: number;
+  methodName: string;
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  methodArguments!: any[];
-  source!: string;
+  methodArguments: any[];
+  source: string;
 }
 
 export class ItemsRange {
@@ -244,8 +226,13 @@ export class SearchConfig {
   shouldJump: boolean;
   jumpBackward: boolean;
   constructor(
-      query: string, caseSensitive: boolean, wholeWord: boolean, isRegex: boolean, shouldJump: boolean,
-      jumpBackward: boolean) {
+      query: string,
+      caseSensitive: boolean,
+      wholeWord: boolean,
+      isRegex: boolean,
+      shouldJump: boolean,
+      jumpBackward: boolean,
+  ) {
     this.query = query;
     this.caseSensitive = caseSensitive;
     this.wholeWord = wholeWord;

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -6606,16 +6606,12 @@ export const NativeFunctions = [
     name: "replaceWithHTMLUnsafe",
     signatures: [["html","?options"]]
   },
-  {
-    name: "streamBeforeHTMLUnsafe",
-    signatures: [["?options"]]
-  },
   {
     name: "streamBeforeHTML",
     signatures: [["?options"]]
   },
   {
-    name: "streamAfterHTMLUnsafe",
+    name: "streamBeforeHTMLUnsafe",
     signatures: [["?options"]]
   },
   {
@@ -6623,13 +6619,17 @@ export const NativeFunctions = [
     signatures: [["?options"]]
   },
   {
-    name: "streamReplaceWithHTMLUnsafe",
+    name: "streamAfterHTMLUnsafe",
     signatures: [["?options"]]
   },
   {
     name: "streamReplaceWithHTML",
     signatures: [["?options"]]
   },
+  {
+    name: "streamReplaceWithHTMLUnsafe",
+    signatures: [["?options"]]
+  },
   {
     name: "Comment",
     signatures: [["?data"]]

package/front_end/models/trace/insights/LCPDiscovery.ts

@@ -41,14 +41,18 @@ export const UIStrings = {
    * @description Text to tell the user that a fetchpriority property value of "high" should be applied to the LCP request.
    */
   fetchPriorityShouldBeApplied: 'fetchpriority=high should be applied',
+  /**
+   * @description Text to tell the user that a fetchpriority property value of "high" should be applied to the preload request that loads the LCP image.
+   */
+  fetchPriorityShouldBeAppliedToImagePreload: 'fetchpriority=high should be applied to the image preload request',
   /**
    * @description Text to tell the user that the LCP request is discoverable in the initial document.
    */
   requestDiscoverable: 'Request is discoverable in initial document',
   /**
-   * @description Text to tell the user that the LCP request does not have the lazy load property applied.
+   * @description Text to tell the user that LCP resources should avoid using loading=lazy.
    */
-  lazyLoadNotApplied: 'lazy load not applied',
+  lazyLoadNotApplied: 'LCP resources should not use loading=lazy',
   /**
    * @description Text status indicating that the the Largest Contentful Paint (LCP) metric timing was not found. "LCP" is an acronym and should not be translated.
    */
@@ -133,12 +137,17 @@ export function generateInsight(
       lcpRequest?.args.data.initiator?.type === 'parser' && docRequest.args.data.url === initiatorUrl;
   const imgPreloadedOrFoundInHTML = lcpRequest?.args.data.isLinkPreload || initiatedByMainDoc;
 
-  const imageLoadingAttr = lcpEvent.args.data?.loadingAttr;
   const imageFetchPriorityHint = lcpRequest?.args.data.fetchPriorityHint;
   // This is the earliest discovery time an LCP request could have - it's TTFB (as an absolute timestamp).
   const earliestDiscoveryTime = calculateDocFirstByteTs(docRequest);
 
   const priorityHintFound = imageFetchPriorityHint === 'high';
+  const missingPriorityHintLabel = lcpRequest.args.data.isLinkPreload ?
+      i18nString(UIStrings.fetchPriorityShouldBeAppliedToImagePreload) :
+      i18nString(UIStrings.fetchPriorityShouldBeApplied);
+  // A lazy-loaded LCP image can still be eagerly loaded when its request is
+  // initiated by a preload.
+  const lcpNotLazyLoaded = lcpEvent.args.data?.loadingAttr !== 'lazy' || lcpRequest.args.data.isLinkPreload;
 
   return finalize({
     lcpEvent,
@@ -146,12 +155,11 @@ export function generateInsight(
     earliestDiscoveryTimeTs: earliestDiscoveryTime ? Types.Timing.Micro(earliestDiscoveryTime) : undefined,
     checklist: {
       priorityHinted: {
-        label: priorityHintFound ? i18nString(UIStrings.fetchPriorityApplied) :
-                                   i18nString(UIStrings.fetchPriorityShouldBeApplied),
+        label: priorityHintFound ? i18nString(UIStrings.fetchPriorityApplied) : missingPriorityHintLabel,
         value: priorityHintFound
       },
       requestDiscoverable: {label: i18nString(UIStrings.requestDiscoverable), value: imgPreloadedOrFoundInHTML},
-      eagerlyLoaded: {label: i18nString(UIStrings.lazyLoadNotApplied), value: imageLoadingAttr !== 'lazy'},
+      eagerlyLoaded: {label: i18nString(UIStrings.lazyLoadNotApplied), value: lcpNotLazyLoaded},
     },
   });
 }