chrome-devtools-frontend 1.0.1698733 → 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/front_end/core/sdk/DOMModel.ts

@@ -1319,12 +1319,10 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
       return;
     }
 
-    const result = await node.callFunction(scrollIntoViewInPage);
-    if (!result) {
-      return;
-    }
-
+    // Highlight synchronously before scrolling to avoid out-of-order highlights
+    // if asynchronous scroll calls resolve late during rapid navigation.
     node.highlightForTwoSeconds();
+    await node.callFunction(scrollIntoViewInPage);
   }
 
   async focus(): Promise<void> {

package/front_end/core/sdk/NetworkManager.ts

@@ -93,14 +93,14 @@ const UIStrings = {
    * @example {GET} PH2
    * @example {https://example.com} PH3
    */
-  sFailedLoadingSS: '{PH1} failed loading: {PH2} "{PH3}".',
+  sFailedLoadingSS: '{PH1} failed loading: {PH2} "{PH3}"',
   /**
    * @description Console message when a request finished loading.
    * @example {XHR} PH1
    * @example {GET} PH2
    * @example {https://example.com} PH3
    */
-  sFinishedLoadingSS: '{PH1} finished loading: {PH2} "{PH3}".',
+  sFinishedLoadingSS: '{PH1} finished loading: {PH2} "{PH3}"',
   /**
    * @description One of direct socket connection statuses.
    */

package/front_end/core/sdk/OverlayModel.ts

@@ -342,13 +342,13 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
       // overlay, so that it is not cleared by the highlight
       return;
     }
-      clearTimeout(this.#hideHighlightTimeout);
-      this.#hideHighlightTimeout = undefined;
+    clearTimeout(this.#hideHighlightTimeout);
+    this.#hideHighlightTimeout = undefined;
 
-      const highlightConfig = this.buildHighlightConfig(mode);
-      if (typeof showInfo !== 'undefined') {
-        highlightConfig.showInfo = showInfo;
-      }
+    const highlightConfig = this.buildHighlightConfig(mode);
+    if (typeof showInfo !== 'undefined') {
+      highlightConfig.showInfo = showInfo;
+    }
     this.#highlighter.highlightInOverlay(data, highlightConfig);
   }
 
@@ -496,12 +496,11 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
   }
 
   private delayedHideHighlight(delay: number): void {
-    if (this.#hideHighlightTimeout === undefined) {
-      this.#hideHighlightTimeout = globalThis.setTimeout(
-          () => this.highlightInOverlay({clear: true}),
-          delay,
-      );
-    }
+    clearTimeout(this.#hideHighlightTimeout);
+    this.#hideHighlightTimeout = globalThis.setTimeout(
+        () => this.highlightInOverlay({clear: true}),
+        delay,
+    );
   }
 
   highlightFrame(frameId: Protocol.Page.FrameId): void {

package/front_end/core/sdk/SourceMapScopeChainEntry.ts

@@ -46,6 +46,7 @@ export class SourceMapScopeChainEntry implements ScopeChainEntry {
   readonly #isInnerMostFunction: boolean;
   readonly #returnValue?: RemoteObject;
   readonly #scopeNumber?: number;
+  #object?: SourceMapScopeRemoteObject;
 
   /**
    * @param isInnerMostFunction If `scope` is the innermost 'function' scope. Only used for labeling as we name the
@@ -63,6 +64,10 @@ export class SourceMapScopeChainEntry implements ScopeChainEntry {
     this.#scopeNumber = scopeNumber;
   }
 
+  originalScope(): ScopesCodec.OriginalScope {
+    return this.#scope;
+  }
+
   extraProperties(): RemoteObjectProperty[] {
     const extraProperties = [];
     if (this.#isInnerMostFunction && this.#callFrame.exception) {
@@ -118,7 +123,10 @@ export class SourceMapScopeChainEntry implements ScopeChainEntry {
   }
 
   object(): RemoteObject {
-    return new SourceMapScopeRemoteObject(this.#callFrame, this.#scope, this.#range, this.#scopeNumber);
+    if (!this.#object) {
+      this.#object = new SourceMapScopeRemoteObject(this.#callFrame, this.#scope, this.#range, this.#scopeNumber);
+    }
+    return this.#object;
   }
 
   description(): string {
@@ -135,6 +143,8 @@ class SourceMapScopeRemoteObject extends RemoteObjectImpl {
   readonly #scope: ScopesCodec.OriginalScope;
   readonly #range?: ScopesCodec.GeneratedRange;
   readonly #scopeNumber?: number;
+  #propertiesPromise?: Promise<GetPropertiesResult>;
+  #cachedWithPreview = false;
 
   constructor(callFrame: CallFrame, scope: ScopesCodec.OriginalScope, range: ScopesCodec.GeneratedRange|undefined,
               scopeNumber: number|undefined) {
@@ -153,60 +163,102 @@ class SourceMapScopeRemoteObject extends RemoteObjectImpl {
     if (accessorPropertiesOnly) {
       return {properties: [], internalProperties: []};
     }
+    if (!this.#propertiesPromise || (generatePreview && !this.#cachedWithPreview)) {
+      this.#cachedWithPreview = generatePreview;
+      this.#propertiesPromise = this.#evaluateProperties(generatePreview);
+    }
+    return await this.#propertiesPromise;
+  }
 
+  async #evaluateProperties(generatePreview: boolean): Promise<GetPropertiesResult> {
     if (this.#scope.variables.length === 0) {
       return {properties: [], internalProperties: []};
     }
-
     const expressions = this.#scope.variables.map((_, index) => this.#findExpression(index));
+    const values = await this.#evaluateAsBatch(expressions, generatePreview) ??
+        await this.#evaluateSeparately(expressions, generatePreview);
 
-    if (expressions.every(expr => expr === null)) {
-      const properties = this.#scope.variables.map(v => SourceMapScopeRemoteObject.#unavailableProperty(v));
-      return {properties, internalProperties: []};
-    }
+    const properties = this.#scope.variables.map((variable, index) => {
+      const value = values[index];
+      if (value === null) {
+        return SourceMapScopeRemoteObject.#unavailableProperty(variable);
+      }
+      return new RemoteObjectProperty(variable, value, /* enumerable */ false, /* writable */ false, /* isOwn */ true,
+                                      /* wasThrown */ false);
+    });
+
+    return {properties, internalProperties: []};
+  }
 
-    const spreadEntries: string[] = [];
-    for (const [index, expr] of expressions.entries()) {
-      if (expr !== null) {
-        spreadEntries.push(`...(() => { try { return {${index}: eval(${JSON.stringify(expr)})}; } catch {} })()`);
+  /**
+   * Evaluates all binding expressions of this scope with a single `evaluateOnCallFrame` call.
+   *
+   * We build an object literal that spreads in one `{index: value}` object per binding, each produced by
+   * its own arrow function wrapped in `try`/`catch`. A binding that throws contributes nothing, which is
+   * how we tell it apart from one that legitimately evaluates to `undefined`, and it doesn't take the
+   * rest of the scope down with it.
+   *
+   * The expressions are inlined rather than passed to `eval`. `eval` in the evaluated code is the page's
+   * `eval`, which a `script-src` CSP without `'unsafe-eval'` blocks. `Runtime.evaluate` can opt out of
+   * that via `allowUnsafeEvalBlockedByCSP`, but `Debugger.evaluateOnCallFrame` has no such option.
+   * Inlining also means we don't introduce bindings of our own that could shadow the names a binding
+   * expression refers to, and arrow functions keep `this` pointing at the paused frame's receiver.
+   *
+   * @returns The value for each expression, or null if the batch failed as a whole. The latter happens
+   *          when a binding expression doesn't parse, since that takes out the entire object literal.
+   */
+  async #evaluateAsBatch(expressions: Array<string|null>,
+                         generatePreview: boolean): Promise<Array<RemoteObject|null>|null> {
+    const spreads: string[] = [];
+    for (const [index, expression] of expressions.entries()) {
+      if (expression !== null) {
+        spreads.push(`...(() => { try { return {${index}: (${expression})}; } catch {} })()`);
       }
     }
+    if (spreads.length === 0) {
+      return expressions.map(() => null);
+    }
 
-    const batchExpression = `({ __proto__: null, ${spreadEntries.join(', ')} })`;
     const result = await this.#callFrame.evaluate({
-      expression: batchExpression,
+      expression: `({__proto__: null, ${spreads.join(', ')}})`,
+      // The wrapper object is a throw-away. We only need previews for the values inside of it.
       generatePreview: false,
       scopeNumber: this.#scopeNumber,
     });
-
     if ('error' in result || result.exceptionDetails || !result.object) {
-      const properties = this.#scope.variables.map(v => SourceMapScopeRemoteObject.#unavailableProperty(v));
-      return {properties, internalProperties: []};
+      return null;
     }
 
-    const {properties: objectProperties} = await result.object.getOwnProperties(generatePreview);
+    const {properties} = await result.object.getOwnProperties(generatePreview);
     result.object.release();
 
-    const propertyMap = new Map<string, RemoteObjectProperty>();
-    if (objectProperties) {
-      for (const prop of objectProperties) {
-        propertyMap.set(prop.name, prop);
+    const valueByIndex = new Map(properties?.map(({name, value}) => [name, value] as const));
+    return expressions.map((_, index) => valueByIndex.get(String(index)) ?? null);
+  }
+
+  /**
+   * Fallback for when {@link #evaluateAsBatch} fails as a whole, so that a single binding expression
+   * that doesn't parse only costs us that one variable.
+   */
+  async #evaluateSeparately(expressions: Array<string|null>,
+                            generatePreview: boolean): Promise<Array<RemoteObject|null>> {
+    const values: Array<RemoteObject|null> = [];
+    for (const expression of expressions) {
+      if (expression === null) {
+        values.push(null);
+        continue;
       }
-    }
 
-    const properties: RemoteObjectProperty[] = [];
-    for (const [index, variable] of this.#scope.variables.entries()) {
-      const prop = propertyMap.get(String(index));
-      if (!prop || !prop.value) {
-        properties.push(SourceMapScopeRemoteObject.#unavailableProperty(variable));
+      const result = await this.#callFrame.evaluate({expression, generatePreview, scopeNumber: this.#scopeNumber});
+      if ('error' in result || result.exceptionDetails) {
+        // TODO(crbug.com/40277685): Make these errors user-visible to aid tooling developers.
+        //         E.g. show the error on hover or expose it in the developer resources panel.
+        values.push(null);
       } else {
-        properties.push(new RemoteObjectProperty(variable, prop.value, /* enumerable */ false, /* writable */ false,
-                                                 /* isOwn */ true,
-                                                 /* wasThrown */ false));
+        values.push(result.object);
       }
     }
-
-    return {properties, internalProperties: []};
+    return values;
   }
 
   /** @returns null if the variable is unavailable at the current paused location */
@@ -219,7 +271,7 @@ class SourceMapScopeRemoteObject extends RemoteObjectImpl {
     if (typeof expressionOrSubRanges === 'string') {
       return expressionOrSubRanges;
     }
-    if (expressionOrSubRanges === null || expressionOrSubRanges === undefined) {
+    if (!expressionOrSubRanges) {
       return null;
     }
 

package/front_end/models/emulation/DeviceModeModel.ts

@@ -70,7 +70,7 @@ const UIStrings = {
    * @description Error message shown on the Devices settings tab when the user enters an invalid
    * device pixel ratio for a custom device.
    */
-  devicePixelRatioMustBeANumberOr: 'Device pixel ratio must be a number or blank.',
+  devicePixelRatioMustBeANumberOr: 'Device pixel ratio must be a number or blank',
   /**
    * @description Error message shown on the Devices settings tab when the user enters a device
    * pixel ratio for a custom device that is too large.

package/front_end/models/issues_manager/CookieIssue.ts

@@ -403,11 +403,6 @@ const excludeDomainNonAscii: LazyMarkdownIssueDescription = {
   links: [],
 };
 
-const excludeBlockedWithinRelatedWebsiteSet: LazyMarkdownIssueDescription = {
-  file: 'cookieExcludeBlockedWithinRelatedWebsiteSet.md',
-  links: [],
-};
-
 const cookieCrossSiteRedirectDowngrade: LazyMarkdownIssueDescription = {
   file: 'cookieCrossSiteRedirectDowngrade.md',
   links: [{
@@ -451,14 +446,6 @@ const issueDescriptions = new Map<string, LazyMarkdownIssueDescription>([
   ['CookieIssue::WarnDomainNonASCII::SetCookie', warnDomainNonAscii],
   ['CookieIssue::ExcludeDomainNonASCII::ReadCookie', excludeDomainNonAscii],
   ['CookieIssue::ExcludeDomainNonASCII::SetCookie', excludeDomainNonAscii],
-  [
-    'CookieIssue::ExcludeThirdPartyCookieBlockedInRelatedWebsiteSet::ReadCookie',
-    excludeBlockedWithinRelatedWebsiteSet,
-  ],
-  [
-    'CookieIssue::ExcludeThirdPartyCookieBlockedInRelatedWebsiteSet::SetCookie',
-    excludeBlockedWithinRelatedWebsiteSet,
-  ],
   ['CookieIssue::WarnThirdPartyPhaseout::ReadCookie', placeholderDescriptionForInvisibleIssues],
   ['CookieIssue::WarnThirdPartyPhaseout::SetCookie', placeholderDescriptionForInvisibleIssues],
   ['CookieIssue::WarnDeprecationTrialMetadata::ReadCookie', placeholderDescriptionForInvisibleIssues],

package/front_end/models/source_map_scopes/NamesResolver.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as TextUtils from '../../core/text_utils/text_utils.js';
 import * as Protocol from '../../generated/protocol.js';
@@ -380,9 +381,16 @@ export const resolveScopeChain =
             return scopeChain;
           }
 
-          // TODO(crbug.com/465968290): Re-enable creating the scope chain from the source map once:
-          //    1) We have a flag indicating whether the source map contained variable/binding information.
-          //    2) We have a chrome feature flag.
+          if (Root.Runtime.hostConfig.devToolsSourceMapScopesInSourcesPanel?.enabled) {
+            let sourceMap = callFrame.script.sourceMap();
+            if (!sourceMap && callFrame.debuggerModel?.sourceMapManager) {
+              sourceMap = await callFrame.debuggerModel.sourceMapManager().sourceMapForClientPromise(callFrame.script);
+            }
+            const mappedScopeChain = sourceMap?.resolveScopeChain(callFrame);
+            if (mappedScopeChain) {
+              return mappedScopeChain;
+            }
+          }
 
           if (callFrame.script.isWasm()) {
             return callFrame.scopeChain().filter(scope => !scope.empty());

package/front_end/models/source_map_scopes/ScopeChainModel.ts

@@ -35,8 +35,10 @@ export class ScopeChainModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.#debuggerWorkspaceBinding = debuggerWorkspaceBinding;
     this.#callFrame.debuggerModel.addEventListener(
         SDK.DebuggerModel.Events.DebugInfoAttached, this.#debugInfoAttached, this);
-    this.#callFrame.debuggerModel.sourceMapManager().addEventListener(
-        SDK.SourceMapManager.Events.SourceMapAttached, this.#sourceMapAttached, this);
+    this.#callFrame.debuggerModel.sourceMapManager().addEventListener(SDK.SourceMapManager.Events.SourceMapAttached,
+                                                                      this.#sourceMapChanged, this);
+    this.#callFrame.debuggerModel.sourceMapManager().addEventListener(SDK.SourceMapManager.Events.SourceMapDetached,
+                                                                      this.#sourceMapChanged, this);
 
     void this.#throttler.schedule(this.#boundUpdate);
   }
@@ -44,8 +46,10 @@ export class ScopeChainModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   dispose(): void {
     this.#callFrame.debuggerModel.removeEventListener(
         SDK.DebuggerModel.Events.DebugInfoAttached, this.#debugInfoAttached, this);
-    this.#callFrame.debuggerModel.sourceMapManager().removeEventListener(
-        SDK.SourceMapManager.Events.SourceMapAttached, this.#sourceMapAttached, this);
+    this.#callFrame.debuggerModel.sourceMapManager().removeEventListener(SDK.SourceMapManager.Events.SourceMapAttached,
+                                                                         this.#sourceMapChanged, this);
+    this.#callFrame.debuggerModel.sourceMapManager().removeEventListener(SDK.SourceMapManager.Events.SourceMapDetached,
+                                                                         this.#sourceMapChanged, this);
     this.listeners?.clear();
   }
 
@@ -60,8 +64,8 @@ export class ScopeChainModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     }
   }
 
-  #sourceMapAttached(event: Common.EventTarget
-                         .EventTargetEvent<{client: SDK.Script.Script, sourceMap: SDK.SourceMap.SourceMap}>): void {
+  #sourceMapChanged(event: Common.EventTarget
+                        .EventTargetEvent<{client: SDK.Script.Script, sourceMap: SDK.SourceMap.SourceMap}>): void {
     if (event.data.client === this.#callFrame.script) {
       void this.#throttler.schedule(this.#boundUpdate);
     }