[scopes] Format the code in FunctionCode

If the code is minified and not already from a source map, make it
pretty with the formatter.

Bug: 462135240
Change-Id: I8fef927929b106e71033407b205741e766e28e39
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7205506
Reviewed-by: Paul Irish <paulirish@chromium.org>
Commit-Queue: Connor Clark <cjamcl@chromium.org>
Auto-Submit: Connor Clark <cjamcl@chromium.org>

Author: Connor Clark

front_end/models/source_map_scopes/FunctionCodeResolver.snapshot.txt

@@ -1,11 +1,20 @@
 Title: FunctionCodeResolver getFunctionCodeFromLocation [no source maps] lookup named function
 Content:
-use strict";function fibonacci<FUNCTION_START>(e){return e<=1?1:fibonacci(e-1)+fibonacci(e-2)}<FUNCTION_END>const btn=document.querySelect
+se strict";
+function fibonacci<FUNCTION_START>(e) {
+	return e <= 1 ? 1 : fibonacci(e - 1) + fibonacci(e - 2)
+}
+<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"}<FUNCTION_END>);const input=document.querySe
+btn.addEventListener("click", <FUNCTION_START>() => {
+	console.log(fibonacci(Number(params.get("x")))),
+	btn.style.backgroundColor = "red"
+}
+<FUNCTION_END>);
+const input = document.quer
 === end content
 
 Title: FunctionCodeResolver getFunctionCodeFromLocation [source maps] lookup named function with generated location
@@ -32,12 +41,20 @@ function <FUNCTION_START>fibonacci(num) {
 
 Title: FunctionCodeResolver getFunctionCodeFromLocation [source maps, no source contents] lookup named function with generated location
 Content:
-use strict";function fibonacci<FUNCTION_START>(e){return e<=1?1:fibonacci(e-1)+fibonacci(e-2)}<FUNCTION_END>const btn=document.querySelect
+se strict";
+function fibonacci<FUNCTION_START>(e) {
+	return e <= 1 ? 1 : fibonacci(e - 1) + fibonacci(e - 2)
+}
+<FUNCTION_END>const btn = document.querySele
 === end content
 
 Title: FunctionCodeResolver getFunctionCodeFromLocation [source maps, no source contents] lookup named function with original location
 Content:
-use strict";function fibonacci<FUNCTION_START>(e){return e<=1?1:fibonacci(e-1)+fibonacci(e-2)}<FUNCTION_END>const btn=document.querySelect
+se strict";
+function fibonacci<FUNCTION_START>(e) {
+	return e <= 1 ? 1 : fibonacci(e - 1) + fibonacci(e - 2)
+}
+<FUNCTION_END>const btn = document.querySele
 === end content
 
 Title: FunctionCodeResolver getFunctionCodeFromLocation [source maps] lookup anonymous function with generated location
@@ -62,10 +79,20 @@ 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"}<FUNCTION_END>);const input=document.querySe
+btn.addEventListener("click", <FUNCTION_START>() => {
+	console.log(fibonacci(Number(params.get("x")))),
+	btn.style.backgroundColor = "red"
+}
+<FUNCTION_END>);
+const input = document.quer
 === end content
 
 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"}<FUNCTION_END>);const input=document.querySe
+btn.addEventListener("click", <FUNCTION_START>() => {
+	console.log(fibonacci(Number(params.get("x")))),
+	btn.style.backgroundColor = "red"
+}
+<FUNCTION_END>);
+const input = document.quer
 === end content

front_end/models/source_map_scopes/FunctionCodeResolver.test.ts

@@ -65,15 +65,16 @@ describeWithMockConnection('FunctionCodeResolver', function() {
         line: 0,
         column: 35,
         sourceMap: null,
-        expectedCode: `(e){return e<=1?1:fibonacci(e-1)+fibonacci(e-2)}`
+        expectedCode: `(e) {\n\treturn e <= 1 ? 1 : fibonacci(e - 1) + fibonacci(e - 2)\n}\n`
       },
       {
         name: '[no source maps] lookup anonymous function',
         url: URL,
         line: 0,
         column: 201,
         sourceMap: null,
-        expectedCode: `()=>{console.log(fibonacci(Number(params.get("x")))),btn.style.backgroundColor="red"}`
+        expectedCode:
+            `() => {\n\tconsole.log(fibonacci(Number(params.get(\"x\")))),\n\tbtn.style.backgroundColor = \"red\"\n}\n`
       },
 
       {
@@ -102,15 +103,15 @@ describeWithMockConnection('FunctionCodeResolver', function() {
         column: 35,
         sourceMap: {url: sourceMapUrl, content: sourceMapContentButNoSources},
         // TODO: createFromAst does not include function identifiers in the created scope start position.
-        expectedCode: `(e){return e<=1?1:fibonacci(e-1)+fibonacci(e-2)}`
+        expectedCode: `(e) {\n\treturn e <= 1 ? 1 : fibonacci(e - 1) + fibonacci(e - 2)\n}\n`
       },
       {
         name: '[source maps, no source contents] lookup named function with original location',
         url: urlString`file:///tmp/index.js`,
         line: 1,
         column: 5,
         sourceMap: {url: sourceMapUrl, content: sourceMapContentButNoSources},
-        expectedCode: `(e){return e<=1?1:fibonacci(e-1)+fibonacci(e-2)}`
+        expectedCode: `(e) {\n\treturn e <= 1 ? 1 : fibonacci(e - 1) + fibonacci(e - 2)\n}\n`
       },
 
       {
@@ -138,15 +139,17 @@ describeWithMockConnection('FunctionCodeResolver', function() {
         line: 0,
         column: 201,
         sourceMap: {url: sourceMapUrl, content: sourceMapContentButNoSources},
-        expectedCode: `()=>{console.log(fibonacci(Number(params.get("x")))),btn.style.backgroundColor="red"}`
+        expectedCode:
+            `() => {\n\tconsole.log(fibonacci(Number(params.get(\"x\")))),\n\tbtn.style.backgroundColor = \"red\"\n}\n`
       },
       {
         name: '[source maps, no source contents] lookup anonymous function with original location',
         url: urlString`file:///tmp/index.js`,
         line: 10,
         column: 3,
         sourceMap: {url: sourceMapUrl, content: sourceMapContentButNoSources},
-        expectedCode: `()=>{console.log(fibonacci(Number(params.get("x")))),btn.style.backgroundColor="red"}`
+        expectedCode:
+            `() => {\n\tconsole.log(fibonacci(Number(params.get(\"x\")))),\n\tbtn.style.backgroundColor = \"red\"\n}\n`
       },
     ];
 

front_end/models/source_map_scopes/FunctionCodeResolver.ts

@@ -5,6 +5,7 @@
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../bindings/bindings.js';
+import * as Formatter from '../formatter/formatter.js';
 import * as TextUtils from '../text_utils/text_utils.js';
 import * as Workspace from '../workspace/workspace.js';
 
@@ -13,27 +14,42 @@ export interface FunctionCode {
   functionBounds: Workspace.UISourceCode.UIFunctionBounds;
   /** The text of `uiSourceCode`. */
   text: TextUtils.Text.Text;
-  /** The scope/function text. */
+  /** The function text. */
   code: string;
   /** The range of `code` within `text`. */
   range: TextUtils.TextRange.TextRange;
-  /** The scope/function text, plus some additional context before and after. The actual function scope is wrapped in <FUNCTION_START>...<FUNCTION_END> */
+  /** The function text, plus some additional context before and after. The actual function is wrapped in <FUNCTION_START>...<FUNCTION_END> */
   codeWithContext: string;
   /** The range of `codeWithContext` within `text`. */
   rangeWithContext: TextUtils.TextRange.TextRange;
 }
 
 export interface CreateFunctionCodeOptions {
-  /** Number of characters to include before and after the function scope. Stacks with `contextLineLength`. */
+  /** Number of characters to include before and after the function. Stacks with `contextLineLength`. */
   contextLength?: number;
-  /** Number of lines to include before and after the function scope. Stacks with `contextLength`. */
+  /** Number of lines to include before and after the function. Stacks with `contextLength`. */
   contextLineLength?: number;
 }
 
 function createFunctionCode(
-    text: TextUtils.Text.Text, functionBounds: Workspace.UISourceCode.UIFunctionBounds,
-    options?: CreateFunctionCodeOptions): FunctionCode {
-  const {startLine, startColumn, endLine, endColumn} = functionBounds.range;
+    uiSourceCodeContent: string, formattedContent: Formatter.ScriptFormatter.FormattedContent|null,
+    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);
+    startLine = startMapped[0];
+    startColumn = startMapped[1];
+
+    const endMapped = formattedContent.formattedMapping.originalToFormatted(endLine, endColumn);
+    endLine = endMapped[0];
+    endColumn = endMapped[1];
+  } else {
+    text = new TextUtils.Text.Text(uiSourceCodeContent);
+  }
+
   const content = text.value();
 
   // Define two ranges - the first is just the function bounds, the second includes
@@ -121,6 +137,28 @@ 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):
+    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;
+}
+
 /**
  * Returns a {@link FunctionCode} for the given raw location.
  */
@@ -138,6 +176,6 @@ export async function getFunctionCodeFromRawLocation(
     return null;
   }
 
-  const text = new TextUtils.Text.Text(content);
-  return createFunctionCode(text, functionBounds, options);
+  const formattedContent = await formatAndCache(functionBounds.uiSourceCode, content);
+  return createFunctionCode(content, formattedContent, functionBounds, options);
 }