[scopes] Support inline scripts in functionBoundsAtRawLocation

Also fix a bug where the inner-most scope was always returned from
ResourceScriptMapping, rather than the inner-most function.

Bug: 463452667
Change-Id: Ib4d166f881661504fa50782c9a8611f54f610e46
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7205510
Auto-Submit: Connor Clark <[email protected]>
Reviewed-by: Paul Irish <[email protected]>
Commit-Queue: Connor Clark <[email protected]>

Author: Connor Clark

front_end/models/bindings/DebuggerWorkspaceBinding.ts

@@ -592,10 +592,12 @@ class ModelData {
   async functionBoundsAtRawLocation(rawLocation: SDK.DebuggerModel.Location):
       Promise<Workspace.UISourceCode.UIFunctionBounds|null> {
     let scope: Workspace.UISourceCode.UIFunctionBounds|null = null;
+    // Check source maps.
     scope = scope || await this.compilerMapping.functionBoundsAtRawLocation(rawLocation);
+    // Check debugger scripts.
     scope = scope || await this.#resourceScriptMapping.functionBoundsAtRawLocation(rawLocation);
-    // TODO(crbug.com/463452667): Use resourceMapping to support locations referring
-    // to HTML inline scripts.
+    // Check inline scripts inside HTML resources.
+    scope = scope || await this.#resourceMapping.functionBoundsAtRawLocation(rawLocation);
     return scope;
   }
 

front_end/models/bindings/ResourceMapping.test.ts

@@ -6,7 +6,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import {createTarget} from '../../testing/EnvironmentHelpers.js';
-import {describeWithMockConnection} from '../../testing/MockConnection.js';
+import {describeWithMockConnection, setMockConnectionResponseHandler} from '../../testing/MockConnection.js';
 import {createResource, getMainFrame} from '../../testing/ResourceTreeHelpers.js';
 import * as TextUtils from '../text_utils/text_utils.js';
 import * as Workspace from '../workspace/workspace.js';
@@ -51,6 +51,9 @@ describeWithMockConnection('ResourceMapping', () => {
       endColumn: 0,
       sourceURL: urlString`webpack:///src/foo.js`,
       hasSourceURLComment: true,
+      source: `\nfunction foo() { console.log("foo"); }
+  foo();
+  //# sourceURL=webpack:///src/foo.js`,
     },
     {
       scriptId: '2' as Protocol.Runtime.ScriptId,
@@ -60,6 +63,7 @@ describeWithMockConnection('ResourceMapping', () => {
       endColumn: 27,
       sourceURL: url,
       hasSourceURLComment: false,
+      source: 'console.log("bar");',
     },
   ];
   const OTHER_SCRIPT_ID = '3' as Protocol.Runtime.ScriptId;
@@ -97,6 +101,15 @@ describeWithMockConnection('ResourceMapping', () => {
           undefined, hasSourceURLComment, false, length, false, null, null, null, null, embedderName, null);
     });
     assert.lengthOf(debuggerModel.scripts(), SCRIPTS.length);
+
+    setMockConnectionResponseHandler('Debugger.getScriptSource', param => {
+      return {
+        scriptSource: SCRIPTS.find(s => s.scriptId === param.scriptId)?.source ?? '',
+        getError() {
+          return undefined;
+        },
+      };
+    });
   });
 
   it('creates UISourceCode for added target', () => {
@@ -251,4 +264,26 @@ describeWithMockConnection('ResourceMapping', () => {
       assert.deepEqual(mappedLines, expectedLines);
     });
   });
+
+  describe('functionBoundsAtRawLocation', () => {
+    function makeLocation(script: typeof SCRIPTS[number], line: number, column: number): SDK.DebuggerModel.Location {
+      return new SDK.DebuggerModel.Location(debuggerModel, script.scriptId, line, column);
+    }
+
+    it('finds the function bounds for an inline script', async () => {
+      const functionBounds = await resourceMapping.functionBoundsAtRawLocation(makeLocation(SCRIPTS[0], 5, 16));
+      assert.isOk(functionBounds);
+      // TODO(crbug.com/452333154)
+      // assert.strictEqual(functionBounds.name, 'foo');
+      assert.strictEqual(functionBounds.range.startLine, 5);
+      assert.strictEqual(functionBounds.range.startColumn, 12);
+      assert.strictEqual(functionBounds.range.endLine, 5);
+      assert.strictEqual(functionBounds.range.endColumn, 38);
+    });
+
+    it('finds no function bounds for an inline script with no functions', async () => {
+      const functionBounds = await resourceMapping.functionBoundsAtRawLocation(makeLocation(SCRIPTS[1], 11, 9));
+      assert.isNotOk(functionBounds);
+    });
+  });
 });

front_end/models/bindings/ResourceMapping.ts

@@ -5,6 +5,7 @@
 import * as Common from '../../core/common/common.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Formatter from '../formatter/formatter.js';
 import * as TextUtils from '../text_utils/text_utils.js';
 import * as Workspace from '../workspace/workspace.js';
 
@@ -269,6 +270,78 @@ export class ResourceMapping implements SDK.TargetManager.SDKModelObserver<SDK.R
         uiLocation.uiSourceCode.url(), uiLocation.lineNumber, uiLocation.columnNumber);
   }
 
+  async functionBoundsAtRawLocation(rawLocation: SDK.DebuggerModel.Location):
+      Promise<Workspace.UISourceCode.UIFunctionBounds|null> {
+    const script = rawLocation.script();
+    if (!script) {
+      return null;
+    }
+    const info = this.infoForTarget(script.debuggerModel.target());
+    if (!info) {
+      return null;
+    }
+    const embedderName = script.embedderName();
+    if (!embedderName) {
+      return null;
+    }
+    const uiSourceCode = info.getProject().uiSourceCodeForURL(embedderName);
+    if (!uiSourceCode) {
+      return null;
+    }
+
+    let {lineNumber, columnNumber} = rawLocation;
+    lineNumber -= script.lineOffset;
+    if (lineNumber === 0) {
+      columnNumber -= script.columnOffset;
+    }
+
+    const scopeTreeAndText = script ? await SDK.ScopeTreeCache.scopeTreeForScript(script) : null;
+    if (!scopeTreeAndText) {
+      return null;
+    }
+
+    // Find the inner-most scope that maps to the given position.
+
+    const offset = scopeTreeAndText.text.offsetFromPosition(lineNumber, columnNumber);
+
+    const results = [];
+    (function walk(nodes: Formatter.FormatterWorkerPool.ScopeTreeNode[]) {
+      for (const node of nodes) {
+        if (!(offset >= node.start && offset < node.end)) {
+          continue;
+        }
+        results.push(node);
+        walk(node.children);
+      }
+    })([scopeTreeAndText.scopeTree]);
+
+    const result = results.findLast(
+        node => node.kind === Formatter.FormatterWorkerPool.ScopeKind.FUNCTION ||
+            node.kind === Formatter.FormatterWorkerPool.ScopeKind.ARROW_FUNCTION);
+    if (!result) {
+      return null;
+    }
+
+    // Map back to positions.
+    const startPosition = scopeTreeAndText.text.positionFromOffset(result.start);
+    const endPosition = scopeTreeAndText.text.positionFromOffset(result.end);
+
+    startPosition.lineNumber += script.lineOffset;
+    if (startPosition.lineNumber === script.lineOffset) {
+      startPosition.columnNumber += script.columnOffset;
+    }
+
+    endPosition.lineNumber += script.lineOffset;
+    if (endPosition.lineNumber === script.lineOffset) {
+      endPosition.columnNumber += script.columnOffset;
+    }
+
+    const name = '';  // TODO(crbug.com/452333154): update ScopeVariableAnalysis to include function name.
+    const range = new TextUtils.TextRange.TextRange(
+        startPosition.lineNumber, startPosition.columnNumber, endPosition.lineNumber, endPosition.columnNumber);
+    return new Workspace.UISourceCode.UIFunctionBounds(uiSourceCode, range, name);
+  }
+
   resetForTest(target: SDK.Target.Target): void {
     const resourceTreeModel = target.model(SDK.ResourceTreeModel.ResourceTreeModel);
     const info = resourceTreeModel ? this.#modelToInfo.get(resourceTreeModel) : null;

front_end/models/bindings/ResourceScriptMapping.ts

@@ -191,7 +191,7 @@ export class ResourceScriptMapping implements DebuggerSourceMapping {
 
     const result = results.findLast(
         node => node.kind === Formatter.FormatterWorkerPool.ScopeKind.FUNCTION ||
-            Formatter.FormatterWorkerPool.ScopeKind.ARROW_FUNCTION);
+            node.kind === Formatter.FormatterWorkerPool.ScopeKind.ARROW_FUNCTION);
     if (!result) {
       return null;
     }