[RPP] Introduce StackTraceForEvent helper

It extracts the full call stack (including async calls) of a given event
(at the moment only JS calls / ProfileCalls). We will use this to
helper to display the call stack of a given event in its details. In the
future support for extension entries will be added to it.

Bug: 381392952
Change-Id: I1410b2ed0f85bb8f9e4799ae7b0606bbc7f247f5
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6074770
Reviewed-by: Jack Franklin <[email protected]>
Commit-Queue: Andres Olivares <[email protected]>

Author: and-oli

config/gni/devtools_grd_files.gni

@@ -1046,6 +1046,7 @@ grd_files_debug_sources = [
   "front_end/models/trace/extras/FilmStrip.js",
   "front_end/models/trace/extras/MainThreadActivity.js",
   "front_end/models/trace/extras/Metadata.js",
+  "front_end/models/trace/extras/StackTraceForEvent.js",
   "front_end/models/trace/extras/ThirdParties.js",
   "front_end/models/trace/extras/TimelineJSProfile.js",
   "front_end/models/trace/extras/TraceFilter.js",

front_end/models/trace/extras/BUILD.gn

@@ -13,6 +13,7 @@ devtools_module("extras") {
     "FilmStrip.ts",
     "MainThreadActivity.ts",
     "Metadata.ts",
+    "StackTraceForEvent.ts",
     "ThirdParties.ts",
     "TimelineJSProfile.ts",
     "TraceFilter.ts",
@@ -48,6 +49,7 @@ ts_library("unittests") {
     "FilmStrip.test.ts",
     "MainThreadActivity.test.ts",
     "Metadata.test.ts",
+    "StackTraceForEvent.test.ts",
     "ThirdParties.test.ts",
     "TraceFilter.test.ts",
     "TraceTree.test.ts",

front_end/models/trace/extras/StackTraceForEvent.test.ts

@@ -0,0 +1,208 @@
+// Copyright 2024 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 type * as Protocol from '../../../generated/protocol.js';
+import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
+import {TraceLoader} from '../../../testing/TraceLoader.js';
+import * as Trace from '../trace.js';
+
+function shapeStackTraceAsArray(stackTrace: Protocol.Runtime.StackTrace):
+    {callFrames: Protocol.Runtime.CallFrame[], description?: string}[] {
+  const stackTraceAsArray: {callFrames: Protocol.Runtime.CallFrame[], description?: string}[] = [];
+  let currentStackTrace: Protocol.Runtime.StackTrace|undefined = stackTrace;
+  while (currentStackTrace) {
+    // @ts-ignore `codeType` is not included in the protocol types but
+    // occasionally present
+    currentStackTrace.callFrames.forEach(callFrame => delete callFrame.codeType);
+    stackTraceAsArray.push({callFrames: currentStackTrace.callFrames, description: currentStackTrace.description});
+    currentStackTrace = currentStackTrace.parent;
+  }
+
+  return stackTraceAsArray;
+}
+describeWithEnvironment('StackTraceForTraceEvent', function() {
+  let parsedTrace: Trace.Handlers.Types.ParsedTrace;
+  beforeEach(async function() {
+    const traceEngineData = await TraceLoader.traceEngine(this, 'async-js-calls.json.gz');
+    parsedTrace = traceEngineData.parsedTrace;
+    Trace.Extras.StackTraceForEvent.clearCacheForTrace(parsedTrace);
+  });
+  afterEach(async () => {
+    Trace.Extras.StackTraceForEvent.clearCacheForTrace(parsedTrace);
+  });
+
+  it('correctly builds the stack trace of a profile call when it only has a synchronous stack trace.',
+     async function() {
+       const jsCall = parsedTrace.Renderer.allTraceEntries.find(
+           e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'startExample');
+       assert.exists(jsCall);
+       const stackTrace = Trace.Extras.StackTraceForEvent.get(jsCall, parsedTrace);
+       assert.exists(stackTrace);
+       const stackTraceArray = shapeStackTraceAsArray(stackTrace);
+       assert.lengthOf(stackTraceArray, 1);
+       const callFrames = stackTraceArray[0].callFrames;
+       assert.deepEqual(callFrames, [
+         {
+           columnNumber: 21,
+           functionName: 'startExample',
+           lineNumber: 25,
+           scriptId: '53' as Protocol.Runtime.ScriptId,
+           url: '',
+         },
+         {columnNumber: 0, functionName: '', lineNumber: 0, scriptId: '53' as Protocol.Runtime.ScriptId, url: ''},
+       ]);
+     });
+
+  it('correctly builds the stack trace of a profile call when it only has an asynchronous stack trace.',
+     async function() {
+       const jsCall = parsedTrace.Renderer.allTraceEntries.find(
+           e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'baz');
+       assert.exists(jsCall);
+       const stackTrace = Trace.Extras.StackTraceForEvent.get(jsCall, parsedTrace);
+       assert.exists(stackTrace);
+       const stackTraceArray = shapeStackTraceAsArray(stackTrace);
+       assert.lengthOf(stackTraceArray, 4);
+
+       assert.deepEqual(stackTraceArray, [
+         {
+           callFrames: [{
+             columnNumber: 12,
+             functionName: 'baz',
+             lineNumber: 13,
+             scriptId: '53' as Protocol.Runtime.ScriptId,
+             url: '',
+           }],
+           description: undefined,
+         },
+         {
+           callFrames: [{
+             columnNumber: 12,
+             functionName: 'bar',
+             lineNumber: 6,
+             scriptId: '53' as Protocol.Runtime.ScriptId,
+             url: '',
+           }],
+           description: 'requestIdleCallback',
+         },
+         {
+           callFrames: [{
+             columnNumber: 12,
+             functionName: 'foo',
+             lineNumber: 0,
+             scriptId: '53' as Protocol.Runtime.ScriptId,
+             url: '',
+           }],
+           description: 'setTimeout',
+         },
+         {
+           callFrames: [
+             {
+               columnNumber: 21,
+               functionName: 'startExample',
+               lineNumber: 25,
+               scriptId: '53' as Protocol.Runtime.ScriptId,
+               url: '',
+             },
+             {columnNumber: 0, functionName: '', lineNumber: 0, scriptId: '53', url: ''},
+           ],
+           description: 'requestAnimationFrame',
+         },
+       ]);
+     });
+
+  it('correctly skips frames set to be ignored.', async function() {
+    const jsCall = parsedTrace.Renderer.allTraceEntries.find(
+        e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'baz');
+    assert.exists(jsCall);
+    const isIgnoreListedCallback = (e: Trace.Types.Events.Event) =>
+        Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'bar';
+    const stackTrace = Trace.Extras.StackTraceForEvent.get(jsCall, parsedTrace, {isIgnoreListedCallback});
+    assert.exists(stackTrace);
+    const stackTraceArray = shapeStackTraceAsArray(stackTrace);
+    assert.lengthOf(stackTraceArray, 4);
+
+    assert.deepEqual(stackTraceArray, [
+      {
+        callFrames: [
+          {columnNumber: 12, functionName: 'baz', lineNumber: 13, scriptId: '53' as Protocol.Runtime.ScriptId, url: ''},
+        ],
+        description: undefined,
+      },
+      {callFrames: [], description: 'requestIdleCallback'},
+      {
+        callFrames: [
+          {columnNumber: 12, functionName: 'foo', lineNumber: 0, scriptId: '53' as Protocol.Runtime.ScriptId, url: ''},
+        ],
+        description: 'setTimeout',
+      },
+      {
+        callFrames: [
+          {
+            columnNumber: 21,
+            functionName: 'startExample',
+            lineNumber: 25,
+            scriptId: '53' as Protocol.Runtime.ScriptId,
+            url: '',
+          },
+          {columnNumber: 0, functionName: '', lineNumber: 0, scriptId: '53', url: ''},
+        ],
+        description: 'requestAnimationFrame',
+      },
+    ]);
+  });
+
+  it('uses cached data correctly.', async function() {
+    const fooCall = parsedTrace.Renderer.allTraceEntries.find(
+        e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'foo');
+    assert.exists(fooCall);
+    const result =
+        parsedTrace.AsyncJSCalls.asyncCallToScheduler.get(fooCall as Trace.Types.Events.SyntheticProfileCall);
+    assert.exists(result);
+    const {scheduler: parentOfFoo} = result;
+
+    // Compute stack trace of foo's parent
+    const stackTraceOfParent = Trace.Extras.StackTraceForEvent.get(parentOfFoo, parsedTrace);
+    assert.exists(stackTraceOfParent);
+    const stackTraceArray = shapeStackTraceAsArray(stackTraceOfParent);
+    assert.lengthOf(stackTraceArray, 1);
+
+    // Modify the cache, to check it's used when possible
+    const bottomFrame = stackTraceOfParent.callFrames.at(-1);
+    assert.exists(bottomFrame);
+    bottomFrame.functionName = 'Overriden name';
+
+    // Compute stack trace of foo, ensure the cache calculated with
+    // its parent is used.
+    const stackTraceOfFoo = Trace.Extras.StackTraceForEvent.get(fooCall, parsedTrace);
+    assert.exists(stackTraceOfFoo);
+    const stackTraceArray2 = shapeStackTraceAsArray(stackTraceOfFoo);
+    assert.deepEqual(stackTraceArray2, [
+      {
+        callFrames: [
+          {columnNumber: 12, functionName: 'foo', lineNumber: 0, scriptId: '53' as Protocol.Runtime.ScriptId, url: ''},
+        ],
+        description: undefined,
+      },
+      {
+        callFrames: [
+          {
+            columnNumber: 21,
+            functionName: 'startExample',
+            lineNumber: 25,
+            scriptId: '53' as Protocol.Runtime.ScriptId,
+            url: '',
+          },
+          {
+            columnNumber: 0,
+            functionName: bottomFrame.functionName,
+            lineNumber: 0,
+            scriptId: '53' as Protocol.Runtime.ScriptId,
+            url: '',
+          },
+        ],
+        description: 'requestAnimationFrame',
+      },
+    ]);
+  });
+});

front_end/models/trace/extras/StackTraceForEvent.ts

@@ -0,0 +1,112 @@
+// Copyright 2024 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 type * as Protocol from '../../../generated/protocol.js';
+import type * as Handlers from '../handlers/handlers.js';
+import type * as Helpers from '../helpers/helpers.js';
+import * as Types from '../types/types.js';
+
+export const stackTraceForEventInTrace =
+    new Map<Handlers.Types.ParsedTrace, Map<Types.Events.Event, Protocol.Runtime.StackTrace>>();
+
+export function clearCacheForTrace(parsedTrace: Handlers.Types.ParsedTrace): void {
+  stackTraceForEventInTrace.delete(parsedTrace);
+}
+export function get(
+    event: Types.Events.Event, parsedTrace: Handlers.Types.ParsedTrace,
+    options?: {isIgnoreListedCallback?: (event: Types.Events.Event) => boolean}): Protocol.Runtime.StackTrace|null {
+  let cacheForTrace = stackTraceForEventInTrace.get(parsedTrace);
+  if (!cacheForTrace) {
+    cacheForTrace = new Map();
+    stackTraceForEventInTrace.set(parsedTrace, cacheForTrace);
+  }
+  const resultFromCache = cacheForTrace.get(event);
+  if (resultFromCache) {
+    return resultFromCache;
+  }
+  if (!Types.Events.isProfileCall(event)) {
+    return null;
+  }
+  const result = getForProfileCall(event, parsedTrace, options);
+  cacheForTrace.set(event, result);
+  return result;
+}
+
+function getForProfileCall(
+    event: Types.Events.SyntheticProfileCall, parsedTrace: Handlers.Types.ParsedTrace,
+    options?: {isIgnoreListedCallback?: (event: Types.Events.Event) => boolean}): Protocol.Runtime.StackTrace {
+  // When working with a CPU profile the renderer handler won't have
+  // entries in its tree.
+  const entryToNode =
+      parsedTrace.Renderer.entryToNode.size > 0 ? parsedTrace.Renderer.entryToNode : parsedTrace.Samples.entryToNode;
+  const topStackTrace: Protocol.Runtime.StackTrace = {callFrames: []};
+  let stackTrace: Protocol.Runtime.StackTrace = topStackTrace;
+  let currentEntry = event;
+  let node: Helpers.TreeHelpers.TraceEntryNode|null|undefined = entryToNode.get(event);
+  const traceCache =
+      stackTraceForEventInTrace.get(parsedTrace) || new Map<Types.Events.Event, Protocol.Runtime.StackTrace>();
+  stackTraceForEventInTrace.set(parsedTrace, traceCache);
+  // Move up this node's ancestor tree appending frames to its
+  // stack trace.
+  while (node) {
+    if (!Types.Events.isProfileCall(node.entry)) {
+      node = node.parent;
+      continue;
+    }
+
+    currentEntry = node.entry;
+    // First check if this entry was processed before.
+    const stackTraceFromCache = traceCache.get(node.entry);
+    if (stackTraceFromCache) {
+      stackTrace.callFrames.push(...stackTraceFromCache.callFrames.filter(callFrame => !isNativeJSFunction(callFrame)));
+      stackTrace.parent = stackTraceFromCache.parent;
+      // Only set the description to the cache value if we didn't
+      // compute it in the previous iteration, since the async stack
+      // trace descriptions / taskNames is only extracted when jumping
+      // to the async parent, and that might not have happened when
+      // the cached value was computed (e.g. the cached value
+      // computation started at some point inside the parent stack
+      // trace).
+      stackTrace.description = stackTrace.description || stackTraceFromCache.description;
+      break;
+    }
+
+    const ignorelisted = options?.isIgnoreListedCallback && options?.isIgnoreListedCallback(currentEntry);
+    if (!ignorelisted && !isNativeJSFunction(currentEntry.callFrame)) {
+      stackTrace.callFrames.push(currentEntry.callFrame);
+    }
+    const maybeAsyncParentEvent = parsedTrace.AsyncJSCalls.asyncCallToScheduler.get(currentEntry);
+    const maybeAsyncParentNode = maybeAsyncParentEvent && entryToNode.get(maybeAsyncParentEvent.scheduler);
+    if (maybeAsyncParentNode) {
+      // The Protocol.Runtime.StackTrace type is recursive, so we
+      // move one level deeper in it as we walk up the ancestor tree.
+      stackTrace.parent = {callFrames: []};
+      stackTrace = stackTrace.parent;
+      // Note: this description effectively corresponds to the name
+      // of the task that scheduled the stack trace we are jumping
+      // FROM, so it would make sense that it was set to that stack
+      // trace instead of the one we are jumping TO. However, the
+      // JS presentation utils we use to present async stack traces
+      // assume the description is added to the stack trace that
+      // scheduled the async task, so we build the data that way.
+      stackTrace.description = maybeAsyncParentEvent.taskName;
+      node = maybeAsyncParentNode;
+      continue;
+    }
+    node = node.parent;
+  }
+  return topStackTrace;
+}
+/**
+ * Determines if a function is a native JS API (like setTimeout,
+ * requestAnimationFrame, consoleTask.run. etc.). This is useful to
+ * discard stack frames corresponding to the JS scheduler function
+ * itself, since it's already being used as title of async stack traces
+ * taken from the async `taskName`. This is also consistent with the
+ * behaviour of the stack trace in the sources
+ * panel.
+ */
+function isNativeJSFunction({columnNumber, lineNumber, url, scriptId}: Protocol.Runtime.CallFrame): boolean {
+  return lineNumber === -1 && columnNumber === -1 && url === '' && scriptId === '0';
+}

front_end/models/trace/extras/extras.ts

@@ -6,6 +6,7 @@ export * as FetchNodes from './FetchNodes.js';
 export * as FilmStrip from './FilmStrip.js';
 export * as MainThreadActivity from './MainThreadActivity.js';
 export * as Metadata from './Metadata.js';
+export * as StackTraceForEvent from './StackTraceForEvent.js';
 export * as ThirdParties from './ThirdParties.js';
 export * as TimelineJSProfile from './TimelineJSProfile.js';
 export * as TraceFilter from './TraceFilter.js';