chrome-devtools-frontend 1.0.1040857 → 1.0.1070764

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -165,11 +165,17 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 // Don't scan for possible breakpoints on a line beyond this position;
 const MAX_POSSIBLE_BREAKPOINT_LINE = 2500;
 
+// Limits on inline variable view computation.
+const MAX_CODE_SIZE_FOR_VALUE_DECORATIONS = 10000;
+const MAX_PROPERTIES_IN_SCOPE_FOR_VALUE_DECORATIONS = 500;
+
 type BreakpointDescription = {
   position: number,
   breakpoint: Bindings.BreakpointManager.Breakpoint,
 };
 
+const debuggerPluginForUISourceCode = new Map<Workspace.UISourceCode.UISourceCode, DebuggerPlugin>();
+
 export class DebuggerPlugin extends Plugin {
   private editor: TextEditor.TextEditor.TextEditor|undefined = undefined;
   // Set if the debugger is stopped on a breakpoint in this file
@@ -210,11 +216,15 @@ export class DebuggerPlugin extends Plugin {
   private activeBreakpointDialog: BreakpointEditDialog|null = null;
   private missingDebugInfoBar: UI.Infobar.Infobar|null = null;
 
+  private readonly ignoreListCallback: () => void;
+
   constructor(
       uiSourceCode: Workspace.UISourceCode.UISourceCode,
       private readonly transformer: SourceFrame.SourceFrame.Transformer) {
     super(uiSourceCode);
 
+    debuggerPluginForUISourceCode.set(uiSourceCode, this);
+
     this.scriptsPanel = SourcesPanel.instance();
     this.breakpointManager = Bindings.BreakpointManager.BreakpointManager.instance();
 
@@ -229,15 +239,8 @@ export class DebuggerPlugin extends Plugin {
 
     this.scriptFileForDebuggerModel = new Map();
 
-    Common.Settings.Settings.instance()
-        .moduleSetting('skipStackFramesPattern')
-        .addChangeListener(this.showIgnoreListInfobarIfNeeded, this);
-    Common.Settings.Settings.instance()
-        .moduleSetting('skipContentScripts')
-        .addChangeListener(this.showIgnoreListInfobarIfNeeded, this);
-    Common.Settings.Settings.instance()
-        .moduleSetting('automaticallyIgnoreListKnownThirdPartyScripts')
-        .addChangeListener(this.showIgnoreListInfobarIfNeeded, this);
+    this.ignoreListCallback = this.showIgnoreListInfobarIfNeeded.bind(this);
+    Bindings.IgnoreListManager.IgnoreListManager.instance().addChangeListener(this.ignoreListCallback);
 
     UI.Context.Context.instance().addFlavorChangeListener(SDK.DebuggerModel.CallFrame, this.callFrameChanged, this);
     this.liveLocationPool = new Bindings.LiveLocation.LiveLocationPool();
@@ -328,6 +331,8 @@ export class DebuggerPlugin extends Plugin {
         const breakpoint =
             this.breakpoints.find(b => b.position >= line.from && b.position <= line.to)?.breakpoint || null;
         const isLogpoint = breakpoint ? breakpoint.condition().includes(LogpointPrefix) : false;
+        Host.userMetrics.breakpointEditDialogRevealedFrom(
+            Host.UserMetrics.BreakpointEditDialogRevealedFrom.KeyboardShortcut);
         this.editBreakpointCondition(line, breakpoint, null, isLogpoint);
         return true;
       },
@@ -338,7 +343,7 @@ export class DebuggerPlugin extends Plugin {
     // Start asynchronous actions that require access to the editor
     // instance
     this.editor = editor;
-    computeNonBreakableLines(editor.state, this.uiSourceCode).then(linePositions => {
+    computeNonBreakableLines(editor.state, this.transformer, this.uiSourceCode).then(linePositions => {
       if (linePositions.length) {
         editor.dispatch({effects: SourceFrame.SourceFrame.addNonBreakableLines.of(linePositions)});
       }
@@ -432,6 +437,16 @@ export class DebuggerPlugin extends Plugin {
     this.popoverHelper?.hidePopover();
   }
 
+  editBreakpointLocation({breakpoint, uiLocation}: Bindings.BreakpointManager.BreakpointLocation): void {
+    const {lineNumber} = this.transformer.uiLocationToEditorLocation(uiLocation.lineNumber, uiLocation.columnNumber);
+    const line = this.editor?.state.doc.line(lineNumber + 1);
+    if (!line) {
+      return;
+    }
+    const isLogpoint = breakpoint.condition().includes(LogpointPrefix);
+    this.editBreakpointCondition(line, breakpoint, null, isLogpoint);
+  }
+
   populateLineGutterContextMenu(contextMenu: UI.ContextMenu.ContextMenu, editorLineNumber: number): void {
     const uiLocation = new Workspace.UISourceCode.UILocation(this.uiSourceCode, editorLineNumber, 0);
     this.scriptsPanel.appendUILocationItems(contextMenu, uiLocation);
@@ -448,12 +463,16 @@ export class DebuggerPlugin extends Plugin {
         contextMenu.debugSection().appendItem(
             i18nString(UIStrings.addBreakpoint), this.createNewBreakpoint.bind(this, line, '', true));
         if (supportsConditionalBreakpoints) {
-          contextMenu.debugSection().appendItem(
-              i18nString(UIStrings.addConditionalBreakpoint),
-              this.editBreakpointCondition.bind(this, line, null, null, false /* preferLogpoint */));
-          contextMenu.debugSection().appendItem(
-              i18nString(UIStrings.addLogpoint),
-              this.editBreakpointCondition.bind(this, line, null, null, true /* preferLogpoint */));
+          contextMenu.debugSection().appendItem(i18nString(UIStrings.addConditionalBreakpoint), () => {
+            Host.userMetrics.breakpointEditDialogRevealedFrom(
+                Host.UserMetrics.BreakpointEditDialogRevealedFrom.LineGutterContextMenu);
+            this.editBreakpointCondition(line, null, null, false /* preferLogpoint */);
+          });
+          contextMenu.debugSection().appendItem(i18nString(UIStrings.addLogpoint), () => {
+            Host.userMetrics.breakpointEditDialogRevealedFrom(
+                Host.UserMetrics.BreakpointEditDialogRevealedFrom.LineGutterContextMenu);
+            this.editBreakpointCondition(line, null, null, true /* preferLogpoint */);
+          });
           contextMenu.debugSection().appendItem(
               i18nString(UIStrings.neverPauseHere), this.createNewBreakpoint.bind(this, line, 'false', true));
         }
@@ -466,9 +485,11 @@ export class DebuggerPlugin extends Plugin {
         // Editing breakpoints only make sense for conditional breakpoints
         // and logpoints and both are currently only available for JavaScript
         // debugging.
-        contextMenu.debugSection().appendItem(
-            i18nString(UIStrings.editBreakpoint),
-            this.editBreakpointCondition.bind(this, line, breakpoints[0], null, false /* preferLogpoint */));
+        contextMenu.debugSection().appendItem(i18nString(UIStrings.editBreakpoint), () => {
+          Host.userMetrics.breakpointEditDialogRevealedFrom(
+              Host.UserMetrics.BreakpointEditDialogRevealedFrom.BreakpointMarkerContextMenu);
+          this.editBreakpointCondition(line, breakpoints[0], null, false /* preferLogpoint */);
+        });
       }
       const hasEnabled = breakpoints.some(breakpoint => breakpoint.enabled());
       if (hasEnabled) {
@@ -851,6 +872,8 @@ export class DebuggerPlugin extends Plugin {
       if (!result.committed) {
         return;
       }
+
+      recordBreakpointWithConditionAdded(breakpoint?.condition(), result.condition);
       if (breakpoint) {
         breakpoint.setCondition(result.condition);
       } else if (location) {
@@ -876,6 +899,20 @@ export class DebuggerPlugin extends Plugin {
     dialog.show(decorationElement);
     dialog.focusEditor();
     this.activeBreakpointDialog = dialog;
+
+    function recordBreakpointWithConditionAdded(oldCondition: string|undefined, newCondition: string): void {
+      const isLogpoint = newCondition.includes(LogpointPrefix);
+      const isConditionalBreakpoint = newCondition.length !== 0 && !isLogpoint;
+
+      const wasLogpoint = oldCondition && oldCondition.includes(LogpointPrefix);
+      const wasConditionalBreakpoint = oldCondition && oldCondition.length !== 0 && !wasLogpoint;
+      if (isLogpoint && !wasLogpoint) {
+        Host.userMetrics.breakpointWithConditionAdded(Host.UserMetrics.BreakpointWithConditionAdded.Logpoint);
+      } else if (isConditionalBreakpoint && !wasConditionalBreakpoint) {
+        Host.userMetrics.breakpointWithConditionAdded(
+            Host.UserMetrics.BreakpointWithConditionAdded.ConditionalBreakpoint);
+      }
+    }
   }
 
   // Create decorations to indicate the current debugging position
@@ -907,11 +944,27 @@ export class DebuggerPlugin extends Plugin {
       return;
     }
     const decorations = this.executionLocation ? await this.computeValueDecorations() : null;
+    // After the `await` the DebuggerPlugin could have been disposed. Re-check `this.editor`.
+    if (!this.editor) {
+      return;
+    }
     if (decorations || this.editor.state.field(valueDecorations.field).size) {
       this.editor.dispatch({effects: valueDecorations.update.of(decorations || CodeMirror.Decoration.none)});
     }
   }
 
+  async #rawLocationToEditorOffset(location: SDK.DebuggerModel.Location|null, url: Platform.DevToolsPath.UrlString):
+      Promise<number|null> {
+    const uiLocation = location &&
+        await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().rawLocationToUILocation(location);
+    if (!uiLocation || uiLocation.uiSourceCode.url() !== url) {
+      return null;
+    }
+    const offset = this.editor?.toOffset(
+        this.transformer.uiLocationToEditorLocation(uiLocation.lineNumber, uiLocation.columnNumber));
+    return offset ?? null;
+  }
+
   private async computeValueDecorations(): Promise<CodeMirror.DecorationSet|null> {
     if (!this.editor) {
       return null;
@@ -927,47 +980,33 @@ export class DebuggerPlugin extends Plugin {
     if (!callFrame) {
       return null;
     }
+    const url = this.uiSourceCode.url();
 
-    const localScope = callFrame.localScope();
-    if (!localScope || !callFrame.functionLocation()) {
+    const rawLocationToEditorOffset: (location: SDK.DebuggerModel.Location|null) => Promise<number|null> = location =>
+        this.#rawLocationToEditorOffset(location, url);
+
+    const functionOffsetPromise = this.#rawLocationToEditorOffset(callFrame.functionLocation(), url);
+    const executionOffsetPromise = this.#rawLocationToEditorOffset(callFrame.location(), url);
+    const [functionOffset, executionOffset] = await Promise.all([functionOffsetPromise, executionOffsetPromise]);
+    if (!functionOffset || !executionOffset) {
       return null;
     }
 
-    const {properties} =
-        await SourceMapScopes.NamesResolver.resolveScopeInObject(localScope).getAllProperties(false, false);
-    if (!properties || !properties.length || properties.length > 500) {
+    if (functionOffset >= executionOffset || executionOffset - functionOffset > MAX_CODE_SIZE_FOR_VALUE_DECORATIONS) {
       return null;
     }
 
-    const functionUILocationPromise =
-        Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().rawLocationToUILocation(
-            (callFrame.functionLocation() as SDK.DebuggerModel.Location));
-    const executionUILocationPromise =
-        Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().rawLocationToUILocation(
-            callFrame.location());
-    const [functionUILocation, executionUILocation] =
-        await Promise.all([functionUILocationPromise, executionUILocationPromise]);
-    if (!functionUILocation || !executionUILocation ||
-        functionUILocation.uiSourceCode.url() !== this.uiSourceCode.url() ||
-        executionUILocation.uiSourceCode.url() !== this.uiSourceCode.url()) {
+    const variableNames = getVariableNamesByLine(this.editor.state, functionOffset, executionOffset, executionOffset);
+    if (variableNames.length === 0) {
       return null;
     }
 
-    const functionLocation =
-        this.transformer.uiLocationToEditorLocation(functionUILocation.lineNumber, functionUILocation.columnNumber);
-    const executionLocation =
-        this.transformer.uiLocationToEditorLocation(executionUILocation.lineNumber, executionUILocation.columnNumber);
-    if (functionLocation.lineNumber >= executionLocation.lineNumber ||
-        executionLocation.lineNumber - functionLocation.lineNumber > 500 || functionLocation.lineNumber < 0 ||
-        executionLocation.lineNumber >= this.editor.state.doc.lines) {
+    const scopeMappings = await computeScopeMappings(callFrame, rawLocationToEditorOffset);
+    if (scopeMappings.length === 0) {
       return null;
     }
 
-    const variableMap = new Map<string, SDK.RemoteObject.RemoteObject>(
-        properties.map(p => [p.name, p.value] as [string, SDK.RemoteObject.RemoteObject]));
-
-    const variablesByLine =
-        this.getVariablesByLine(this.editor.state, variableMap, functionLocation, executionLocation);
+    const variablesByLine = getVariableValuesByLine(scopeMappings, variableNames);
     if (!variablesByLine) {
       return null;
     }
@@ -976,56 +1015,19 @@ export class DebuggerPlugin extends Plugin {
 
     for (const [line, names] of variablesByLine) {
       const prevLine = variablesByLine.get(line - 1);
-      let newNames = prevLine ? Array.from(names).filter(n => !prevLine.has(n)) : Array.from(names);
+      let newNames = prevLine ? Array.from(names).filter(n => prevLine.get(n[0]) !== n[1]) : Array.from(names);
       if (!newNames.length) {
         continue;
       }
       if (newNames.length > 10) {
         newNames = newNames.slice(0, 10);
       }
-      const pairs = newNames.map(name => [name, variableMap.get(name)] as [string, SDK.RemoteObject.RemoteObject]);
-      decorations.push(CodeMirror.Decoration.widget({widget: new ValueDecoration(pairs), side: 1})
+      decorations.push(CodeMirror.Decoration.widget({widget: new ValueDecoration(newNames), side: 1})
                            .range(this.editor.state.doc.line(line + 1).to));
     }
     return CodeMirror.Decoration.set(decorations, true);
   }
 
-  getVariablesByLine(
-      editorState: CodeMirror.EditorState, variableMap: Map<string, unknown>,
-      fromLoc: {lineNumber: number, columnNumber: number},
-      toLoc: {lineNumber: number, columnNumber: number}): Map<number, Set<string>>|null {
-    const fromLine = editorState.doc.line(fromLoc.lineNumber + 1);
-    const fromPos = Math.min(fromLine.to, fromLine.from + fromLoc.columnNumber);
-    const toPos = editorState.doc.line(toLoc.lineNumber + 1).from;
-
-    const tree = CodeMirror.ensureSyntaxTree(editorState, toPos, 100);
-    if (!tree) {
-      return null;
-    }
-
-    const namesPerLine = new Map<number, Set<string>>();
-    let curLine = fromLine;
-    tree.iterate({
-      from: fromPos,
-      to: toPos,
-      enter: node => {
-        const varName = this.isVariableIdentifier(node.name) && editorState.sliceDoc(node.from, node.to);
-        if (varName && variableMap.has(varName)) {
-          if (node.from > curLine.to) {
-            curLine = editorState.doc.lineAt(node.from);
-          }
-          let names = namesPerLine.get(curLine.number - 1);
-          if (!names) {
-            names = new Set();
-            namesPerLine.set(curLine.number - 1, names);
-          }
-          names.add(varName);
-        }
-      },
-    });
-    return namesPerLine;
-  }
-
   // Highlight the locations the debugger can continue to (when
   // Control is held)
   private async showContinueToLocations(): Promise<void> {
@@ -1283,7 +1285,8 @@ export class DebuggerPlugin extends Plugin {
       this.breakpoints = this.fetchBreakpoints();
       const forBreakpoints = this.breakpoints;
       const decorations = await this.computeBreakpointDecoration(this.editor.state, forBreakpoints);
-      if (this.breakpoints === forBreakpoints &&
+      // After the `await` we could have disposed of this DebuggerPlugin, so re-check `this.editor`.
+      if (this.editor && this.breakpoints === forBreakpoints &&
           (decorations.gutter.size || this.editor.state.field(breakpointMarkers, false)?.gutter.size)) {
         this.editor.dispatch({effects: setBreakpointDeco.of(decorations)});
       }
@@ -1337,17 +1340,23 @@ export class DebuggerPlugin extends Plugin {
     }
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
     if (breakpoint) {
-      contextMenu.debugSection().appendItem(
-          i18nString(UIStrings.editBreakpoint),
-          this.editBreakpointCondition.bind(this, line, breakpoint, null, false /* preferLogpoint */));
+      contextMenu.debugSection().appendItem(i18nString(UIStrings.editBreakpoint), () => {
+        Host.userMetrics.breakpointEditDialogRevealedFrom(
+            Host.UserMetrics.BreakpointEditDialogRevealedFrom.BreakpointMarkerContextMenu);
+        this.editBreakpointCondition(line, breakpoint, null, false /* preferLogpoint */);
+      });
     } else {
       const uiLocation = this.transformer.editorLocationToUILocation(line.number - 1, position - line.from);
-      contextMenu.debugSection().appendItem(
-          i18nString(UIStrings.addConditionalBreakpoint),
-          this.editBreakpointCondition.bind(this, line, null, uiLocation, false /* preferLogpoint */));
-      contextMenu.debugSection().appendItem(
-          i18nString(UIStrings.addLogpoint),
-          this.editBreakpointCondition.bind(this, line, null, uiLocation, true /* preferLogpoint */));
+      contextMenu.debugSection().appendItem(i18nString(UIStrings.addConditionalBreakpoint), () => {
+        Host.userMetrics.breakpointEditDialogRevealedFrom(
+            Host.UserMetrics.BreakpointEditDialogRevealedFrom.BreakpointMarkerContextMenu);
+        this.editBreakpointCondition(line, null, uiLocation, false /* preferLogpoint */);
+      });
+      contextMenu.debugSection().appendItem(i18nString(UIStrings.addLogpoint), () => {
+        Host.userMetrics.breakpointEditDialogRevealedFrom(
+            Host.UserMetrics.BreakpointEditDialogRevealedFrom.BreakpointMarkerContextMenu);
+        this.editBreakpointCondition(line, null, uiLocation, true /* preferLogpoint */);
+      });
 
       contextMenu.debugSection().appendItem(
           i18nString(UIStrings.neverPauseHere),
@@ -1540,7 +1549,9 @@ export class DebuggerPlugin extends Plugin {
   private async setBreakpoint(lineNumber: number, columnNumber: number|undefined, condition: string, enabled: boolean):
       Promise<void> {
     Common.Settings.Settings.instance().moduleSetting('breakpointsActive').set(true);
-    await this.breakpointManager.setBreakpoint(this.uiSourceCode, lineNumber, columnNumber, condition, enabled);
+    await this.breakpointManager.setBreakpoint(
+        this.uiSourceCode, lineNumber, columnNumber, condition, enabled,
+        Bindings.BreakpointManager.BreakpointOrigin.USER_ACTION);
     this.breakpointWasSetForTest(lineNumber, columnNumber, condition, enabled);
   }
 
@@ -1622,22 +1633,45 @@ export class DebuggerPlugin extends Plugin {
     this.uiSourceCode.removeEventListener(
         Workspace.UISourceCode.Events.WorkingCopyCommitted, this.workingCopyCommitted, this);
 
-    Common.Settings.Settings.instance()
-        .moduleSetting('skipStackFramesPattern')
-        .removeChangeListener(this.showIgnoreListInfobarIfNeeded, this);
-    Common.Settings.Settings.instance()
-        .moduleSetting('skipContentScripts')
-        .removeChangeListener(this.showIgnoreListInfobarIfNeeded, this);
-    Common.Settings.Settings.instance()
-        .moduleSetting('automaticallyIgnoreListKnownThirdPartyScripts')
-        .removeChangeListener(this.showIgnoreListInfobarIfNeeded, this);
+    Bindings.IgnoreListManager.IgnoreListManager.instance().removeChangeListener(this.ignoreListCallback);
+
+    debuggerPluginForUISourceCode.delete(this.uiSourceCode);
     super.dispose();
 
+    window.clearTimeout(this.refreshBreakpointsTimeout);
+    // Clear `this.editor` to signal that we are disposed. Any function from this `DebuggerPlugin` instance
+    // still running or scheduled will early return and not do any work.
+    this.editor = undefined;
+
     UI.Context.Context.instance().removeFlavorChangeListener(SDK.DebuggerModel.CallFrame, this.callFrameChanged, this);
     this.liveLocationPool.disposeAll();
   }
 }
 
+let breakpointLocationRevealerInstance: BreakpointLocationRevealer;
+
+export class BreakpointLocationRevealer implements Common.Revealer.Revealer {
+  static instance({forceNew}: {forceNew: boolean} = {forceNew: false}): BreakpointLocationRevealer {
+    if (!breakpointLocationRevealerInstance || forceNew) {
+      breakpointLocationRevealerInstance = new BreakpointLocationRevealer();
+    }
+
+    return breakpointLocationRevealerInstance;
+  }
+
+  async reveal(breakpointLocation: Object, omitFocus?: boolean|undefined): Promise<void> {
+    if (!(breakpointLocation instanceof Bindings.BreakpointManager.BreakpointLocation)) {
+      throw new Error('Internal error: not a breakpoint location');
+    }
+    const {uiLocation} = breakpointLocation;
+    SourcesPanel.instance().showUILocation(uiLocation, omitFocus);
+    const debuggerPlugin = debuggerPluginForUISourceCode.get(uiLocation.uiSourceCode);
+    if (debuggerPlugin) {
+      debuggerPlugin.editBreakpointLocation(breakpointLocation);
+    }
+  }
+}
+
 // Infobar panel state, used to show additional panels below the editor.
 
 const addInfobar = CodeMirror.StateEffect.define<UI.Infobar.Infobar>();
@@ -1666,11 +1700,14 @@ const infobarState = CodeMirror.StateField.define<UI.Infobar.Infobar[]>({
 // Enumerate non-breakable lines (lines without a known corresponding
 // position in the UISource).
 async function computeNonBreakableLines(
-    state: CodeMirror.EditorState, sourceCode: Workspace.UISourceCode.UISourceCode): Promise<readonly number[]> {
+    state: CodeMirror.EditorState, transformer: SourceFrame.SourceFrame.Transformer,
+    sourceCode: Workspace.UISourceCode.UISourceCode): Promise<readonly number[]> {
   const linePositions = [];
   if (Bindings.CompilerScriptMapping.CompilerScriptMapping.uiSourceCodeOrigin(sourceCode).length) {
     for (let i = 0; i < state.doc.lines; i++) {
-      const lineHasMapping = Bindings.CompilerScriptMapping.CompilerScriptMapping.uiLineHasMapping(sourceCode, i);
+      const {lineNumber} = transformer.editorLocationToUILocation(i, 0);
+      const lineHasMapping =
+          Bindings.CompilerScriptMapping.CompilerScriptMapping.uiLineHasMapping(sourceCode, lineNumber);
       if (!lineHasMapping) {
         linePositions.push(state.doc.line(i + 1).from);
       }
@@ -1685,7 +1722,8 @@ async function computeNonBreakableLines(
       return [];
     }
     for (let i = 0; i < state.doc.lines; i++) {
-      if (!mappedLines.has(i)) {
+      const {lineNumber} = transformer.editorLocationToUILocation(i, 0);
+      if (!mappedLines.has(lineNumber)) {
         linePositions.push(state.doc.line(i + 1).from);
       }
     }
@@ -1896,6 +1934,175 @@ class ValueDecoration extends CodeMirror.WidgetType {
 
 const valueDecorations = defineStatefulDecoration();
 
+function isVariableIdentifier(tokenType: string): boolean {
+  return tokenType === 'VariableName' || tokenType === 'VariableDefinition';
+}
+
+function isVariableDefinition(tokenType: string): boolean {
+  return tokenType === 'VariableDefinition';
+}
+
+function isLetConstDefinition(tokenType: string): boolean {
+  return tokenType === 'let' || tokenType === 'const';
+}
+
+function isScopeNode(tokenType: string): boolean {
+  return tokenType === 'Block' || tokenType === 'ForSpec';
+}
+
+class SiblingScopeVariables {
+  blockList: Set<string> = new Set<string>();
+  variables: {line: number, from: number, id: string}[] = [];
+}
+
+export function getVariableNamesByLine(
+    editorState: CodeMirror.EditorState, fromPos: number, toPos: number,
+    currentPos: number): {line: number, from: number, id: string}[] {
+  const fromLine = editorState.doc.lineAt(fromPos);
+  fromPos = Math.min(fromLine.to, fromPos);
+  toPos = editorState.doc.lineAt(toPos).from;
+
+  const tree = CodeMirror.ensureSyntaxTree(editorState, toPos, 100);
+  if (!tree) {
+    return [];
+  }
+
+  // Sibling scope is a scope that does not contain the current position.
+  // We will exclude variables that are defined (and used in those scopes (since we are currently outside of their lifetime).
+  function isSiblingScopeNode(node: {name: string, from: number, to: number}): boolean {
+    return isScopeNode(node.name) && (node.to < currentPos || currentPos < node.from);
+  }
+
+  const names: {line: number, from: number, id: string}[] = [];
+  let curLine = fromLine;
+  const siblingStack: SiblingScopeVariables[] = [];
+  let currentLetConstDefinition: CodeMirror.SyntaxNode|null = null;
+
+  function currentNames(): {line: number, from: number, id: string}[] {
+    return siblingStack.length ? siblingStack[siblingStack.length - 1].variables : names;
+  }
+
+  tree.iterate({
+    from: fromPos,
+    to: toPos,
+    enter: node => {
+      if (node.from < fromPos) {
+        return;
+      }
+
+      if (isLetConstDefinition(node.name)) {
+        currentLetConstDefinition = node.node.nextSibling;
+        return;
+      }
+
+      if (isSiblingScopeNode(node)) {
+        siblingStack.push(new SiblingScopeVariables());
+        return;
+      }
+
+      const varName = isVariableIdentifier(node.name) && editorState.sliceDoc(node.from, node.to);
+      if (!varName) {
+        return;
+      }
+
+      if (currentLetConstDefinition && isVariableDefinition(node.name) && siblingStack.length > 0) {
+        siblingStack[siblingStack.length - 1].blockList.add(varName);
+        return;
+      }
+
+      if (node.from > curLine.to) {
+        curLine = editorState.doc.lineAt(node.from);
+      }
+
+      currentNames().push({line: curLine.number - 1, from: node.from, id: varName});
+    },
+    leave: node => {
+      if (currentLetConstDefinition === node.node) {
+        currentLetConstDefinition = null;
+      } else if (isSiblingScopeNode(node)) {
+        const topScope = siblingStack.pop();
+        const nameList = currentNames();
+        for (const token of topScope?.variables ?? []) {
+          if (!topScope?.blockList.has(token.id)) {
+            nameList.push(token);
+          }
+        }
+      }
+    },
+  });
+  return names;
+}
+
+export async function computeScopeMappings(
+    callFrame: SDK.DebuggerModel.CallFrame,
+    rawLocationToEditorOffset: (l: SDK.DebuggerModel.Location|null) => Promise<number|null>):
+    Promise<{scopeStart: number, scopeEnd: number, variableMap: Map<string, SDK.RemoteObject.RemoteObject>}[]> {
+  const scopeMappings:
+      {scopeStart: number, scopeEnd: number, variableMap: Map<string, SDK.RemoteObject.RemoteObject>}[] = [];
+  for (const scope of callFrame.scopeChain()) {
+    const scopeStart = await rawLocationToEditorOffset(scope.startLocation());
+    if (!scopeStart) {
+      break;
+    }
+    const scopeEnd = await rawLocationToEditorOffset(scope.endLocation());
+    if (!scopeEnd) {
+      break;
+    }
+
+    const {properties} = await SourceMapScopes.NamesResolver.resolveScopeInObject(scope).getAllProperties(false, false);
+    if (!properties || properties.length > MAX_PROPERTIES_IN_SCOPE_FOR_VALUE_DECORATIONS) {
+      break;
+    }
+    const variableMap = new Map<string, SDK.RemoteObject.RemoteObject>(
+        properties.map(p => [p.name, p.value] as [string, SDK.RemoteObject.RemoteObject]));
+
+    scopeMappings.push({scopeStart, scopeEnd, variableMap});
+
+    // Let us only get mappings for block scopes until we see a surrounding function (local) scope.
+    if (scope.type() === Protocol.Debugger.ScopeType.Local) {
+      break;
+    }
+  }
+  return scopeMappings;
+}
+
+export function getVariableValuesByLine(
+    scopeMappings: {scopeStart: number, scopeEnd: number, variableMap: Map<string, SDK.RemoteObject.RemoteObject>}[],
+    variableNames: {line: number, from: number, id: string}[]): Map<number, Map<string, SDK.RemoteObject.RemoteObject>>|
+    null {
+  const namesPerLine = new Map<number, Map<string, SDK.RemoteObject.RemoteObject>>();
+  for (const {line, from, id} of variableNames) {
+    const varValue = findVariableInChain(id, from, scopeMappings);
+    if (!varValue) {
+      continue;
+    }
+    let names = namesPerLine.get(line);
+    if (!names) {
+      names = new Map();
+      namesPerLine.set(line, names);
+    }
+    names.set(id, varValue);
+  }
+  return namesPerLine;
+
+  function findVariableInChain(
+      name: string,
+      pos: number,
+      scopeMappings: {scopeStart: number, scopeEnd: number, variableMap: Map<string, SDK.RemoteObject.RemoteObject>}[],
+      ): SDK.RemoteObject.RemoteObject|null {
+    for (const scope of scopeMappings) {
+      if (pos < scope.scopeStart || pos >= scope.scopeEnd) {
+        continue;
+      }
+      const value = scope.variableMap.get(name);
+      if (value) {
+        return value;
+      }
+    }
+    return null;
+  }
+}
+
 // Evaluated expression mark for pop-over
 
 const evalExpressionMark = CodeMirror.Decoration.mark({class: 'cm-evaluatedExpression'});