chrome-devtools-frontend 1.0.1380117 → 1.0.1402249

package/front_end/panels/timeline/CompatibilityTracksAppender.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as Trace from '../../models/trace/trace.js';
 import type * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
@@ -11,7 +12,6 @@ import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 import {AnimationsTrackAppender} from './AnimationsTrackAppender.js';
 import {getEventLevel, getFormattedTime, type LastTimestampByLevel} from './AppenderUtils.js';
 import * as TimelineComponents from './components/components.js';
-import {ExtensionDataGatherer} from './ExtensionDataGatherer.js';
 import {ExtensionTrackAppender} from './ExtensionTrackAppender.js';
 import {GPUTrackAppender} from './GPUTrackAppender.js';
 import {InteractionsTrackAppender} from './InteractionsTrackAppender.js';
@@ -22,14 +22,16 @@ import {
   EntryType,
   InstantEventVisibleDurationMs,
 } from './TimelineFlameChartDataProvider.js';
+import {TimelinePanel} from './TimelinePanel.js';
 import {TimingsTrackAppender} from './TimingsTrackAppender.js';
 import * as TimelineUtils from './utils/utils.js';
 
-export type HighlightedEntryInfo = {
+export type PopoverInfo = {
   title: string,
   formattedTime: string,
-  warningElements?: HTMLSpanElement[],
-  additionalElement?: HTMLElement,
+  url: string|null,
+  warningElements: HTMLSpanElement[],
+  additionalElements: HTMLElement[],
 };
 
 let showPostMessageEvents: boolean|undefined;
@@ -124,9 +126,9 @@ export interface TrackAppender {
    */
   titleForEvent?(event: Trace.Types.Events.Event): string;
   /**
-   * Returns the info shown when an event in the timeline is hovered.
+   * Updates the standard popover (AKA tooltip) some appender specific details.
    */
-  highlightedEntryInfo?(event: Trace.Types.Events.Event): Partial<HighlightedEntryInfo>;
+  setPopoverInfo?(event: Trace.Types.Events.Event, info: PopoverInfo): void;
   /**
    * Returns the a callback function to draw an event to overrides the normal rectangle draw operation.
    */
@@ -278,7 +280,10 @@ export class CompatibilityTracksAppender {
   }
 
   #addExtensionAppenders(): void {
-    const tracks = ExtensionDataGatherer.instance().getExtensionData().extensionTrackData;
+    if (!TimelinePanel.extensionDataVisibilitySetting().get()) {
+      return;
+    }
+    const tracks = this.#parsedTrace.ExtensionTraceData.extensionTrackData;
     for (const trackData of tracks) {
       this.#allTrackAppenders.push(new ExtensionTrackAppender(this, trackData));
     }
@@ -645,47 +650,42 @@ export class CompatibilityTracksAppender {
   /**
    * Returns the info shown when an event in the timeline is hovered.
    */
-  highlightedEntryInfo(event: Trace.Types.Events.Event, level: number): HighlightedEntryInfo {
+  popoverInfo(event: Trace.Types.Events.Event, level: number): PopoverInfo {
     const track = this.#trackForLevel.get(level);
     if (!track) {
       throw new Error('Track not found for level');
     }
 
-    // Add any warnings information to the tooltip. Done here to avoid duplicating this call in every appender.
-    // By doing this here, we ensure that any warnings that are
-    // added to the WarningsHandler are automatically used and added
-    // to the tooltip.
-    const warningElements: HTMLSpanElement[] =
-        TimelineComponents.DetailsView.buildWarningElementsForEvent(event, this.#parsedTrace);
-
-    let title = this.titleForEvent(event, level);
-    let formattedTime = getFormattedTime(event.dur);
-    let additionalElement;
-
-    // If the track defines a custom highlight, call it and use its values.
-    if (track.highlightedEntryInfo) {
-      const {
-        title: customTitle,
-        formattedTime: customFormattedTime,
-        warningElements: extraWarningElements,
-        additionalElement: element,
-      } = track.highlightedEntryInfo(event);
-      if (customTitle) {
-        title = customTitle;
-      }
-      if (customFormattedTime) {
-        formattedTime = customFormattedTime;
-      }
-      if (extraWarningElements) {
-        warningElements.push(...extraWarningElements);
-      }
-      additionalElement = element;
-    }
-    return {
-      title,
-      formattedTime,
-      warningElements,
-      additionalElement,
+    // Defaults here, though tracks may chose to redefine title/formattedTime
+    const info: PopoverInfo = {
+      title: this.titleForEvent(event, level),
+      formattedTime: getFormattedTime(event.dur),
+      warningElements: TimelineComponents.DetailsView.buildWarningElementsForEvent(event, this.#parsedTrace),
+      additionalElements: [],
+      url: null,
     };
+
+    // If the track defines its own popoverInfo(), it'll update values within
+    if (track.setPopoverInfo) {
+      track.setPopoverInfo(event, info);
+    }
+
+    // If there's a url associated, add into additionalElements
+    const url = URL.parse(
+        info.url ?? TimelineUtils.SourceMapsResolver.SourceMapsResolver.resolvedURLForEntry(this.#parsedTrace, event) ??
+        '');
+    if (url) {
+      const MAX_PATH_LENGTH = 45;
+      const MAX_ORIGIN_LENGTH = 30;
+      const path = Platform.StringUtilities.trimMiddle(url.href.replace(url.origin, ''), MAX_PATH_LENGTH);
+      const origin =
+          Platform.StringUtilities.trimEndWithMaxLength(url.origin.replace('https://', ''), MAX_ORIGIN_LENGTH);
+      const urlElems = document.createElement('div');
+      urlElems.createChild('span', 'popoverinfo-url-path').textContent = path;
+      urlElems.createChild('span', 'popoverinfo-url-origin').textContent = `(${origin})`;
+      info.additionalElements.push(urlElems);
+    }
+
+    return info;
   }
 }

package/front_end/panels/timeline/CountersGraph.ts

@@ -210,8 +210,9 @@ export class CountersGraph extends UI.Widget.VBox {
     this.currentValuesBar.id = 'counter-values-bar';
   }
 
-  private createCounter(uiName: string, settingsKey: string, color: string, formatter?: ((arg0: number) => string)):
-      Counter {
+  private createCounter(
+      uiName: Common.UIString.LocalizedString, settingsKey: string, color: string,
+      formatter?: ((arg0: number) => string)): Counter {
     const counter = new Counter();
     this.counters.push(counter);
     this.counterUI.push(new CounterUI(this, uiName, settingsKey, color, counter, formatter));
@@ -423,8 +424,8 @@ export class CounterUI {
   private marker: HTMLElement;
 
   constructor(
-      countersPane: CountersGraph, title: string, settingsKey: string, graphColor: string, counter: Counter,
-      formatter?: (arg0: number) => string) {
+      countersPane: CountersGraph, title: Common.UIString.LocalizedString, settingsKey: string, graphColor: string,
+      counter: Counter, formatter?: (arg0: number) => string) {
     this.countersPane = countersPane;
     this.counter = counter;
     this.formatter = formatter || Platform.NumberUtilities.withThousandsSeparator;

package/front_end/panels/timeline/EntriesFilter.test.ts

@@ -69,7 +69,7 @@ describeWithEnvironment('EntriesFilter', function() {
     stack.applyFilterAction({type: PerfUI.FlameChart.FilterAction.MERGE_FUNCTION, entry: entryTwo});
     assert.isTrue(stack.invisibleEntries().includes(entryTwo), 'entryTwo is invisble');
     // Only one entry - the one for the `basicTwo` function - should have been hidden.
-    assert.strictEqual(stack.invisibleEntries().length, 1);
+    assert.lengthOf(stack.invisibleEntries(), 1);
   });
 
   it('adds the parent of the merged entry into the expandableEntries array', async function() {
@@ -451,7 +451,7 @@ describeWithEnvironment('EntriesFilter', function() {
     // UNDO_ALL_ACTIONS can be called on any visible entry
     stack.applyFilterAction({type: PerfUI.FlameChart.FilterAction.UNDO_ALL_ACTIONS, entry: basicTwoCallEntry});
     // If the length of invisibleEntries list is 0, all of the entries added earlier were removed and are now visible.
-    assert.strictEqual(stack.invisibleEntries().length, 0);
+    assert.lengthOf(stack.invisibleEntries(), 0);
   });
 
   it('supports resetting children of the closest expandable parent when a hidden entry is provided', async function() {
@@ -499,13 +499,13 @@ describeWithEnvironment('EntriesFilter', function() {
     });
 
     // Make sure no entries are hidden
-    assert.strictEqual(stack.invisibleEntries().length, 0);
+    assert.lengthOf(stack.invisibleEntries(), 0);
 
     // Collapse all children of basicTwo call:
     stack.applyFilterAction({type: PerfUI.FlameChart.FilterAction.COLLAPSE_FUNCTION, entry: basicTwoCallEntry});
 
     // Make sure all 37 of basicTwo descdendants are hidden
-    assert.strictEqual(stack.invisibleEntries().length, 37);
+    assert.lengthOf(stack.invisibleEntries(), 37);
 
     // Get the first fibonacci call that is one of the hidden children and make sure it is hidden
     const firstFibCallEntry = findFirstEntry(mainThread.entries, entry => {
@@ -517,7 +517,7 @@ describeWithEnvironment('EntriesFilter', function() {
     // Reveal the first fibonacci call and make sure that the all of the entries are now visible because the closest
     // expandable parent to the fib call is basicTwo and, therefore, we need to reset its children.
     stack.revealEntry(firstFibCallEntry);
-    assert.strictEqual(stack.invisibleEntries().length, 0);
+    assert.lengthOf(stack.invisibleEntries(), 0);
   });
 
   it('supports resetting all hidden children of a selected entry', async function() {
@@ -605,7 +605,7 @@ describeWithEnvironment('EntriesFilter', function() {
     assert.isTrue(allFoo2InStackAreVisible, 'Some foo2 calls are invisible');
 
     // Reset all children after second foo2 call
-    assert.strictEqual(foo2Calls.length, 3);
+    assert.lengthOf(foo2Calls, 3);
     stack.applyFilterAction({type: PerfUI.FlameChart.FilterAction.RESET_CHILDREN, entry: foo2Calls[1]});
 
     // All foo and foo2 calls except the second foo cll should now be visible
@@ -690,14 +690,14 @@ describeWithEnvironment('EntriesFilter', function() {
     });
 
     // Make sure the expandable entries are empty at first
-    assert.strictEqual(stack.expandableEntries().length, 0);
+    assert.lengthOf(stack.expandableEntries(), 0);
 
     // Hide the anonymous function
     stack.applyFilterAction(
         {type: PerfUI.FlameChart.FilterAction.MERGE_FUNCTION, entry: anonymousEntryWithInvisibleParent});
 
     // Make sure Task entry is added to expandable entries
-    assert.strictEqual(stack.expandableEntries().length, 1);
+    assert.lengthOf(stack.expandableEntries(), 1);
     assert.isTrue(stack.expandableEntries().includes(taskEntry));
   });
 
@@ -737,12 +737,12 @@ describeWithEnvironment('EntriesFilter', function() {
 
     // Use the toJSON simplification for comparison.
     const simpleFooNode = JSON.parse(JSON.stringify(fooAiNode));
-    assert.strictEqual(simpleFooNode.children.length, 1);
+    assert.lengthOf(simpleFooNode.children, 1);
 
     // delete for smaller deepStrictEqual comparison
     simpleFooNode.children = [];
 
-    assert.deepStrictEqual(simpleFooNode, {
+    assert.deepEqual(simpleFooNode, {
       dur: 0.2,
       name: 'foo',
       selected: true,

package/front_end/panels/timeline/EventsTimelineTreeView.ts

@@ -25,11 +25,6 @@ const UIStrings = {
    *@description Screen reader label for a select box that filters the Performance panel Event Log by duration.
    */
   durationFilter: 'Duration filter',
-  /**
-   *@description Text in Events Timeline Tree View of the Performance panel
-   *@example {2} PH1
-   */
-  Dms: '{PH1} ms',
   /**
    *@description Text for everything
    */
@@ -170,7 +165,7 @@ export class Filters extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
         durationFilterChanged.bind(this), i18nString(UIStrings.durationFilter), undefined, 'duration');
     for (const durationMs of Filters.durationFilterPresetsMs) {
       durationFilterUI.addOption(durationFilterUI.createOption(
-          durationMs ? `≥ ${i18nString(UIStrings.Dms, {PH1: durationMs})}` : i18nString(UIStrings.all),
+          durationMs ? `≥ ${i18n.TimeUtilities.millisToString(durationMs)}` : i18nString(UIStrings.all),
           String(durationMs)));
     }
     toolbar.appendToolbarItem(durationFilterUI);

package/front_end/panels/timeline/ExtensionTrackAppender.ts

@@ -8,7 +8,7 @@ import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 import {buildGroupStyle, buildTrackHeader, getFormattedTime} from './AppenderUtils.js';
 import {
   type CompatibilityTracksAppender,
-  type HighlightedEntryInfo,
+  type PopoverInfo,
   type TrackAppender,
   type TrackAppenderName,
   VisualLoggingTrackName,
@@ -103,14 +103,10 @@ export class ExtensionTrackAppender implements TrackAppender {
     return event.name;
   }
 
-  /**
-   * Returns the info shown when an event added by this appender
-   * is hovered in the timeline.
-   */
-  highlightedEntryInfo(event: Trace.Types.Events.Event): HighlightedEntryInfo {
-    const title = Trace.Types.Extensions.isSyntheticExtensionEntry(event) && event.args.tooltipText ?
+  setPopoverInfo(event: Trace.Types.Events.Event, info: PopoverInfo): void {
+    info.title = Trace.Types.Extensions.isSyntheticExtensionEntry(event) && event.args.tooltipText ?
         event.args.tooltipText :
         this.titleForEvent(event);
-    return {title, formattedTime: getFormattedTime(event.dur)};
+    info.formattedTime = getFormattedTime(event.dur);
   }
 }

package/front_end/panels/timeline/Initiators.test.ts

@@ -9,184 +9,165 @@ import {TraceLoader} from '../../testing/TraceLoader.js';
 import * as Timeline from './timeline.js';
 
 describeWithEnvironment('Initiators', () => {
-  it('returns the initiator data', async function() {
-    const {parsedTrace} = await TraceLoader.traceEngine(this, 'set-timeout-long-task.json.gz');
-
-    const timerFireEvent =
-        Array.from(parsedTrace.Initiators.eventToInitiator.keys()).find(Trace.Types.Events.isTimerFire);
-    assert.exists(timerFireEvent);
-    const timerInstallEvent = parsedTrace.Initiators.eventToInitiator.get(timerFireEvent);
-    assert.exists(timerInstallEvent);
-    const initiatorData = Timeline.Initiators.initiatorsDataToDraw(parsedTrace, timerFireEvent, [], []);
-
-    assert.deepEqual(initiatorData, [{
-                       event: timerFireEvent,
-                       initiator: timerInstallEvent,
-                     }]);
-  });
-
-  it('returns the initiator data for network requests', async function() {
-    const {parsedTrace} = await TraceLoader.traceEngine(this, 'network-requests-initiators.json.gz');
-
-    // Find the network request to test, it is initiated by `youtube.com`.
-    const event = parsedTrace.NetworkRequests.byTime.find(event => event.ts === 1491680762420);
-    assert.exists(event);
-    // Find the `youtube.com` network request.
-    const initiator = parsedTrace.NetworkRequests.byTime.find(event => event.ts === 1491680629144);
-    assert.exists(initiator);
-    const initiatorData = Timeline.Initiators.initiatorsDataToDrawForNetwork(parsedTrace, event);
-
-    assert.deepEqual(initiatorData, [{event, initiator}]);
-  });
-
-  it('can walk up the tree to find the first parent with an initiator', async function() {
-    const {parsedTrace} = await TraceLoader.traceEngine(this, 'set-timeout-long-task.json.gz');
-
-    // Find any of the fibonnaci() calls; they have a parent
-    // event (TimerFire) that has an initiator.
-    const fibonacciCall = parsedTrace.Renderer.allTraceEntries.find(entry => {
-      return Trace.Types.Events.isProfileCall(entry) && entry.callFrame.functionName === 'fibonacci';
+  describe('initiator-initiated event relationships', () => {
+    let requestIdleCallbackCall: Trace.Types.Events.SyntheticProfileCall;
+    let functionCallByrequestIdleCallback: Trace.Types.Events.Event;
+    let setTimeoutCall: Trace.Types.Events.SyntheticProfileCall;
+    let functionCallBySetTimeout: Trace.Types.Events.Event;
+    let rAFCall: Trace.Types.Events.SyntheticProfileCall;
+    let functionCallByRAF: Trace.Types.Events.Event;
+
+    let parsedTrace: Trace.Handlers.Types.ParsedTrace;
+    beforeEach(async function() {
+      parsedTrace = (await TraceLoader.traceEngine(this, 'async-js-calls.json.gz')).parsedTrace;
+      setTimeoutCall =
+          parsedTrace.Renderer.allTraceEntries
+              .filter(e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'setTimeout')
+              .at(-1) as Trace.Types.Events.SyntheticProfileCall;
+      assert.exists(setTimeoutCall);
+      assert.isTrue(Trace.Types.Events.isProfileCall(setTimeoutCall));
+
+      functionCallBySetTimeout =
+          parsedTrace.Renderer.allTraceEntries.find(
+              e => Trace.Types.Events.isFunctionCall(e) && e.ts > setTimeoutCall.ts) as Trace.Types.Events.Event;
+      assert.exists(functionCallBySetTimeout);
+
+      rAFCall =
+          parsedTrace.Renderer.allTraceEntries
+              .filter(e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'requestAnimationFrame')
+              .at(-1) as Trace.Types.Events.SyntheticProfileCall;
+      assert.exists(rAFCall);
+      assert.isTrue(Trace.Types.Events.isProfileCall(rAFCall));
+
+      functionCallByRAF =
+          parsedTrace.Renderer.allTraceEntries.find(e => Trace.Types.Events.isFunctionCall(e) && e.ts > rAFCall.ts) as
+          Trace.Types.Events.Event;
+      assert.exists(functionCallByRAF);
+
+      requestIdleCallbackCall =
+          parsedTrace.Renderer.allTraceEntries
+              .filter(e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'requestIdleCallback')
+              .at(-1) as Trace.Types.Events.SyntheticProfileCall;
+      assert.exists(requestIdleCallbackCall);
+      assert.isTrue(Trace.Types.Events.isProfileCall(requestIdleCallbackCall));
+
+      functionCallByrequestIdleCallback = parsedTrace.Renderer.allTraceEntries.find(
+                                              e => Trace.Types.Events.isFunctionCall(e) &&
+                                                  e.ts > requestIdleCallbackCall.ts) as Trace.Types.Events.Event;
+      assert.exists(functionCallByrequestIdleCallback);
     });
-    assert.exists(fibonacciCall);
-
-    const timerFireEvent =
-        Array.from(parsedTrace.Initiators.eventToInitiator.keys()).find(Trace.Types.Events.isTimerFire);
-    assert.exists(timerFireEvent);
-    const timerInstallEvent = parsedTrace.Initiators.eventToInitiator.get(timerFireEvent);
-    assert.exists(timerInstallEvent);
-
-    // Find the initator data but starting at the fibonacci()
-    // call.
-    const initiatorsData = Timeline.Initiators.initiatorsDataToDraw(parsedTrace, fibonacciCall, [], []);
-
-    assert.deepEqual(initiatorsData, [{
-                       event: timerFireEvent,
-                       initiator: timerInstallEvent,
-                     }]);
-  });
-
-  it('will walk back through the initiators to find the entire chain', async function() {
-    const {parsedTrace} = await TraceLoader.traceEngine(this, 'nested-initiators.json.gz');
-
-    // Find any of the fibonnaci() calls; they have a parent
-    // event (TimerFire) that has an initiator.
-    const fibonacciCall = parsedTrace.Renderer.allTraceEntries.find(entry => {
-      return Trace.Types.Events.isProfileCall(entry) && entry.callFrame.functionName === 'fibonacci';
+    it('returns the initiator data', async function() {
+      const initiatorData = Timeline.Initiators.initiatorsDataToDraw(parsedTrace, functionCallBySetTimeout, [], []);
+      assert.deepEqual(initiatorData[0], {
+        event: functionCallBySetTimeout,
+        initiator: setTimeoutCall,
+      });
     });
-    assert.exists(fibonacciCall);
-
-    // Find the initators data but starting at the fibonacci()
-    // call. We expect to find two initiatorData objects here:
-    // 1. fibonacci() ===> TimerFire caused by TimerInstall
-    // 2. The TimerInstall from (1), caused by a prior TimerInstall.
-    const initiatorsData = Timeline.Initiators.initiatorsDataToDraw(parsedTrace, fibonacciCall, [], []);
-
-    assert.lengthOf(initiatorsData, 2);
-    for (const initiatorData of initiatorsData) {
-      // Ensure each initiatorData object has TimerInstall>TimerFire event to initiator.
-      assert.strictEqual(initiatorData.event.name, Trace.Types.Events.Name.TIMER_FIRE);
-      assert.strictEqual(initiatorData.initiator.name, Trace.Types.Events.Name.TIMER_INSTALL);
-    }
-  });
 
-  it('will walk forward to find the events initiated by the selected entry', async function() {
-    const {parsedTrace} = await TraceLoader.traceEngine(this, 'nested-initiators.json.gz');
+    it('can walk up the tree to find the first parent with an initiator', async function() {
+      // Find any of the bar() calls; they have a parent event
+      // (FunctionCall) that has an initiator.
+      const barCall = parsedTrace.Renderer.allTraceEntries.find(
+          e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'bar');
+      assert.exists(barCall);
+
+      // Find the initator data but starting at the fibonacci()
+      // call.
+      const initiatorsData = Timeline.Initiators.initiatorsDataToDraw(parsedTrace, barCall, [], []);
+
+      assert.deepEqual(initiatorsData[0], {
+        event: functionCallBySetTimeout,
+        initiator: setTimeoutCall,
+      });
+    });
 
-    // Find any of the InstallTimer calls; they initiate other events.
-    const timerInstall = parsedTrace.Renderer.allTraceEntries.find(entry => {
-      return entry.name === Trace.Types.Events.Name.TIMER_INSTALL;
+    it('will walk back through the initiators to find the entire chain', async function() {
+      // Find any of the baz() calls; they have a parent event
+      // (FunctionCall) that has an initiator.
+      const bazCall = parsedTrace.Renderer.allTraceEntries.find(
+          e => Trace.Types.Events.isProfileCall(e) && e.callFrame.functionName === 'baz');
+      assert.exists(bazCall);
+
+      // Find the initators data but starting at the baz()
+      // call. We expect to find 3 initiatorData objects here:
+      // 1. baz() ===> FunctionCall caused by requestIdleCallback
+      // 2. The requestIdleCallback from (1), caused by a prior setTimeout.
+      // 3. The setTimeout from (2), caused by a prior requestAnimationFrame.
+      const initiatorsData = Timeline.Initiators.initiatorsDataToDraw(parsedTrace, bazCall, [], []);
+
+      assert.deepEqual(initiatorsData, [
+        {
+          event: functionCallByrequestIdleCallback,
+          initiator: requestIdleCallbackCall,
+        },
+        {
+          event: functionCallBySetTimeout,
+          initiator: setTimeoutCall,
+        },
+        {
+          event: functionCallByRAF,
+          initiator: rAFCall,
+        },
+      ]);
     });
-    assert.exists(timerInstall);
 
-    // Find the initatorData objects starting at the TimerInstall
-    // call. We expect to find one initatorData here:
-    // TimerFire that was initiated by the entry we found - TimerInstall
+    it('will walk forward to find the events initiated by the selected entry', async function() {
+      const initatorsData = Timeline.Initiators.initiatorsDataToDraw(parsedTrace, rAFCall, [], []);
+      assert.lengthOf(initatorsData, 1);
+      assert.strictEqual(initatorsData[0].event, functionCallByRAF);
+      assert.strictEqual(initatorsData[0].initiator, rAFCall);
+    });
 
-    const initatorsData = Timeline.Initiators.initiatorsDataToDraw(parsedTrace, timerInstall, [], []);
+    it('will return the closest expandable ancestor as an initiator in a pair if the initiator itself is hidden',
+       async function() {
+         // Get the parent of rAF to add to the expandable events array.
+         // When we add rAF to hidden entries list, it will be the
+         // closest expandable parent and the initiator should point to it.
+         const rAFParent = parsedTrace.Renderer.entryToNode.get(rAFCall)?.parent;
+         assert.exists(rAFParent);
+
+         // Find the initatorData objects starting at the rAF
+         // call. We expect to find one initatorData here:
+         // rAF callback initiated by rAF -> Parent of rAF because rAF is hidden
+         const initiatorsData =
+             Timeline.Initiators.initiatorsDataToDraw(parsedTrace, rAFCall, [rAFCall], [rAFParent?.entry]);
+
+         assert.lengthOf(initiatorsData, 1);
+         assert.strictEqual(initiatorsData[0].event, functionCallByRAF);
+         assert.strictEqual(initiatorsData[0].initiator, rAFParent.entry);
+         // Ensure the expandable entry is marked as hidden
+         assert.isTrue(initiatorsData[0].isInitiatorHidden);
+       });
 
-    assert.lengthOf(initatorsData, 1);
-    for (const initatorData of initatorsData) {
-      // Ensure each initiatorData object has TimerInstall>TimerFire event to initiator.
-      assert.strictEqual(initatorData.event.name, Trace.Types.Events.Name.TIMER_FIRE);
-      assert.strictEqual(initatorData.initiator.name, Trace.Types.Events.Name.TIMER_INSTALL);
-    }
-  });
+    it('will return the closest expandable ancestor as an initiated event in a pair if the event itself is hidden',
+       async function() {
+         const functionCallByRAFParent = parsedTrace.Renderer.entryToNode.get(functionCallByRAF)?.parent;
+         assert.exists(functionCallByRAFParent);
 
-  it('will return the closest expandable ancestor as an initiator in a pair if the initiator itself is hidden',
-     async function() {
-       const {parsedTrace} = await TraceLoader.traceEngine(this, 'nested-initiators.json.gz');
+         const initiatorsData = Timeline.Initiators.initiatorsDataToDraw(
+             parsedTrace, rAFCall, [functionCallByRAF], [functionCallByRAFParent?.entry]);
 
-       // Find any of the InstallTimer calls; they initiate other events.
-       const timerInstall = parsedTrace.Renderer.allTraceEntries.find(entry => {
-         return entry.name === Trace.Types.Events.Name.TIMER_INSTALL;
-       });
-       assert.exists(timerInstall);
-       // Get the parent of InstallTimer to add to the expandable events array.
-       // When we add TimerInstall to hidden entries list, it will be the closest expandable parent and the initiator should point to it.
-       const timerInstallParent = parsedTrace.Renderer.entryToNode.get(timerInstall)?.parent;
-       assert.exists(timerInstallParent);
-
-       // Find the initatorData objects starting at the TimerInstall
-       // call. We expect to find one initatorData here:
-       // TimerFire that was initiated by the entry we found - Parent of TimerInstall because TimerInstall is hidden
-       const initiatorsData = Timeline.Initiators.initiatorsDataToDraw(
-           parsedTrace, timerInstall, [timerInstall], [timerInstallParent?.entry]);
-
-       assert.lengthOf(initiatorsData, 1);
-       // Ensure each initiatorData object has TimerInstall>TimerFire event to initiator.
-       for (const initiatorData of initiatorsData) {
-         assert.strictEqual(initiatorData.event.name, Trace.Types.Events.Name.TIMER_FIRE);
-         assert.strictEqual(initiatorData.initiator, timerInstallParent.entry);
+         assert.lengthOf(initiatorsData, 1);
+         assert.strictEqual(initiatorsData[0].event, functionCallByRAFParent?.entry);
+         assert.strictEqual(initiatorsData[0].initiator, rAFCall);
          // Ensure the expandable entry is marked as hidden
-         assert.strictEqual(initiatorData.isInitiatorHidden, true);
-       }
-     });
-
-  it('will return the closest expandable ancestor as an initiated event in a pair if the event itself is hidden',
-     async function() {
-       const {parsedTrace} = await TraceLoader.traceEngine(this, 'nested-initiators.json.gz');
-
-       // Find any of the fibonnaci() calls; they have a parent
-       // event (TimerFire) that has an initiator.
-       const fibonacciCall = parsedTrace.Renderer.allTraceEntries.find(entry => {
-         return Trace.Types.Events.isProfileCall(entry) && entry.callFrame.functionName === 'fibonacci';
+         assert.isTrue(initiatorsData[0].isEntryHidden);
        });
-       assert.exists(fibonacciCall);
-
-       // Find the initatorData objects but starting at the fibonacci()
-       // call. We expect to find two initiatorData objects here:
-       // 1. fibonacci() ===> TimerFire caused by TimerInstall
-       // 2. The TimerInstall from (1), caused by a prior TimerInstall.
-       let initiatorsData = Timeline.Initiators.initiatorsDataToDraw(parsedTrace, fibonacciCall, [], []);
-
-       assert.lengthOf(initiatorsData, 2);
-       // Save the parents of initiated events and the events themselves to get initiators again with those as expandable and hidden
-       const timerFireParents: Trace.Types.Events.Event[] = [];
-       const initiatedEvents: Trace.Types.Events.Event[] = [];
-
-       for (const initiatorData of initiatorsData) {
-         // Ensure each initiatorData object has TimerInstall>TimerFire event to initiator.
-         assert.strictEqual(initiatorData.event.name, Trace.Types.Events.Name.TIMER_FIRE);
-         assert.strictEqual(initiatorData.initiator.name, Trace.Types.Events.Name.TIMER_INSTALL);
-         const parentEvent = parsedTrace.Renderer.entryToNode.get(initiatorData.event)?.parent?.entry;
-         if (parentEvent) {
-           timerFireParents.push(parentEvent);
-           initiatedEvents.push(initiatorData.event);
-         }
-       }
-
-       // Get initiatorData object again, now with the previously initiated events hidden and parents marked as expandable
-       initiatorsData =
-           Timeline.Initiators.initiatorsDataToDraw(parsedTrace, fibonacciCall, initiatedEvents, timerFireParents);
-       // The length should not change, just the inititated events.
-       assert.lengthOf(initiatorsData, 2);
-       for (let i = 0; i < initiatorsData.length; i++) {
-         const initiatorData = initiatorsData[i];
-         // Ensure each initiatorData object has TimerInstall>TimerFire event to initiator.
-         assert.strictEqual(initiatorData.event, timerFireParents[i]);
-         assert.strictEqual(initiatorData.initiator.name, Trace.Types.Events.Name.TIMER_INSTALL);
-         // Ensure the expandable entry is marked as hidden
-         assert.strictEqual(initiatorData.isEntryHidden, true);
-       }
-     });
+  });
+
+  describe('Network Requests', function() {
+    it('returns the initiator data for network requests', async function() {
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'network-requests-initiators.json.gz');
+
+      // Find the network request to test, it is initiated by `youtube.com`.
+      const event = parsedTrace.NetworkRequests.byTime.find(event => event.ts === 1491680762420);
+      assert.exists(event);
+      // Find the `youtube.com` network request.
+      const initiator = parsedTrace.NetworkRequests.byTime.find(event => event.ts === 1491680629144);
+      assert.exists(initiator);
+      const initiatorData = Timeline.Initiators.initiatorsDataToDrawForNetwork(parsedTrace, event);
+
+      assert.deepEqual(initiatorData, [{event, initiator}]);
+    });
+  });
 });