chrome-devtools-frontend 1.0.1708524 → 1.0.1711155

package/AUTHORS

@@ -53,12 +53,14 @@ Han Xu <suyanhanx@gmail.com>
 Helmut Januschka <helmut@januschka.com>
 Henry Lim <henry@limhenry.xyz>
 Hojeong Park <parkhj062@gmail.com>
+Ivan Akulov <gxoptg@gmail.com>
 Jacky Hu <flameddd@gmail.com>
 Jake Mulhern <mulherje@gmail.com>
 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>
@@ -99,6 +101,7 @@ Ryuhei Shima <shimaryuhei@gmail.com>
 Samuel Maddock <samuelmaddock@electronjs.org>
 Satvic Dhawan <satvicdhawan14@gmail.com>
 Sebastian Markbåge <sebastian@calyptus.eu>
+Sebeen Kwon <a856412@gmail.com>
 Semih Dogan <semih702do@gmail.com>
 Serg Kryvonos <sergeikrivonos@gmail.com>
 Sergio Avalos <sergio.avalos@gmail.com>

package/front_end/core/common/Color.ts

@@ -2458,6 +2458,12 @@ export const PageHighlight: Record<string, Legacy> = {
   GapBackground: Legacy.fromRGBA([...LAYOUT_LINES_HIGHLIGHT_COLOR, .3]),
   GapHatch: Legacy.fromRGBA([...LAYOUT_LINES_HIGHLIGHT_COLOR, .8]),
   GridAreaBorder: Legacy.fromRGBA([26, 115, 232, 1]),
+  AnchorIMCB: Legacy.fromRGBA([127, 32, 210, 1]),
+  AnchorIMCBBackground: Legacy.fromRGBA([127, 32, 210, 0.15]),
+  AnchorInsetsBackground: Legacy.fromRGBA([246, 178, 107, 0.25]),
+  AnchorInsetsHatch: Legacy.fromRGBA([246, 178, 107, 0.8]),
+  AnchorTarget: Legacy.fromRGBA([26, 115, 232, 1]),
+  AnchorTargetBackground: Legacy.fromRGBA([26, 115, 232, 0.15]),
 };
 
 export const SourceOrderHighlight: Record<string, Legacy> = {

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/common/VersionController.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as Platform from '../platform/platform.js';
-import * as Root from '../root/root.js';
 
 /* eslint @devtools/enforce-version-controller-methods: "error" */
 
@@ -834,67 +833,15 @@ export class VersionController {
   }
 
   updateVersionFrom42To43(): void {
-    const timelineShowAllEventsExperimentEnabled =
-        Root.Runtime.experiments.getValueFromStorage('timeline-show-all-events' as Root.ExperimentNames.ExperimentName);
-    if (timelineShowAllEventsExperimentEnabled !== undefined) {
-      if (this.#settings.syncedStorage.has('timeline-show-all-events')) {
-        return;  // Already migrated
-      }
-      try {
-        const timelineShowAllEventsSetting = this.#settings.moduleSetting('timeline-show-all-events');
-        timelineShowAllEventsSetting.set(timelineShowAllEventsExperimentEnabled);
-      } catch {
-        // If the setting is not registered yet (e.g. in tests), skip.
-      }
-    }
   }
 
   updateVersionFrom43To44(): void {
-    const apcaExperimentEnabled =
-        Root.Runtime.experiments.getValueFromStorage('apca' as Root.ExperimentNames.ExperimentName);
-    if (apcaExperimentEnabled !== undefined) {
-      if (this.#settings.syncedStorage.has('apca')) {
-        return;  // Already migrated
-      }
-      try {
-        const apcaSetting = this.#settings.moduleSetting('apca');
-        apcaSetting.set(apcaExperimentEnabled);
-      } catch {
-        // If the setting is not registered yet (e.g. in tests), skip.
-      }
-    }
   }
 
   updateVersionFrom44To45(): void {
-    const timelineDebugModeExperimentEnabled =
-        Root.Runtime.experiments.getValueFromStorage('timeline-debug-mode' as Root.ExperimentNames.ExperimentName);
-    if (timelineDebugModeExperimentEnabled !== undefined) {
-      if (this.#settings.syncedStorage.has('timeline-debug-mode')) {
-        return;  // Already migrated
-      }
-      try {
-        const timelineDebugModeSetting = this.#settings.moduleSetting('timeline-debug-mode');
-        timelineDebugModeSetting.set(timelineDebugModeExperimentEnabled);
-      } catch {
-        // If the setting is not registered yet (e.g. in tests), skip.
-      }
-    }
   }
 
   updateVersionFrom45To46(): void {
-    const timelineInvalidationTrackingExperimentEnabled = Root.Runtime.experiments.getValueFromStorage(
-        'timeline-invalidation-tracking' as Root.ExperimentNames.ExperimentName);
-    if (timelineInvalidationTrackingExperimentEnabled !== undefined) {
-      if (this.#settings.syncedStorage.has('timeline-invalidation-tracking')) {
-        return;  // Already migrated
-      }
-      try {
-        const timelineInvalidationTrackingSetting = this.#settings.moduleSetting('timeline-invalidation-tracking');
-        timelineInvalidationTrackingSetting.set(timelineInvalidationTrackingExperimentEnabled);
-      } catch {
-        // If the setting is not registered yet (e.g. in tests), skip.
-      }
-    }
   }
 
   updateVersionFrom46To47(): void {

package/front_end/core/root/Runtime.ts

@@ -175,7 +175,6 @@ export interface Option {
 export class ExperimentsSupport {
   #experiments = new Map<ExperimentName, Experiment>();
   readonly #enabledForTests = new Set<ExperimentName>();
-  readonly #storage = new ExperimentStorage();
 
   allConfigurableExperiments(): Experiment[] {
     return [...this.#experiments.values()];
@@ -205,10 +204,6 @@ export class ExperimentsSupport {
     throw new Error(`Unknown experiment '${experimentName}'`);
   }
 
-  getValueFromStorage(experimentName: ExperimentName): boolean|undefined {
-    return this.#storage.get(experimentName);
-  }
-
   setEnabled(experimentName: ExperimentName, enabled: boolean): void {
     if (this.#isExperiment(experimentName)) {
       this.#experiments.get(experimentName)?.setEnabled(enabled);
@@ -240,47 +235,11 @@ export class ExperimentsSupport {
     this.#enabledForTests.clear();
   }
 
-  // TODO(crbug.com/464173054) remove after M156
-  removeAllExperimentsFromLocalStorage(): void {
-    this.#storage.removeAllExperimentsFromLocalStorage();
-  }
-
   #isExperiment(experimentName: ExperimentName): boolean {
     return this.#experiments.has(experimentName);
   }
 }
 
-// TODO(crbug.com/464173054) remove after M156
-/** Manages the 'experiments' dictionary in globalThis.localStorage */
-class ExperimentStorage {
-  readonly #experiments: Record<string, boolean|undefined> = {};
-
-  constructor() {
-    try {
-      const storedExperiments = Platform.HostRuntime.HOST_RUNTIME.getLocalStorage()?.getItem('experiments');
-      if (storedExperiments) {
-        this.#experiments = JSON.parse(storedExperiments);
-      }
-    } catch (err) {
-      console.error('Failed to parse localStorage[\'experiments\']: ' + err.message);
-    }
-  }
-
-  /**
-   * Experiments are stored with a tri-state:
-   *   - true: Explicitly enabled.
-   *   - false: Explicitly disabled.
-   *   - undefined: Disabled.
-   */
-  get(experimentName: ExperimentName): boolean|undefined {
-    return this.#experiments[experimentName];
-  }
-
-  removeAllExperimentsFromLocalStorage(): void {
-    Platform.HostRuntime.HOST_RUNTIME.getLocalStorage()?.removeItem('experiments');
-  }
-}
-
 export class Experiment {
   name: ExperimentName;
   title: string;

package/front_end/core/sdk/CSSModel.ts

@@ -44,6 +44,60 @@ export interface LayoutProperties {
   isContents?: boolean;
   containerType?: string;
   hasScroll: boolean;
+  isAnchorPositioned?: boolean;
+}
+
+function isAnchorPositioned(computedStyle: Map<string, string>, matchedStyles?: CSSMatchedStyles|null): boolean {
+  const position = computedStyle.get('position');
+  if (position !== 'absolute' && position !== 'fixed') {
+    return false;
+  }
+  const positionAnchor = computedStyle.get('position-anchor');
+  if (positionAnchor && positionAnchor !== 'none') {
+    return true;
+  }
+  const positionArea = computedStyle.get('position-area');
+  if (positionArea && positionArea !== 'none') {
+    return true;
+  }
+  const anchorProperties = [
+    'top',
+    'right',
+    'bottom',
+    'left',
+    'inset',
+    'inset-block',
+    'inset-inline',
+    'inset-block-start',
+    'inset-block-end',
+    'inset-inline-start',
+    'inset-inline-end',
+    'width',
+    'height',
+    'min-width',
+    'min-height',
+    'max-width',
+    'max-height',
+  ];
+  if (anchorProperties.some(prop => {
+        const val = computedStyle.get(prop);
+        return Boolean(val && (val.includes('anchor(') || val.includes('anchor-size(')));
+      })) {
+    return true;
+  }
+  if (matchedStyles) {
+    for (const style of matchedStyles.nodeStyles()) {
+      for (const property of style.allProperties()) {
+        if (!property.activeInStyle() || !matchedStyles.propertyState(property)) {
+          continue;
+        }
+        if (property.value.includes('anchor(') || property.value.includes('anchor-size(')) {
+          return true;
+        }
+      }
+    }
+  }
+  return false;
 }
 
 export class CSSModel extends SDKModel<EventTypes> {
@@ -408,6 +462,8 @@ export class CSSModel extends SDKModel<EventTypes> {
     const isContainer = Boolean(containerType) && containerType !== '' && containerType !== 'normal';
     const hasScroll = Boolean(styles.get('scroll-snap-type')) && styles.get('scroll-snap-type') !== 'none';
 
+    const isAnchored = isAnchorPositioned(styles);
+
     return {
       isFlex,
       isGrid,
@@ -416,6 +472,7 @@ export class CSSModel extends SDKModel<EventTypes> {
       isContents,
       containerType: isContainer ? containerType : undefined,
       hasScroll,
+      isAnchorPositioned: isAnchored,
     };
   }
 

package/front_end/core/sdk/CSSPropertyParser.ts

@@ -87,9 +87,8 @@ export class SyntaxTree {
   readonly tree: CodeMirror.SyntaxNode;
   readonly trailingNodes: CodeMirror.SyntaxNode[];
   readonly propertyName: string|undefined;
-  constructor(
-      propertyValue: string, rule: string, tree: CodeMirror.SyntaxNode, propertyName?: string,
-      trailingNodes: CodeMirror.SyntaxNode[] = []) {
+  constructor(propertyValue: string, rule: string, tree: CodeMirror.SyntaxNode, propertyName?: string,
+              trailingNodes: CodeMirror.SyntaxNode[] = []) {
     this.propertyName = propertyName;
     this.propertyValue = propertyValue;
     this.rule = rule;
@@ -135,8 +134,8 @@ export abstract class TreeWalker {
     }
     return instance;
   }
-  static walk<T extends TreeWalker, ArgTs extends unknown[]>(
-      this: {new(ast: SyntaxTree, ...args: ArgTs): T}, propertyValue: SyntaxTree, ...args: ArgTs): T {
+  static walk<T extends TreeWalker, ArgTs extends unknown[]>(this: {new(ast: SyntaxTree, ...args: ArgTs): T},
+                                                             propertyValue: SyntaxTree, ...args: ArgTs): T {
     const instance = new this(propertyValue, ...args);
     if (propertyValue.tree.name === 'Declaration') {
       instance.iterateDeclaration(propertyValue.tree);
@@ -279,9 +278,8 @@ export class BottomUpTreeMatching extends TreeWalker {
     return this.getComputedTextRange(from ?? this.ast.tree, to ?? this.ast.tree, substitutionHook);
   }
 
-  getComputedTextRange(
-      from: CodeMirror.SyntaxNode|undefined, to: CodeMirror.SyntaxNode|undefined,
-      substitutionHook?: (match: Match) => string | null): string {
+  getComputedTextRange(from: CodeMirror.SyntaxNode|undefined, to: CodeMirror.SyntaxNode|undefined,
+                       substitutionHook?: (match: Match) => string | null): string {
     if (!from || !to) {
       return '';
     }
@@ -481,10 +479,9 @@ export class ComputedText {
 
   countTopLevelValues(begin: number, end: number): number {
     const pieces = Array.from(this.#getPieces(begin, end));
-    const counts = pieces.map(
-        chunk =>
-            (chunk instanceof ComputedTextChunk ? chunk.topLevelValueCount :
-                                                  this.#countTopLevelValuesInStringPiece(chunk)));
+    const counts =
+        pieces.map(chunk => (chunk instanceof ComputedTextChunk ? chunk.topLevelValueCount :
+                                                                  this.#countTopLevelValuesInStringPiece(chunk)));
     const count = counts.reduce((sum, v) => sum + v, 0);
     return count;
   }
@@ -496,11 +493,7 @@ export class ComputedText {
  * sequences that make up the pieces of text may contain non-text nodes/trees. Any such element in between the texts is
  * ignored for the spacing requirement.
  **/
-export function requiresSpace(a: string, b: string): 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 {
+export function requiresSpace(a: string, b: string): 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] : '';

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/DebuggerModel.ts

@@ -134,6 +134,31 @@ export const enum StepMode {
   STEP_OVER = 'StepOver',
 }
 
+/** A CDP step command. `ranges` is passed as `skipList` to stepInto/stepOver, and ignored for stepOut. */
+export interface AutoStep {
+  readonly command: StepMode;
+  readonly ranges: readonly LocationRange[];
+}
+
+/**
+ * The step the user requested. It lives until a pause is presented to the user, or the user resumes or pauses, and
+ * allows the before-paused callback to continue the step automatically.
+ */
+export interface StepContext {
+  readonly mode: StepMode;
+  /** The call frames of the pause in which the user requested the step. */
+  readonly callFrames: readonly CallFrame[];
+}
+
+/** Computes the CDP step command for a user-requested step. */
+export type ComputeAutoStepCallback = (mode: StepMode, callFrames: readonly CallFrame[]) => Promise<AutoStep>;
+
+/**
+ * Invoked for every pause before it's presented. Returns null to present the pause, or the step to issue instead.
+ */
+export type BeforePausedCallback = (details: DebuggerPausedDetails, context: StepContext|null) =>
+    Promise<AutoStep|null>;
+
 export const WASM_SYMBOLS_PRIORITY: Protocol.Debugger.DebugSymbolsType[] = [
   Protocol.Debugger.DebugSymbolsType.ExternalDWARF,
   Protocol.Debugger.DebugSymbolsType.EmbeddedDWARF,
@@ -166,20 +191,15 @@ export class DebuggerModel extends SDKModel<EventTypes> {
   readonly #jsSourceMapsEnabledSetting: Common.Settings.Setting<boolean>;
   readonly #skipAllPausesSetting: Common.Settings.Setting<boolean>;
   #skipAllPausesTimeout?: ReturnType<typeof setTimeout>;
-  #beforePausedCallback: ((arg0: DebuggerPausedDetails, stepOver: Location|null) => Promise<boolean>)|null = null;
-  #computeAutoStepRangesCallback: ((arg0: StepMode, arg1: CallFrame) => Promise<Array<{
-                                     start: Location,
-                                     end: Location,
-                                   }>>)|null = null;
+  #beforePausedCallback: BeforePausedCallback|null = null;
+  #computeAutoStepCallback: ComputeAutoStepCallback|null = null;
   evaluateOnCallFrameCallback:
       ((arg0: CallFrame, arg1: EvaluationOptions) => Promise<EvaluationResult|null>)|null = null;
   #synchronizeBreakpointsCallback: ((script: Script) => Promise<void>)|null = null;
   // We need to be able to register listeners for individual breakpoints. As such, we dispatch
   // on breakpoint ids, which are not statically known. The event #payload will always be a `Location`.
   readonly #breakpointResolvedEventTarget = new Common.ObjectWrapper.ObjectWrapper<Record<string, Location>>();
-  // When stepping over with autostepping enabled, the context denotes the function to which autostepping is restricted
-  // to by way of its functionLocation (as per Debugger.CallFrame).
-  #autoSteppingContext: Location|null = null;
+  #stepContext: StepContext|null = null;
   #isPausing = false;
 
   constructor(target: Target) {
@@ -429,58 +449,63 @@ export class DebuggerModel extends SDKModel<EventTypes> {
     void this.agent.invoke_setBreakpointsActive({active: this.#breakpointsActiveSetting.get()});
   }
 
-  setComputeAutoStepRangesCallback(callback: ((arg0: StepMode, arg1: CallFrame) => Promise<LocationRange[]>)|null):
-      void {
-    this.#computeAutoStepRangesCallback = callback;
-  }
-
-  private async computeAutoStepSkipList(mode: StepMode): Promise<Protocol.Debugger.LocationRange[]> {
-    let ranges: LocationRange[] = [];
-    if (this.#computeAutoStepRangesCallback && this.#debuggerPausedDetails &&
-        this.#debuggerPausedDetails.callFrames.length > 0) {
-      const [callFrame] = this.#debuggerPausedDetails.callFrames;
-      ranges = await this.#computeAutoStepRangesCallback.call(null, mode, callFrame);
-    }
-    const skipList = ranges.map(({start, end}) => ({
-                                  scriptId: start.scriptId,
-                                  start: {lineNumber: start.lineNumber, columnNumber: start.columnNumber},
-                                  end: {lineNumber: end.lineNumber, columnNumber: end.columnNumber},
-                                }));
-    return sortAndMergeRanges(skipList);
+  setComputeAutoStepCallback(callback: ComputeAutoStepCallback|null): void {
+    this.#computeAutoStepCallback = callback;
   }
 
   async stepInto(): Promise<void> {
-    const skipList = await this.computeAutoStepSkipList(StepMode.STEP_INTO);
-    void this.agent.invoke_stepInto({breakOnAsyncCall: false, skipList});
+    await this.#userStep(StepMode.STEP_INTO);
   }
 
   async stepOver(): Promise<void> {
-    this.#autoSteppingContext = this.#debuggerPausedDetails?.callFrames[0]?.functionLocation() ?? null;
-    const skipList = await this.computeAutoStepSkipList(StepMode.STEP_OVER);
-    void this.agent.invoke_stepOver({skipList});
+    await this.#userStep(StepMode.STEP_OVER);
   }
 
   async stepOut(): Promise<void> {
-    const skipList = await this.computeAutoStepSkipList(StepMode.STEP_OUT);
-    if (skipList.length !== 0) {
-      void this.agent.invoke_stepOver({skipList});
-    } else {
-      void this.agent.invoke_stepOut();
-    }
+    await this.#userStep(StepMode.STEP_OUT);
   }
 
   scheduleStepIntoAsync(): void {
-    void this.computeAutoStepSkipList(StepMode.STEP_INTO).then(skipList => {
-      void this.agent.invoke_stepInto({breakOnAsyncCall: true, skipList});
-    });
+    void this.#userStep(StepMode.STEP_INTO, /* breakOnAsyncCall */ true);
+  }
+
+  async #userStep(mode: StepMode, breakOnAsyncCall = false): Promise<void> {
+    const callFrames = this.#debuggerPausedDetails?.callFrames ?? [];
+    this.#stepContext = {mode, callFrames};
+    const step = this.#computeAutoStepCallback && callFrames.length > 0 ?
+        await this.#computeAutoStepCallback(mode, callFrames) :
+        {command: mode, ranges: []};
+    this.#issueStep(step, breakOnAsyncCall);
+  }
+
+  #issueStep({command, ranges}: AutoStep, breakOnAsyncCall = false): void {
+    const skipList =
+        sortAndMergeRanges(ranges.map(({start, end}) => ({
+                                        scriptId: start.scriptId,
+                                        start: {lineNumber: start.lineNumber, columnNumber: start.columnNumber},
+                                        end: {lineNumber: end.lineNumber, columnNumber: end.columnNumber},
+                                      })));
+    switch (command) {
+      case StepMode.STEP_INTO:
+        void this.agent.invoke_stepInto({breakOnAsyncCall, skipList});
+        break;
+      case StepMode.STEP_OVER:
+        void this.agent.invoke_stepOver({skipList});
+        break;
+      case StepMode.STEP_OUT:
+        void this.agent.invoke_stepOut();
+        break;
+    }
   }
 
   resume(): void {
+    this.#stepContext = null;
     void this.agent.invoke_resume({terminateOnResume: false});
     this.#isPausing = false;
   }
 
   pause(): void {
+    this.#stepContext = null;
     this.#isPausing = true;
     this.skipAllPauses(false);
     void this.agent.invoke_pause();
@@ -569,7 +594,7 @@ export class DebuggerModel extends SDKModel<EventTypes> {
     this.#scripts.clear();
     this.#scriptsBySourceURL.clear();
     this.#discardableScripts = [];
-    this.#autoSteppingContext = null;
+    this.#stepContext = null;
   }
 
   scripts(): Script[] {
@@ -611,20 +636,22 @@ export class DebuggerModel extends SDKModel<EventTypes> {
     return this.#debuggerPausedDetails;
   }
 
-  private async setDebuggerPausedDetails(debuggerPausedDetails: DebuggerPausedDetails): Promise<boolean> {
+  /**
+   * @returns null if the pause was presented, or the step to issue instead, as decided by the before-paused callback.
+   */
+  private async setDebuggerPausedDetails(debuggerPausedDetails: DebuggerPausedDetails): Promise<AutoStep|null> {
     this.#isPausing = false;
     this.#debuggerPausedDetails = debuggerPausedDetails;
     if (this.#beforePausedCallback) {
-      if (!await this.#beforePausedCallback.call(null, debuggerPausedDetails, this.#autoSteppingContext)) {
-        return false;
+      const autoStep = await this.#beforePausedCallback(debuggerPausedDetails, this.#stepContext);
+      if (autoStep) {
+        return autoStep;
       }
     }
-    // If we resolved a location in auto-stepping callback, reset the
-    // auto-step-over context.
-    this.#autoSteppingContext = null;
+    this.#stepContext = null;
     this.dispatchEventToListeners(Events.DebuggerPaused, this);
     this.setSelectedCallFrame(debuggerPausedDetails.callFrames[0]);
-    return true;
+    return null;
   }
 
   private resetDebuggerPausedDetails(): void {
@@ -633,8 +660,7 @@ export class DebuggerModel extends SDKModel<EventTypes> {
     this.setSelectedCallFrame(null);
   }
 
-  setBeforePausedCallback(
-      callback: ((arg0: DebuggerPausedDetails, autoSteppingContext: Location|null) => Promise<boolean>)|null): void {
+  setBeforePausedCallback(callback: BeforePausedCallback|null): void {
     this.#beforePausedCallback = callback;
   }
 
@@ -676,12 +702,9 @@ export class DebuggerModel extends SDKModel<EventTypes> {
       }
     }
 
-    if (!await this.setDebuggerPausedDetails(pausedDetails)) {
-      if (this.#autoSteppingContext) {
-        void this.stepOver();
-      } else {
-        void this.stepInto();
-      }
+    const autoStep = await this.setDebuggerPausedDetails(pausedDetails);
+    if (autoStep) {
+      this.#issueStep(autoStep);
     }
   }
 
@@ -1480,6 +1503,17 @@ export class Scope implements ScopeChainEntry {
     return undefined;
   }
 
+  /**
+   * Present iff V8 has no variable values to show for this scope, either because the scope
+   * declares no variables or because all of them are unavailable (e.g. optimized out).
+   *
+   * Such scopes are retained in {@link CallFrame.scopeChain} so they can be addressed via
+   * `scopeNumber` in `Debugger.evaluateOnCallFrame` and matched against source map scopes.
+   */
+  emptyReason(): Protocol.Debugger.ScopeEmptyReason|undefined {
+    return this.#payload.emptyReason;
+  }
+
   extraProperties(): RemoteObjectProperty[] {
     if (this !== this.#callFrame.localScope() || this.#callFrame.script.isWasm()) {
       return [];