chrome-devtools-frontend 1.0.1704172 → 1.0.1706026

package/front_end/models/source_map_scopes/ScopeChainResolver.ts

@@ -0,0 +1,101 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Common from '../../core/common/common.js';
+import * as Root from '../../core/root/root.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import type * as Bindings from '../bindings/bindings.js';
+
+import {resolveScopeChain} from './NamesResolver.js';
+
+/**
+ * Resolves and caches the scope chain for {@link SDK.DebuggerModel.CallFrame}s.
+ *
+ * There is one instance per `Universe`. Caching the resolved scope chain allows different consumers
+ * (e.g. the Scope view and the inline values in the editor) to share the exact same
+ * {@link SDK.DebuggerModel.ScopeChainEntry} and {@link SDK.RemoteObject.RemoteObject} instances for a
+ * given pause, without redundant CDP evaluations.
+ *
+ * The cache for a script is invalidated whenever debugging info (e.g. from a debugger language plugin)
+ * or a source map is attached to or detached from that script. The {@link Events.SCOPE_CHAIN_INVALIDATED}
+ * event is dispatched afterwards, so consumers can re-resolve the scope chain.
+ */
+export class ScopeChainResolver extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements
+    SDK.TargetManager.SDKModelObserver<SDK.DebuggerModel.DebuggerModel> {
+  readonly #debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding;
+  readonly #cache = new WeakMap<SDK.Script.Script,
+                                WeakMap<SDK.DebuggerModel.CallFrame, Promise<SDK.DebuggerModel.ScopeChainEntry[]>>>();
+
+  constructor(targetManager: SDK.TargetManager.TargetManager,
+              debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding) {
+    super();
+    this.#debuggerWorkspaceBinding = debuggerWorkspaceBinding;
+    targetManager.observeModels(SDK.DebuggerModel.DebuggerModel, this);
+  }
+
+  /**
+   * @deprecated Pass the `ScopeChainResolver` of the `Universe` via constructor instead.
+   */
+  static instance(): ScopeChainResolver {
+    // TODO(crbug.com/458180550): Remove once all callers receive the instance via constructor.
+    return Root.DevToolsContext.globalInstance().get(ScopeChainResolver);
+  }
+
+  modelAdded(debuggerModel: SDK.DebuggerModel.DebuggerModel): void {
+    debuggerModel.addEventListener(SDK.DebuggerModel.Events.DebugInfoAttached, this.#debugInfoAttached, this);
+    debuggerModel.sourceMapManager().addEventListener(SDK.SourceMapManager.Events.SourceMapAttached,
+                                                      this.#sourceMapChanged, this);
+    debuggerModel.sourceMapManager().addEventListener(SDK.SourceMapManager.Events.SourceMapDetached,
+                                                      this.#sourceMapChanged, this);
+  }
+
+  modelRemoved(debuggerModel: SDK.DebuggerModel.DebuggerModel): void {
+    debuggerModel.removeEventListener(SDK.DebuggerModel.Events.DebugInfoAttached, this.#debugInfoAttached, this);
+    debuggerModel.sourceMapManager().removeEventListener(SDK.SourceMapManager.Events.SourceMapAttached,
+                                                         this.#sourceMapChanged, this);
+    debuggerModel.sourceMapManager().removeEventListener(SDK.SourceMapManager.Events.SourceMapDetached,
+                                                         this.#sourceMapChanged, this);
+  }
+
+  /**
+   * Returns the (cached) resolved scope chain for `callFrame`. Repeated calls return the same promise
+   * until the cache for the call frame's script is invalidated.
+   */
+  resolveScopeChain(callFrame: SDK.DebuggerModel.CallFrame): Promise<SDK.DebuggerModel.ScopeChainEntry[]> {
+    let cacheForScript = this.#cache.get(callFrame.script);
+    if (!cacheForScript) {
+      cacheForScript = new WeakMap();
+      this.#cache.set(callFrame.script, cacheForScript);
+    }
+    let cachedPromise = cacheForScript.get(callFrame);
+    if (!cachedPromise) {
+      cachedPromise = resolveScopeChain(callFrame, this.#debuggerWorkspaceBinding);
+      cacheForScript.set(callFrame, cachedPromise);
+    }
+    return cachedPromise;
+  }
+
+  #invalidate(script: SDK.Script.Script): void {
+    this.#cache.delete(script);
+    this.dispatchEventToListeners(Events.SCOPE_CHAIN_INVALIDATED, script);
+  }
+
+  #debugInfoAttached(event: Common.EventTarget.EventTargetEvent<SDK.Script.Script>): void {
+    this.#invalidate(event.data);
+  }
+
+  #sourceMapChanged(event: Common.EventTarget
+                        .EventTargetEvent<{client: SDK.Script.Script, sourceMap: SDK.SourceMap.SourceMap}>): void {
+    this.#invalidate(event.data.client);
+  }
+}
+
+export const enum Events {
+  SCOPE_CHAIN_INVALIDATED = 'ScopeChainInvalidated',
+}
+
+export interface EventTypes {
+  /** Dispatched with the script for which the cached scope chains have been invalidated. */
+  [Events.SCOPE_CHAIN_INVALIDATED]: SDK.Script.Script;
+}

package/front_end/models/source_map_scopes/source_map_scopes.ts

@@ -5,9 +5,11 @@
 import * as FunctionCodeResolver from './FunctionCodeResolver.js';
 import * as NamesResolver from './NamesResolver.js';
 import * as ScopeChainModel from './ScopeChainModel.js';
+import * as ScopeChainResolver from './ScopeChainResolver.js';
 
 export {
   FunctionCodeResolver,
   NamesResolver,
   ScopeChainModel,
+  ScopeChainResolver,
 };

package/front_end/panels/application/BackgroundServiceView.ts

@@ -120,6 +120,7 @@ const UIStrings = {
    * @description Inform users that DevTools are recording/waiting for events in the Periodic Background Sync tool of the Application panel
    * @example {Background Fetch} PH1
    */
+  // eslint-disable-next-line @devtools/l10n-uistrings-sentence-punctuation -- Concatenated with recordingSActivity in UI to form a multi-sentence message.
   devtoolsWillRecordAllSActivity: 'DevTools will record all {PH1} activity for up to 3 days, even when closed.',
   /**
    * @description Text in Background Service View of the Application panel to instruct the user on how to start a recording for

package/front_end/panels/application/components/AdsView.ts

@@ -147,13 +147,13 @@ const UIStrings = {
   settings: 'Settings',
   /**
    * @description The name of a checkbox setting. This setting highlights the
-   * rendering elements for ads that are found on the page.
+   * rendering elements for ad-related resources that are found on the page.
    */
-  highlightAds: 'Highlight ads',
+  highlightAdRelatedResources: 'Highlight ad-related resources',
   /**
-   * @description Explanation text for the 'Highlight ads' setting.
+   * @description Explanation text for the 'Highlight ad-related resources' setting.
    */
-  highlightsElementsRedDetectedToBe: 'Highlights elements (red) detected to be ads',
+  highlightsElementsRedDetectedToBeAdRelated: 'Highlights elements (red) detected to be ad-related',
   /**
    * @description Text explaining that ad detection is not perfect.
    */
@@ -425,8 +425,8 @@ const DEFAULT_VIEW: View = (input, output, target) => {
       <devtools-checkbox class="setting-container small"
           ${bindToSetting(Common.Settings.Settings.instance().resolve(SDK.SDKSettings.showAdHighlightsSettingDescriptor))}>
         <div class="setting-text-container">
-          <div class="setting-label">${i18nString(UIStrings.highlightAds)}</div>
-          <div class="setting-explanation">${i18nString(UIStrings.highlightsElementsRedDetectedToBe)}</div>
+          <div class="setting-label">${i18nString(UIStrings.highlightAdRelatedResources)}</div>
+          <div class="setting-explanation">${i18nString(UIStrings.highlightsElementsRedDetectedToBeAdRelated)}</div>
         </div>
       </devtools-checkbox>
       <hr class="divider">

package/front_end/panels/application/components/BackForwardCacheView.ts

@@ -129,7 +129,7 @@ const UIStrings = {
    * 'm' is never less than 2.
    * @example {3} m
    */
-  issuesInMultipleFrames: '{n, plural, =1 {# issue found in {m} frames.} other {# issues found in {m} frames.}}',
+  issuesInMultipleFrames: '{n, plural, =1 {# issue found in {m} frames} other {# issues found in {m} frames}}',
   /**
    * @description Shows the number of frames with a particular issue.
    */

package/front_end/panels/console/ConsolePrompt.ts

@@ -459,7 +459,8 @@ export class ConsolePrompt extends ConsolePromptBase {
         ?.evaluateCommandInConsole(executionContext, message, expression, useCommandLineAPI);
   }
 
-  private async substituteNames(expression: string, mapping: Array<Map<string, string|null>>): Promise<string> {
+  private async substituteNames(expression: string,
+                                mapping: Formatter.FormatterWorkerPool.ScopeVariableMapping[]): Promise<string> {
     try {
       return await Formatter.FormatterWorkerPool.formatterWorkerPool().javaScriptSubstitute(expression, mapping);
     } catch {

package/front_end/panels/elements/CSSRuleValidator.ts

@@ -26,6 +26,7 @@ const UIStrings = {
    * @example {flex-wrap: nowrap} REASON_PROPERTY_DECLARATION_CODE
    * @example {align-content} AFFECTED_PROPERTY_DECLARATION_CODE
    */
+  // eslint-disable-next-line @devtools/l10n-uistrings-sentence-punctuation -- Two sentences displayed together in Styles pane
   ruleViolatedBySameElementRuleReason:
       'The {REASON_PROPERTY_DECLARATION_CODE} property prevents {AFFECTED_PROPERTY_DECLARATION_CODE} from having an effect.',
   /**
@@ -33,6 +34,7 @@ const UIStrings = {
    * @example {flex-wrap} PROPERTY_NAME
    * @example {nowrap} PROPERTY_VALUE
    */
+  // eslint-disable-next-line @devtools/l10n-uistrings-sentence-punctuation -- Two sentences displayed together in Styles pane
   ruleViolatedBySameElementRuleFix: 'Try setting {PROPERTY_NAME} to something other than {PROPERTY_VALUE}.',
   /**
    * @description The message shown in the Styles tab when the user hovers over a property declaration that has no effect due to not being a flex or grid container.
@@ -71,6 +73,7 @@ const UIStrings = {
    * @example {20} PH4
    * @example {Arial} PH5
    */
+  // eslint-disable-next-line @devtools/l10n-uistrings-sentence-punctuation -- Multiple warnings can be joined with a space in the UI to form a multi-sentence message
   fontVariationSettingsWarning:
       'Value for setting "{PH1}" {PH2} is outside the supported range [{PH3}, {PH4}] for font-family "{PH5}".',
   /**

package/front_end/panels/elements/ClassesPaneWidget.ts

@@ -359,7 +359,10 @@ export class ClassNamePrompt extends UI.TextPrompt.TextPrompt {
 
     let completions: string[] = await this.classNamesPromise;
     const classesMap = this.nodeClasses((selectedNode));
-    const existingClasses = new Set(expression.split(/[,\s]/).map(className => className.trim()).filter(Boolean));
+    // Classes may be typed with a leading dot (e.g. `.btn`), while completions
+    // are raw class names, so normalize before de-duplicating.
+    const existingClasses =
+        new Set(expression.split(/[,\s]/).map(className => className.trim().replace(/^\./, '')).filter(Boolean));
     completions = completions.filter(value => !classesMap.get(value) && !existingClasses.has(value));
 
     if (prefix[0] === '.') {

package/front_end/panels/elements/LayoutPane.ts

@@ -366,15 +366,21 @@ const DEFAULT_VIEW: View = (input, output, target) => {
 
 type View = (input: ViewInput, output: object, element: HTMLElement) => void;
 export class LayoutPane extends UI.Widget.Widget {
-  readonly #settings: readonly Setting[] = [];
+  readonly #settings: ReadonlyArray<Common.Settings.Setting<string|boolean>>;
   readonly #uaShadowDOMSetting: Common.Settings.Setting<boolean>;
   #domModels: SDK.DOMModel.DOMModel[];
   readonly #view: View;
 
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element);
-    this.#settings = this.#makeSettings();
-    this.#uaShadowDOMSetting = Common.Settings.Settings.instance().moduleSetting('show-ua-shadow-dom');
+    const settings = Common.Settings.Settings.instance();
+    this.#settings = [
+      settings.resolve(SDK.SDKSettings.showGridLineLabelsSettingDescriptor),
+      settings.resolve(SDK.SDKSettings.showGridTrackSizesSettingDescriptor),
+      settings.resolve(SDK.SDKSettings.showGridAreasSettingDescriptor),
+      settings.resolve(SDK.SDKSettings.extendGridLinesSettingDescriptor),
+    ];
+    this.#uaShadowDOMSetting = settings.moduleSetting('show-ua-shadow-dom');
     this.#domModels = [];
     this.#view = view;
   }
@@ -445,10 +451,8 @@ export class LayoutPane extends UI.Widget.Widget {
   }
 
   #makeSettings(): Setting[] {
-    const settings = [];
-    for (const settingName
-             of ['show-grid-line-labels', 'show-grid-track-sizes', 'show-grid-areas', 'extend-grid-lines']) {
-      const setting = Common.Settings.Settings.instance().moduleSetting(settingName);
+    const settings: Setting[] = [];
+    for (const setting of this.#settings) {
       const settingValue = setting.get();
       const settingType = setting.type();
       if (!settingType) {
@@ -489,13 +493,13 @@ export class LayoutPane extends UI.Widget.Widget {
   }
 
   onSettingChanged(setting: string, value: string|boolean): void {
-    Common.Settings.Settings.instance().moduleSetting(setting).set(value);
+    this.#settings.find(s => s.name === setting)?.set(value);
   }
 
   override wasShown(): void {
     super.wasShown();
     for (const setting of this.#settings) {
-      Common.Settings.Settings.instance().moduleSetting(setting.name).addChangeListener(this.requestUpdate, this);
+      setting.addChangeListener(this.requestUpdate, this);
     }
     for (const domModel of this.#domModels) {
       this.modelRemoved(domModel);
@@ -510,7 +514,7 @@ export class LayoutPane extends UI.Widget.Widget {
   override willHide(): void {
     super.willHide();
     for (const setting of this.#settings) {
-      Common.Settings.Settings.instance().moduleSetting(setting.name).removeChangeListener(this.requestUpdate, this);
+      setting.removeChangeListener(this.requestUpdate, this);
     }
     SDK.TargetManager.TargetManager.instance().unobserveModels(SDK.DOMModel.DOMModel, this);
     UI.Context.Context.instance().removeFlavorChangeListener(SDK.DOMModel.DOMNode, this.requestUpdate, this);
@@ -537,6 +541,7 @@ export class LayoutPane extends UI.Widget.Widget {
   }
 
   override async performUpdate(): Promise<void> {
+    const settings = this.#makeSettings();
     const input: ViewInput = {
       gridElements: gridNodesToElements(await this.#fetchGridNodes()),
       flexContainerElements: flexContainerNodesToElements(await this.#fetchFlexContainerNodes()),
@@ -547,22 +552,14 @@ export class LayoutPane extends UI.Widget.Widget {
       onMouseEnter: this.#onElementMouseEnter.bind(this),
       onElementToggle: this.#onElementToggle.bind(this),
       onBooleanSettingChange: this.#onBooleanSettingChange.bind(this),
-      enumSettings: this.#getEnumSettings(),
-      booleanSettings: this.#getBooleanSettings(),
+      enumSettings: settings.filter(isEnumSetting),
+      booleanSettings: settings.filter(isBooleanSetting),
       onSummaryKeyDown: this.#onSummaryKeyDown.bind(this),
     };
 
     this.#view(input, {}, this.contentElement);
   }
 
-  #getEnumSettings(): EnumSetting[] {
-    return this.#settings.filter(isEnumSetting);
-  }
-
-  #getBooleanSettings(): BooleanSetting[] {
-    return this.#settings.filter(isBooleanSetting);
-  }
-
   #onBooleanSettingChange(setting: BooleanSetting, event: Event): void {
     event.preventDefault();
     this.onSettingChanged(setting.name, (event.target as UI.UIUtils.CheckboxLabel).checked);

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -625,7 +625,7 @@ export class NetworkLogViewColumns {
       const setting = savedSettings[columnId];
       let columnConfig = this.columns.find(columnConfig => columnConfig.id === columnId);
       if (!columnConfig && setting.title) {
-        columnConfig = this.addCustomHeader(setting.title, columnId) || undefined;
+        columnConfig = this.registerCustomHeader(setting.title, columnId) || undefined;
       }
 
       if (columnConfig) {
@@ -816,6 +816,15 @@ export class NetworkLogViewColumns {
   }
 
   private addCustomHeader(headerTitle: string, headerId?: string, index?: number): Descriptor|null {
+    const columnConfig = this.registerCustomHeader(headerTitle, headerId, index);
+    if (columnConfig) {
+      this.saveColumnsSettings();
+      this.updateColumns();
+    }
+    return columnConfig;
+  }
+
+  private registerCustomHeader(headerTitle: string, headerId?: string, index?: number): Descriptor|null {
     if (!headerId) {
       headerId = headerTitle;
     }
@@ -855,8 +864,6 @@ export class NetworkLogViewColumns {
     if (this.#dataGrid) {
       this.#dataGrid.addColumn(NetworkLogViewColumns.convertToDataGridDescriptor(columnConfig), index);
     }
-    this.saveColumnsSettings();
-    this.updateColumns();
     return columnConfig;
   }
 

package/front_end/panels/network/ShowMoreDetailsWidget.ts

@@ -35,7 +35,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     if (input.copy) {
       contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copy), input.copy, {jslogContext: 'copy'});
     }
-    if (!input.showMore) {
+    if (!input.showMore && input.text.length > MAX_LENGTH) {
       contextMenu.newSection().appendItem(i18nString(UIStrings.showMore), input.onToggle, {jslogContext: 'show-more'});
     }
     void contextMenu.show();

package/front_end/panels/security/SecurityPanel.ts

@@ -31,6 +31,7 @@ import {SecurityPanelSidebar} from './SecurityPanelSidebar.js';
 
 const {widget, widgetRef} = UI.Widget;
 
+/* eslint-disable @devtools/l10n-uistrings-sentence-punctuation -- Kept with periods to avoid breaking Blink layout tests in chromium/src: http/tests/devtools/security/ */
 const UIStrings = {
   /**
    * @description Title of the overview section in the Security panel.
@@ -428,6 +429,7 @@ const UIStrings = {
    */
   enabled: 'enabled',
 } as const;
+/* eslint-enable @devtools/l10n-uistrings-sentence-punctuation */
 const str_ = i18n.i18n.registerUIStrings('panels/security/SecurityPanel.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
@@ -1560,6 +1562,14 @@ function renderCertificateTransparencySection(input: CertificateTransparencySect
   // clang-format on
 }
 
+function renderNoteSection(loadedFromCache: boolean): TemplateResult {
+  // clang-format off
+  return html`
+    ${loadedFromCache ? html`<div>${i18nString(UIStrings.thisResponseWasLoadedFromCache)}</div>` : nothing}
+    <div>${i18nString(UIStrings.theSecurityDetailsAboveAreFrom)}</div>`;
+  // clang-format on
+}
+
 export class SecurityOriginView extends UI.Widget.VBox {
   readonly #origin: Platform.DevToolsPath.UrlString;
   readonly #titleSection: HTMLElement;
@@ -1584,16 +1594,13 @@ export class SecurityOriginView extends UI.Widget.VBox {
 
       const sctListLength = originState.securityDetails.signedCertificateTimestampList.length;
       const ctCompliance = originState.securityDetails.certificateTransparencyCompliance;
-      if (!sctListLength && ctCompliance === Protocol.Network.CertificateTransparencyCompliance.Unknown) {
-        return;
+      if (sctListLength || ctCompliance !== Protocol.Network.CertificateTransparencyCompliance.Unknown) {
+        this.#createCertificateTransparencySection(originState.securityDetails);
       }
-      this.#createCertificateTransparencySection(originState.securityDetails);
 
       const noteSection = this.element.createChild('div', 'origin-view-section origin-view-notes');
-      if (originState.loadedFromCache) {
-        noteSection.createChild('div').textContent = i18nString(UIStrings.thisResponseWasLoadedFromCache);
-      }
-      noteSection.createChild('div').textContent = i18nString(UIStrings.theSecurityDetailsAboveAreFrom);
+      // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+      render(renderNoteSection(originState.loadedFromCache), noteSection);
     } else if (originState.securityState === Protocol.Security.SecurityState.Secure) {
       // If the security state is secure but there are no security details,
       // this means that the origin is a non-cryptographic secure origin, e.g.

package/front_end/panels/sources/BreakpointEditDialog.ts

@@ -161,6 +161,7 @@ export class BreakpointEditDialog extends UI.Widget.Widget {
   #breakpointType: SDK.DebuggerModel.BreakpointType.LOGPOINT|SDK.DebuggerModel.BreakpointType.CONDITIONAL_BREAKPOINT =
       SDK.DebuggerModel.BreakpointType.CONDITIONAL_BREAKPOINT;
   #onFinish: (result: BreakpointEditDialogResult) => void = () => {};
+  #location?: () => Promise<SDK.DebuggerModel.Location|null>;
   #editor?: TextEditor.TextEditor.TextEditor;
   #state?: CodeMirror.EditorState;
 
@@ -207,6 +208,13 @@ export class BreakpointEditDialog extends UI.Widget.Widget {
     this.#onFinish = onFinish;
     this.requestUpdate();
   }
+  get location(): (() => Promise<SDK.DebuggerModel.Location|null>)|undefined {
+    return this.#location;
+  }
+  set location(location: (() => Promise<SDK.DebuggerModel.Location|null>)|undefined) {
+    this.#location = location;
+    this.requestUpdate();
+  }
 
   override focus(): void {
     void this.updateComplete.then(() => {
@@ -283,6 +291,9 @@ export class BreakpointEditDialog extends UI.Widget.Widget {
       },
     ];
 
+    const completionOptions: TextEditor.JavaScript.CompletionOptions = {
+      location: () => this.#location ? this.#location() : Promise.resolve(null),
+    };
     const editorConfig = [
       CodeMirror.javascript.javascriptLanguage,
       TextEditor.Config.baseConfiguration(this.oldCondition),
@@ -292,8 +303,9 @@ export class BreakpointEditDialog extends UI.Widget.Widget {
       TextEditor.Config.showCompletionHint,
       TextEditor.Config.conservativeCompletion,
       CodeMirror.javascript.javascriptLanguage.data.of({autocomplete}),
+      TextEditor.JavaScript.completion(completionOptions),
       CodeMirror.autocompletion(),
-      TextEditor.JavaScript.argumentHints(),
+      TextEditor.JavaScript.argumentHints(completionOptions),
     ];
 
     this.#state = CodeMirror.EditorState.create({

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -611,7 +611,7 @@ export class DebuggerPlugin extends Plugin {
         tokenType === 'PropertyDefinition';
   }
 
-  private getPopoverRequest(event: MouseEvent|KeyboardEvent): UI.PopoverHelper.PopoverRequest|null {
+  getPopoverRequest(event: MouseEvent|KeyboardEvent): UI.PopoverHelper.PopoverRequest|null {
     if (event instanceof KeyboardEvent) {
       return null;
     }
@@ -629,7 +629,6 @@ export class DebuggerPlugin extends Plugin {
     if (!debuggableFrame) {
       return null;
     }
-    const selectedCallFrame = debuggableFrame.sdkFrame;
 
     let textPosition = editor.editor.posAtCoords(event);
     if (!textPosition) {
@@ -667,65 +666,17 @@ export class DebuggerPlugin extends Plugin {
     return {
       box,
       show: async (popover: UI.GlassPane.GlassPane) => {
-        const scopeMappings = await this.#getScopeMappings(debuggableFrame) ?? [];
-        const scopedVariable = findVariableInScopeMappings(evaluationText, highlightRange.from, scopeMappings);
-        if (scopedVariable.found) {
-          if (!scopedVariable.value) {
-            return false;
-          }
-          objectPopoverHelper =
-              await ObjectUI.ObjectPopoverHelper.ObjectPopoverHelper.buildObjectPopover(scopedVariable.value, popover);
-          const potentiallyUpdatedCallFrame =
-              UI.Context.Context.instance().flavor(StackTrace.StackTrace.DebuggableFrameFlavor);
-          if (!objectPopoverHelper || debuggableFrame !== potentiallyUpdatedCallFrame) {
-            objectPopoverHelper?.dispose();
-            return false;
-          }
-          return true;
-        }
-
-        let resolvedText = '';
-        if (selectedCallFrame.script.isJavaScript()) {
-          const nameMap = await SourceMapScopes.NamesResolver.allVariablesInCallFrame(
-              selectedCallFrame, Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance());
-          try {
-            resolvedText =
-                await Formatter.FormatterWorkerPool.formatterWorkerPool().javaScriptSubstitute(evaluationText, nameMap);
-          } catch {
-          }
-        }
-        // We use side-effect free debug-evaluate when the highlighted expression contains a
-        // function/method call. Otherwise we allow side-effects. The motiviation here are
-        // frameworks like Vue, that heavily use proxies for caching:
-        //
-        //   * We deem a simple property access of a proxy as deterministic so it should be
-        //     successful even if V8 thinks its side-effecting.
-        //   * Explicit function calls on the other hand must be side-effect free. The canonical
-        //     example is hovering over {Math.random()} which would result in a different value
-        //     each time the user hovers over it.
-        const throwOnSideEffect = highlightRange.containsSideEffects;
-        const result = await selectedCallFrame.evaluate({
-          expression: resolvedText || evaluationText,
-          objectGroup: 'popover',
-          includeCommandLineAPI: false,
-          silent: true,
-          returnByValue: false,
-          generatePreview: false,
-          throwOnSideEffect,
-        });
-        if (!result || 'error' in result || !result.object ||
-            (result.object.type === 'object' && result.object.subtype === 'error')) {
+        const object = await this.#evaluateForPopover(debuggableFrame, highlightRange, evaluationText);
+        if (!object) {
           return false;
         }
         objectPopoverHelper =
-            await ObjectUI.ObjectPopoverHelper.ObjectPopoverHelper.buildObjectPopover(result.object, popover);
+            await ObjectUI.ObjectPopoverHelper.ObjectPopoverHelper.buildObjectPopover(object, popover);
         const potentiallyUpdatedCallFrame =
             UI.Context.Context.instance().flavor(StackTrace.StackTrace.DebuggableFrameFlavor);
         if (!objectPopoverHelper || debuggableFrame !== potentiallyUpdatedCallFrame) {
           debuggerModel.runtimeModel().releaseObjectGroup('popover');
-          if (objectPopoverHelper) {
-            objectPopoverHelper.dispose();
-          }
+          objectPopoverHelper?.dispose();
           return false;
         }
         const decoration = CodeMirror.Decoration.set(evalExpressionMark.range(highlightRange.from, highlightRange.to));
@@ -742,6 +693,52 @@ export class DebuggerPlugin extends Plugin {
     };
   }
 
+  async #evaluateForPopover(debuggableFrame: StackTrace.StackTrace.DebuggableFrameFlavor,
+                            highlightRange: {from: number, to: number, containsSideEffects: boolean},
+                            evaluationText: string): Promise<SDK.RemoteObject.RemoteObject|null> {
+    const scopeMappings = await this.#getScopeMappings(debuggableFrame) ?? [];
+    const scopedVariable = findVariableInScopeMappings(evaluationText, highlightRange.from, scopeMappings);
+    if (scopedVariable.found) {
+      return scopedVariable.value;
+    }
+
+    const selectedCallFrame = debuggableFrame.sdkFrame;
+    let resolvedText = '';
+    if (selectedCallFrame.script.isJavaScript()) {
+      const nameMap = await SourceMapScopes.NamesResolver.allVariablesInCallFrame(
+          selectedCallFrame, Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance());
+      try {
+        resolvedText =
+            await Formatter.FormatterWorkerPool.formatterWorkerPool().javaScriptSubstitute(evaluationText, nameMap);
+      } catch {
+      }
+    }
+    // We use side-effect free debug-evaluate when the highlighted expression contains a
+    // function/method call. Otherwise we allow side-effects. The motivation here are
+    // frameworks like Vue, that heavily use proxies for caching:
+    //
+    //   * We deem a simple property access of a proxy as deterministic so it should be
+    //     successful even if V8 thinks its side-effecting.
+    //   * Explicit function calls on the other hand must be side-effect free. The canonical
+    //     example is hovering over {Math.random()} which would result in a different value
+    //     each time the user hovers over it.
+    const throwOnSideEffect = highlightRange.containsSideEffects;
+    const result = await selectedCallFrame.evaluate({
+      expression: resolvedText || evaluationText,
+      objectGroup: 'popover',
+      includeCommandLineAPI: false,
+      silent: true,
+      returnByValue: false,
+      generatePreview: false,
+      throwOnSideEffect,
+    });
+    if (!result || 'error' in result || !result.object ||
+        (result.object.type === 'object' && result.object.subtype === 'error')) {
+      return null;
+    }
+    return result.object;
+  }
+
   private onEditorUpdate(update: CodeMirror.ViewUpdate): void {
     if (!update.changes.empty) {
       // If the document changed, adjust known breakpoint positions
@@ -863,6 +860,15 @@ export class DebuggerPlugin extends Plugin {
     dialog.oldCondition = oldCondition,
     dialog.breakpointType = isLogpointForDialog ? SDK.DebuggerModel.BreakpointType.LOGPOINT :
                                                   SDK.DebuggerModel.BreakpointType.CONDITIONAL_BREAKPOINT;
+    dialog.location = async () => {
+      const uiLocation = breakpoint ? (breakpoint.getClosestResolvedLocation() ??
+                                       {lineNumber: breakpoint.lineNumber(), columnNumber: breakpoint.columnNumber()}) :
+                                      (location ?? await this.defaultBreakpointLocation(line));
+      const rawLocations =
+          await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().uiLocationToRawLocations(
+              this.uiSourceCode, uiLocation.lineNumber, uiLocation.columnNumber);
+      return rawLocations[0] ?? null;
+    };
     dialog.onFinish = async result => {
       this.activeBreakpointDialog = null;
       this.#activeBreakpointEditRequest = undefined;
@@ -1002,8 +1008,8 @@ export class DebuggerPlugin extends Plugin {
 
     const uiPositionToEditorOffset = (lineNumber: number, columnNumber: number): number|null =>
         this.editor?.toOffset(this.transformer.uiLocationToEditorLocation(lineNumber, columnNumber)) ?? null;
-    const scopeChain = await SourceMapScopes.ScopeChainModel.ScopeChainModel.resolveScopeChain(
-        callFrame, Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance());
+    const scopeChain =
+        await SourceMapScopes.ScopeChainResolver.ScopeChainResolver.instance().resolveScopeChain(callFrame);
     const localOriginalScope = scopeChain
                                    .find((s): s is SDK.SourceMapScopeChainEntry.SourceMapScopeChainEntry =>
                                              s instanceof SDK.SourceMapScopeChainEntry.SourceMapScopeChainEntry &&
@@ -2184,8 +2190,7 @@ export async function computeScopeMappings(
     resolvedScopeChain?: SDK.DebuggerModel.ScopeChainEntry[]): Promise<ScopeMapping[]> {
   const scopeMappings: ScopeMapping[] = [];
   const scopeChain = resolvedScopeChain ??
-      await SourceMapScopes.ScopeChainModel.ScopeChainModel.resolveScopeChain(
-          callFrame, Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance());
+      await SourceMapScopes.ScopeChainResolver.ScopeChainResolver.instance().resolveScopeChain(callFrame);
   const activeScopes =
       new Set(scopeChain.filter(s => s instanceof SDK.SourceMapScopeChainEntry.SourceMapScopeChainEntry)
                   .map(s => s.originalScope()));
@@ -2397,6 +2402,12 @@ const evalExpression = defineStatefulDecoration();
 // Styling for plugin-local elements
 
 const theme = CodeMirror.EditorView.baseTheme({
+  '&.source-frame-debugger-script': {
+    backgroundColor: 'rgb(255 255 194 / 50%)',
+  },
+  '&dark.source-frame-debugger-script': {
+    backgroundColor: 'rgb(61 61 0 / 50%)',
+  },
   '.cm-line::selection': {
     backgroundColor: 'transparent',
     color: 'currentColor',