chrome-devtools-frontend 1.0.1705227 → 1.0.1706026

package/front_end/models/formatter/FormatterWorkerPool.ts

@@ -144,7 +144,12 @@ export class FormatterWorkerPool {
       return Promise.resolve(expression);
     }
     return this.runTask(FormatterActions.FormatterActions.JAVASCRIPT_SUBSTITUTE, {content: expression, mapping})
-        .then(result => result || '');
+        .then((result: string|{error: string}|null) => {
+          if (result && typeof result === 'object') {
+            throw new Error(result.error);
+          }
+          return result || '';
+        });
   }
 
   javaScriptScopeTree(expression: string, sourceType: 'module'|'script' = 'script'):

package/front_end/models/javascript_metadata/NativeFunctions.ts

@@ -8972,11 +8972,15 @@ export const NativeFunctions: readonly NativeFunctionValue[] = [
     signatures: [["type","?eventInitDict"]]
   },
   {
-    name: "TouchEvent",
+    name: "ToolActivatedEvent",
     signatures: [["type","?eventInitDict"]]
   },
   {
-    name: "WebMCPEvent",
+    name: "ToolCancelEvent",
+    signatures: [["type","?eventInitDict"]]
+  },
+  {
+    name: "TouchEvent",
     signatures: [["type","?eventInitDict"]]
   },
   {

package/front_end/models/source_map_scopes/NamesResolver.ts

@@ -408,12 +408,11 @@ export const resolveScopeChain =
           }
 
           if (callFrame.script.isWasm()) {
-            return callFrame.scopeChain().filter(scope => !scope.empty());
+            return callFrame.scopeChain();
           }
           const thisObject = await resolveThisObject(callFrame, debuggerWorkspaceBinding);
-          const scopes = callFrame.scopeChain().filter(scope => !scope.empty() ||
-                                                           scope.type() === Protocol.Debugger.ScopeType.Local);
-          return scopes.map(scope => new ScopeWithSourceMappedVariables(scope, thisObject, debuggerWorkspaceBinding));
+          return callFrame.scopeChain().map(
+              scope => new ScopeWithSourceMappedVariables(scope, thisObject, debuggerWorkspaceBinding));
         };
 
 /**
@@ -472,7 +471,7 @@ export const allVariablesInCallFrame = async(
         }
       }
 
-      const scopeChain = callFrame.scopeChain().filter(scope => !scope.empty());
+      const scopeChain = callFrame.scopeChain();
       const resolvedScopes =
           await Promise.all(scopeChain.map(scope => resolveDebuggerScope(scope, debuggerWorkspaceBinding)));
       const result = resolvedScopes.map(toScopeVariableMapping);
@@ -529,13 +528,12 @@ export const resolveThisObject = async(
     callFrame: SDK.DebuggerModel.CallFrame,
     debuggerWorkspaceBinding:
         Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding): Promise<SDK.RemoteObject.RemoteObject|null> => {
-  const innermostScope =
-      callFrame.scopeChain().find(scope => !scope.empty() || scope.type() === Protocol.Debugger.ScopeType.Local);
-  if (!innermostScope) {
+  const scopeChain = callFrame.scopeChain();
+  if (scopeChain.length === 0) {
     return callFrame.thisObject();
   }
 
-  const {thisMapping} = await resolveDebuggerScope(innermostScope, debuggerWorkspaceBinding);
+  const {thisMapping} = await resolveDebuggerScope(scopeChain[0], debuggerWorkspaceBinding);
   if (!thisMapping) {
     return callFrame.thisObject();
   }

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/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;
@@ -2396,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',

package/front_end/panels/sources/EditingLocationHistoryManager.ts

@@ -7,7 +7,7 @@ import * as Workspace from '../../models/workspace/workspace.js';
 import type * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 
-import type {SourcesView} from './SourcesView.js';
+import type {TabbedEditorContainer} from './TabbedEditorContainer.js';
 import type {UISourceCodeFrame} from './UISourceCodeFrame.js';
 
 export const HistoryDepth = 20;
@@ -17,7 +17,7 @@ export class EditingLocationHistoryManager {
   private current = -1;
   private revealingCount = 0;
 
-  constructor(private readonly sourcesView: SourcesView) {
+  constructor(private readonly editorContainer: TabbedEditorContainer) {
   }
 
   trackSourceFrameCursorJumps(sourceFrame: UISourceCodeFrame): void {
@@ -66,12 +66,12 @@ export class EditingLocationHistoryManager {
     }
   }
 
-  private async reveal(entry: EditingLocationHistoryEntry): Promise<void> {
+  private reveal(entry: EditingLocationHistoryEntry): void {
     const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCode(entry.projectId, entry.url);
     if (uiSourceCode) {
       this.revealingCount++;
       try {
-        await this.sourcesView.showSourceLocation(uiSourceCode, entry.position, false, true);
+        this.editorContainer.showSourceLocation(uiSourceCode, entry.position, false, true);
       } finally {
         this.revealingCount--;
       }
@@ -81,14 +81,14 @@ export class EditingLocationHistoryManager {
   rollback(): void {
     if (this.current > 0) {
       this.current--;
-      void this.reveal(this.entries[this.current]);
+      this.reveal(this.entries[this.current]);
     }
   }
 
   rollover(): void {
     if (this.current < this.entries.length - 1) {
       this.current++;
-      void this.reveal(this.entries[this.current]);
+      this.reveal(this.entries[this.current]);
     }
   }
 

package/front_end/panels/sources/OpenFileQuickOpen.ts

@@ -11,13 +11,13 @@ import {PanelUtils} from '../../panels/utils/utils.js';
 import {Directives, html, type TemplateResult} from '../../ui/lit/lit.js';
 
 import {FilteredUISourceCodeListProvider} from './FilteredUISourceCodeListProvider.js';
-import {SourcesView} from './SourcesView.js';
+import {TabbedEditorContainer} from './TabbedEditorContainer.js';
 
 const {styleMap} = Directives;
 
 export class OpenFileQuickOpen extends FilteredUISourceCodeListProvider {
   override attach(): void {
-    this.setDefaultScores(SourcesView.defaultUISourceCodeScores());
+    this.setDefaultScores(TabbedEditorContainer.defaultUISourceCodeScores());
     super.attach();
   }
 

package/front_end/panels/sources/Plugin.ts

@@ -7,6 +7,7 @@ import type * as CodeMirror from '../../third_party/codemirror.next/codemirror.n
 import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import type * as UI from '../../ui/legacy/legacy.js';
+import type {LitTemplate} from '../../ui/lit/lit.js';
 
 export class Plugin {
   constructor(
@@ -21,7 +22,7 @@ export class Plugin {
   willHide(): void {
   }
 
-  rightToolbarItems(): UI.Toolbar.ToolbarItem[] {
+  rightToolbarItems(): Array<UI.Toolbar.ToolbarItem|LitTemplate> {
     return [];
   }
 
@@ -30,7 +31,7 @@ export class Plugin {
    * TODO(szuend): It is OK to asyncify this function (similar to {rightToolbarItems}),
    *               but it is currently not strictly necessary.
    */
-  leftToolbarItems(): UI.Toolbar.ToolbarItem[] {
+  leftToolbarItems(): Array<UI.Toolbar.ToolbarItem|LitTemplate> {
     return [];
   }