RPP: limit the amount of initiators to draw

On a large trace, clicking on one event drew so many initiators when I
was zoomed out that I could barely see any of the events. It's useful to
walk back through the trace, but let's put a limit on it for both visual
and performance reasons.

Bug: 438484658
Change-Id: Ia1efd78f762bdb76852b075378a89f59955d7680
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6845964
Reviewed-by: Connor Clark <[email protected]>
Commit-Queue: Jack Franklin <[email protected]>

Author: jackfranklin

front_end/panels/timeline/Initiators.test.ts

@@ -58,6 +58,7 @@ describeWithEnvironment('Initiators', () => {
           Trace.Types.Events.Event;
       assert.exists(functionCallByrequestIdleCallback);
     });
+
     it('returns the initiator data', async function() {
       const initiatorData = Timeline.Initiators.initiatorsDataToDraw(parsedTrace, functionCallBySetTimeout, [], []);
       assert.deepEqual(initiatorData[0], {

front_end/panels/timeline/Initiators.ts

@@ -10,6 +10,22 @@ export interface InitiatorData {
   isEntryHidden?: boolean;
   isInitiatorHidden?: boolean;
 }
+
+export interface InitiatorDataOptions {
+  /**
+   * Used to limit how far back through the chain we go; some large JS apps can
+   * have vast amounts of initiator stacks and it's hard to render them
+   * efficiently, and also not very useful to the user if we just show loads of
+   * them.
+   */
+  predecessorLimit: number;
+}
+
+// We limit the amount of predecessors to 10; on large traces with large JS
+// stacks there can be a huge number of these. It's not super useful to
+// walk back too far and if we draw too many arrows on the timeline, the view becomes very cluttered and noisy.
+const MAX_PREDECESSOR_INITIATOR_LIMIT = 10;
+
 /**
  * Given an event that the user has selected, this function returns all the
  * data of events and their initiators that need to be drawn on the flamechart.
@@ -18,11 +34,9 @@ export interface InitiatorData {
  * work backwards to draw each one, as well as the events initiated directly by the entry.
  */
 export function initiatorsDataToDraw(
-    parsedTrace: Trace.Handlers.Types.ParsedTrace,
-    selectedEvent: Trace.Types.Events.Event,
+    parsedTrace: Trace.Handlers.Types.ParsedTrace, selectedEvent: Trace.Types.Events.Event,
     hiddenEntries: Trace.Types.Events.Event[],
-    expandableEntries: Trace.Types.Events.Event[],
-    ): readonly InitiatorData[] {
+    expandableEntries: Trace.Types.Events.Event[]): readonly InitiatorData[] {
   const initiatorsData = [
     ...findInitiatorDataPredecessors(parsedTrace, selectedEvent, parsedTrace.Initiators.eventToInitiator),
     ...findInitiatorDataDirectSuccessors(selectedEvent, parsedTrace.Initiators.initiatorToEvents),
@@ -49,13 +63,12 @@ function findInitiatorDataPredecessors(
     eventToInitiator: Map<Trace.Types.Events.Event, Trace.Types.Events.Event>,
     ): readonly InitiatorData[] {
   const initiatorsData: InitiatorData[] = [];
-
   let currentEvent: Trace.Types.Events.Event|null = selectedEvent;
   const visited = new Set<Trace.Types.Events.Event>();
   visited.add(currentEvent);
 
   // Build event initiator data up to the selected one
-  while (currentEvent) {
+  while (currentEvent && initiatorsData.length < MAX_PREDECESSOR_INITIATOR_LIMIT) {
     const currentInitiator = eventToInitiator.get(currentEvent);
 
     if (currentInitiator) {

front_end/panels/timeline/TimelineFlameChartDataProvider.ts

@@ -1359,12 +1359,7 @@ export class TimelineFlameChartDataProvider extends Common.ObjectWrapper.ObjectW
     const expandableEntries: Trace.Types.Events.Event[] =
         ModificationsManager.activeManager()?.getEntriesFilter().expandableEntries() ?? [];
 
-    const initiatorsData = initiatorsDataToDraw(
-        this.parsedTrace,
-        event,
-        hiddenEvents,
-        expandableEntries,
-    );
+    const initiatorsData = initiatorsDataToDraw(this.parsedTrace, event, hiddenEvents, expandableEntries);
 
     if (initiatorsData.length === 0) {
       // Small optimization: cache if this entry has 0 initiators, meaning if