[scopes] Omit name for arrow functions

When building scope information from the AST, we map a scope's start
position to get at the original function name. This does not work for
arrow function as the start position points to the first argument.

And the original name of the first argument is not the right name for
the function.

For now, we just don't translate arrow functions. In the future,
we'll report the position of the `=>` as well as the scope start,
and map the position of the `=>` (as per spec), to get to the name.

[email protected]

Bug: 463452667
Change-Id: If524d2d36475479d757b4ec373e025bb0b701abc
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7202683
Reviewed-by: Kim-Anh Tran <[email protected]>
Commit-Queue: Simon Zünd <[email protected]>

Author: szuend

front_end/core/sdk/SourceMapScopesInfo.ts

@@ -121,14 +121,18 @@ export class SourceMapScopesInfo {
       const canMapOriginalPosition = startEntry && endEntry && sourceIndex !== undefined &&
           startEntry.sourceIndex === endEntry.sourceIndex && startEntry.sourceIndex !== undefined && sourceIndex >= 0 &&
           sourceIndex < numSourceUrls;
-      const isStackFrame = node.kind === Formatter.FormatterWorkerPool.ScopeKind.FUNCTION;
+      const isStackFrame = node.kind === Formatter.FormatterWorkerPool.ScopeKind.FUNCTION ||
+          node.kind === Formatter.FormatterWorkerPool.ScopeKind.ARROW_FUNCTION;
+      // TODO(crbug.com/368222773): Instead of mapping `start`, we should report a number of candidates. e.g. for arrow functions we should
+      //     follow the spec and map the `=>` as the spec says that is where the original name (if any) for arrow functions can be found.
+      const name = node.kind === Formatter.FormatterWorkerPool.ScopeKind.FUNCTION ? startEntry?.name : undefined;
 
       let scope: ScopesCodec.OriginalScope|undefined;
       if (canMapOriginalPosition) {
         scope = {
           start: {line: startEntry.sourceLineNumber, column: startEntry.sourceColumnNumber},
           end: {line: endEntry.sourceLineNumber, column: endEntry.sourceColumnNumber},
-          name: startEntry.name,
+          name,
           isStackFrame,
           variables: [],
           children: [],

front_end/entrypoints/formatter_worker/BUILD.gn

@@ -92,5 +92,8 @@ devtools_foundation_module("unittests") {
     "Substitute.test.ts",
   ]
 
-  deps = [ ":bundle" ]
+  deps = [
+    ":bundle",
+    ":formatter_actions",
+  ]
 }

front_end/entrypoints/formatter_worker/FormatterActions.ts

@@ -48,6 +48,7 @@ export const enum ScopeKind {
   BLOCK = 1,
   FUNCTION = 2,
   GLOBAL = 3,
+  ARROW_FUNCTION = 4,
 }
 
 export interface ScopeTreeNode {

front_end/entrypoints/formatter_worker/ScopeParser.test.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as FormatterWorker from './formatter_worker.js';
+import * as FormatterAction from './FormatterActions.js';  // eslint-disable-line @devtools/es-modules-import
 
 describe('ScopeParser', () => {
   describe('parseScopes', () => {
@@ -14,6 +15,7 @@ describe('ScopeParser', () => {
       const innerScope = scopes?.children[0];
       assert.strictEqual(innerScope?.start, 12);
       assert.strictEqual(innerScope?.end, 17);
+      assert.strictEqual(innerScope?.kind, FormatterAction.ScopeKind.FUNCTION);
       assert.deepEqual(innerScope?.variables?.get('a')?.uses.map(u => u.offset), [13]);
     });
 
@@ -24,6 +26,7 @@ describe('ScopeParser', () => {
       const innerScope = scopes?.children[0];
       assert.strictEqual(innerScope?.start, 8);
       assert.strictEqual(innerScope?.end, 17);
+      assert.strictEqual(innerScope?.kind, FormatterAction.ScopeKind.ARROW_FUNCTION);
       assert.deepEqual(innerScope?.variables?.size, 1);
       assert.deepEqual(innerScope?.variables?.get('a')?.uses.map(u => u.offset), [9]);
     });

front_end/entrypoints/formatter_worker/ScopeParser.ts

@@ -172,7 +172,7 @@ export class ScopeVariableAnalysis {
         node.elements.forEach(item => this.#processNode(item));
         break;
       case 'ArrowFunctionExpression': {
-        this.#pushScope(node.start, node.end, ScopeKind.FUNCTION);
+        this.#pushScope(node.start, node.end, ScopeKind.ARROW_FUNCTION);
         node.params.forEach(this.#processNodeAsDefinition.bind(this, DefinitionKind.VAR, false));
         if (node.body.type === 'BlockStatement') {
           // Include the body of the arrow function in the same scope as the arguments.