chrome-devtools-frontend 1.0.1522145 → 1.0.1522585

package/docs/ui_engineering.md

@@ -1223,3 +1223,79 @@ export const DEFAULT_VIEW = (input, _output, target) => {
     target, {host: input});
 };
 ```
+
+## Refactoring UI.Toolbar.Provider
+
+As part of the migration, sometimes classes need to be broken up into smaller pieces. Classes implementing
+`UI.Toolbar.Provider` logic are good examples of this, if they implement `View` logic in addition to their
+`UI.Toolbar.Provider` responsibilities. The View logic needs to be moved to a separate class.
+
+
+**Before:**
+```typescript
+export class NodeIndicator implements UI.Toolbar.Provider {
+  readonly #element: Element;
+  readonly #item: UI.Toolbar.ToolbarItem;
+
+  private constructor() {
+    // Creates `this.#element` and `this.#item` imperatively (e.g. using document.createElement/createChild).
+  }
+  static instance(opts: { forceNew: boolean|null, } = {forceNew: null}): NodeIndicator {
+    // Creates an instance of this class and returns it.
+  }
+  #update(input): void { /* Handles updates to `this.#element` and `this.#item`. */}
+  item(): UI.Toolbar.ToolbarItem|null {
+    return this.#item;
+  }
+}
+```
+
+**After:**
+```typescript
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  // Implementation of the View using Lit.render() (omitted for brevity).
+};
+
+export class NodeIndicator extends UI.Widget.Widget {
+  readonly #view: View;
+
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+  }
+
+  override performUpdate(): void {
+    const input = {
+      // Whatever input the View needs.
+    };
+    this.#view(input, {}, this.contentElement);
+  }
+}
+
+let nodeIndicatorProviderInstance: NodeIndicatorProvider;
+export class NodeIndicatorProvider implements UI.Toolbar.Provider {
+  #toolbarItem: UI.Toolbar.ToolbarItem;
+  #widgetElement: UI.Widget.WidgetElement<NodeIndicator>;
+
+  private constructor() {
+    this.#widgetElement = document.createElement('devtools-widget') as UI.Widget.WidgetElement<NodeIndicator>;
+    this.#widgetElement.widgetConfig = UI.Widget.widgetConfig(NodeIndicator);
+
+    this.#toolbarItem = new UI.Toolbar.ToolbarItem(this.#widgetElement);
+    this.#toolbarItem.setVisible(false);
+  }
+
+  item(): UI.Toolbar.ToolbarItem|null {
+    return this.#toolbarItem;
+  }
+
+  static instance(opts: {forceNew: boolean|null} = {forceNew: null}): NodeIndicatorProvider {
+    const {forceNew} = opts;
+    if (!nodeIndicatorProviderInstance || forceNew) {
+      nodeIndicatorProviderInstance = new NodeIndicatorProvider();
+    }
+
+    return nodeIndicatorProviderInstance;
+  }
+}
+```

package/front_end/core/sdk/EnhancedTracesParser.ts

@@ -35,11 +35,10 @@ export interface RundownScriptCompiled extends EventBase {
       frameType: 'page'|'iframe',
       url: string,
       /**
-       * isolate is a `uint64_t`, which is too much for JS number to represent exactly.
-       * TODO: consider adjusting the trace event impl to either string or reduced precision. see https://crrev.com/c/6300647
-       * This applies for all `isolate` in trace events we consume.
+       * Older traces were a number, but this is an unsigned 64 bit value, so that was a bug.
+       * New traces use string instead. See https://crbug.com/447654178.
        */
-      isolate: number,
+      isolate: string|number,
       /** AKA V8ContextToken. https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/inspector/inspector_trace_events.cc;l=1229;drc=3c88f61e18b043e70c225d8d57c77832a85e7f58 */
       v8context: string,
       origin: string,
@@ -60,7 +59,11 @@ export interface RundownScript extends EventBase {
   name: 'ScriptCatchup';
   args: {
     data: {
-      isolate: number,
+      /**
+       * Older traces were a number, but this is an unsigned 64 bit value, so that was a bug.
+       * New traces use string instead. See https://crbug.com/447654178.
+       */
+      isolate: string|number,
       executionContextId: Protocol.Runtime.ExecutionContextId,
       scriptId: number,
       isModule: boolean,
@@ -119,7 +122,11 @@ interface FunctionCall extends EventBase {
     data: {
       frame: Protocol.Page.FrameId,
       scriptId: Protocol.Runtime.ScriptId,
-      isolate?: number,
+      /**
+       * Older traces were a number, but this is an unsigned 64 bit value, so that was a bug.
+       * New traces use string instead. See https://crbug.com/447654178.
+       */
+      isolate?: string|number,
     },
   };
 }

package/front_end/generated/Deprecation.ts

@@ -57,15 +57,15 @@ export const UIStrings = {
   /**
    * @description Warning displayed to developers when the Geolocation API is used from an insecure origin (one that isn't localhost or doesn't use HTTPS) to notify them that this use is no longer supported.
    */
-  GeolocationInsecureOrigin: "`getCurrentPosition()` and `watchPosition()` no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gle/chrome-insecure-origins for more details.",
+  GeolocationInsecureOrigin: "`getCurrentPosition()` and `watchPosition()` no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://www.chromium.org/Home/chromium-security/deprecating-powerful-features-on-insecure-origins/ for more details.",
   /**
    * @description Warning displayed to developers when the Geolocation API is used from an insecure origin (one that isn't localhost or doesn't use HTTPS) to notify them that this use is deprecated.
    */
-  GeolocationInsecureOriginDeprecatedNotRemoved: "`getCurrentPosition()` and `watchPosition()` are deprecated on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gle/chrome-insecure-origins for more details.",
+  GeolocationInsecureOriginDeprecatedNotRemoved: "`getCurrentPosition()` and `watchPosition()` are deprecated on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://www.chromium.org/Home/chromium-security/deprecating-powerful-features-on-insecure-origins/ for more details.",
   /**
    * @description This warning occurs when the `getUserMedia()` API is invoked on an insecure (e.g., HTTP) site. This is only permitted on secure sites (e.g., HTTPS).
    */
-  GetUserMediaInsecureOrigin: "`getUserMedia()` no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gle/chrome-insecure-origins for more details.",
+  GetUserMediaInsecureOrigin: "`getUserMedia()` no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://www.chromium.org/Home/chromium-security/deprecating-powerful-features-on-insecure-origins/ for more details.",
   /**
    * @description A deprecation warning shown to developers in the DevTools Issues tab when code tries to use the deprecated hostCandidate field, guiding developers to use the equivalent information in the .address and .port fields instead.
    */
@@ -105,7 +105,7 @@ export const UIStrings = {
   /**
    * @description Warning displayed to developers when the Notification API is used from an insecure origin (one that isn't localhost or doesn't use HTTPS) to notify them that this use is no longer supported.
    */
-  NotificationInsecureOrigin: "The Notification API may no longer be used from insecure origins. You should consider switching your application to a secure origin, such as HTTPS. See https://goo.gle/chrome-insecure-origins for more details.",
+  NotificationInsecureOrigin: "The Notification API may no longer be used from insecure origins. You should consider switching your application to a secure origin, such as HTTPS. See https://www.chromium.org/Home/chromium-security/deprecating-powerful-features-on-insecure-origins/ for more details.",
   /**
    * @description Warning displayed to developers when permission to use notifications has been requested by a cross-origin iframe, to notify them that this use is no longer supported.
    */

package/front_end/models/ai_assistance/agents/StylingAgent.snapshot.txt

@@ -0,0 +1,559 @@
+Title: StylingAgent describeElement should describe an element with no children, siblings, or parent
+Content:
+* Its selector is `div#myElement`
+=== end content
+
+Title: StylingAgent describeElement should describe an element with child element and text nodes
+Content:
+* Its selector is `div#parentElement`
+* It has 2 child element nodes: `span.child1`, `span.child2`
+* It only has 1 child text node
+=== end content
+
+Title: StylingAgent describeElement should describe an element with siblings and a parent
+Content:
+* Its selector is `div#parentElement`
+* It has a next sibling and it is an element node
+* It has a previous sibling and it is a non element node
+* Its parent's selector is `div#grandparentElement`
+* Its parent is a non element node
+* Its parent has only 1 child element node
+* Its parent has only 1 child text node
+=== end content
+
+Title: StylingAgent buildRequest structure matches the snapshot
+Content:
+{
+  "client": "CHROME_DEVTOOLS",
+  "current_message": {
+    "parts": [
+      {
+        "text": "test input"
+      }
+    ],
+    "role": 1
+  },
+  "historical_contexts": [
+    {
+      "parts": [
+        {
+          "text": "QUERY: question"
+        }
+      ],
+      "role": 1
+    },
+    {
+      "parts": [
+        {
+          "text": "answer"
+        }
+      ],
+      "role": 2
+    }
+  ],
+  "function_declarations": [
+    {
+      "name": "executeJavaScript",
+      "description": "This function allows you to run JavaScript code on the inspected page to access the element styles and page content.\nCall this function to gather additional information or modify the page state. Call this function enough times to investigate the user request.",
+      "parameters": {
+        "type": 6,
+        "description": "",
+        "nullable": false,
+        "properties": {
+          "code": {
+            "type": 1,
+            "description": "JavaScript code snippet to run on the inspected page. Make sure the code is formatted for readability.\n\n# Instructions\n\n* To return data, define a top-level `data` variable and populate it with data you want to get. Only JSON-serializable objects can be assigned to `data`.\n* If you modify styles on an element, ALWAYS call the pre-defined global `async setElementStyles(el: Element, styles: object)` function. This function is an internal mechanism for you and should never be presented as a command/advice to the user.\n* Use `window.getComputedStyle` to gather **computed** styles and make sure that you take the distinction between authored styles and computed styles into account.\n* **CRITICAL** Only get styles that might be relevant to the user request.\n* **CRITICAL** Call `window.getComputedStyle` only once per element and store results into a local variable. Never try to return all the styles of the element in `data`.\n* **CRITICAL** Never assume a selector for the elements unless you verified your knowledge.\n* **CRITICAL** Consider that `data` variable from the previous function calls are not available in a new function call.\n\nFor example, the code to return basic styles:\n\n```\nconst styles = window.getComputedStyle($0);\nconst data = {\n    display: styles['display'],\n    visibility: styles['visibility'],\n    position: styles['position'],\n    left: styles['right'],\n    top: styles['top'],\n    width: styles['width'],\n    height: styles['height'],\n    zIndex: styles['z-index']\n};\n```\n\nFor example, the code to change element styles:\n\n```\nawait setElementStyles($0, {\n  color: 'blue',\n});\n```\n\nFor example, the code to get current and parent styles at once:\n\n```\nconst styles = window.getComputedStyle($0);\nconst parentStyles = window.getComputedStyle($0.parentElement);\nconst data = {\n    currentElementStyles: {\n      display: styles['display'],\n      visibility: styles['visibility'],\n      position: styles['position'],\n      left: styles['right'],\n      top: styles['top'],\n      width: styles['width'],\n      height: styles['height'],\n      zIndex: styles['z-index'],\n    },\n    parentElementStyles: {\n      display: parentStyles['display'],\n      visibility: parentStyles['visibility'],\n      position: parentStyles['position'],\n      left: parentStyles['right'],\n      top: parentStyles['top'],\n      width: parentStyles['width'],\n      height: parentStyles['height'],\n      zIndex: parentStyles['z-index'],\n    },\n};\n```\n\nFor example, the code to get check siblings and overlapping elements:\n\n```\nconst computedStyles = window.getComputedStyle($0);\nconst parentComputedStyles = window.getComputedStyle($0.parentElement);\nconst data = {\n  numberOfChildren: $0.children.length,\n  numberOfSiblings: $0.parentElement.children.length,\n  hasPreviousSibling: !!$0.previousElementSibling,\n  hasNextSibling: !!$0.nextElementSibling,\n  elementStyles: {\n    display: computedStyles['display'],\n    visibility: computedStyles['visibility'],\n    position: computedStyles['position'],\n    clipPath: computedStyles['clip-path'],\n    zIndex: computedStyles['z-index']\n  },\n  parentStyles: {\n    display: parentComputedStyles['display'],\n    visibility: parentComputedStyles['visibility'],\n    position: parentComputedStyles['position'],\n    clipPath: parentComputedStyles['clip-path'],\n    zIndex: parentComputedStyles['z-index']\n  },\n  overlappingElements: Array.from(document.querySelectorAll('*'))\n    .filter(el => {\n      const rect = el.getBoundingClientRect();\n      const popupRect = $0.getBoundingClientRect();\n      return (\n        el !== $0 &&\n        rect.left < popupRect.right &&\n        rect.right > popupRect.left &&\n        rect.top < popupRect.bottom &&\n        rect.bottom > popupRect.top\n      );\n    })\n    .map(el => ({\n      tagName: el.tagName,\n      id: el.id,\n      className: el.className,\n      zIndex: window.getComputedStyle(el)['z-index']\n    }))\n};\n```\n"
+          },
+          "thought": {
+            "type": 1,
+            "description": "Explain why you want to run this code"
+          },
+          "title": {
+            "type": 1,
+            "description": "Provide a summary of what the code does. For example, \"Checking related element styles\"."
+          }
+        }
+      }
+    }
+  ],
+  "options": {
+    "model_id": "test model"
+  },
+  "metadata": {
+    "disable_user_content_logging": false,
+    "string_session_id": "sessionId",
+    "user_tier": 2,
+    "client_version": "unit_test+function_calling"
+  },
+  "functionality_type": 5,
+  "client_feature": 2
+}
+=== end content
+
+Title: StylingAgent buildRequest builds a request with aborted query in history before a real request
+Content:
+[
+  {
+    "parts": [
+      {
+        "text": "# Inspected element\n\nelement-description\n\n# User request\n\nQUERY: test2"
+      }
+    ],
+    "role": 1
+  },
+  {
+    "parts": [
+      {
+        "functionCall": {
+          "name": "executeJavaScript",
+          "args": {
+            "title": "title2",
+            "thought": "thought2",
+            "code": "action2"
+          }
+        }
+      }
+    ],
+    "role": 2
+  },
+  {
+    "parts": [
+      {
+        "functionResponse": {
+          "name": "executeJavaScript",
+          "response": {
+            "result": "result2"
+          }
+        }
+      }
+    ],
+    "role": 0
+  },
+  {
+    "parts": [
+      {
+        "text": "answer2"
+      }
+    ],
+    "role": 2
+  }
+]
+=== end content
+
+Title: StylingAgent run generates an answer immediately
+Content:
+[
+  {
+    "type": "user-query",
+    "query": "test"
+  },
+  {
+    "type": "context",
+    "title": "Analyzing the prompt",
+    "details": [
+      {
+        "title": "Data used",
+        "text": "* Its selector is `undefined`"
+      }
+    ]
+  },
+  {
+    "type": "querying"
+  },
+  {
+    "type": "answer",
+    "text": "this is the answer",
+    "complete": true
+  }
+]
+=== end content
+
+Title: StylingAgent run generates an answer immediately with correct historical contexts in the new request
+Content:
+[
+  {
+    "parts": [
+      {
+        "text": "# Inspected element\n\n* Its selector is `undefined`\n\n# User request\n\nQUERY: test"
+      }
+    ],
+    "role": 1
+  },
+  {
+    "parts": [
+      {
+        "text": "this is the answer"
+      }
+    ],
+    "role": 2
+  }
+]
+=== end content
+
+Title: StylingAgent run correctly handles historical_contexts in AIDA requests
+Content:
+[
+  {
+    "text": "# Inspected element\n\n* Its selector is `undefined`\n\n# User request\n\nQUERY: test"
+  },
+  [
+    {
+      "parts": [
+        {
+          "text": "# Inspected element\n\n* Its selector is `undefined`\n\n# User request\n\nQUERY: test"
+        }
+      ],
+      "role": 1
+    },
+    {
+      "parts": [
+        {
+          "functionCall": {
+            "name": "executeJavaScript",
+            "args": {
+              "code": "const data = {\"test\": \"observation\"}",
+              "thought": "I am thinking.",
+              "title": "thinking"
+            }
+          }
+        }
+      ],
+      "role": 2
+    }
+  ]
+]
+=== end content
+
+Title: StylingAgent run generates an rpcId for the answer
+Content:
+[
+  {
+    "type": "user-query",
+    "query": "test"
+  },
+  {
+    "type": "context",
+    "title": "Analyzing the prompt",
+    "details": [
+      {
+        "title": "Data used",
+        "text": "* Its selector is `undefined`"
+      }
+    ]
+  },
+  {
+    "type": "querying"
+  },
+  {
+    "type": "answer",
+    "text": "this is the answer",
+    "complete": true,
+    "rpcId": 123
+  }
+]
+=== end content
+
+Title: StylingAgent run throws an error based on the attribution metadata including RecitationAction.BLOCK
+Content:
+[
+  {
+    "type": "user-query",
+    "query": "test"
+  },
+  {
+    "type": "context",
+    "title": "Analyzing the prompt",
+    "details": [
+      {
+        "title": "Data used",
+        "text": "* Its selector is `undefined`"
+      }
+    ]
+  },
+  {
+    "type": "querying"
+  },
+  {
+    "type": "answer",
+    "text": "this is the partial answer",
+    "complete": false
+  },
+  {
+    "type": "error",
+    "error": "block"
+  }
+]
+=== end content
+
+Title: StylingAgent run does not throw an error based on attribution metadata not including RecitationAction.BLOCK
+Content:
+[
+  {
+    "type": "user-query",
+    "query": "test"
+  },
+  {
+    "type": "context",
+    "title": "Analyzing the prompt",
+    "details": [
+      {
+        "title": "Data used",
+        "text": "* Its selector is `undefined`"
+      }
+    ]
+  },
+  {
+    "type": "querying"
+  },
+  {
+    "type": "answer",
+    "text": "this is the answer",
+    "complete": true,
+    "rpcId": 123
+  }
+]
+=== end content
+
+Title: StylingAgent run generates a response if nothing is returned
+Content:
+[
+  {
+    "type": "user-query",
+    "query": "test"
+  },
+  {
+    "type": "context",
+    "title": "Analyzing the prompt",
+    "details": [
+      {
+        "title": "Data used",
+        "text": "* Its selector is `undefined`"
+      }
+    ]
+  },
+  {
+    "type": "querying"
+  },
+  {
+    "type": "error",
+    "error": "unknown"
+  }
+]
+=== end content
+
+Title: StylingAgent run generates an action response if action and answer both present
+Content:
+[
+  {
+    "type": "user-query",
+    "query": "test"
+  },
+  {
+    "type": "context",
+    "title": "Analyzing the prompt",
+    "details": [
+      {
+        "title": "Data used",
+        "text": "* Its selector is `undefined`"
+      }
+    ]
+  },
+  {
+    "type": "querying"
+  },
+  {
+    "type": "thought",
+    "thought": "I am thinking."
+  },
+  {
+    "type": "action",
+    "code": "console.log('hello');",
+    "output": "hello",
+    "canceled": false
+  },
+  {
+    "type": "querying"
+  },
+  {
+    "type": "answer",
+    "text": "this is the actual answer",
+    "complete": true
+  }
+]
+=== end content
+
+Title: StylingAgent run generates history for multiple actions
+Content:
+[
+  {
+    "parts": [
+      {
+        "text": "# Inspected element\n\n* Its selector is `undefined`\n\n# User request\n\nQUERY: test"
+      }
+    ],
+    "role": 1
+  },
+  {
+    "parts": [
+      {
+        "functionCall": {
+          "name": "executeJavaScript",
+          "args": {
+            "thought": "thought 1",
+            "title": "test",
+            "code": "console.log('test')"
+          }
+        }
+      }
+    ],
+    "role": 2
+  },
+  {
+    "parts": [
+      {
+        "functionResponse": {
+          "name": "executeJavaScript",
+          "response": {
+            "result": "undefined"
+          }
+        }
+      }
+    ],
+    "role": 0
+  },
+  {
+    "parts": [
+      {
+        "functionCall": {
+          "name": "executeJavaScript",
+          "args": {
+            "thought": "thought 2",
+            "title": "test",
+            "code": "console.log('test')"
+          }
+        }
+      }
+    ],
+    "role": 2
+  },
+  {
+    "parts": [
+      {
+        "functionResponse": {
+          "name": "executeJavaScript",
+          "response": {
+            "result": "undefined"
+          }
+        }
+      }
+    ],
+    "role": 0
+  },
+  {
+    "parts": [
+      {
+        "functionCall": {
+          "name": "executeJavaScript",
+          "args": {
+            "thought": "thought 3",
+            "title": "test",
+            "code": "console.log('test')"
+          }
+        }
+      }
+    ],
+    "role": 2
+  },
+  {
+    "parts": [
+      {
+        "functionResponse": {
+          "name": "executeJavaScript",
+          "response": {
+            "result": "undefined"
+          }
+        }
+      }
+    ],
+    "role": 0
+  },
+  {
+    "parts": [
+      {
+        "text": "this is the answer"
+      }
+    ],
+    "role": 2
+  }
+]
+=== end content
+
+Title: StylingAgent enhanceQuery does not add multimodal input evaluation prompt when multimodal is disabled
+Content:
+# Inspected element
+
+* Its selector is `div#myElement`
+
+# User request
+
+QUERY: test query
+=== end content
+
+Title: StylingAgent enhanceQuery does not add multimodal input evaluation prompt when multimodal is enabled but multimodalInputType is missing
+Content:
+# Inspected element
+
+* Its selector is `div#myElement`
+
+# User request
+
+QUERY: test query
+=== end content
+
+Title: StylingAgent enhanceQuery adds multimodal input evaluation prompt when multimodal is enabled and multimodalInputType is screenshot
+Content:
+The user has provided you a screenshot of the page (as visible in the viewport) in base64-encoded format. You SHOULD use it while answering user's queries.
+
+* Try to connect the screenshot to actual DOM elements in the page.
+# Considerations for evaluating image:
+* Pay close attention to the spatial details as well as the visual appearance of the selected element in the image, particularly in relation to layout, spacing, and styling.
+* Analyze the image to identify the layout structure surrounding the element, including the positioning of neighboring elements.
+* Extract visual information from the image, such as colors, fonts, spacing, and sizes, that might be relevant to the user's query.
+* If the image suggests responsiveness issues (e.g., cropped content, overlapping elements), consider those in your response.
+* Consider the surrounding elements and overall layout in the image, but prioritize the selected element's styling and positioning.
+* **CRITICAL** When the user provides image input, interpret and use content and information from the image STRICTLY for web site debugging purposes.
+
+* As part of THOUGHT, evaluate the image to gather data that might be needed to answer the question.
+In case query is related to the image, ALWAYS first use image evaluation to get all details from the image. ONLY after you have all data needed from image, you should move to other steps.
+
+# Inspected element
+
+* Its selector is `div#myElement`
+
+# User request
+
+QUERY: test query
+=== end content
+
+Title: StylingAgent enhanceQuery adds multimodal input evaluation prompt when multimodal is enabled and multimodalInputType is uploaded image
+Content:
+The user has uploaded an image in base64-encoded format. You SHOULD use it while answering user's queries.
+# Considerations for evaluating image:
+* Pay close attention to the spatial details as well as the visual appearance of the selected element in the image, particularly in relation to layout, spacing, and styling.
+* Analyze the image to identify the layout structure surrounding the element, including the positioning of neighboring elements.
+* Extract visual information from the image, such as colors, fonts, spacing, and sizes, that might be relevant to the user's query.
+* If the image suggests responsiveness issues (e.g., cropped content, overlapping elements), consider those in your response.
+* Consider the surrounding elements and overall layout in the image, but prioritize the selected element's styling and positioning.
+* **CRITICAL** When the user provides image input, interpret and use content and information from the image STRICTLY for web site debugging purposes.
+
+* As part of THOUGHT, evaluate the image to gather data that might be needed to answer the question.
+In case query is related to the image, ALWAYS first use image evaluation to get all details from the image. ONLY after you have all data needed from image, you should move to other steps.
+
+# Inspected element
+
+* Its selector is `div#myElement`
+
+# User request
+
+QUERY: test query
+=== end content

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -7982,7 +7982,7 @@ export const NativeFunctions = [
   },
   {
     name: "constant",
-    signatures: [["tensor"],["desc","buffer"]]
+    signatures: [["tensor"],["desc","buffer"],["type","value"]]
   },
   {
     name: "argMin",

package/front_end/models/trace/LanternComputationData.ts

@@ -192,6 +192,7 @@ function createLanternRequest(
     priority: request.args.data.priority,
     frameId: request.args.data.frame,
     fromWorker,
+    serverResponseTime: request.args.data.lrServerResponseTime ?? undefined,
     // Set later.
     redirects: undefined,
     redirectSource: undefined,

package/front_end/models/trace/handlers/NetworkRequestsHandler.ts

@@ -295,6 +295,7 @@ export async function finalize(): Promise<void> {
      *
      * See `_updateTimingsForLightrider` in Lighthouse for more detail.
      */
+    let lrServerResponseTime;
     if (isLightrider && request.receiveResponse?.args.data.headers) {
       timing = {
         requestTime: Helpers.Timing.microToSeconds(request.sendRequests.at(0)?.ts ?? 0 as Types.Timing.Micro),
@@ -330,6 +331,14 @@ export async function finalize(): Promise<void> {
         timing.connectEnd = TCPMs as Types.Timing.Milli;
         timing.sslEnd = TCPMs as Types.Timing.Milli;
       }
+
+      // Lightrider does not have any equivalent for `sendEnd` timing values. The
+      // closest we can get to the server response time is from a header that
+      // Lightrider sets.
+      const ResponseMsHeader = request.receiveResponse.args.data.headers.find(h => h.name === 'X-ResponseMs');
+      if (ResponseMsHeader) {
+        lrServerResponseTime = Math.max(0, parseInt(ResponseMsHeader.value, 10)) as Types.Timing.Milli;
+      }
     }
 
     // TODO: consider allowing chrome / about.
@@ -526,6 +535,7 @@ export async function finalize(): Promise<void> {
               initiator: finalSendRequest.args.data.initiator,
               stackTrace: finalSendRequest.args.data.stackTrace,
               timing,
+              lrServerResponseTime,
               url,
               failed: request.resourceFinish?.args.data.didFail ?? false,
               finished: Boolean(request.resourceFinish),

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

@@ -95,15 +95,14 @@ export type DocumentLatencyInsightModel = InsightModel<typeof UIStrings, {
   },
 }>;
 
-function getServerResponseTime(
-    request: Types.Events.SyntheticNetworkRequest, context: InsightSetContext): Types.Timing.Milli|null {
-  // Prefer the value as given by the Lantern provider.
-  // For PSI, Lighthouse uses this to set a better value for the server response
-  // time. For technical reasons, in Lightrider we do not have `sendEnd` timing
-  // values. See Lighthouse's `asLanternNetworkRequest` function for more.
-  const lanternRequest = context.navigation && context.lantern?.requests.find(r => r.rawRequest === request);
-  if (lanternRequest?.serverResponseTime !== undefined) {
-    return lanternRequest.serverResponseTime as Types.Timing.Milli;
+function getServerResponseTime(request: Types.Events.SyntheticNetworkRequest): Types.Timing.Milli|null {
+  // For technical reasons, Lightrider does not have `sendEnd` timing values. The
+  // closest we can get to the server response time is from a header that Lightrider
+  // sets.
+  // @ts-expect-error
+  const isLightrider = globalThis.isLightrider;
+  if (isLightrider) {
+    return request.args.data.lrServerResponseTime ?? null;
   }
 
   const timing = request.args.data.timing;
@@ -202,7 +201,7 @@ export function generateInsight(
     return finalize({warnings: [InsightWarning.NO_DOCUMENT_REQUEST]});
   }
 
-  const serverResponseTime = getServerResponseTime(documentRequest, context);
+  const serverResponseTime = getServerResponseTime(documentRequest);
   if (serverResponseTime === null) {
     throw new Error('missing document request timing');
   }

package/front_end/models/trace/types/TraceEvents.ts

@@ -124,10 +124,10 @@ export interface TraceFrame {
   processId: ProcessID;
   url: string;
   parent?: string;
-  // Added to Chromium in April 2024:
+  // Added to Chrome in April 2024:
   // crrev.com/c/5424783
   isOutermostMainFrame?: boolean;
-  // Added to Chromium in June 2024:
+  // Added to Chrome in June 2024:
   // crrev.com/c/5595033
   isInPrimaryMainFrame?: boolean;
 }
@@ -415,6 +415,8 @@ export interface SyntheticNetworkRequest extends Complete, SyntheticBased<Phase.
       initiator?: Initiator,
       requestMethod?: string,
       timing?: ResourceReceiveResponseTimingData,
+      /** Server response time according to Lightrider. */
+      lrServerResponseTime?: Milli,
     },
   };
   cat: 'loading';
@@ -549,7 +551,6 @@ export function isAuctionWorkletDoneWithProcess(event: Event): event is AuctionW
  *    consuming screenshot events from the ScreenshotHandler, you must make sure
  *    to have your code deal with the two different formats.
  */
-// These are nullable because in January 2025 a CL in Chromium
 export interface LegacyScreenshot extends Event {
   /**
    * @deprecated This value is incorrect. Use ScreenshotHandler.getPresentationTimestamp()
@@ -745,7 +746,7 @@ export interface LargestContentfulPaintCandidate extends Mark {
       nodeId: Protocol.DOM.BackendNodeId,
       loadingAttr: string,
       type?: string,
-      // Landed in Chromium M140: crrev.com/c/6702010
+      // Landed in Chrome M140: crrev.com/c/6702010
       nodeName?: string,
     },
   };
@@ -990,7 +991,7 @@ export interface SyntheticLayoutShift extends Omit<LayoutShift, 'name'>, Synthet
 export const NO_NAVIGATION = 'NO_NAVIGATION';
 
 /**
- * This maybe be a navigation id string from Chromium, or `NO_NAVIGATION`, which represents the
+ * This maybe be a navigation id string from Chrome, or `NO_NAVIGATION`, which represents the
  * portion of the trace for which we don't have any navigation event for (as it happeneded prior
  * to the trace start).
  */

package/front_end/panels/protocol_monitor/ProtocolMonitor.ts

@@ -173,17 +173,17 @@ export interface ViewInput {
   filterKeys: string[];
   filter: string;
   parseFilter: (filter: string) => TextUtils.TextUtils.ParsedFilter[];
-  onRecord: (e: Event) => void;
+  onRecord: (record: boolean) => void;
   onClear: () => void;
   onSave: () => void;
-  onSplitChange: (e: CustomEvent<string>) => void;
+  onSplitChange: (onlyMain: boolean) => void;
   onSelect: (e: CustomEvent<HTMLElement|null>) => void;
   onContextMenu: (e: CustomEvent<{menu: UI.ContextMenu.ContextMenu, element: HTMLElement}>) => void;
-  onFilterChanged: (e: CustomEvent<string>) => void;
-  onCommandChange: (e: CustomEvent<string>) => void;
-  onCommandSubmitted: (e: CustomEvent<string>) => void;
-  onTargetChange: (e: Event) => void;
-  onToggleSidebar: (e: Event) => void;
+  onFilterChanged: (filter: string) => void;
+  onCommandChange: (command: string) => void;
+  onCommandSubmitted: (input: string) => void;
+  onTargetChange: (targetId: string) => void;
+  onToggleSidebar: () => void;
   targets: SDK.Target.Target[];
   selectedTargetId: string;
 }
@@ -203,7 +203,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                              direction="column"
                              sidebar-initial-size="400"
                              sidebar-visibility=${input.sidebarVisible ? 'visible' : 'hidden'}
-                             @change=${input.onSplitChange}>
+                             @change=${(e: CustomEvent<string>) => input.onSplitChange(e.detail === 'OnlyMain')}>
           <div slot="main" class="vbox protocol-monitor-main">
             <devtools-toolbar class="protocol-monitor-toolbar"
                                jslog=${VisualLogging.toolbar('top')}>
@@ -214,22 +214,23 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                                 .variant=${Buttons.Button.Variant.ICON_TOGGLE}
                                 .toggleType=${Buttons.Button.ToggleType.RED}
                                 .toggled=${true}
-                                @click=${input.onRecord}></devtools-button>
+                                @click=${(e: Event) => input.onRecord((e.target as Buttons.Button.Button).toggled)}>
+               </devtools-button>
               <devtools-button title=${i18nString(UIStrings.clearAll)}
                                .iconName=${'clear'}
                                .variant=${Buttons.Button.Variant.TOOLBAR}
                                .jslogContext=${'protocol-monitor.clear-all'}
-                               @click=${input.onClear}></devtools-button>
+                               @click=${() => input.onClear()}></devtools-button>
               <devtools-button title=${i18nString(UIStrings.save)}
                                .iconName=${'download'}
                                .variant=${Buttons.Button.Variant.TOOLBAR}
                                .jslogContext=${'protocol-monitor.save'}
-                               @click=${input.onSave}></devtools-button>
+                               @click=${() => input.onSave()}></devtools-button>
               <devtools-toolbar-input type="filter"
                                       list="filter-suggestions"
                                       style="flex-grow: 1"
                                       value=${input.filter}
-                                      @change=${input.onFilterChanged}>
+                                      @change=${(e: Event) => input.onFilterChanged((e.target as HTMLInputElement).value)}>
                 <datalist id="filter-suggestions">
                   ${input.filterKeys.map(key => html`
                         <option value=${key + ':'}></option>
@@ -320,7 +321,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                                .iconName=${input.sidebarVisible ? 'left-panel-close' : 'left-panel-open'}
                                .variant=${Buttons.Button.Variant.TOOLBAR}
                                .jslogContext=${'protocol-monitor.toggle-command-editor'}
-                               @click=${input.onToggleSidebar}></devtools-button>
+                               @click=${() => input.onToggleSidebar()}></devtools-button>
               </devtools-button>
               <devtools-toolbar-input id="command-input"
                                       style=${styleMap({
@@ -330,8 +331,8 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                                       list="command-input-suggestions"
                                       placeholder=${i18nString(UIStrings.sendRawCDPCommand)}
                                       title=${i18nString(UIStrings.sendRawCDPCommandExplanation)}
-                                      @change=${input.onCommandChange}
-                                      @submit=${input.onCommandSubmitted}>
+                                      @change=${(e: Event) => input.onCommandChange((e.target as HTMLInputElement).value)}
+                                      @submit=${(e: Event) => input.onCommandSubmitted((e.target as HTMLInputElement).value)}>
                 <datalist id="command-input-suggestions">
                   ${input.commandSuggestions.map(c => html`<option value=${c}></option>`)}
                 </datalist>
@@ -340,7 +341,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                       title=${i18nString(UIStrings.selectTarget)}
                       style=${styleMap({display: input.sidebarVisible ? 'none' : 'flex'})}
                       jslog=${VisualLogging.dropDown('target-selector').track({change: true})}
-                      @change=${input.onTargetChange}>
+                      @change=${(e: Event) => input.onTargetChange((e.target as HTMLSelectElement).value)}>
                 ${input.targets.map(target => html`
                   <option jslog=${VisualLogging.item('target').track({click: true})}
                           value=${target.id()} ?selected=${target.id() === input.selectedTargetId}>
@@ -416,8 +417,8 @@ export class ProtocolMonitorImpl extends UI.Panel.Panel {
       filterKeys: this.#filterKeys,
       filter: this.#filter,
       parseFilter: this.filterParser.parse.bind(this.filterParser),
-      onSplitChange: (e: CustomEvent<string>) => {
-        if (e.detail === 'OnlyMain') {
+      onSplitChange: (onlyMain: boolean) => {
+        if (onlyMain) {
           this.#populateToolbarInput();
           this.#sidebarVisible = false;
         } else {
@@ -427,8 +428,8 @@ export class ProtocolMonitorImpl extends UI.Panel.Panel {
         }
         this.requestUpdate();
       },
-      onRecord: (e: Event) => {
-        this.setRecording((e.target as Buttons.Button.Button).toggled);
+      onRecord: (recording: boolean) => {
+        this.setRecording(recording);
       },
       onClear: () => {
         this.#messages = [];
@@ -449,24 +450,22 @@ export class ProtocolMonitorImpl extends UI.Panel.Panel {
           this.#populateContextMenu(e.detail.menu, message);
         }
       },
-      onCommandChange: (e: CustomEvent<string>) => {
-        this.#command = e.detail;
+      onCommandChange: (command: string) => {
+        this.#command = command;
       },
-      onCommandSubmitted: (e: CustomEvent<string>) => {
-        this.#commandAutocompleteSuggestionProvider.addEntry(e.detail);
-        const {command, parameters} = parseCommandInput(e.detail);
+      onCommandSubmitted: (input: string) => {
+        this.#commandAutocompleteSuggestionProvider.addEntry(input);
+        const {command, parameters} = parseCommandInput(input);
         this.onCommandSend(command, parameters, this.#selectedTargetId);
       },
-      onFilterChanged: (e: CustomEvent<string>) => {
-        this.#filter = e.detail;
+      onFilterChanged: (filter: string) => {
+        this.#filter = filter;
         this.requestUpdate();
       },
-      onTargetChange: (e: Event) => {
-        if (e.target instanceof HTMLSelectElement) {
-          this.#selectedTargetId = e.target.value;
-        }
+      onTargetChange: (targetId: string) => {
+        this.#selectedTargetId = targetId;
       },
-      onToggleSidebar: (_e: Event) => {
+      onToggleSidebar: () => {
         this.#sidebarVisible = !this.#sidebarVisible;
         this.requestUpdate();
       },

package/front_end/panels/timeline/TimelineFlameChartView.ts

@@ -1430,6 +1430,23 @@ export class TimelineFlameChartView extends Common.ObjectWrapper.eventMixin<Even
     }
   }
 
+  zoomEvent(event: Trace.Types.Events.Event): void {
+    const traceBounds = TraceBounds.TraceBounds.BoundsManager.instance().state()?.micro.entireTraceBounds;
+    if (!traceBounds) {
+      return;
+    }
+
+    this.#expandEntryTrack(event);
+    this.revealEventVertically(event);
+    const entryWindow = Trace.Helpers.Timing.traceWindowFromMicroSeconds(
+        event.ts,
+        Trace.Types.Timing.Micro(event.ts + (event.dur ?? 0)),
+    );
+    const expandedBounds = Trace.Helpers.Timing.expandWindowByPercentOrToOneMillisecond(entryWindow, traceBounds, 100);
+    TraceBounds.TraceBounds.BoundsManager.instance().setTimelineVisibleWindow(
+        expandedBounds, {ignoreMiniMapBounds: true, shouldAnimate: true});
+  }
+
   revealEvent(event: Trace.Types.Events.Event): void {
     const mainIndex = this.mainDataProvider.indexForEvent(event);
     const networkIndex = this.networkDataProvider.indexForEvent(event);

package/front_end/panels/timeline/TimelinePanel.ts

@@ -660,6 +660,10 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     );
   }
 
+  zoomEvent(event: Trace.Types.Events.Event): void {
+    this.flameChart.zoomEvent(event);
+  }
+
   /**
    * Activates an insight and ensures the sidebar is open too.
    * Pass `highlightInsight: true` to flash the insight with the background highlight colour.
@@ -3156,6 +3160,7 @@ export const rowHeight = 18;
 export const headerHeight = 20;
 export interface TimelineModeViewDelegate {
   select(selection: TimelineSelection|null): void;
+  zoomEvent(event: Trace.Types.Events.Event): void;
   element: Element;
   set3PCheckboxDisabled(disabled: boolean): void;
   selectEntryAtTime(events: Trace.Types.Events.Event[]|null, time: number): void;

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -967,7 +967,7 @@ export class TimelineUIUtils {
     const isMarker = parsedTrace && isMarkerEvent(parsedTrace, event);
     const color = isMarker ? TimelineUIUtils.markerStyleForEvent(event).color : defaultColorForEvent;
 
-    contentHelper.addSection(TimelineUIUtils.eventTitle(event), color);
+    contentHelper.addSection(TimelineUIUtils.eventTitle(event), color, event);
 
     // TODO: as part of the removal of the old engine, produce a typesafe way
     // to look up args and data for events.
@@ -2374,7 +2374,7 @@ export class TimelineDetailsContentHelper {
     this.fragment.appendChild(this.element);
   }
 
-  addSection(title: string, swatchColor?: string): void {
+  addSection(title: string, swatchColor?: string, event?: Trace.Types.Events.Event): void {
     if (!this.tableElement.hasChildNodes()) {
       this.element.removeChildren();
     } else {
@@ -2388,7 +2388,16 @@ export class TimelineDetailsContentHelper {
       if (swatchColor) {
         titleElement.createChild('div').style.backgroundColor = swatchColor;
       }
-      UI.UIUtils.createTextChild(titleElement, title);
+
+      const textChild = titleElement.createChild('span');
+      textChild.textContent = title;
+
+      if (event) {
+        textChild.classList.add('timeline-details-chip-title-reveal-entry');
+        textChild.addEventListener('click', function() {
+          TimelinePanel.instance().zoomEvent(event);
+        });
+      }
     }
 
     this.tableElement = this.element.createChild('div', 'vbox timeline-details-chip-body');

package/front_end/panels/timeline/components/ExportTraceOptions.ts

@@ -49,10 +49,6 @@ const UIStrings = {
    * @description Text for the save trace button
    */
   saveButtonTitle: 'Save',
-  /**
-   * @description Title for the information icon showing more information about an option
-   */
-  moreInfoTitle: 'More information',
   /**
    * @description Text shown in the information pop-up next to the "Include script content" option.
    */
@@ -60,7 +56,11 @@ const UIStrings = {
   /**
    * @description Text shown in the information pop-up next to the "Include script sourcemaps" option.
    */
-  sourceMapsContentPrivacyInfo: 'Includes available source maps, which may expose authored code.'
+  sourceMapsContentPrivacyInfo: 'Includes available source maps, which may expose authored code.',
+  /**
+   * @description Text used as the start of the accessible label for the information button which shows additional context when the user focuses / hovers.
+   */
+  moreInfoLabel: 'Additional information:',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/ExportTraceOptions.ts', UIStrings);
@@ -204,6 +204,17 @@ export class ExportTraceOptions extends HTMLElement {
     this.state = newState;
   }
 
+  #accessibleLabelForInfoCheckbox(checkboxId: CheckboxId): string {
+    if (checkboxId === 'script-source-maps') {
+      return i18nString(UIStrings.moreInfoLabel) + ' ' + i18nString(UIStrings.sourceMapsContentPrivacyInfo);
+    }
+
+    if (checkboxId === 'script-content') {
+      return i18nString(UIStrings.moreInfoLabel) + ' ' + i18nString(UIStrings.scriptContentPrivacyInfo);
+    }
+
+    return '';
+  }
   #renderCheckbox(
       checkboxId: CheckboxId, checkboxWithLabel: UI.UIUtils.CheckboxLabel, title: Common.UIString.LocalizedString,
       checked: boolean): Lit.TemplateResult {
@@ -224,8 +235,8 @@ export class ExportTraceOptions extends HTMLElement {
           ${checkboxesWithInfoDialog.has(checkboxId) ? html`
             <devtools-button
               aria-details=${`export-trace-tooltip-${checkboxId}`}
+              aria-label=${this.#accessibleLabelForInfoCheckbox(checkboxId)}
               class="pen-icon"
-              .title=${UIStrings.moreInfoTitle}
               .iconName=${'info'}
               .variant=${Buttons.Button.Variant.ICON}
               ></devtools-button>
@@ -275,8 +286,10 @@ export class ExportTraceOptions extends HTMLElement {
           closeButton: false,
           dialogTitle: i18nString(UIStrings.exportTraceOptionsDialogTitle),
           state: this.#state.dialogState,
+          closeOnESC: true,
         } as Dialogs.ButtonDialog.ButtonDialogData}>
         <div class='export-trace-options-content'>
+
           ${this.#state.displayAnnotationsCheckbox ? this.#renderCheckbox('annotations', this.#includeAnnotationsCheckbox,
             i18nString(UIStrings.includeAnnotations),
             this.#state.includeAnnotations): ''}
@@ -296,11 +309,10 @@ export class ExportTraceOptions extends HTMLElement {
                   } as Buttons.Button.ButtonData}
                 >${i18nString(UIStrings.saveButtonTitle)}</devtools-button>
                 </div>
+          ${this.#state.displayScriptContentCheckbox ? this.#renderInfoTooltip('script-content') : Lit.nothing}
+          ${this.#state.displayScriptContentCheckbox && this.#state.displaySourceMapsCheckbox ? this.#renderInfoTooltip('script-source-maps') : Lit.nothing}
         </div>
       </devtools-button-dialog>
-
-      ${this.#state.displayScriptContentCheckbox ? this.#renderInfoTooltip('script-content') : Lit.nothing}
-      ${this.#state.displayScriptContentCheckbox && this.#state.displaySourceMapsCheckbox ? this.#renderInfoTooltip('script-source-maps') : Lit.nothing}
     `;
     // clang-format on
     Lit.render(output, this.#shadow, {host: this});

package/front_end/panels/timeline/timelineDetailsView.css

@@ -47,6 +47,11 @@
     align-items: center;
   }
 
+  .timeline-details-chip-title-reveal-entry:hover {
+    background: var(--sys-color-state-hover-on-subtle);
+    cursor: pointer;
+  }
+
   .timeline-details-view-block:first-child > .timeline-details-chip-title {
     font-size: 13px;
   }

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: https://source.chromium.org/chromium/chromium/src/+/main:components/variations/proto/devtools/
 Version: N/A
-Revision: e8bb55e7f56140e285b00abfd3811f1c3656ca4c
+Revision: c7c3037a902ef52ab055674cd106721ea54d13d1
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/components/tooltips/Tooltip.ts

@@ -480,7 +480,13 @@ export class Tooltip extends HTMLElement {
   };
 
   #keyDown = (event: KeyboardEvent): void => {
-    if ((event.altKey && event.key === 'ArrowDown') || (event.key === 'Escape' && this.open)) {
+    // There are two scenarios when we care about keydown:
+    // 1. The tooltip is open, and the user presses ESC
+    // 2. "use-hotkey" is set, and the user presses Alt+ArrowDown.
+    const shouldToggleVisibility =
+        (event.key === 'Escape' && this.open) || (this.useHotkey && event.altKey && event.key === 'ArrowDown');
+
+    if (shouldToggleVisibility) {
       this.#openedViaHotkey = !this.open;
       this.toggle();
       event.consume(true);
@@ -489,15 +495,18 @@ export class Tooltip extends HTMLElement {
 
   #registerEventListeners(): void {
     if (this.#anchor) {
+      // We bind the keydown listener regardless of if use-hotkey is enabled
+      // as we always want to support ESC to close.
+      this.#anchor.addEventListener('keydown', this.#keyDown);
+
       if (this.useClick) {
         this.#anchor.addEventListener('click', this.toggle);
       } else {
         this.#anchor.addEventListener('mouseenter', this.showTooltip);
-        if (this.useHotkey) {
-          this.#anchor.addEventListener('keydown', this.#keyDown);
-        } else {
+        if (!this.useHotkey) {
           this.#anchor.addEventListener('focus', this.showTooltip);
         }
+
         this.#anchor.addEventListener('blur', this.hideTooltip);
         this.#anchor.addEventListener('mouseleave', this.hideTooltip);
         this.addEventListener('mouseleave', this.hideTooltip);

package/package.json

@@ -102,5 +102,5 @@
       "@eslint/core": "0.15.1"
     }
   },
-  "version": "1.0.1522145"
+  "version": "1.0.1522585"
 }