chrome-devtools-frontend 1.0.1709383 → 1.0.1711155

package/AUTHORS

@@ -60,6 +60,7 @@ Jan Keitel <jan.keitel@gmail.com>
 Jeffrey Chen <jeffreyca16@gmail.com>
 Jerome Vouillon <jerome.vouillon@gmail.com>
 Jesper van den Ende <jespertheend@gmail.com>
+Jihyeon Lee <wlgus7464@gmail.com>
 Jithil p Ponnan <jithil.p@gmail.com>
 Joseph P <thepigrammer@gmail.com>
 Juba Borgohain <chromiumjuba@gmail.com>

package/front_end/core/common/ParsedURL.ts

@@ -57,26 +57,34 @@ const WEB_SAFE_SCHEMES = new Set([
   'data:',
 ]);
 
-/**
- * Returns true if the URL uses an unprivileged web-safe scheme (or is a `blob:` URL wrapping one).
- */
-export function hasWebSafeScheme(url: Platform.DevToolsPath.UrlString|URL|string): boolean {
+function parseUnwrappedURL(url: Platform.DevToolsPath.UrlString|URL|string): URL|null {
   try {
-    const parsed = new URL(url);
-    if (parsed.protocol === 'blob:') {
-      return hasWebSafeScheme(parsed.pathname);
+    let parsed = new URL(url);
+    // Iteratively unwrap nested `blob:` and `filesystem:` URLs (e.g. `blob:filesystem:https://...`)
+    // to inspect the underlying origin's protocol.
+    while (parsed.protocol === 'blob:' || parsed.protocol === 'filesystem:') {
+      parsed = new URL(parsed.href.slice(parsed.protocol.length));
     }
-    return WEB_SAFE_SCHEMES.has(parsed.protocol);
+    return parsed;
   } catch {
-    return false;
+    return null;
   }
 }
 
+/**
+ * Returns true if the URL uses an unprivileged web-safe scheme (or is a `blob:`/`filesystem:` URL wrapping one).
+ */
+export function hasWebSafeScheme(url: Platform.DevToolsPath.UrlString|URL|string): boolean {
+  const parsed = parseUnwrappedURL(url);
+  return parsed !== null && WEB_SAFE_SCHEMES.has(parsed.protocol);
+}
+
 /**
  * Privileged browser and local schemes that must not be opened via external/new-tab links by default.
  */
 const PRIVILEGED_SCHEMES = new Set([
   'chrome:',
+  'chrome-error:',
   'chrome-extension:',
   'chrome-search:',
   'chrome-untrusted:',
@@ -86,18 +94,11 @@ const PRIVILEGED_SCHEMES = new Set([
 ]);
 
 /**
- * Returns true if the URL uses a privileged scheme (or is a `blob:` URL wrapping one).
+ * Returns true if the URL uses a privileged scheme (or is a `blob:`/`filesystem:` URL wrapping one).
  */
 export function isPrivilegedScheme(url: Platform.DevToolsPath.UrlString|URL|string): boolean {
-  try {
-    const parsed = new URL(url);
-    if (parsed.protocol === 'blob:') {
-      return isPrivilegedScheme(parsed.pathname);
-    }
-    return PRIVILEGED_SCHEMES.has(parsed.protocol);
-  } catch {
-    return false;
-  }
+  const parsed = parseUnwrappedURL(url);
+  return parsed !== null && PRIVILEGED_SCHEMES.has(parsed.protocol);
 }
 
 /**

package/front_end/core/sdk/DOMModel.ts

@@ -1100,8 +1100,9 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
    */
   async toggleHideElement(): Promise<void> {
     let pseudoElementName = this.pseudoType() ? this.nodeName() : null;
-    if (pseudoElementName && this.pseudoIdentifier()) {
-      pseudoElementName += `(${this.pseudoIdentifier()})`;
+    const pseudoIdentifier = this.pseudoIdentifier();
+    if (pseudoElementName && pseudoIdentifier) {
+      pseudoElementName += `(${cssEscape(pseudoIdentifier)})`;
     }
 
     let effectiveNode: DOMNode|null = this;
@@ -1358,8 +1359,9 @@ export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventType
       const classList = classes.trim().split(/\s+/g);
       return (lowerCaseName === 'div' ? '' : lowerCaseName) + '.' + classList.map(cls => cssEscape(cls)).join('.');
     }
-    if (this.pseudoIdentifier()) {
-      return `${lowerCaseName}(${this.pseudoIdentifier()})`;
+    const pseudoIdentifier = this.pseudoIdentifier();
+    if (pseudoIdentifier) {
+      return `${lowerCaseName}(${cssEscape(pseudoIdentifier)})`;
     }
     return lowerCaseName;
   }

package/front_end/core/sdk/PageFunctions.ts

@@ -109,7 +109,7 @@ export function toggleClassAndInjectStyleRule(this: Element, pseudoElementName:
   const classNamePrefix = '__web-inspector-hide';
   const classNameSuffix = '-shortcut__';
   const styleTagId = '__web-inspector-hide-shortcut-style__';
-  const pseudoElementNameEscaped = pseudoElementName ? pseudoElementName.replace(/[\(\)\:]/g, '_') : '';
+  const pseudoElementNameEscaped = pseudoElementName ? pseudoElementName.replace(/[^a-zA-Z0-9_-]/g, '_') : '';
   const className = classNamePrefix + pseudoElementNameEscaped + classNameSuffix;
   this.classList.toggle(className, hidden);
 

package/front_end/generated/InspectorBackendCommands.ts

@@ -257,6 +257,7 @@ inspectorBackend.registerCommand("CSS.disable", [], [], "Disables the CSS agent
 inspectorBackend.registerCommand("CSS.enable", [], [], "Enables the CSS agent for the given page. Clients should not assume that the CSS agent has been enabled until the result of this command is received.");
 inspectorBackend.registerCommand("CSS.forcePseudoState", [{"name": "nodeId", "type": "number", "optional": false, "description": "The element id for which to force the pseudo state.", "typeRef": "DOM.NodeId"}, {"name": "forcedPseudoClasses", "type": "array", "optional": false, "description": "Element pseudo classes to force when computing the element's style.", "typeRef": "string"}], [], "Ensures that the given node will have specified pseudo-classes whenever its style is computed by the browser.");
 inspectorBackend.registerCommand("CSS.forceStartingStyle", [{"name": "nodeId", "type": "number", "optional": false, "description": "The element id for which to force the starting-style state.", "typeRef": "DOM.NodeId"}, {"name": "forced", "type": "boolean", "optional": false, "description": "Boolean indicating if this is on or off.", "typeRef": null}], [], "Ensures that the given node is in its starting-style state.");
+inspectorBackend.registerCommand("CSS.forcePositionTryOption", [{"name": "nodeId", "type": "number", "optional": false, "description": "The element id for which to force the position-try option.", "typeRef": "DOM.NodeId"}, {"name": "index", "type": "number", "optional": true, "description": "The 1-based index of the position-try fallback option, 0 for base position (no fallback), or omitted to clear the forced state.", "typeRef": null}], [], "Forces a position-try option for the given node.");
 inspectorBackend.registerCommand("CSS.getBackgroundColors", [{"name": "nodeId", "type": "number", "optional": false, "description": "Id of the node to get background colors for.", "typeRef": "DOM.NodeId"}], ["backgroundColors", "computedFontSize", "computedFontWeight"], "");
 inspectorBackend.registerCommand("CSS.getComputedStyleForNode", [{"name": "nodeId", "type": "number", "optional": false, "description": "", "typeRef": "DOM.NodeId"}], ["computedStyle", "extraFields"], "Returns the computed style for a DOM node identified by `nodeId`.");
 inspectorBackend.registerCommand("CSS.resolveValues", [{"name": "values", "type": "array", "optional": false, "description": "Cascade-dependent keywords (revert/revert-layer) do not work.", "typeRef": "string"}, {"name": "nodeId", "type": "number", "optional": false, "description": "Id of the node in whose context the expression is evaluated", "typeRef": "DOM.NodeId"}, {"name": "propertyName", "type": "string", "optional": true, "description": "Only longhands and custom property names are accepted.", "typeRef": null}, {"name": "pseudoType", "type": "string", "optional": true, "description": "Pseudo element type, only works for pseudo elements that generate elements in the tree, such as ::before and ::after.", "typeRef": "DOM.PseudoType"}, {"name": "pseudoIdentifier", "type": "string", "optional": true, "description": "Pseudo element custom ident.", "typeRef": null}], ["results"], "Resolve the specified values in the context of the provided element. For example, a value of '1em' is evaluated according to the computed 'font-size' of the element and a value 'calc(1px + 2px)' will be resolved to '3px'. If the `propertyName` was specified the `values` are resolved as if they were property's declaration. If a value cannot be parsed according to the provided property syntax, the value is parsed using combined syntax as if null `propertyName` was provided. If the value cannot be resolved even then, return the provided value without any changes. Note: this function currently does not resolve CSS random() function, it returns unmodified random() function parts.`");

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

@@ -1567,6 +1567,13 @@ export namespace ProtocolMapping {
       paramsType: [Protocol.CSS.ForceStartingStyleRequest];
       returnType: void;
     };
+    /**
+     * Forces a position-try option for the given node.
+     */
+    'CSS.forcePositionTryOption': {
+      paramsType: [Protocol.CSS.ForcePositionTryOptionRequest];
+      returnType: void;
+    };
     'CSS.getBackgroundColors': {
       paramsType: [Protocol.CSS.GetBackgroundColorsRequest];
       returnType: Protocol.CSS.GetBackgroundColorsResponse;

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

@@ -796,6 +796,11 @@ declare namespace ProtocolProxyApi {
      */
     invoke_forceStartingStyle(params: Protocol.CSS.ForceStartingStyleRequest): Promise<Protocol.ProtocolResponseWithError>;
 
+    /**
+     * Forces a position-try option for the given node.
+     */
+    invoke_forcePositionTryOption(params: Protocol.CSS.ForcePositionTryOptionRequest): Promise<Protocol.ProtocolResponseWithError>;
+
     invoke_getBackgroundColors(params: Protocol.CSS.GetBackgroundColorsRequest): Promise<Protocol.CSS.GetBackgroundColorsResponse>;
 
     /**

package/front_end/generated/protocol.ts

@@ -4066,6 +4066,18 @@ export namespace CSS {
     forced: boolean;
   }
 
+  export interface ForcePositionTryOptionRequest {
+    /**
+     * The element id for which to force the position-try option.
+     */
+    nodeId: DOM.NodeId;
+    /**
+     * The 1-based index of the position-try fallback option, 0 for base position (no fallback),
+     * or omitted to clear the forced state.
+     */
+    index?: integer;
+  }
+
   export interface GetBackgroundColorsRequest {
     /**
      * Id of the node to get background colors for.

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

@@ -189,7 +189,7 @@ export interface ParsedAnswer {
 
 export type ParsedResponse = ParsedAnswer;
 
-export const MAX_STEPS = 10;
+export const MAX_STEPS = 20;
 
 export interface ConversationSuggestion {
   title: string;
@@ -519,8 +519,6 @@ class CrossOriginError extends Error {
  *
  * TODO: missing a test that action code is yielded before the
  * confirmation dialog.
- * TODO: missing a test for an error if it took
- * more than MAX_STEPS iterations.
  */
 export abstract class AiAgent<T> {
   /**
@@ -994,7 +992,12 @@ export abstract class AiAgent<T> {
           break;
         }
       } else {
-        yield this.#createErrorResponse(i - 1 === MAX_STEPS ? ErrorType.MAX_STEPS : ErrorType.UNKNOWN);
+        yield this.#createErrorResponse(ErrorType.UNKNOWN);
+        break;
+      }
+
+      if (i === MAX_STEPS - 1) {
+        yield this.#createErrorResponse(ErrorType.MAX_STEPS);
         break;
       }
     }

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

@@ -47,6 +47,7 @@ First, examine the provided context, then use the functions to gather additional
 * After applying a fix, please ask the user to confirm if the fix worked or not.
 * ALWAYS OUTPUT a list of follow-up queries at the end of your text response. The format is SUGGESTIONS: ["suggestion1", "suggestion2", "suggestion3"]. Make sure that the array and the \`SUGGESTIONS: \` text is in the same line. You're also capable of executing the fix for the issue user mentioned. Reflect this in your suggestions.
 * Use the precision of Strunk & White, the brevity of Hemingway, and the simple clarity of Vonnegut. Don't add repeated information, and keep the whole answer short.
+* If the target element is in a cross-origin iframe, stop and ask the user to select it in the Elements panel and start a new chat with that context.
 * **CRITICAL** NEVER write full Python programs - you should only write individual statements that invoke a single function from the provided library.
 * **CRITICAL** NEVER output text before a function call. Always do a function call first.
 * **CRITICAL** When answering questions about positioning or layout, ALWAYS inspect \`position\`, \`display\` and all other related properties. You MUST provide a specific list of CSS property names when calling functions to get styles. Do not use generic values like "all" or "*".

package/front_end/models/ai_assistance/contexts/LighthouseContext.snapshot.txt

@@ -34,6 +34,11 @@ Lighthouse Version: 1.0.0
 
 ## Category Scores
 - Accessibility: 50
+
+## Failing audits
+
+### Accessibility (categoryId: "accessibility")
+- Accessibility Audit: 50
 === end content
 
 Title: LighthouseContext with AI V2 architecture enabled returns the report summary as user facing details
@@ -41,7 +46,7 @@ Content:
 [
   {
     "title": "Lighthouse report",
-    "text": "# Lighthouse Report Summary\nURL: https://example.com\nFetch Time: 2026-03-12\nLighthouse Version: 1.0.0\n\n## Category Scores\n- Accessibility: 50"
+    "text": "# Lighthouse Report Summary\nURL: https://example.com\nFetch Time: 2026-03-12\nLighthouse Version: 1.0.0\n\n## Category Scores\n- Accessibility: 50\n\n## Failing audits\n\n### Accessibility (categoryId: \"accessibility\")\n- Accessibility Audit: 50"
   }
 ]
 === end content

package/front_end/models/ai_assistance/contexts/LighthouseContext.ts

@@ -58,8 +58,9 @@ export class LighthouseContext extends ConversationContext<LHModel.ReporterTypes
       this.#cachedPayload =
           '**CRITICAL**: The Lighthouse report failed to record or all category scores are error/unavailable (n/a). This indicates a failed run or missing data.';
     } else if (Root.Runtime.hostConfig.devToolsAiV2Architecture?.enabled) {
-      // AI V2 sends only the summary; the agent fetches category audits on demand via `getLighthouseAudits`.
-      this.#cachedPayload = formatter.summary(this.#lh);
+      // AI V2 sends failing audit titles without their details to keep the prompt small. The agent
+      // uses the category IDs in the list to fetch full details with `getLighthouseAudits`.
+      this.#cachedPayload = `${formatter.summary(this.#lh)}\n\n${formatter.failingAuditsSummary(this.#lh)}`;
     } else {
       // The V1 `AccessibilityAgent` expects the accessibility audits up front. Remove this branch with V1.
       this.#cachedPayload =

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

@@ -133,3 +133,14 @@ The following audits in this category have a score below 90 and may need attenti
       * **Resource Size**: 22.2 kB
       * **Est Savings**: 16.9 kB
 === end content
+
+Title: LighthouseFormatter lists failing audits grouped by category with the category ID
+Content:
+## Failing audits
+
+### Performance (categoryId: "performance")
+- First Audit: 80
+
+### Accessibility (categoryId: "accessibility")
+- No failing audits.
+=== end content

package/front_end/models/ai_assistance/data_formatters/LighthouseFormatter.ts

@@ -36,17 +36,37 @@ export class LighthouseFormatter {
   }
 
   /**
-   * Formats a Lighthouse report for an AI Agent. If categoryId is 'all', includes
-   * the overall summary followed by each category's audits. Otherwise, returns audits
-   * for the specified category.
+   * Returns the title and score of every failing audit (score < 90), grouped by category.
+   * Descriptions and details tables are left out to keep the prompt small. Each category
+   * heading includes its category ID so the agent can request the full audit details.
+   */
+  failingAuditsSummary(report: LHModel.ReporterTypes.ReportJSON): string {
+    const lines: string[] = [];
+    lines.push('## Failing audits');
+    for (const [categoryId, category] of Object.entries(report.categories)) {
+      lines.push('');
+      lines.push(`### ${category.title} (categoryId: "${categoryId}")`);
+      const failingAudits = this.#findFailingAudits(report, category);
+      if (failingAudits.length === 0) {
+        lines.push('- No failing audits.');
+        continue;
+      }
+      for (const audit of failingAudits) {
+        lines.push(`- ${audit.title}: ${this.#formatScore(audit.score)}`);
+      }
+    }
+    return lines.join('\n');
+  }
+
+  /**
+   * Formats a Lighthouse report for an AI Agent. If categoryId is 'all', returns
+   * each category's audits. Otherwise, returns audits for the specified category.
+   * The output does not include the report summary, because the conversation
+   * context already sends it.
    */
   formatReport(report: LHModel.ReporterTypes.ReportJSON, categoryId: LighthouseCategoryArg): string {
     if (categoryId === 'all') {
-      const sections: string[] = [this.summary(report)];
-      for (const category of Object.values(report.categories)) {
-        sections.push(this.audits(report, category));
-      }
-      return sections.join('\n\n');
+      return Object.values(report.categories).map(category => this.audits(report, category)).join('\n\n');
     }
     return this.audits(report, categoryId);
   }
@@ -69,10 +89,7 @@ export class LighthouseFormatter {
     }
     lines.push('');
 
-    const failingAudits = category.auditRefs.filter(ref => {
-      const audit = report.audits[ref.id];
-      return audit && audit.score !== null && audit.score < 0.9;
-    });
+    const failingAudits = this.#findFailingAudits(report, category);
 
     if (failingAudits.length === 0) {
       lines.push('All audits in this category passed (score >= 90).');
@@ -80,13 +97,8 @@ export class LighthouseFormatter {
     }
 
     lines.push('The following audits in this category have a score below 90 and may need attention:');
-    for (const ref of failingAudits) {
-      const audit = report.audits[ref.id];
-      if (!audit) {
-        continue;
-      }
-      const score = audit.score !== null ? Math.round(audit.score * 100) : 'n/a';
-      let line = `- **${audit.title}**: ${score}`;
+    for (const audit of failingAudits) {
+      let line = `- **${audit.title}**: ${this.#formatScore(audit.score)}`;
       if (audit.displayValue) {
         line += ` (${audit.displayValue})`;
       }
@@ -104,6 +116,22 @@ export class LighthouseFormatter {
     return lines.join('\n');
   }
 
+  /**
+   * Returns the audits in a category that scored below 90, in the category's order.
+   * Audits without a score (such as informative or manual audits) cannot fail, so they
+   * are excluded.
+   */
+  #findFailingAudits(report: LHModel.ReporterTypes.ReportJSON, category: LHModel.ReporterTypes.CategoryJSON):
+      Array<LHModel.ReporterTypes.AuditResultJSON&{score: number}> {
+    return category.auditRefs.map(ref => report.audits[ref.id])
+        .filter((audit): audit is LHModel.ReporterTypes.AuditResultJSON&{score: number} =>
+                    Boolean(audit) && audit.score !== null && audit.score < 0.9);
+  }
+
+  #formatScore(score: number): number {
+    return Math.round(score * 100);
+  }
+
   #formatDetails(details: LHModel.ReporterTypes.DetailsJSON): string {
     switch (details.type) {
       case 'table': {

package/front_end/models/ai_assistance/skills/accessibility.md

@@ -19,6 +19,7 @@ You are an expert accessibility debugging assistant.
    - Use `getStyles` on the backend node ID to inspect layout, color contrast, or font properties.
 
 2. **Lighthouse Accessibility Audits (`getLighthouseAudits` & `runLighthouse`)**:
+   - The Lighthouse report context contains only category scores and failing audit titles. To answer questions about failing accessibility audits, you must first call `getLighthouseAudits` with `categoryId: 'accessibility'` to fetch the full details. Never reply using only the initial summary.
    - If the user asks for a Lighthouse audit or report (such as recording a report or checking accessibility scores), or if audits are needed:
      - If an active Lighthouse report context already exists and no fresh audit is requested, query it via `getLighthouseAudits` with `categoryId: 'accessibility'`.
      - If no active report exists or a fresh audit is requested, use `runLighthouse` with `categoryId: 'accessibility'`:

package/front_end/models/ai_assistance/skills/lighthouse.md

@@ -12,6 +12,7 @@ Your role is to evaluate websites using Lighthouse audits across performance, ac
 # Tools & Workflow
 
 1. **Lighthouse Audits (`runLighthouse` & `getLighthouseAudits`)**:
+   - The Lighthouse report context contains only category scores and failing audit titles. To answer questions about failing audits or how to improve a score, you must first call `getLighthouseAudits` for the relevant category to fetch the full details. Never reply using only the initial summary.
    - If an active Lighthouse report context already exists and no fresh audit is requested:
      - To inspect the entire report or multiple categories, call `getLighthouseAudits` with `categoryId: 'all'`.
      - For a specific category, call `getLighthouseAudits` with the corresponding category ID (e.g. `'performance'`, `'accessibility'`, `'best-practices'`, `'seo'`).

package/front_end/models/ai_assistance/skills/styling.md

@@ -39,3 +39,4 @@ The user selected a DOM element in DevTools and asks a query about the element o
 
 * Meticulously investigate all potential causes for the observed behavior before concluding. Inspect parents, siblings, children, and overlapping elements where relevant.
 * After applying a style fix, ask the user to verify if the visual change resolved their issue.
+* If the target element is in a cross-origin iframe, stop and ask the user to select it in the Elements panel and start a new chat with that context.

package/front_end/models/ai_assistance/tools/ListSources.ts

@@ -43,10 +43,13 @@ export class ListSourcesTool implements
   static lastSourceId = 0;
   static uiSourceCodeId: WeakMap<Workspace.UISourceCode.UISourceCode, number> =
       new WeakMap<Workspace.UISourceCode.UISourceCode, number>();
+  static idToUiSourceCode: Map<number, Workspace.UISourceCode.UISourceCode> =
+      new Map<number, Workspace.UISourceCode.UISourceCode>();
 
   static reset(): void {
     ListSourcesTool.lastSourceId = 0;
     ListSourcesTool.uiSourceCodeId = new WeakMap();
+    ListSourcesTool.idToUiSourceCode = new Map();
   }
 
   static getUISourceCodes(
@@ -78,7 +81,9 @@ export class ListSourcesTool implements
         if (!uiSourceCodes.get(url) || uiSourceCode.contentType().isFromSourceMap()) {
           uiSourceCodes.set(url, uiSourceCode);
           if (!ListSourcesTool.uiSourceCodeId.has(uiSourceCode)) {
-            ListSourcesTool.uiSourceCodeId.set(uiSourceCode, ++ListSourcesTool.lastSourceId);
+            const id = ++ListSourcesTool.lastSourceId;
+            ListSourcesTool.uiSourceCodeId.set(uiSourceCode, id);
+            ListSourcesTool.idToUiSourceCode.set(id, uiSourceCode);
           }
         }
       }
@@ -90,14 +95,15 @@ export class ListSourcesTool implements
   static getSourceById(
       id: number,
       originLock: OriginLockState,
-      // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
-      workspace: Workspace.Workspace.WorkspaceImpl = Workspace.Workspace.WorkspaceImpl.instance(),
       ): Workspace.UISourceCode.UISourceCode|undefined {
     if (!Number.isInteger(id) || id <= 0) {
       return undefined;
     }
-    return ListSourcesTool.getUISourceCodes(originLock, workspace)
-        .find(file => ListSourcesTool.uiSourceCodeId.get(file) === id);
+    const file = ListSourcesTool.idToUiSourceCode.get(id);
+    if (!file || !isOriginAllowedByLock(originLock, file.securityOrigin())) {
+      return undefined;
+    }
+    return file;
   }
 
   readonly parameters: Host.AidaClient.FunctionObjectParam<never> = {

package/front_end/models/bindings/DebuggerWorkspaceBinding.ts

@@ -144,6 +144,10 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
     }
     ranges = compilerMapping.getLocationRangesForSameSourceLocation(rawLocation);
     ranges = ranges.filter(range => contained(rawLocation, range));
+    if (mode === SDK.DebuggerModel.StepMode.STEP_OVER) {
+      // Step over functions inlined by the compiler (from encoded source map scopes).
+      ranges = ranges.concat(SourceMapStepping.inlinedCalleeRanges(callFrame));
+    }
     return ranges;
   }
 
@@ -516,7 +520,7 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
           null :
           await this.computeAutoStep(SDK.DebuggerModel.StepMode.STEP_OVER, callFrames);
     }
-    return null;
+    return await SourceMapStepping.nextAutoStep(debuggerPausedDetails, context, this.computeAutoStep.bind(this));
   }
 
   async #shouldPauseInWasm(debuggerPausedDetails: SDK.DebuggerModel.DebuggerPausedDetails,

package/front_end/models/bindings/SourceMapStepping.ts

@@ -5,11 +5,13 @@
 /**
  * @file Stepping through code with encoded source map scopes: inlined functions, outlined functions and unmapped code.
  *
- * Mirrors the Wasm auto-stepping: user steps get a skip list (see `DebuggerWorkspaceBinding.computeAutoStep`).
+ * Mirrors the Wasm auto-stepping: user steps get a skip list (see `DebuggerWorkspaceBinding.computeAutoStep`), and
+ * pauses that don't correspond to a "logical" step are continued automatically ({@link nextAutoStep}).
  */
 
 import * as Root from '../../core/root/root.js';
-import type * as SDK from '../../core/sdk/sdk.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import * as Protocol from '../../generated/protocol.js';
 
 interface ScopedPosition {
   sourceMap: SDK.SourceMap.SourceMap;
@@ -19,14 +21,17 @@ interface ScopedPosition {
   column: number;
 }
 
-/** @returns the script-relative position of {@link frame}, if it's in a script with encoded source map scopes. */
+/**
+ * @returns the script-relative position of {@link frame}, if it's in a script with encoded source map scopes.
+ *          Scopes without any mappings are ignored: every position would count as unmapped (see {@link isUnmapped}).
+ */
 function scopedPosition(frame: SDK.DebuggerModel.CallFrame): ScopedPosition|null {
   if (!Root.Runtime.hostConfig.devToolsSourceMapScopesInSourcesPanel?.enabled) {
     return null;
   }
   const script = frame.script;
   const sourceMap = script.sourceMap();
-  if (!sourceMap?.hasEncodedScopeInfo()) {
+  if (!sourceMap?.hasEncodedScopeInfo() || sourceMap.mappings().length === 0) {
     return null;
   }
   const {lineNumber, columnNumber} = script.rawLocationToRelativeLocation(frame.location());
@@ -42,9 +47,76 @@ function toLocationRanges({script}: ScopedPosition,
   return ranges.map(({start, end}) => ({start: toLocation(start), end: toLocation(end)}));
 }
 
+export function isScopedFrame(frame: SDK.DebuggerModel.CallFrame): boolean {
+  return scopedPosition(frame) !== null;
+}
+
+/** @returns true iff {@link frame} has encoded scopes, and its position is not mapped to any source. */
+export function isUnmapped(frame: SDK.DebuggerModel.CallFrame): boolean {
+  const position = scopedPosition(frame);
+  return position !== null && position.sourceMap.findEntry(position.line, position.column)?.sourceURL === undefined;
+}
+
+/** @returns true iff both frames have encoded scopes and are mapped to the same original location. */
+export function isSameOriginalLocation(a: SDK.DebuggerModel.CallFrame, b: SDK.DebuggerModel.CallFrame): boolean {
+  const entry = (frame: SDK.DebuggerModel.CallFrame): SDK.SourceMap.SourceMapEntry|null => {
+    const position = scopedPosition(frame);
+    return position?.sourceMap.findEntry(position.line, position.column) ?? null;
+  };
+  const entryA = entry(a);
+  const entryB = entry(b);
+  return entryA?.sourceURL !== undefined && entryA.sourceURL === entryB?.sourceURL &&
+      entryA.sourceLineNumber === entryB.sourceLineNumber && entryA.sourceColumnNumber === entryB.sourceColumnNumber;
+}
+
 /** @returns the body of the innermost inlined function that {@link frame} is paused in (empty if none). */
 export function inlinedFunctionRanges(frame: SDK.DebuggerModel.CallFrame): SDK.DebuggerModel.LocationRange[] {
   const position = scopedPosition(frame);
   const range = position?.sourceMap.inlinedFunctionRange(position.line, position.column);
   return position && range ? toLocationRanges(position, [range]) : [];
 }
+
+/** @returns the bodies of the functions inlined into the logical function that {@link frame} is paused in. */
+export function inlinedCalleeRanges(frame: SDK.DebuggerModel.CallFrame): SDK.DebuggerModel.LocationRange[] {
+  const position = scopedPosition(frame);
+  return position ? toLocationRanges(position, position.sourceMap.inlinedCalleeRanges(position.line, position.column)) :
+                    [];
+}
+
+/**
+ * Decides whether the pause {@link details} completes the user's step {@link context}.
+ *
+ * @returns null to present the pause, or the step to issue instead.
+ */
+export async function nextAutoStep(
+    details: SDK.DebuggerModel.DebuggerPausedDetails, context: SDK.DebuggerModel.StepContext|null,
+    computeAutoStep: SDK.DebuggerModel.ComputeAutoStepCallback): Promise<SDK.DebuggerModel.AutoStep|null> {
+  if (!context || details.reason !== Protocol.Debugger.PausedEventReason.Step) {
+    return null;
+  }
+  const frames = details.callFrames;
+  const start = context.callFrames;
+  if (frames.length === 0 || start.length === 0 || (!isScopedFrame(frames[0]) && !isScopedFrame(start[0]))) {
+    return null;
+  }
+
+  switch (context.mode) {
+    case SDK.DebuggerModel.StepMode.STEP_INTO:
+      return isUnmapped(frames[0]) ? await computeAutoStep(SDK.DebuggerModel.StepMode.STEP_INTO, frames) : null;
+
+    case SDK.DebuggerModel.StepMode.STEP_OVER: {
+      const startDepth = start.length;
+      const depth = frames.length;
+      if (isUnmapped(frames[0]) || (depth === startDepth && isSameOriginalLocation(frames[0], start[0]))) {
+        // Unmapped code, or still on the same original location (the skip list only covers the generated ranges that
+        // contain the start position): keep stepping over.
+        return await computeAutoStep(SDK.DebuggerModel.StepMode.STEP_OVER, frames);
+      }
+      return null;
+    }
+
+    case SDK.DebuggerModel.StepMode.STEP_OUT:
+      // Stepping into calls of the unmapped code would present a pause inside the callee, so continue as step over.
+      return isUnmapped(frames[0]) ? await computeAutoStep(SDK.DebuggerModel.StepMode.STEP_OVER, frames) : null;
+  }
+}

package/front_end/models/bindings/StylesSourceMapping.ts

@@ -191,6 +191,9 @@ export class StyleFile implements TextUtils.ContentProvider.ContentProvider {
 
   addHeader(header: SDK.CSSStyleSheetHeader.CSSStyleSheetHeader): void {
     this.headers.add(header);
+    if (header.hasSourceURL) {
+      NetworkProject.setSourceURLSynthesized(this.uiSourceCode);
+    }
     NetworkProject.addFrameAttribution(this.uiSourceCode, header.frameId);
   }
 

package/front_end/models/emulation/DeviceModeModel.ts

@@ -319,6 +319,8 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     if (this.#type === Type.Device && this.#device && this.#mode) {
       const orientation = this.#device.orientationByName(this.#mode.orientation);
       this.#scaleSetting.set(this.calculateFitScale(orientation.width, orientation.height));
+    } else if (this.#type === Type.Responsive) {
+      this.#scaleSetting.set(this.calculateFitScale(this.#widthSetting.get(), this.#heightSetting.get()));
     }
   }
 
@@ -377,7 +379,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
           if (savedDevice) {
             this.#autoAdjustScaleSetting.set(savedDevice.autoAdjust);
             // An explicitly requested scale takes precedence over the saved one.
-            if (scale === undefined && !savedDevice.autoAdjust) {
+            if (scale === undefined && !savedDevice.autoAdjust && savedDevice.scale > 0) {
               scale = savedDevice.scale;
             }
           } else {
@@ -404,10 +406,13 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
           const savedDevice = map['Responsive'];
           if (savedDevice) {
             this.#autoAdjustScaleSetting.set(savedDevice.autoAdjust);
-            if (!savedDevice.autoAdjust) {
+            if (!savedDevice.autoAdjust && savedDevice.scale > 0) {
               this.#scaleSetting.set(savedDevice.scale);
+            } else if (this.#initialized) {
+              this.#updateFitScale();
             } else {
-              this.#scaleSetting.set(this.calculateFitScale(this.#widthSetting.get(), this.#heightSetting.get()));
+              // Defer fit-scale calculation until setAvailableSize() initializes #preferredSize.
+              this.#autoFitScaleOnInitialize = true;
             }
           } else {
             this.#autoAdjustScaleSetting.set(true);
@@ -775,7 +780,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   private calculateFitScale(screenWidth: number, screenHeight: number): number {
     let scale = Math.min(screenWidth ? this.#preferredSize.width / screenWidth : 1,
                          screenHeight ? this.#preferredSize.height / screenHeight : 1);
-    scale = Math.min(Math.floor(scale * 100), 100);
+    scale = Math.max(Math.min(Math.floor(scale * 100), 100), 1);
 
     let sharpScale = scale;
     while (sharpScale > scale * 0.7) {