chrome-devtools-frontend 1.0.1703574 → 1.0.1705227

package/front_end/panels/network/ShowMoreDetailsWidget.ts

@@ -11,6 +11,10 @@ const UIStrings = {
    * @description Text to show more content
    */
   showMore: 'Show more',
+  /**
+   * @description Context menu item to copy the shown text to the clipboard
+   */
+  copy: 'Copy',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/network/ShowMoreDetailsWidget.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -20,7 +24,7 @@ interface ViewInput {
   text: string;
   showMore: boolean;
   onToggle: () => void;
-  copy: CopyMenuItem|null;
+  copy: (() => void)|null;
 }
 type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 const MAX_LENGTH = 3000;
@@ -29,7 +33,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
   const onContextMenuShowMore = (event: Event): void => {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
     if (input.copy) {
-      contextMenu.clipboardSection().appendItem(input.copy.menuItem, input.copy.handler);
+      contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copy), input.copy, {jslogContext: 'copy'});
     }
     if (!input.showMore) {
       contextMenu.newSection().appendItem(i18nString(UIStrings.showMore), input.onToggle, {jslogContext: 'show-more'});
@@ -51,16 +55,11 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       target);
 };
 
-interface CopyMenuItem {
-  menuItem: UI.ContextMenu.Item;
-  handler: () => void;
-}
-
 export class ShowMoreDetailsWidget extends UI.Widget.Widget {
   readonly #view: View;
   #text = '';
   #showMore = false;
-  #copy: CopyMenuItem|null = null;
+  #copy: (() => void)|null = null;
   constructor(target?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(target);
     this.#view = view;
@@ -75,7 +74,11 @@ export class ShowMoreDetailsWidget extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
-  set copy(copy: CopyMenuItem) {
+  get copy(): (() => void)|null {
+    return this.#copy;
+  }
+
+  set copy(copy: () => void) {
     this.#copy = copy;
     this.requestUpdate();
   }

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -583,6 +583,7 @@ export class DebuggerPlugin extends Plugin {
   }
 
   private workingCopyChanged(): void {
+    this.#scopeMappingsCache.clear();
     this.setMuted(this.uiSourceCode.isDirty());
   }
 
@@ -666,7 +667,7 @@ export class DebuggerPlugin extends Plugin {
     return {
       box,
       show: async (popover: UI.GlassPane.GlassPane) => {
-        const scopeMappings = await this.#getScopeMappings(selectedCallFrame);
+        const scopeMappings = await this.#getScopeMappings(debuggableFrame) ?? [];
         const scopedVariable = findVariableInScopeMappings(evaluationText, highlightRange.from, scopeMappings);
         if (scopedVariable.found) {
           if (!scopedVariable.value) {
@@ -967,21 +968,18 @@ export class DebuggerPlugin extends Plugin {
     return offset ?? null;
   }
 
-  #cachedScopeMappings?: {callFrame: SDK.DebuggerModel.CallFrame, promise: Promise<ScopeMapping[]>};
+  readonly #scopeMappingsCache = new ScopeMappingsCache(this.uiSourceCode);
 
-  #getScopeMappings(callFrame: SDK.DebuggerModel.CallFrame,
-                    resolvedScopeChain?: SDK.DebuggerModel.ScopeChainEntry[]): Promise<ScopeMapping[]> {
-    if (this.#cachedScopeMappings?.callFrame !== callFrame) {
-      const url = this.uiSourceCode.url();
-      this.#cachedScopeMappings = {
-        callFrame,
-        promise: computeScopeMappings(
-            callFrame, location => this.#rawLocationToEditorOffset(location, url),
+  /** @returns `null` if the scope mappings can't be used because the file has unsaved edits. */
+  #getScopeMappings(debuggableFrame: StackTrace.StackTrace.DebuggableFrameFlavor,
+                    resolvedScopeChain?: SDK.DebuggerModel.ScopeChainEntry[]): Promise<ScopeMapping[]>|null {
+    const url = this.uiSourceCode.url();
+    return this.#scopeMappingsCache.get(
+        debuggableFrame,
+        () => computeScopeMappings(
+            debuggableFrame.sdkFrame, location => this.#rawLocationToEditorOffset(location, url),
             (line, col) => this.editor?.toOffset(this.transformer.uiLocationToEditorLocation(line, col)) ?? null,
-            resolvedScopeChain),
-      };
-    }
-    return this.#cachedScopeMappings.promise;
+            resolvedScopeChain));
   }
 
   private async computeValueDecorations(): Promise<CodeMirror.DecorationSet|null> {
@@ -1004,8 +1002,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 &&
@@ -1040,9 +1038,9 @@ export class DebuggerPlugin extends Plugin {
       return null;
     }
 
-    const scopeMappings = await this.#getScopeMappings(callFrame, scopeChain);
+    const scopeMappings = await this.#getScopeMappings(debuggableFrame, scopeChain);
     // After the `await` the DebuggerPlugin could have been disposed. Re-check `this.editor`.
-    if (!this.editor || scopeMappings.length === 0) {
+    if (!this.editor || !scopeMappings?.length) {
       return null;
     }
 
@@ -2144,6 +2142,41 @@ export interface ScopeMapping {
   variableMap: Map<string, SDK.RemoteObject.RemoteObject|null>;
 }
 
+/**
+ * Caches the {@link ScopeMapping}s for the selected frame of a single {@link DebuggerPlugin}.
+ *
+ * The editor offsets in a {@link ScopeMapping} are derived from raw and UI locations, which describe
+ * the committed script content. Once the user edits the file, these offsets no longer match the
+ * editor content. So no mappings are handed out while the UISourceCode has unsaved edits.
+ *
+ * The cache is keyed on the DebuggableFrameFlavor rather than the SDK CallFrame: Re-translating a
+ * frame (e.g. after a source map is attached) produces a new flavor for the same SDK CallFrame.
+ */
+export class ScopeMappingsCache {
+  readonly #uiSourceCode: Workspace.UISourceCode.UISourceCode;
+  #cached?: {frame: StackTrace.StackTrace.DebuggableFrameFlavor, promise: Promise<ScopeMapping[]>};
+
+  constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode) {
+    this.#uiSourceCode = uiSourceCode;
+  }
+
+  /** @returns the (cached) scope mappings for `frame`, or `null` if the UISourceCode has unsaved edits. */
+  get(frame: StackTrace.StackTrace.DebuggableFrameFlavor,
+      compute: () => Promise<ScopeMapping[]>): Promise<ScopeMapping[]>|null {
+    if (this.#uiSourceCode.isDirty()) {
+      return null;
+    }
+    if (this.#cached?.frame !== frame) {
+      this.#cached = {frame, promise: compute()};
+    }
+    return this.#cached.promise;
+  }
+
+  clear(): void {
+    this.#cached = undefined;
+  }
+}
+
 export async function computeScopeMappings(
     callFrame: SDK.DebuggerModel.CallFrame,
     rawLocationToEditorOffset: (l: SDK.DebuggerModel.Location|null) => Promise<number|null>,
@@ -2151,8 +2184,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()));

package/front_end/panels/sources/ScopeChainSidebarPane.ts

@@ -31,7 +31,6 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
-import * as Bindings from '../../models/bindings/bindings.js';
 import * as SourceMapScopes from '../../models/source_map_scopes/source_map_scopes.js';
 import * as StackTrace from '../../models/stack_trace/stack_trace.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
@@ -214,8 +213,9 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
     this.#linkifier.reset();
 
     if (callFrame) {
+      // TODO(crbug.com/458180550): Receive the ScopeChainResolver via constructor.
       const scopeChainModel = new SourceMapScopes.ScopeChainModel.ScopeChainModel(
-          callFrame.sdkFrame, Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance());
+          callFrame.sdkFrame, SourceMapScopes.ScopeChainResolver.ScopeChainResolver.instance());
       this.#scopeChainModel = scopeChainModel;
       this.#scopeChainModel.addEventListener(SourceMapScopes.ScopeChainModel.Events.SCOPE_CHAIN_UPDATED, event => {
         if (this.#scopeChainModel === scopeChainModel) {

package/front_end/panels/sources/SourcesPanel.ts

@@ -327,7 +327,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
   static updateResizerAndSidebarButtons(panel: SourcesPanel): void {
     const isInWrapper = Boolean(UI.Context.Context.instance().flavor(QuickSourceView)) &&
         !UI.InspectorView.InspectorView.instance().isDrawerMinimized();
-    panel.#sourcesView.setLayoutMode(panel.splitWidget, panel.splitWidget.isVertical(), isInWrapper);
+    panel.#sourcesView.setLayoutMode(panel.splitWidget.isVertical(), isInWrapper);
   }
 
   targetAdded(_target: SDK.Target.Target): void {

package/front_end/panels/sources/SourcesView.ts

@@ -16,7 +16,7 @@ import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js';
 import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {Directives, html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
+import {html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {EditingLocationHistoryManager} from './EditingLocationHistoryManager.js';
@@ -69,7 +69,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/sources/SourcesView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const {ref} = Directives;
 const {widget, widgetRef} = UI.Widget;
 
 export interface ViewInput {
@@ -83,7 +82,6 @@ export interface ViewInput {
   isVertical: boolean;
   isInWrapper: boolean;
   isTraceApp: boolean;
-  splitWidget?: UI.SplitWidget.SplitWidget;
   onToggleNavigatorSidebar?: () => void;
   onToggleDebuggerSidebar?: () => void;
   breakpointsActive: boolean;
@@ -170,11 +168,7 @@ export const DEFAULT_VIEW: View = (input, output, target): void => {
       </devtools-widget>
     </devtools-widget>
     <div class="sources-toolbar" jslog=${VisualLogging.toolbar('bottom')}>
-      <devtools-toolbar class="script-view-toolbar" style="flex: auto;" ${ref(el => {
-        if (el && input.splitWidget) {
-          input.splitWidget.toggleResizer(el, !input.isVertical && !input.isInWrapper);
-        }
-      })}>
+      <devtools-toolbar class="script-view-toolbar" style="flex: auto;">
         ${Array.isArray(input.scriptViewToolbarItems)
             ? input.scriptViewToolbarItems.map(item => item.element)
             : input.scriptViewToolbarItems}
@@ -218,7 +212,6 @@ export class SourcesView extends SourcesViewBase implements UI.SearchableView.Se
   #debuggerSidebarInitialized = false;
   #isVertical = false;
   #isInWrapper = true;
-  #splitWidget?: UI.SplitWidget.SplitWidget;
   #breakpointsActive = true;
   #editorContainerPromise: Promise<TabbedEditorContainer>;
   #editorContainerResolve!: (container: TabbedEditorContainer) => void;
@@ -295,7 +288,6 @@ export class SourcesView extends SourcesViewBase implements UI.SearchableView.Se
       isVertical: this.#isVertical,
       isInWrapper: this.#isInWrapper,
       isTraceApp: Root.Runtime.Runtime.isTraceApp(),
-      splitWidget: this.#splitWidget,
       onToggleNavigatorSidebar: this.#onToggleNavigatorSidebar,
       onToggleDebuggerSidebar: this.#onToggleDebuggerSidebar,
       breakpointsActive: this.#breakpointsActive,
@@ -390,8 +382,7 @@ export class SourcesView extends SourcesViewBase implements UI.SearchableView.Se
     this.requestUpdate();
   }
 
-  setLayoutMode(splitWidget: UI.SplitWidget.SplitWidget, isVertical: boolean, isInWrapper: boolean): void {
-    this.#splitWidget = splitWidget;
+  setLayoutMode(isVertical: boolean, isInWrapper: boolean): void {
     this.#isVertical = isVertical;
     this.#isInWrapper = isInWrapper;
     this.requestUpdate();

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -291,9 +291,6 @@ export class TabbedEditorContainer extends TabbedEditorContainerBase {
   }
 
   override performUpdate(): void {
-    if (false) {
-      return;
-    }
     const shortcuts = [
       {actionId: 'quick-open.show', description: i18nString(UIStrings.openFile)},
       {actionId: 'quick-open.show-command-menu', description: i18nString(UIStrings.runCommand)},