[Perf P] Use call site location in sync portion of stack traces

Instead of only using the top frame of the event's payload stack trace, use all frames available.

Bug: 415987706
Change-Id: I882c99a7f30147710415c65d0239edc69f97b8eb
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6512984
Commit-Queue: Andres Olivares <andoli@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>

Author: and-oli

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

@@ -25,7 +25,6 @@ function shapeStackTraceAsArray(stackTrace: Protocol.Runtime.StackTrace):
     stackTraceAsArray.push({callFrames: currentStackTrace.callFrames, description: currentStackTrace.description});
     currentStackTrace = currentStackTrace.parent;
   }
-
   return stackTraceAsArray;
 }
 
@@ -269,23 +268,20 @@ describeWithEnvironment('StackTraceForTraceEvent', function() {
     profileCall2.callFrame.lineNumber = 0;
     const traceEvent = makeCompleteEvent(Trace.Types.Events.Name.UPDATE_LAYOUT_TREE, 100, 10, '', pid, tid) as
         Trace.Types.Events.UpdateLayoutTree;
-    const payloadCallFrame = {
-      columnNumber: payloadColumnNumber,
-      functionName: 'bar',
-      lineNumber: payloadLineNumber,
-      scriptId: '115',
-      url: ''
-    };
-    traceEvent.args = {elementCount: 1, beginData: {frame: '', stackTrace: [payloadCallFrame]}};
+    const payloadCallStack = [
+      {columnNumber: payloadColumnNumber, functionName: 'bar', lineNumber: payloadLineNumber, scriptId: '115', url: ''},
+      {columnNumber: payloadColumnNumber, functionName: 'foo', lineNumber: payloadLineNumber, scriptId: '115', url: ''},
+    ];
+    traceEvent.args = {elementCount: 1, beginData: {frame: '', stackTrace: payloadCallStack}};
     const trace = parsedTraceFromEvents([profileCall1, profileCall2, traceEvent]);
 
     const stackTraceForExtensionEntry = Trace.Extras.StackTraceForEvent.get(traceEvent, trace);
     assert.exists(stackTraceForExtensionEntry);
     assert.deepEqual(shapeStackTraceAsArray(stackTraceForExtensionEntry) as unknown[], [
       {
         callFrames: [
-          {...payloadCallFrame, lineNumber: payloadLineNumber - 1, columnNumber: payloadColumnNumber - 1},
-          profileCall1.callFrame
+          {...payloadCallStack[0], lineNumber: payloadLineNumber - 1, columnNumber: payloadColumnNumber - 1},
+          {...payloadCallStack[1], lineNumber: payloadLineNumber - 1, columnNumber: payloadColumnNumber - 1},
         ],
         description: undefined
       },

front_end/models/trace/extras/StackTraceForEvent.ts

@@ -37,15 +37,21 @@ export function get(event: Types.Events.Event, parsedTrace: Handlers.Types.Parse
     result = getForPerformanceMeasure(event, parsedTrace);
   } else {
     result = getForEvent(event, parsedTrace);
-    const maybeProtocolCallFrame = getPayloadStackAsProtocolCallFrame(event);
-    if (result && maybeProtocolCallFrame && !isNativeJSFunction(maybeProtocolCallFrame)) {
-      // If the event has a payload stack trace, replace the top frame
-      // of the calculated stack with the top frame of the payload stack
-      // because trace payload call frames contain call locations, unlike
-      // profile call frames (which contain function declaration locations).
-      // This way the user knows which exact JS location triggered an
-      // event.
-      result.callFrames[0] = maybeProtocolCallFrame;
+    const payloadCallFrames =
+        getTraceEventPayloadStackAsProtocolCallFrame(event).filter(callFrame => !isNativeJSFunction(callFrame));
+    // If the event has a payload stack trace, replace the synchronous
+    // portion of the calculated stack with the payload's call frames.
+    // We do this because trace payload call frames contain call
+    // locations, unlike profile call frames obtained with getForEvent
+    // (which contain function declaration locations).
+    // This way the user knows which exact JS location triggered an
+    // event.
+    if (!result.callFrames.length) {
+      result.callFrames = payloadCallFrames;
+    } else {
+      for (let i = 0; i < payloadCallFrames.length && i < result.callFrames.length; i++) {
+        result.callFrames[i] = payloadCallFrames[i];
+      }
     }
   }
   if (result) {
@@ -187,13 +193,14 @@ function isNativeJSFunction({columnNumber, lineNumber, url, scriptId}: Protocol.
 }
 
 /**
- * Extracts the top frame in the stack contained in a trace event's payload
- * (if any) and casts it as a Protocol.Runtime.CallFrame.
+ * Converts a stack trace from a trace event's payload into an array of
+ * Protocol.Runtime.CallFrame.
  */
-function getPayloadStackAsProtocolCallFrame(event: Types.Events.Event): Protocol.Runtime.CallFrame|null {
-  const maybeCallStack = Helpers.Trace.getZeroIndexedStackTraceInEventPayload(event);
-  const maybeCallFrame = maybeCallStack?.at(0);
-  const maybeProtocolCallFrame =
-      maybeCallFrame && {...maybeCallFrame, scriptId: String(maybeCallFrame.scriptId) as Protocol.Runtime.ScriptId};
-  return maybeProtocolCallFrame || null;
+function getTraceEventPayloadStackAsProtocolCallFrame(event: Types.Events.Event): Protocol.Runtime.CallFrame[] {
+  const payloadCallStack = Helpers.Trace.getZeroIndexedStackTraceInEventPayload(event) || [];
+  const callFrames: Protocol.Runtime.CallFrame[] = [];
+  for (const frame of payloadCallStack) {
+    callFrames.push({...frame, scriptId: String(frame.scriptId) as Protocol.Runtime.ScriptId});
+  }
+  return callFrames;
 }