chrome-devtools-frontend 1.0.1697998 → 1.0.1699061

package/.agents/skills/devtools-verification/SKILL.md

@@ -20,6 +20,25 @@ description: "MANDATORY: Activate this skill ANY TIME you need to build the proj
 - `npm run lint` will execute ESLint and StyleLint. It will report any violations and automatically fix them where possible.
 - To run the linter on a specific file or directory, you can run `npm run lint -- <PATH>` where `PATH` is a path to a file or directory. This will also automatically fix violations where possible.
 
+## Fetching Tryjob Results, Failure Logs, & Screenshot Goldens
+
+Use `scripts/tools/get_cl_test_results.py` to fetch all tryjob build statuses, per-test failure logs, Blink web test text diffs, and screenshot artifacts (`actual_image`, `expected_image`, `image_diff`) for a CL in one command:
+
+```bash
+# Fetch all build statuses, failure logs, and artifacts for a CL into an output directory:
+scripts/tools/get_cl_test_results.py --cl <CL_NUMBER> --output-dir <OUTPUT_DIR>
+
+# Filter for specific failing tests (e.g. DOMTreeWidget) or specific builders:
+scripts/tools/get_cl_test_results.py --cl <CL_NUMBER> --test-filter "DOMTreeWidget" --output-dir <OUTPUT_DIR>
+
+# Also apply Linux actual_image screenshot artifacts directly to test/goldens/linux/...:
+scripts/tools/get_cl_test_results.py --cl <CL_NUMBER> --output-dir <OUTPUT_DIR> --apply-goldens
+```
+
+### Screenshot Golden & Inspection Rules
+- **Linux-only goldens**: Never generate, update, or commit golden PNGs from macOS. Screenshot tests in DevTools only use Linux goldens (`test/goldens/linux/...`) produced by Linux trybots (`dtf_linux_rel` / `dtf_linux_dbg`). Do not run screenshot tests locally on macOS to verify goldens.
+- **Multimodal inspection only**: Always inspect `actual_image.png`, `expected_image.png`, and `image_diff.png` directly using your multimodal file viewer (`view_file`). Never write or run programmatic image comparison scripts.
+
 ## Best practices
 
 - Run tests often to verify your changes.

package/.agents/skills/{repro-flaky-tests → fix-tests}/SKILL.md

@@ -1,6 +1,6 @@
 ---
-name: repro-flaky-tests
-description: Reproduce and investigate flakiness in a test.
+name: fix-tests
+description: Use this skill to reproduce and fix flaky and disabled tests.
 ---
 
 # Workflow

package/.agents/skills/version-control/SKILL.md

@@ -41,21 +41,25 @@ If CL B depends on CL A:
 2. Develop on branch B.
 3. When uploading B, Gerrit will show the dependency on A.
 
-### Reparenting
-If you need to change the base of a branch (e.g., move CL B to be based on `main` instead of CL A):
+### Reparenting & Detaching Landed CLs
+If you need to change the base of a branch back to the root branch (e.g., move CL B to be based on `origin/main` instead of CL A):
 ```bash
-git reparent-branch main
+git reparent-branch --root
 ```
 Or to make it depend on another branch C:
 ```bash
 git reparent-branch <branch-C>
 ```
+* **Detaching from landed CLs:** When parent CLs in a stack have landed on `main`, first run `git fetch` so `origin/main` includes the landed commits (otherwise reparenting will trigger merge conflicts). Then check out the first unlanded branch in the chain and run `git reparent-branch --root` **before** archiving the landed branches (so `depot_tools` can still resolve the old upstream tracking branch). After reparenting (which automatically runs `git rebase-update`), archive the landed branches (`git cl archive -f`) and run `gclient sync -Df`.
 
 ### Syncing with Upstream
-To update all your branches with the latest changes from `main` and their respective upstreams:
+To update all your branches with the latest changes from `main` and their respective upstreams, and synchronize dependencies:
 ```bash
-git rebase-update
+git rebase-update && gclient sync -Df
 ```
+* **Always use `git rebase-update` for stacks:** Never write manual `git checkout && git rebase` loops across stacked branches. `git rebase-update` automatically rebases the entire dependency graph in order.
+* **Clean up old branches first:** Before running `git rebase-update`, archive landed/closed branches (`git cl archive -f`) or mark dormant (`git config branch.<branch>.dormant true`) any obsolete branches so they do not trigger unnecessary rebase conflicts.
+* **Always sync dependencies after rebase:** Always run `gclient sync -Df` after a `git rebase-update`. CIPD dependency updates do not show up in `git status`, so skipping `gclient sync -Df` risks leaving your checkout out of sync.
 
 ### Initial upload
 When a CL is ready, upload it with:
@@ -67,12 +71,14 @@ git cl upload -f -d --commit-description="<description>"
 * Keep line length below 72
 * Add a "Bug: <issue number>" or "Bug: None" trailer on a separate line.
 * Amend formatter/linter changes and fix linter issues.
+* For a brand new stack of CLs, perform the initial upload on each branch individually in parent-to-child order so each CL receives its own commit description.
 
-### Subsequent upload
+### Subsequent upload & Updating Stacks
 To upload an updated CL:
 ```bash
 git cl upload -f -d -t "<one sentence patch set description>"
 ```
+* **Updating an existing stack of CLs:** Once all CLs in a stack have been initially created, **only run `git cl upload` from the leaf (latest) branch in the chain** for subsequent updates. Uploading from the leaf branch automatically runs presubmit checks and uploads new patchsets for all parent CLs in the stack simultaneously. Never upload intermediate CLs one by one when updating a stack.
 
 ## Release and Roll Status
 
@@ -87,12 +93,18 @@ To check whether a DevTools commit (`devtools/devtools-frontend`) has rolled int
 | Create new CL from main | `git new-branch <name>` |
 | Create stacked CL | `git new-branch --upstream_current <name>` |
 | Update current CL | `git commit --amend` |
-| Upload to Gerrit | `git cl upload -f` |
+| Initial CL upload | `git cl upload -f -d --commit-description="<description>"` |
+| Subsequent CL upload (or update stack from leaf) | `git cl upload -f -d -t "<message>"` |
+| Reparent branch to root (`origin/main`) | `git reparent-branch --root` |
 | Change branch parent | `git reparent-branch <new-parent>` |
-| Sync all branches | `git rebase-update` |
+| Archive landed/closed branches | `git cl archive -f` |
+| Rebase all branches in stack | `git rebase-update` |
+| Sync dependencies after rebase | `gclient sync -Df` |
 | Check release & roll status | Query `https://chromiumdash.appspot.com/fetch_commit?commit=<sha>` |
 
 ## Common Mistakes
 - **Multiple commits on one branch:** Gerrit expects one commit per CL. Always `commit --amend`.
 - **Using `git checkout -b`:** Does not set up tracking information correctly for `depot_tools`. Use `git new-branch`.
-- **Manual rebasing of stacked branches:** Can be complex. Use `git rebase-update` or `git reparent-branch` to let `depot_tools` handle the tracking updates.
+- **Manual rebasing of stacked branches:** Never use manual `git rebase` loops. Always use `git rebase-update` or `git reparent-branch` to let `depot_tools` handle tracking updates.
+- **Uploading intermediate branches when updating a stack:** When updating an existing stack of CLs, do not run `git cl upload` on each branch in a chain—uploading from the leaf branch uploads new patchsets for all parent CLs automatically (note: initial uploads must still be done per branch).
+- **Archiving parent branches before reparenting:** Always run `git fetch` and `git reparent-branch --root` on the child branch before archiving a landed parent branch with `git cl archive -f`.

package/front_end/core/platform/HostRuntime.ts

@@ -4,6 +4,18 @@
 
 import type * as Api from './api/api.js';
 
+export type {
+  CacheEntry,
+  CacheStorageLike,
+  HostRuntime,
+  ScreenshotOptions,
+  Worker,
+  WorkerMessageEvent,
+  WorkerMessagePort,
+  WorkerScope,
+  WorkerTransferable,
+} from './api/HostRuntime.js';
+
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore 'process' is not available when type-checking against browser types.
 export const IS_NODE: boolean = typeof (process as unknown) !== 'undefined' && process.versions?.node !== null;

package/front_end/core/platform/api/HostRuntime.ts

@@ -13,6 +13,16 @@ export interface ScreenshotOptions {
   };
 }
 
+export interface CacheEntry {
+  put(url: string, response: Response): Promise<void>;
+  match(url: string): Promise<Response|undefined>;
+}
+
+export interface CacheStorageLike {
+  open(name: string): Promise<CacheEntry>;
+  delete(name: string): Promise<boolean>;
+}
+
 /**
  * Provides abstractions for host features that require different implementations depending
  * on whether DevTools runs in the browser or Node.js
@@ -23,10 +33,13 @@ export interface HostRuntime {
   getOnLine(): boolean;
   getUserAgent(): string;
   getLocalStorage(): Storage|undefined;
+  getCacheStorage(): CacheStorageLike|undefined;
   getDevicePixelRatio(): number;
   saveScreenshot(options: ScreenshotOptions): Promise<void>;
   revokeLastScreenshotUrl(): void;
   loadTextFile(url: URL): Promise<string>;
+  evaluateCSS(dataValue: string|null, customExpr: string): string|null;
+  removeCSSEvaluationElement(): void;
 }
 
 /**

package/front_end/core/platform/browser/HostRuntime.ts

@@ -130,6 +130,8 @@ async function saveScreenshot(options: Api.HostRuntime.ScreenshotOptions): Promi
   link.click();
 }
 
+let cssEvaluationElement: HTMLElement|null = null;
+
 export const HOST_RUNTIME: Api.HostRuntime.HostRuntime = {
   createWorker(url: string): Api.HostRuntime.Worker {
     return new WebWorker(url);
@@ -145,6 +147,10 @@ export const HOST_RUNTIME: Api.HostRuntime.HostRuntime = {
       undefined {
         return 'localStorage' in globalThis ? globalThis.localStorage : undefined;
       },
+  getCacheStorage(): Api.HostRuntime.CacheStorageLike |
+      undefined {
+        return 'caches' in globalThis ? globalThis.caches : undefined;
+      },
   getDevicePixelRatio(): number {
     return window.devicePixelRatio;
   },
@@ -154,4 +160,32 @@ export const HOST_RUNTIME: Api.HostRuntime.HostRuntime = {
     const response = await fetch(url);
     return await response.text();
   },
+  evaluateCSS(dataValue: string|null, customExpr: string): string |
+      null {
+        if (!cssEvaluationElement || !cssEvaluationElement.isConnected) {
+          cssEvaluationElement = document.getElementById('css-evaluation-element');
+          if (!cssEvaluationElement) {
+            cssEvaluationElement = document.createElement('div');
+            cssEvaluationElement.id = 'css-evaluation-element';
+            cssEvaluationElement.setAttribute('style', 'hidden: true; --evaluation: attr(data-custom-expr type(*))');
+
+            document.body.appendChild(cssEvaluationElement);
+          }
+        }
+
+        if (dataValue !== null) {
+          cssEvaluationElement.setAttribute('data-value', dataValue);
+        } else {
+          cssEvaluationElement.removeAttribute('data-value');
+        }
+        cssEvaluationElement.setAttribute('data-custom-expr', customExpr);
+        return cssEvaluationElement.computedStyleMap().get('--evaluation')?.toString() ?? null;
+      },
+  removeCSSEvaluationElement(): void {
+    const element = cssEvaluationElement ?? document.getElementById('css-evaluation-element');
+    if (element) {
+      element.remove();
+    }
+    cssEvaluationElement = null;
+  },
 };

package/front_end/core/platform/node/HostRuntime.ts

@@ -83,6 +83,37 @@ class NodeWorker implements Api.HostRuntime.Worker {
   }
 }
 
+class NodeCacheEntry implements Api.HostRuntime.CacheEntry {
+  readonly #entries = new Map<string, Response>();
+
+  async put(url: string, response: Response): Promise<void> {
+    this.#entries.set(url, response.clone());
+  }
+
+  async match(url: string): Promise<Response|undefined> {
+    return this.#entries.get(url)?.clone();
+  }
+}
+
+class NodeCacheStorage implements Api.HostRuntime.CacheStorageLike {
+  readonly #caches = new Map<string, NodeCacheEntry>();
+
+  async open(name: string): Promise<Api.HostRuntime.CacheEntry> {
+    let cache = this.#caches.get(name);
+    if (!cache) {
+      cache = new NodeCacheEntry();
+      this.#caches.set(name, cache);
+    }
+    return cache;
+  }
+
+  async delete(name: string): Promise<boolean> {
+    return this.#caches.delete(name);
+  }
+}
+
+const nodeCacheStorage = new NodeCacheStorage();
+
 export const HOST_RUNTIME: Api.HostRuntime.HostRuntime = {
   createWorker(url: string): Api.HostRuntime.Worker {
     return new NodeWorker(url);
@@ -98,6 +129,10 @@ export const HOST_RUNTIME: Api.HostRuntime.HostRuntime = {
       undefined {
         return undefined;
       },
+  getCacheStorage(): Api.HostRuntime.CacheStorageLike |
+      undefined {
+        return nodeCacheStorage;
+      },
   getDevicePixelRatio(): number {
     return 1;
   },
@@ -106,4 +141,9 @@ export const HOST_RUNTIME: Api.HostRuntime.HostRuntime = {
   async loadTextFile(url: URL): Promise<string> {
     return await Fs.promises.readFile(Url.fileURLToPath(url), 'utf-8');
   },
+  evaluateCSS(_dataValue: string|null, _customExpr: string): string |
+      null {
+        return null;
+      },
+  removeCSSEvaluationElement(): void{},
 };

package/front_end/core/sdk/AnimationModel.ts

@@ -7,6 +7,16 @@ import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import * as Protocol from '../../generated/protocol.js';
 
 import {DeferredDOMNode, type DOMNode} from './DOMModel.js';
+import {
+  horizontalScrollRangeInPage,
+  removeScrollListenerInPage,
+  scrollLeftInPage,
+  scrollListenerInPage,
+  scrollTopInPage,
+  setScrollLeftInPage,
+  setScrollTopInPage,
+  verticalScrollRangeInPage,
+} from './PageFunctions.js';
 import {RemoteObject} from './RemoteObject.js';
 import {Events as ResourceTreeModelEvents, ResourceTreeModel} from './ResourceTreeModel.js';
 import {Events as RuntimeModelEvents, type EventTypes as RuntimeModelEventTypes, RuntimeModel} from './RuntimeModel.js';
@@ -127,25 +137,6 @@ export class AnimationDOMNode {
     ].map(arg => RemoteObject.toCallArgument(arg)));
     object.release();
     return id;
-
-    function scrollListenerInPage(
-        this: HTMLElement|Document, id: number, reportScrollPositionBindingName: string,
-        scrollListenerNameInPage: string): void {
-      if ('scrollingElement' in this && !this.scrollingElement) {
-        return;
-      }
-
-      const scrollingElement = ('scrollingElement' in this ? this.scrollingElement : this) as HTMLElement;
-      // @ts-expect-error We're setting a custom field on `Element` or `Document` for retaining the function on the page.
-      this[scrollListenerNameInPage] = () => {
-        // @ts-expect-error `reportScrollPosition` binding is injected to the page before calling the function.
-        globalThis[reportScrollPositionBindingName](
-            JSON.stringify({scrollTop: scrollingElement.scrollTop, scrollLeft: scrollingElement.scrollLeft, id}));
-      };
-
-      // @ts-expect-error We've already defined the function used below.
-      this.addEventListener('scroll', this[scrollListenerNameInPage], true);
-    }
   }
 
   async removeScrollEventListener(id: number): Promise<void> {
@@ -154,8 +145,8 @@ export class AnimationDOMNode {
       return;
     }
 
-    await object.callFunction(
-        removeScrollListenerInPage, [getScrollListenerNameInPage(id)].map(arg => RemoteObject.toCallArgument(arg)));
+    await object.callFunction(removeScrollListenerInPage,
+                              [getScrollListenerNameInPage(id)].map(arg => RemoteObject.toCallArgument(arg)));
     object.release();
 
     this.#scrollListenersById.delete(id);
@@ -164,107 +155,30 @@ export class AnimationDOMNode {
     if (this.#scrollListenersById.size === 0) {
       await this.#removeReportScrollPositionBinding();
     }
-
-    function removeScrollListenerInPage(this: HTMLElement|Document, scrollListenerNameInPage: string): void {
-      // @ts-expect-error We've already set this custom field while adding scroll listener.
-      this.removeEventListener('scroll', this[scrollListenerNameInPage]);
-      // @ts-expect-error We've already set this custom field while adding scroll listener.
-      delete this[scrollListenerNameInPage];
-    }
   }
 
   async scrollTop(): Promise<number|null> {
     return await this.#domNode.callFunction(scrollTopInPage).then(res => res?.value ?? null);
-
-    function scrollTopInPage(this: Element|Document): number {
-      if ('scrollingElement' in this) {
-        if (!this.scrollingElement) {
-          return 0;
-        }
-
-        return this.scrollingElement.scrollTop;
-      }
-      return this.scrollTop;
-    }
   }
 
   async scrollLeft(): Promise<number|null> {
     return await this.#domNode.callFunction(scrollLeftInPage).then(res => res?.value ?? null);
-
-    function scrollLeftInPage(this: Element|Document): number {
-      if ('scrollingElement' in this) {
-        if (!this.scrollingElement) {
-          return 0;
-        }
-
-        return this.scrollingElement.scrollLeft;
-      }
-      return this.scrollLeft;
-    }
   }
 
   async setScrollTop(offset: number): Promise<void> {
     await this.#domNode.callFunction(setScrollTopInPage, [offset]);
-
-    function setScrollTopInPage(this: Element|Document, offsetInPage: number): void {
-      if ('scrollingElement' in this) {
-        if (!this.scrollingElement) {
-          return;
-        }
-
-        this.scrollingElement.scrollTop = offsetInPage;
-      } else {
-        this.scrollTop = offsetInPage;
-      }
-    }
   }
 
   async setScrollLeft(offset: number): Promise<void> {
     await this.#domNode.callFunction(setScrollLeftInPage, [offset]);
-
-    function setScrollLeftInPage(this: Element|Document, offsetInPage: number): void {
-      if ('scrollingElement' in this) {
-        if (!this.scrollingElement) {
-          return;
-        }
-
-        this.scrollingElement.scrollLeft = offsetInPage;
-      } else {
-        this.scrollLeft = offsetInPage;
-      }
-    }
   }
 
   async verticalScrollRange(): Promise<number|null> {
     return await this.#domNode.callFunction(verticalScrollRangeInPage).then(res => res?.value ?? null);
-
-    function verticalScrollRangeInPage(this: Element|Document): number {
-      if ('scrollingElement' in this) {
-        if (!this.scrollingElement) {
-          return 0;
-        }
-
-        return this.scrollingElement.scrollHeight - this.scrollingElement.clientHeight;
-      }
-
-      return this.scrollHeight - this.clientHeight;
-    }
   }
 
   async horizontalScrollRange(): Promise<number|null> {
     return await this.#domNode.callFunction(horizontalScrollRangeInPage).then(res => res?.value ?? null);
-
-    function horizontalScrollRangeInPage(this: Element|Document): number {
-      if ('scrollingElement' in this) {
-        if (!this.scrollingElement) {
-          return 0;
-        }
-
-        return this.scrollingElement.scrollWidth - this.scrollingElement.clientWidth;
-      }
-
-      return this.scrollWidth - this.clientWidth;
-    }
   }
 }
 

package/front_end/core/sdk/CSSModel.ts

@@ -27,6 +27,7 @@ import {
 } from './ResourceTreeModel.js';
 import {SDKModel} from './SDKModel.js';
 import {cssSourceMapsEnabledSettingDescriptor} from './SDKSettings.js';
+import {SourceMapProvenance} from './SourceMap.js';
 import {SourceMapManager} from './SourceMapManager.js';
 import {Capability, type Target} from './Target.js';
 
@@ -784,7 +785,8 @@ export class CSSModel extends SDKModel<EventTypes> {
       }
       styleSheetIds.add(styleSheetHeader.id);
     }
-    this.#sourceMapManager.attachSourceMap(styleSheetHeader, styleSheetHeader.sourceURL, styleSheetHeader.sourceMapURL);
+    this.#sourceMapManager.attachSourceMap(styleSheetHeader, styleSheetHeader.sourceURL, styleSheetHeader.sourceMapURL,
+                                           SourceMapProvenance.CDP);
     this.dispatchEventToListeners(Events.StyleSheetAdded, styleSheetHeader);
   }
 
@@ -846,7 +848,7 @@ export class CSSModel extends SDKModel<EventTypes> {
 
     this.#sourceMapManager.detachSourceMap(header);
     header.setSourceMapURL(sourceMapURL);
-    this.#sourceMapManager.attachSourceMap(header, header.sourceURL, header.sourceMapURL);
+    this.#sourceMapManager.attachSourceMap(header, header.sourceURL, header.sourceMapURL, SourceMapProvenance.CDP);
     if (sourceMapURL === null) {
       return 'Error in CSS.setStyleSheetText';
     }

package/front_end/core/sdk/CSSPropertyParser.ts

@@ -497,8 +497,10 @@ export class ComputedText {
  * ignored for the spacing requirement.
  **/
 export function requiresSpace(a: string, b: string): boolean;
-export function requiresSpace(a: Node[], b: Node[]): boolean;
-export function requiresSpace(a: Node[]|string|undefined, b: Node[]|string|undefined): boolean {
+export function requiresSpace(a: Array<{textContent?: string | null}>,
+                              b: Array<{textContent?: string | null}>): boolean;
+export function requiresSpace(a: Array<{textContent?: string | null}>|string|undefined,
+                              b: Array<{textContent?: string | null}>|string|undefined): boolean {
   const tail = Array.isArray(a) ? a.findLast(node => node.textContent)?.textContent : a;
   const head = Array.isArray(b) ? b.find(node => node.textContent)?.textContent : b;
   const trailingChar = tail ? tail[tail.length - 1] : '';
@@ -510,8 +512,6 @@ export function requiresSpace(a: Node[]|string|undefined, b: Node[]|string|undef
       !noSpaceBefore.includes(leadingChar);
 }
 
-export const CSSControlMap: MapConstructor = Map;
-export type CSSControlMap = Map<string, HTMLElement[]>;
 export namespace ASTUtils {
   export function siblings(node: CodeMirror.SyntaxNode|null): CodeMirror.SyntaxNode[] {
     const result = [];

package/front_end/core/sdk/CSSPropertyParserMatchers.ts

@@ -1,10 +1,9 @@
 // Copyright 2023 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
 
 import * as Common from '../../core/common/common.js';
-import type * as Platform from '../../core/platform/platform.js';
+import * as Platform from '../../core/platform/platform.js';
 import type * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 
 import type {CSSMatchedStyles, CSSValueSource, CSSVariableValue} from './CSSMatchedStyles.js';
@@ -212,33 +211,6 @@ export class AttributeMatch extends BaseVariableMatch {
   }
 }
 
-let cssEvaluationElement: HTMLElement|null = null;
-function getCssEvaluationElement(): HTMLElement {
-  const id = 'css-evaluation-element';
-  if (!cssEvaluationElement) {
-    cssEvaluationElement = document.getElementById(id);
-    if (!cssEvaluationElement) {
-      cssEvaluationElement = document.createElement('div');
-      cssEvaluationElement.setAttribute('id', id);
-      cssEvaluationElement.setAttribute('style', 'hidden: true; --evaluation: attr(data-custom-expr type(*))');
-      document.body.appendChild(cssEvaluationElement);
-    }
-  }
-  return cssEvaluationElement;
-}
-
-/**
- * If a test calls localEvalCSS, an element is created on demand for this
- * purpose. This element is not removed from the DOM and will leak between tests
- * if not removed.
- */
-export function removeCSSEvaluationElement(): void {
-  if (cssEvaluationElement) {
-    document.body.removeChild(cssEvaluationElement);
-    cssEvaluationElement = null;
-  }
-}
-
 /**
  * These functions use an element in the frontend to evaluate CSS. The advantage
  * of this is that it is synchronous and doesn't require a CDP method. The
@@ -249,10 +221,7 @@ export function removeCSSEvaluationElement(): void {
  * substitutions (but not for actual evaluation) and for applying units.
  **/
 export function localEvalCSS(value: string, type: string): string|null {
-  const element = getCssEvaluationElement();
-  element.setAttribute('data-value', value);
-  element.setAttribute('data-custom-expr', `attr(data-value ${type})`);
-  return element.computedStyleMap().get('--evaluation')?.toString() ?? null;
+  return Platform.HostRuntime.HOST_RUNTIME.evaluateCSS(value, `attr(data-value ${type})`);
 }
 
 /**
@@ -261,15 +230,11 @@ export function localEvalCSS(value: string, type: string): string|null {
  * raw string, returning '' if the attribute is not set.
  **/
 export function isValidCSSType(type: string): boolean {
-  const element = getCssEvaluationElement();
-  element.setAttribute('data-custom-expr', `attr(data-nonexistent ${type}, "good")`);
-  return '"good"' === (element.computedStyleMap().get('--evaluation')?.toString() ?? null);
+  return '"good"' === Platform.HostRuntime.HOST_RUNTIME.evaluateCSS(null, `attr(data-nonexistent ${type}, "good")`);
 }
 
 export function defaultValueForCSSType(type: string|null): string|null {
-  const element = getCssEvaluationElement();
-  element.setAttribute('data-custom-expr', `attr(data-nonexistent ${type ?? ''})`);
-  return element.computedStyleMap().get('--evaluation')?.toString() ?? null;
+  return Platform.HostRuntime.HOST_RUNTIME.evaluateCSS(null, `attr(data-nonexistent ${type ?? ''})`);
 }
 
 export const RAW_STRING_TYPE = 'raw-string';
@@ -371,11 +336,6 @@ export class TextMatch implements Match {
       this.computedText = () => '';
     }
   }
-  render(): Node[] {
-    const span = document.createElement('span');
-    span.appendChild(document.createTextNode(this.text));
-    return [span];
-  }
 }
 
 const TextMatcherBase: MatcherClass<TextMatch> = matcherBase(TextMatch);

package/front_end/core/sdk/Connections.ts

@@ -16,6 +16,11 @@ const UIStrings = {
    * @description Text on the remote debugging window to indicate the connection is lost.
    */
   websocketDisconnected: 'WebSocket disconnected',
+  /**
+   * @description Text in the remote debugging terminated dialog when the WebSocket connection fails, instructing the user to check the --remote-allow-origins flag on the Chrome instance.
+   */
+  websocketConnectionFailed:
+      'WebSocket disconnected. Make sure `--remote-allow-origins` on the Chrome instance allows the current origin.',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('core/sdk/Connections.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -114,7 +119,7 @@ export class WebSocketTransport implements ProtocolClient.ConnectionTransport.Co
 
   private onError(): void {
     if (this.#onWebSocketDisconnect) {
-      this.#onWebSocketDisconnect.call(null, i18nString(UIStrings.websocketDisconnected));
+      this.#onWebSocketDisconnect.call(null, i18nString(UIStrings.websocketConnectionFailed));
     }
     if (this.#onDisconnect) {
       // This is called if error occurred while connecting.

package/front_end/core/sdk/ConsoleModel.ts

@@ -18,6 +18,7 @@ import {
   LOGPOINT_SOURCE_URL,
 } from './DebuggerModel.js';
 import {LogModel} from './LogModel.js';
+import {saveVariable} from './PageFunctions.js';
 import {RemoteObject} from './RemoteObject.js';
 import {
   Events as ResourceTreeModelEvents,
@@ -458,18 +459,6 @@ export class ConsoleModel extends SDKModel<EventTypes> {
     if (callFunctionResult.object) {
       callFunctionResult.object.release();
     }
-
-    function saveVariable(this: Window, value: Protocol.Runtime.CallArgument): string {
-      const prefix = 'temp';
-      let index = 1;
-      while ((prefix + index) in this) {
-        ++index;
-      }
-      const name = prefix + index;
-      // @ts-expect-error Assignment to global object
-      this[name] = value;
-      return name;
-    }
   }
 }