chrome-devtools-frontend 1.0.1522585 → 1.0.1524741

package/front_end/entrypoints/heap_snapshot_worker/HeapSnapshot.ts

@@ -633,9 +633,11 @@ export class HeapSnapshotProgress {
   }
 }
 
-// An "interface" to be used when classifying plain JS objects in the snapshot.
-// An object matches the interface if it contains every listed property (even
-// if it also contains extra properties).
+/**
+ * An "interface" to be used when classifying plain JS objects in the snapshot.
+ * An object matches the interface if it contains every listed property (even
+ * if it also contains extra properties).
+ **/
 interface InterfaceDefinition {
   name: string;
   properties: string[];
@@ -680,7 +682,7 @@ export interface Profile {
 
 export type LiveObjects = Record<number, {count: number, size: number, ids: number[]}>;
 
-// The first batch of data sent from the primary worker to the secondary.
+/** The first batch of data sent from the primary worker to the secondary. **/
 interface SecondaryInitArgumentsStep1 {
   // For each edge ordinal, this array contains the ordinal of the pointed-to node.
   edgeToNodeOrdinals: Uint32Array;
@@ -692,7 +694,7 @@ interface SecondaryInitArgumentsStep1 {
   nodeFieldCount: number;
 }
 
-// The second batch of data sent from the primary worker to the secondary.
+/** The second batch of data sent from the primary worker to the secondary. **/
 interface SecondaryInitArgumentsStep2 {
   rootNodeOrdinal: number;
   // An array with one bit per edge, where each bit indicates whether the edge
@@ -700,7 +702,7 @@ interface SecondaryInitArgumentsStep2 {
   essentialEdgesBuffer: ArrayBuffer;
 }
 
-// The third batch of data sent from the primary worker to the secondary.
+/** The third batch of data sent from the primary worker to the secondary. **/
 interface SecondaryInitArgumentsStep3 {
   // For each node ordinal, this array contains the node's shallow size.
   nodeSelfSizes: Uint32Array;
@@ -749,11 +751,13 @@ interface DominatedNodes {
   dominatedNodes: Uint32Array;
 }
 
-// The data transferred from the secondary worker to the primary.
+/** The data transferred from the secondary worker to the primary. **/
 interface ResultsFromSecondWorker extends Retainers, DominatorsAndRetainedSizes, DominatedNodes {}
 
-// Initialization work is split into two threads. This class is the entry point
-// for work done by the second thread.
+/**
+ * Initialization work is split into two threads. This class is the entry point
+ * for work done by the second thread.
+ **/
 export class SecondaryInitManager {
   argsStep1: Promise<SecondaryInitArgumentsStep1>;
   argsStep2: Promise<SecondaryInitArgumentsStep2>;
@@ -2153,8 +2157,10 @@ export abstract class HeapSnapshot {
   private inferInterfaceDefinitions(): InterfaceDefinition[] {
     const {edgePropertyType} = this;
 
-    // First, produce a set of candidate definitions by iterating the properties
-    // on every plain JS Object in the snapshot.
+    /**
+     * First, produce a set of candidate definitions by iterating the properties
+     * on every plain JS Object in the snapshot.
+     **/
     interface InterfaceDefinitionCandidate extends InterfaceDefinition {
       // How many objects start with these properties in this order.
       count: number;
@@ -2229,7 +2235,7 @@ export abstract class HeapSnapshot {
     this.#aggregates = {};
     this.#aggregatesSortedFlags = {};
 
-    // Information about a named interface.
+    /** Information about a named interface. **/
     interface MatchInfo {
       name: string;
       // The number of properties listed in the interface definition.
@@ -2248,9 +2254,11 @@ export abstract class HeapSnapshot {
       return a.index <= b.index ? a : b;
     }
 
-    // A node in the tree which allows us to search for interfaces matching an object.
-    // Each edge in this tree represents adding a property, starting from an empty
-    // object. Properties must be iterated in sorted order.
+    /**
+     * A node in the tree which allows us to search for interfaces matching an object.
+     * Each edge in this tree represents adding a property, starting from an empty
+     * object. Properties must be iterated in sorted order.
+     **/
     interface PropertyTreeNode {
       // All possible successors from this node. Keys are property names.
       next: Map<string, PropertyTreeNode>;
@@ -3627,7 +3635,7 @@ export class JSHeapSnapshot extends HeapSnapshot {
   }
 }
 
-// Creates and initializes a JSHeapSnapshot using only one thread.
+/** Creates and initializes a JSHeapSnapshot using only one thread. **/
 export async function createJSHeapSnapshotForTesting(profile: Profile): Promise<JSHeapSnapshot> {
   const result = new JSHeapSnapshot(profile, new HeapSnapshotProgress());
   const channel = new MessageChannel();

package/front_end/entrypoints/inspector_main/OutermostTargetSelector.ts

@@ -91,7 +91,8 @@ export class OutermostTargetSelector implements SDK.TargetManager.Observer, UI.S
     this.listItems.insertWithComparator(target, this.#targetComparator());
     this.#toolbarItem.setVisible(this.listItems.length > 1);
 
-    if (target === UI.Context.Context.instance().flavor(SDK.Target.Target)) {
+    const primaryTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    if (target === primaryTarget || target === UI.Context.Context.instance().flavor(SDK.Target.Target)) {
       this.#dropDown.selectItem(target);
     }
   }

package/front_end/entrypoints/main/MainImpl.ts

@@ -1022,7 +1022,7 @@ export class PauseListener {
   }
 }
 
-// Unused but mentioned at https://chromedevtools.github.io/devtools-protocol/#:~:text=use%20Main.MainImpl.-,sendOverProtocol,-()%20in%20the
+/** Unused but mentioned at https://chromedevtools.github.io/devtools-protocol/#:~:text=use%20Main.MainImpl.-,sendOverProtocol,-()%20in%20the **/
 export function sendOverProtocol(
     method: ProtocolClient.InspectorBackend.QualifiedName, params: Object|null): Promise<unknown[]|null> {
   return new Promise((resolve, reject) => {
@@ -1064,9 +1064,11 @@ type ExternalRequestInput = {
   args: {requestUrl: string, prompt: string},
 };
 
-// For backwards-compatibility we iterate over the generator and drop the
-// intermediate results. The final response is transformed to its legacy type.
-// Instead of sending responses of type error, errors are throws.
+/**
+ * For backwards-compatibility we iterate over the generator and drop the
+ * intermediate results. The final response is transformed to its legacy type.
+ * Instead of sending responses of type error, errors are throws.
+ **/
 export async function handleExternalRequest(input: ExternalRequestInput):
     Promise<{response: string, devToolsLogs: object[]}> {
   const generator = await handleExternalRequestGenerator(input);

package/front_end/generated/InspectorBackendCommands.js

@@ -215,7 +215,7 @@ inspectorBackend.registerEvent("Browser.downloadWillBegin", ["frameId", "guid",
 inspectorBackend.registerEnum("Browser.DownloadProgressEventState", {InProgress: "inProgress", Completed: "completed", Canceled: "canceled"});
 inspectorBackend.registerEvent("Browser.downloadProgress", ["guid", "totalBytes", "receivedBytes", "state", "filePath"]);
 inspectorBackend.registerCommand("Browser.setPermission", [{"name": "permission", "type": "object", "optional": false, "description": "Descriptor of permission to override.", "typeRef": "Browser.PermissionDescriptor"}, {"name": "setting", "type": "string", "optional": false, "description": "Setting of the permission.", "typeRef": "Browser.PermissionSetting"}, {"name": "origin", "type": "string", "optional": true, "description": "Requesting origin the permission applies to, all origins if not specified.", "typeRef": null}, {"name": "embeddingOrigin", "type": "string", "optional": true, "description": "Embedding origin the permission applies to. It is ignored unless the requesting origin is present and valid. If the requesting origin is provided but the embedding origin isn't, the requesting origin is used as the embedding origin.", "typeRef": null}, {"name": "browserContextId", "type": "string", "optional": true, "description": "Context to override. When omitted, default browser context is used.", "typeRef": "Browser.BrowserContextID"}], [], "Set permission settings for given requesting and embedding origins.");
-inspectorBackend.registerCommand("Browser.grantPermissions", [{"name": "permissions", "type": "array", "optional": false, "description": "", "typeRef": "Browser.PermissionType"}, {"name": "origin", "type": "string", "optional": true, "description": "Origin the permission applies to, all origins if not specified.", "typeRef": null}, {"name": "browserContextId", "type": "string", "optional": true, "description": "BrowserContext to override permissions. When omitted, default browser context is used.", "typeRef": "Browser.BrowserContextID"}], [], "Grant specific permissions to the given origin and reject all others.");
+inspectorBackend.registerCommand("Browser.grantPermissions", [{"name": "permissions", "type": "array", "optional": false, "description": "", "typeRef": "Browser.PermissionType"}, {"name": "origin", "type": "string", "optional": true, "description": "Origin the permission applies to, all origins if not specified.", "typeRef": null}, {"name": "browserContextId", "type": "string", "optional": true, "description": "BrowserContext to override permissions. When omitted, default browser context is used.", "typeRef": "Browser.BrowserContextID"}], [], "Grant specific permissions to the given origin and reject all others. Deprecated. Use setPermission instead.");
 inspectorBackend.registerCommand("Browser.resetPermissions", [{"name": "browserContextId", "type": "string", "optional": true, "description": "BrowserContext to reset permissions. When omitted, default browser context is used.", "typeRef": "Browser.BrowserContextID"}], [], "Reset all permission management for all origins.");
 inspectorBackend.registerEnum("Browser.SetDownloadBehaviorRequestBehavior", {Deny: "deny", Allow: "allow", AllowAndName: "allowAndName", Default: "default"});
 inspectorBackend.registerCommand("Browser.setDownloadBehavior", [{"name": "behavior", "type": "string", "optional": false, "description": "Whether to allow all or deny all download requests, or use default Chrome behavior if available (otherwise deny). |allowAndName| allows download and names files according to their download guids.", "typeRef": "Browser.SetDownloadBehaviorRequestBehavior"}, {"name": "browserContextId", "type": "string", "optional": true, "description": "BrowserContext to set download behavior. When omitted, default browser context is used.", "typeRef": "Browser.BrowserContextID"}, {"name": "downloadPath", "type": "string", "optional": true, "description": "The default path to save downloaded files to. This is required if behavior is set to 'allow' or 'allowAndName'.", "typeRef": null}, {"name": "eventsEnabled", "type": "boolean", "optional": true, "description": "Whether to emit download events (defaults to false).", "typeRef": null}], [], "Set the behavior when downloading a file.");
@@ -870,7 +870,7 @@ inspectorBackend.registerCommand("Network.getResponseBodyForInterception", [{"na
 inspectorBackend.registerCommand("Network.takeResponseBodyForInterceptionAsStream", [{"name": "interceptionId", "type": "string", "optional": false, "description": "", "typeRef": "Network.InterceptionId"}], ["stream"], "Returns a handle to the stream representing the response body. Note that after this command, the intercepted request can't be continued as is -- you either need to cancel it or to provide the response body. The stream only supports sequential read, IO.read will fail if the position is specified.");
 inspectorBackend.registerCommand("Network.replayXHR", [{"name": "requestId", "type": "string", "optional": false, "description": "Identifier of XHR to replay.", "typeRef": "Network.RequestId"}], [], "This method sends a new XMLHttpRequest which is identical to the original one. The following parameters should be identical: method, url, async, request body, extra headers, withCredentials attribute, user, password.");
 inspectorBackend.registerCommand("Network.searchInResponseBody", [{"name": "requestId", "type": "string", "optional": false, "description": "Identifier of the network response to search.", "typeRef": "Network.RequestId"}, {"name": "query", "type": "string", "optional": false, "description": "String to search for.", "typeRef": null}, {"name": "caseSensitive", "type": "boolean", "optional": true, "description": "If true, search is case sensitive.", "typeRef": null}, {"name": "isRegex", "type": "boolean", "optional": true, "description": "If true, treats string parameter as regex.", "typeRef": null}], ["result"], "Searches for given string in response content.");
-inspectorBackend.registerCommand("Network.setBlockedURLs", [{"name": "urls", "type": "array", "optional": false, "description": "URL patterns to block. Wildcards ('*') are allowed.", "typeRef": "string"}], [], "Blocks URLs from loading.");
+inspectorBackend.registerCommand("Network.setBlockedURLs", [{"name": "urlPatterns", "type": "array", "optional": true, "description": "URL patterns to block. Patterns use the URLPattern constructor string syntax (https://urlpattern.spec.whatwg.org/). Example: `*://*:*/*.css`.", "typeRef": "string"}, {"name": "urls", "type": "array", "optional": true, "description": "URL patterns to block. Wildcards ('*') are allowed.", "typeRef": "string"}], [], "Blocks URLs from loading.");
 inspectorBackend.registerCommand("Network.setBypassServiceWorker", [{"name": "bypass", "type": "boolean", "optional": false, "description": "Bypass service worker and load from network.", "typeRef": null}], [], "Toggles ignoring of service worker for each request.");
 inspectorBackend.registerCommand("Network.setCacheDisabled", [{"name": "cacheDisabled", "type": "boolean", "optional": false, "description": "Cache disabled state.", "typeRef": null}], [], "Toggles ignoring cache for each request. If `true`, cache will not be used.");
 inspectorBackend.registerCommand("Network.setCookie", [{"name": "name", "type": "string", "optional": false, "description": "Cookie name.", "typeRef": null}, {"name": "value", "type": "string", "optional": false, "description": "Cookie value.", "typeRef": null}, {"name": "url", "type": "string", "optional": true, "description": "The request-URI to associate with the setting of the cookie. This value can affect the default domain, path, source port, and source scheme values of the created cookie.", "typeRef": null}, {"name": "domain", "type": "string", "optional": true, "description": "Cookie domain.", "typeRef": null}, {"name": "path", "type": "string", "optional": true, "description": "Cookie path.", "typeRef": null}, {"name": "secure", "type": "boolean", "optional": true, "description": "True if cookie is secure.", "typeRef": null}, {"name": "httpOnly", "type": "boolean", "optional": true, "description": "True if cookie is http-only.", "typeRef": null}, {"name": "sameSite", "type": "string", "optional": true, "description": "Cookie SameSite type.", "typeRef": "Network.CookieSameSite"}, {"name": "expires", "type": "number", "optional": true, "description": "Cookie expiration date, session cookie if not set", "typeRef": "Network.TimeSinceEpoch"}, {"name": "priority", "type": "string", "optional": true, "description": "Cookie Priority type.", "typeRef": "Network.CookiePriority"}, {"name": "sameParty", "type": "boolean", "optional": true, "description": "True if cookie is SameParty.", "typeRef": null}, {"name": "sourceScheme", "type": "string", "optional": true, "description": "Cookie source scheme type.", "typeRef": "Network.CookieSourceScheme"}, {"name": "sourcePort", "type": "number", "optional": true, "description": "Cookie source port. Valid values are {-1, [1, 65535]}, -1 indicates an unspecified port. An unspecified port value allows protocol clients to emulate legacy cookie scope for the port. This is a temporary ability and it will be removed in the future.", "typeRef": null}, {"name": "partitionKey", "type": "object", "optional": true, "description": "Cookie partition key. If not set, the cookie will be set as not partitioned.", "typeRef": "Network.CookiePartitionKey"}], ["success"], "Sets a cookie with the given cookie data; may overwrite equivalent cookies if they exist.");

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

@@ -1238,7 +1238,8 @@ export namespace ProtocolMapping {
       returnType: void;
     };
     /**
-     * Grant specific permissions to the given origin and reject all others.
+     * Grant specific permissions to the given origin and reject all others. Deprecated. Use
+     * setPermission instead.
      */
     'Browser.grantPermissions': {
       paramsType: [Protocol.Browser.GrantPermissionsRequest];
@@ -3443,7 +3444,7 @@ export namespace ProtocolMapping {
      * Blocks URLs from loading.
      */
     'Network.setBlockedURLs': {
-      paramsType: [Protocol.Network.SetBlockedURLsRequest];
+      paramsType: [Protocol.Network.SetBlockedURLsRequest?];
       returnType: void;
     };
     /**

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

@@ -596,7 +596,9 @@ declare namespace ProtocolProxyApi {
     invoke_setPermission(params: Protocol.Browser.SetPermissionRequest): Promise<Protocol.ProtocolResponseWithError>;
 
     /**
-     * Grant specific permissions to the given origin and reject all others.
+     * Grant specific permissions to the given origin and reject all others. Deprecated. Use
+     * setPermission instead.
+     * @deprecated
      */
     invoke_grantPermissions(params: Protocol.Browser.GrantPermissionsRequest): Promise<Protocol.ProtocolResponseWithError>;
 

package/front_end/generated/protocol.ts

@@ -11606,10 +11606,16 @@ export namespace Network {
   }
 
   export interface SetBlockedURLsRequest {
+    /**
+     * URL patterns to block. Patterns use the URLPattern constructor string syntax
+     * (https://urlpattern.spec.whatwg.org/). Example: `*://*:*\/*.css`.
+     */
+    urlPatterns?: string[];
     /**
      * URL patterns to block. Wildcards ('*') are allowed.
+     * @deprecated
      */
-    urls: string[];
+    urls?: string[];
   }
 
   export interface SetBypassServiceWorkerRequest {

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

@@ -1,21 +1,24 @@
 Title: StylingAgent describeElement should describe an element with no children, siblings, or parent
 Content:
+* Element's uid is 99.
 * Its selector is `div#myElement`
 === end content
 
 Title: StylingAgent describeElement should describe an element with child element and text nodes
 Content:
+* Element's uid is 99.
 * Its selector is `div#parentElement`
-* It has 2 child element nodes: `span.child1`, `span.child2`
+* It has 2 child element nodes: `span.child1` (uid=undefined), `span.child2` (uid=undefined)
 * It only has 1 child text node
 === end content
 
 Title: StylingAgent describeElement should describe an element with siblings and a parent
 Content:
+* Element's uid is 99.
 * Its selector is `div#parentElement`
-* It has a next sibling and it is an element node
+* It has a next sibling and it is an element (uid=undefined) node
 * It has a previous sibling and it is a non element node
-* Its parent's selector is `div#grandparentElement`
+* Its parent's selector is `div#grandparentElement` (uid=undefined)
 * Its parent is a non element node
 * Its parent has only 1 child element node
 * Its parent has only 1 child text node
@@ -52,6 +55,40 @@ Content:
     }
   ],
   "function_declarations": [
+    {
+      "name": "getStyles",
+      "description": "Get computed and source styles for one or multiple elements on the inspected page for multiple elements at once by uid.\n\n**CRITICAL** Use selectors to refer to elements in the text output. Do not use uids.\n**CRITICAL** Always provide the explanation argument to explain what and why you query.",
+      "parameters": {
+        "type": 6,
+        "description": "",
+        "nullable": false,
+        "properties": {
+          "explanation": {
+            "type": 1,
+            "description": "Explain why you want to get styles",
+            "nullable": false
+          },
+          "elements": {
+            "type": 5,
+            "description": "A list of element uids to get data for",
+            "items": {
+              "type": 1,
+              "description": "An element uid."
+            },
+            "nullable": false
+          },
+          "styleProperties": {
+            "type": 5,
+            "description": "One or more CSS style property names to fetch.",
+            "nullable": false,
+            "items": {
+              "type": 1,
+              "description": "A CSS style property name to retrieve. For example, 'background-color'."
+            }
+          }
+        }
+      }
+    },
     {
       "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.",
@@ -62,7 +99,7 @@ Content:
         "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"
+            "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* **CRITICAL** Only get styles that might be relevant to the user request.\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 change element styles:\n\n```\nawait setElementStyles($0, {\n  color: 'blue',\n});\n```\n\nFor example, the code to get overlapping elements:\n\n```\nconst data = {\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,
@@ -153,7 +190,7 @@ Content:
     "details": [
       {
         "title": "Data used",
-        "text": "* Its selector is `undefined`"
+        "text": "* Element's uid is 99.\n* Its selector is `undefined`"
       }
     ]
   },
@@ -174,7 +211,7 @@ Content:
   {
     "parts": [
       {
-        "text": "# Inspected element\n\n* Its selector is `undefined`\n\n# User request\n\nQUERY: test"
+        "text": "# Inspected element\n\n* Element's uid is 99.\n* Its selector is `undefined`\n\n# User request\n\nQUERY: test"
       }
     ],
     "role": 1
@@ -194,13 +231,13 @@ 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"
+    "text": "# Inspected element\n\n* Element's uid is 99.\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"
+          "text": "# Inspected element\n\n* Element's uid is 99.\n* Its selector is `undefined`\n\n# User request\n\nQUERY: test"
         }
       ],
       "role": 1
@@ -237,7 +274,7 @@ Content:
     "details": [
       {
         "title": "Data used",
-        "text": "* Its selector is `undefined`"
+        "text": "* Element's uid is 99.\n* Its selector is `undefined`"
       }
     ]
   },
@@ -266,7 +303,7 @@ Content:
     "details": [
       {
         "title": "Data used",
-        "text": "* Its selector is `undefined`"
+        "text": "* Element's uid is 99.\n* Its selector is `undefined`"
       }
     ]
   },
@@ -298,7 +335,7 @@ Content:
     "details": [
       {
         "title": "Data used",
-        "text": "* Its selector is `undefined`"
+        "text": "* Element's uid is 99.\n* Its selector is `undefined`"
       }
     ]
   },
@@ -327,7 +364,7 @@ Content:
     "details": [
       {
         "title": "Data used",
-        "text": "* Its selector is `undefined`"
+        "text": "* Element's uid is 99.\n* Its selector is `undefined`"
       }
     ]
   },
@@ -354,7 +391,7 @@ Content:
     "details": [
       {
         "title": "Data used",
-        "text": "* Its selector is `undefined`"
+        "text": "* Element's uid is 99.\n* Its selector is `undefined`"
       }
     ]
   },
@@ -388,7 +425,7 @@ Content:
   {
     "parts": [
       {
-        "text": "# Inspected element\n\n* Its selector is `undefined`\n\n# User request\n\nQUERY: test"
+        "text": "# Inspected element\n\n* Element's uid is 99.\n* Its selector is `undefined`\n\n# User request\n\nQUERY: test"
       }
     ],
     "role": 1
@@ -492,6 +529,7 @@ Title: StylingAgent enhanceQuery does not add multimodal input evaluation prompt
 Content:
 # Inspected element
 
+* Element's uid is 99.
 * Its selector is `div#myElement`
 
 # User request
@@ -503,6 +541,7 @@ Title: StylingAgent enhanceQuery does not add multimodal input evaluation prompt
 Content:
 # Inspected element
 
+* Element's uid is 99.
 * Its selector is `div#myElement`
 
 # User request
@@ -528,6 +567,7 @@ In case query is related to the image, ALWAYS first use image evaluation to get
 
 # Inspected element
 
+* Element's uid is 99.
 * Its selector is `div#myElement`
 
 # User request
@@ -551,6 +591,7 @@ In case query is related to the image, ALWAYS first use image evaluation to get
 
 # Inspected element
 
+* Element's uid is 99.
 * Its selector is `div#myElement`
 
 # User request