Debugger: Show inline values at variable definitions
Bug: chromium:1316340
Change-Id: Ibe91a775103a05fd49370a92830dbd92b845001b
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3586909
Reviewed-by: Benedikt Meurer <bmeurer@chromium.org>
Commit-Queue: Jaroslav Sevcik <jarin@chromium.org>
diff --git a/front_end/panels/sources/DebuggerPlugin.ts b/front_end/panels/sources/DebuggerPlugin.ts
index f9eacfe..81c49df 100644
--- a/front_end/panels/sources/DebuggerPlugin.ts
+++ b/front_end/panels/sources/DebuggerPlugin.ts
@@ -536,6 +536,10 @@
return true;
}
+ private isVariableIdentifier(tokenType: string): boolean {
+ return tokenType === 'VariableName' || tokenType === 'VariableDefinition';
+ }
+
private isIdentifier(tokenType: string): boolean {
return tokenType === 'VariableName' || tokenType === 'VariableDefinition' || tokenType === 'PropertyName' ||
tokenType === 'PropertyDefinition';
@@ -962,8 +966,8 @@
tree.iterate({
from: fromPos,
to: toPos,
- enter(node): void {
- const varName = node.name === 'VariableName' && editorState.sliceDoc(node.from, node.to);
+ 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);
diff --git a/test/e2e/resources/sources/BUILD.gn b/test/e2e/resources/sources/BUILD.gn
index 6f6991e..49c3e4e 100644
--- a/test/e2e/resources/sources/BUILD.gn
+++ b/test/e2e/resources/sources/BUILD.gn
@@ -22,6 +22,8 @@
"filesystem/special-characters.html",
"filesystem/with space.js",
"filesystem/with%20space.js",
+ "inline-variable.html",
+ "inline-variable.js",
"live-edit-moving-breakpoint.html",
"live-edit-moving-breakpoint.js",
"memory-worker1.rawresponse",
diff --git a/test/e2e/resources/sources/inline-variable.html b/test/e2e/resources/sources/inline-variable.html
new file mode 100644
index 0000000..accf145
--- /dev/null
+++ b/test/e2e/resources/sources/inline-variable.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<script src="inline-variable.js"></script>
diff --git a/test/e2e/resources/sources/inline-variable.js b/test/e2e/resources/sources/inline-variable.js
new file mode 100644
index 0000000..ecfd6bc
--- /dev/null
+++ b/test/e2e/resources/sources/inline-variable.js
@@ -0,0 +1,4 @@
+function simple(a) {
+ let x = a + 1;
+ return x;
+}
diff --git a/test/e2e/sources/BUILD.gn b/test/e2e/sources/BUILD.gn
index 28e95ac..c713414 100644
--- a/test/e2e/sources/BUILD.gn
+++ b/test/e2e/sources/BUILD.gn
@@ -18,6 +18,7 @@
"can-show-wasm-scopes_test.ts",
"debug-raw-wasm_test.ts",
"icon-row-bucket_test.ts",
+ "inline-variable_test.ts",
"link-to-correct-source-line_test.ts",
"live-edit-moving-breakpoint_test.ts",
"navigation_test.ts",
diff --git a/test/e2e/sources/inline-variable_test.ts b/test/e2e/sources/inline-variable_test.ts
new file mode 100644
index 0000000..c8600ce
--- /dev/null
+++ b/test/e2e/sources/inline-variable_test.ts
@@ -0,0 +1,34 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {assert} from 'chai';
+
+import {click, getBrowserAndPages, waitFor} from '../../shared/helper.js';
+import {describe, it} from '../../shared/mocha-extensions.js';
+import {addBreakpointForLine, openSourceCodeEditorForFile, RESUME_BUTTON} from '../helpers/sources-helpers.js';
+
+async function retrieveCodeMirrorEditorContent(): Promise<Array<string>> {
+ const editor = await waitFor('[aria-label="Code editor"]');
+ return editor.evaluate(node => [...node.querySelectorAll('.cm-line')].map(node => node.textContent || '') || []);
+}
+
+describe('Sources Tab', async function() {
+ it('shows correct inline variable at definition', async () => {
+ const {target, frontend} = getBrowserAndPages();
+
+ await openSourceCodeEditorForFile('inline-variable.js', 'inline-variable.html');
+ await addBreakpointForLine(frontend, 3);
+
+ const scriptEvaluation = target.evaluate('simple(41);');
+
+ await waitFor('.cm-line > .cm-variableValues');
+
+ const contents = await retrieveCodeMirrorEditorContent();
+ assert.strictEqual(contents[0], 'function simple(a) {a = 41');
+ assert.strictEqual(contents[1], ' let x = a + 1;x = 42');
+
+ await click(RESUME_BUTTON);
+ await scriptEvaluation;
+ });
+});
