[AI] Annotate code given to Performance agent with profile data

Example:

```
function <FUNCTION_START>fibonacci(num) { // 67 ms
  if (num <= 1) return 1; // 23 ms

  return fibonacci(num - 1) + fibonacci(num - 2); // 1999 ms
} // 13 ms

<FUNCTION_END>const btn = document.querySele
```

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

Author: Connor Clark

front_end/models/ai_assistance/agents/PerformanceAgent.ts

@@ -936,7 +936,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
 
         const url = args.scriptUrl as Platform.DevToolsPath.UrlString;
         const code = await SourceMapScopes.FunctionCodeResolver.getFunctionCodeFromLocation(
-            target, url, args.line, args.column, {contextLength: 200, contextLineLength: 5});
+            target, url, args.line, args.column, {contextLength: 200, contextLineLength: 5, appendProfileData: true});
         if (!code) {
           return {error: 'Could not find code'};
         }

front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.ts

@@ -830,7 +830,7 @@ The order of headers corresponds to an internal fixed list. If a header is not p
     parts.push(`${name} @ ${url}:${startLine}:${startColumn}. With added context, chunk is from ${contextStartLine}:${
         contextStartColumn} to ${contextEndLine}:${contextEndColumn}`);
     parts.push(
-        '\nThe following is a markdown block of JavaScript. <FUNCTION_START> and <FUNCTION_END> marks the exact function declaration, and everything outside that is provided for additional context. Do not show the user the function markers or the additional context.\n');
+        '\nThe following is a markdown block of JavaScript. <FUNCTION_START> and <FUNCTION_END> marks the exact function declaration, and everything outside that is provided for additional context. Comments at the end of each line indicate the runtime performance cost of that code. Do not show the user the function markers or the additional context.\n');
     parts.push('```');
     parts.push(code.codeWithContext);
     parts.push('```');

front_end/models/source_map_scopes/FunctionCodeResolver.snapshot.txt

@@ -1,67 +1,67 @@
 Title: FunctionCodeResolver getFunctionCodeFromLocation [no source maps] lookup named function
 Content:
 se strict";
-function fibonacci<FUNCTION_START>(e) {
-	return e <= 1 ? 1 : fibonacci(e - 1) + fibonacci(e - 2)
-}
+function fibonacci<FUNCTION_START>(e) { // 67 ms
+	return e <= 1 ? 1 : fibonacci(e - 1) + fibonacci(e - 2) // 2022 ms
+} // 13 ms
 <FUNCTION_END>const btn = document.querySele
 === end content
 
 Title: FunctionCodeResolver getFunctionCodeFromLocation [no source maps] lookup anonymous function
 Content:
 btn.addEventListener("click", <FUNCTION_START>() => {
-	console.log(fibonacci(Number(params.get("x")))),
-	btn.style.backgroundColor = "red"
+	console.log(fibonacci(Number(params.get("x")))), // 5000 ms
+	btn.style.backgroundColor = "red" // 333 ms
 }
 <FUNCTION_END>);
 const input = document.quer
 === end content
 
 Title: FunctionCodeResolver getFunctionCodeFromLocation [source maps] lookup named function with generated location
 Content:
-function <FUNCTION_START>fibonacci(num) {
-  if (num <= 1) return 1;
+function <FUNCTION_START>fibonacci(num) { // 67 ms
+  if (num <= 1) return 1; // 23 ms
 
-  return fibonacci(num - 1) + fibonacci(num - 2);
-}
+  return fibonacci(num - 1) + fibonacci(num - 2); // 1999 ms
+} // 13 ms
 
 <FUNCTION_END>const btn = document.querySele
 === end content
 
 Title: FunctionCodeResolver getFunctionCodeFromLocation [source maps] lookup named function with original location
 Content:
-function <FUNCTION_START>fibonacci(num) {
-  if (num <= 1) return 1;
+function <FUNCTION_START>fibonacci(num) { // 67 ms
+  if (num <= 1) return 1; // 23 ms
 
-  return fibonacci(num - 1) + fibonacci(num - 2);
-}
+  return fibonacci(num - 1) + fibonacci(num - 2); // 1999 ms
+} // 13 ms
 
 <FUNCTION_END>const btn = document.querySele
 === end content
 
 Title: FunctionCodeResolver getFunctionCodeFromLocation [source maps, no source contents] lookup named function with generated location
 Content:
 se strict";
-function fibonacci<FUNCTION_START>(e) {
-	return e <= 1 ? 1 : fibonacci(e - 1) + fibonacci(e - 2)
-}
+function fibonacci<FUNCTION_START>(e) { // 67 ms
+	return e <= 1 ? 1 : fibonacci(e - 1) + fibonacci(e - 2) // 2022 ms
+} // 13 ms
 <FUNCTION_END>const btn = document.querySele
 === end content
 
 Title: FunctionCodeResolver getFunctionCodeFromLocation [source maps, no source contents] lookup named function with original location
 Content:
 se strict";
-function fibonacci<FUNCTION_START>(e) {
-	return e <= 1 ? 1 : fibonacci(e - 1) + fibonacci(e - 2)
-}
+function fibonacci<FUNCTION_START>(e) { // 67 ms
+	return e <= 1 ? 1 : fibonacci(e - 1) + fibonacci(e - 2) // 2022 ms
+} // 13 ms
 <FUNCTION_END>const btn = document.querySele
 === end content
 
 Title: FunctionCodeResolver getFunctionCodeFromLocation [source maps] lookup anonymous function with generated location
 Content:
 btn.addEventListener('click', <FUNCTION_START>() => {
-  console.log(fibonacci(Number(params.get('x'))));
-  btn.style.backgroundColor = 'red';
+  console.log(fibonacci(Number(params.get('x')))); // 5000 ms
+  btn.style.backgroundColor = 'red'; // 333 ms
 }<FUNCTION_END>);
 
 const input = document.que
@@ -70,8 +70,8 @@ const input = document.que
 Title: FunctionCodeResolver getFunctionCodeFromLocation [source maps] lookup anonymous function with original location
 Content:
 btn.addEventListener('click', <FUNCTION_START>() => {
-  console.log(fibonacci(Number(params.get('x'))));
-  btn.style.backgroundColor = 'red';
+  console.log(fibonacci(Number(params.get('x')))); // 5000 ms
+  btn.style.backgroundColor = 'red'; // 333 ms
 }<FUNCTION_END>);
 
 const input = document.que
@@ -80,8 +80,8 @@ const input = document.que
 Title: FunctionCodeResolver getFunctionCodeFromLocation [source maps, no source contents] lookup anonymous function with generated location
 Content:
 btn.addEventListener("click", <FUNCTION_START>() => {
-	console.log(fibonacci(Number(params.get("x")))),
-	btn.style.backgroundColor = "red"
+	console.log(fibonacci(Number(params.get("x")))), // 5000 ms
+	btn.style.backgroundColor = "red" // 333 ms
 }
 <FUNCTION_END>);
 const input = document.quer
@@ -90,8 +90,8 @@ const input = document.quer
 Title: FunctionCodeResolver getFunctionCodeFromLocation [source maps, no source contents] lookup anonymous function with original location
 Content:
 btn.addEventListener("click", <FUNCTION_START>() => {
-	console.log(fibonacci(Number(params.get("x")))),
-	btn.style.backgroundColor = "red"
+	console.log(fibonacci(Number(params.get("x")))), // 5000 ms
+	btn.style.backgroundColor = "red" // 333 ms
 }
 <FUNCTION_END>);
 const input = document.quer

front_end/models/source_map_scopes/FunctionCodeResolver.test.ts

@@ -41,6 +41,20 @@ describeWithMockConnection('FunctionCodeResolver', function() {
   // This was minified with 'esbuild --sourcemap=linked --minify' v0.25.9.
   const exampleSource =
       `"use strict";function fibonacci(e){return e<=1?1:fibonacci(e-1)+fibonacci(e-2)}const btn=document.querySelector("button"),params=new URLSearchParams(location.search);btn.addEventListener("click",()=>{console.log(fibonacci(Number(params.get("x")))),btn.style.backgroundColor="red"});const input=document.querySelector('input[type="text"]');input.addEventListener("input",()=>{console.log(fibonacci(Number(params.get("x"))))});\n//# sourceMappingURL=file:///tmp/example.js.min.map`;
+  const exampleRawPerformanceData = new Map([
+    [
+      1, new Map([
+        [1, 1],       // "use strict"
+        [35, 67],     // starting } of fibonacci
+        [43, 23],     // e<=1
+        [50, 1000],   // fibonacci(e-1)
+        [65, 999],    // fibonacci(e-2)
+        [79, 13],     // ending } of fibonacci
+        [213, 5000],  // fibonacci(Number(params.get("x")))
+        [274, 333],   // btn.style.backgroundColor="red"
+      ])
+    ],
+  ]);
   const exampleSourceMap = {
     version: 3,
     sources: ['index.js'],
@@ -165,8 +179,37 @@ describeWithMockConnection('FunctionCodeResolver', function() {
           await sourceMap.scopesFallbackPromiseForTest;
         }
 
+        // Add raw performance data to script's UISourceCode.
+        const uiSourceCode =
+            Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().uiSourceCodeForScript(script);
+        assert.isOk(uiSourceCode);
+        uiSourceCode.setDecorationData(Workspace.UISourceCode.DecoratorType.PERFORMANCE, exampleRawPerformanceData);
+
+        // Add mapped performance data to source map url's UISourceCode.
+        if (sourceMap) {
+          const debuggerModel = target.model(SDK.DebuggerModel.DebuggerModel);
+          assert.isOk(debuggerModel);
+          const url = sourceMap.sourceURLForSourceIndex(0);
+          assert.isOk(url);
+          const uiSourceCode =
+              Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().uiSourceCodeForSourceMapSourceURL(
+                  debuggerModel, url, false);
+          assert.isOk(uiSourceCode);
+
+          const mappedPerformanceData =
+              Workspace.UISourceCode.createMappedProfileData(exampleRawPerformanceData, (line, column) => {
+                const entry = sourceMap.findEntry(line, column);
+                if (entry?.sourceURL) {
+                  return [entry.sourceLineNumber, entry.sourceColumnNumber];
+                }
+
+                return null;
+              });
+          uiSourceCode.setDecorationData(Workspace.UISourceCode.DecoratorType.PERFORMANCE, mappedPerformanceData);
+        }
+
         const code = await SourceMapScopes.FunctionCodeResolver.getFunctionCodeFromLocation(
-            target, testCase.url, testCase.line, testCase.column, {contextLength: 30});
+            target, testCase.url, testCase.line, testCase.column, {contextLength: 30, appendProfileData: true});
         assert.isOk(code);
         assert.strictEqual(code.code, testCase.expectedCode);
         snapshotTester.assert(this, code.codeWithContext);

front_end/models/source_map_scopes/FunctionCodeResolver.ts

@@ -29,27 +29,96 @@ export interface CreateFunctionCodeOptions {
   contextLength?: number;
   /** Number of lines to include before and after the function. Stacks with `contextLength`. */
   contextLineLength?: number;
+  /** If true, appends profile data from the trace at the end of every line of the function in `codeWithContext`. This should match what is seen in the formatted view in the Sources panel. */
+  appendProfileData?: boolean;
+}
+
+interface InputData {
+  text: TextUtils.Text.Text;
+  formattedContent: Formatter.ScriptFormatter.FormattedContent|null;
+  performanceData: Workspace.UISourceCode.LineColumnProfileMap|undefined;
+}
+
+const inputCache = new WeakMap<Workspace.UISourceCode.UISourceCode, Promise<InputData>>();
+
+async function prepareInput(uiSourceCode: Workspace.UISourceCode.UISourceCode, content: string): Promise<InputData> {
+  const formattedContent = await format(uiSourceCode, content);
+  const text = new TextUtils.Text.Text(formattedContent ? formattedContent.formattedContent : content);
+  let performanceData = uiSourceCode.getDecorationData(Workspace.UISourceCode.DecoratorType.PERFORMANCE) as
+          Workspace.UISourceCode.LineColumnProfileMap |
+      undefined;
+
+  // Map profile data to the formatted view of the text.
+  if (formattedContent && performanceData) {
+    performanceData = Workspace.UISourceCode.createMappedProfileData(performanceData, (line, column) => {
+      return formattedContent.formattedMapping.originalToFormatted(line, column);
+    });
+  }
+
+  return {text, formattedContent, performanceData};
+}
+
+/** Formatting and parsing line endings for Text is expensive, so cache it. */
+async function prepareInputAndCache(
+    uiSourceCode: Workspace.UISourceCode.UISourceCode, content: string): Promise<InputData> {
+  let cachedPromise = inputCache.get(uiSourceCode);
+  if (cachedPromise) {
+    return await cachedPromise;
+  }
+
+  cachedPromise = prepareInput(uiSourceCode, content);
+  inputCache.set(uiSourceCode, cachedPromise);
+  return await cachedPromise;
+}
+
+function extractPerformanceDataByLine(
+    textRange: TextUtils.TextRange.TextRange, performanceData: Workspace.UISourceCode.LineColumnProfileMap): number[] {
+  const {startLine, startColumn, endLine, endColumn} = textRange;
+  const byLine = new Array(endLine - startLine + 1).fill(0);
+
+  for (let line = startLine; line <= endLine; line++) {
+    const lineData = performanceData.get(line + 1);
+    if (!lineData) {
+      continue;
+    }
+
+    // Fast-path for when the entire line's data is relevant.
+    if (line !== startLine && line !== endLine) {
+      byLine[line - startLine] = lineData.values().reduce((acc, cur) => acc + cur);
+      continue;
+    }
+
+    const column0 = line === startLine ? startColumn + 1 : 0;
+    const column1 = line === endLine ? endColumn + 1 : Number.POSITIVE_INFINITY;
+
+    let totalData = 0;
+    for (const [column, data] of lineData) {
+      if (column >= column0 && column <= column1) {
+        totalData += data;
+      }
+    }
+
+    byLine[line - startLine] = totalData;
+  }
+
+  return byLine.map(data => Math.round(data * 10) / 10);
 }
 
 function createFunctionCode(
-    uiSourceCodeContent: string, formattedContent: Formatter.ScriptFormatter.FormattedContent|null,
-    functionBounds: Workspace.UISourceCode.UIFunctionBounds, options?: CreateFunctionCodeOptions): FunctionCode {
+    inputData: InputData, functionBounds: Workspace.UISourceCode.UIFunctionBounds,
+    options?: CreateFunctionCodeOptions): FunctionCode {
   let {startLine, startColumn, endLine, endColumn} = functionBounds.range;
-  let text;
-  if (formattedContent) {
-    text = new TextUtils.Text.Text(formattedContent.formattedContent);
-
-    const startMapped = formattedContent.formattedMapping.originalToFormatted(startLine, startColumn);
+  if (inputData.formattedContent) {
+    const startMapped = inputData.formattedContent.formattedMapping.originalToFormatted(startLine, startColumn);
     startLine = startMapped[0];
     startColumn = startMapped[1];
 
-    const endMapped = formattedContent.formattedMapping.originalToFormatted(endLine, endColumn);
+    const endMapped = inputData.formattedContent.formattedMapping.originalToFormatted(endLine, endColumn);
     endLine = endMapped[0];
     endColumn = endMapped[1];
-  } else {
-    text = new TextUtils.Text.Text(uiSourceCodeContent);
   }
 
+  const text = inputData.text;
   const content = text.value();
 
   // Define two ranges - the first is just the function bounds, the second includes
@@ -91,7 +160,37 @@ function createFunctionCode(
   const code = content.substring(functionStartOffset, functionEndOffset);
   const before = content.substring(contextStartOffset, functionStartOffset);
   const after = content.substring(functionEndOffset, contextEndOffset);
-  const codeWithContext = before + `<FUNCTION_START>${code}<FUNCTION_END>` + after;
+
+  let codeWithContext;
+  if (options?.appendProfileData && inputData.performanceData) {
+    const performanceDataByLine = extractPerformanceDataByLine(range, inputData.performanceData);
+    const lines = performanceDataByLine.map((data, i) => {
+      let line = text.lineAt(startLine + i);
+
+      const isLastLine = i === performanceDataByLine.length - 1;
+      if (i === 0) {
+        if (isLastLine) {
+          line = line.substring(startColumn, endColumn);
+        } else {
+          line = line.substring(startColumn);
+        }
+      } else if (isLastLine) {
+        line = line.substring(0, endColumn);
+      }
+
+      if (isLastLine) {
+        // Don't ever annotate the last line - it could make the rest of the code on
+        // that line get commented out.
+        data = 0;
+      }
+
+      return data ? `${line} // ${data} ms` : line;
+    });
+    const annotatedCode = lines.join('\n');
+    codeWithContext = before + `<FUNCTION_START>${annotatedCode}<FUNCTION_END>` + after;
+  } else {
+    codeWithContext = before + `<FUNCTION_START>${code}<FUNCTION_END>` + after;
+  }
 
   return {
     functionBounds,
@@ -137,26 +236,16 @@ export async function getFunctionCodeFromLocation(
   return await getFunctionCodeFromRawLocation(rawLocation, options);
 }
 
-const formatCache =
-    new WeakMap<Workspace.UISourceCode.UISourceCode, Promise<Formatter.ScriptFormatter.FormattedContent|null>>();
-
-async function formatAndCache(uiSourceCode: Workspace.UISourceCode.UISourceCode, content: string):
+async function format(uiSourceCode: Workspace.UISourceCode.UISourceCode, content: string):
     Promise<Formatter.ScriptFormatter.FormattedContent|null> {
-  let cachedPromise = formatCache.get(uiSourceCode);
-  if (cachedPromise) {
-    return await cachedPromise;
-  }
-
   const contentType = uiSourceCode.contentType();
   const shouldFormat = !contentType.isFromSourceMap() && (contentType.isDocument() || contentType.isScript()) &&
       TextUtils.TextUtils.isMinified(content);
   if (!shouldFormat) {
     return null;
   }
 
-  cachedPromise = Formatter.ScriptFormatter.formatScriptContent(contentType.canonicalMimeType(), content, '\t');
-  formatCache.set(uiSourceCode, cachedPromise);
-  return await cachedPromise;
+  return await Formatter.ScriptFormatter.formatScriptContent(contentType.canonicalMimeType(), content, '\t');
 }
 
 /**
@@ -176,6 +265,6 @@ export async function getFunctionCodeFromRawLocation(
     return null;
   }
 
-  const formattedContent = await formatAndCache(functionBounds.uiSourceCode, content);
-  return createFunctionCode(content, formattedContent, functionBounds, options);
+  const inputData = await prepareInputAndCache(functionBounds.uiSourceCode, content);
+  return createFunctionCode(inputData, functionBounds, options);
 }