chrome-devtools-frontend/front_end/panels/timeline/TimelineFlameChartView.test.ts

Chrome DevTools UI

// Copyright 2023 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 Common from '../../core/common/common.js';
import * as Platform from '../../core/platform/platform.js';
import * as Bindings from '../../models/bindings/bindings.js';
import * as Trace from '../../models/trace/trace.js';
import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
import {setupIgnoreListManagerEnvironment} from '../../testing/TraceHelpers.js';
import {TraceLoader} from '../../testing/TraceLoader.js';
import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
import * as UI from '../../ui/legacy/legacy.js';

import * as Timeline from './timeline.js';
import * as Utils from './utils/utils.js';

const {urlString} = Platform.DevToolsPath;

class MockViewDelegate implements Timeline.TimelinePanel.TimelineModeViewDelegate {
  selection: Timeline.TimelineSelection.TimelineSelection|null = null;
  select(selection: Timeline.TimelineSelection.TimelineSelection|null): void {
    this.selection = selection;
  }
  set3PCheckboxDisabled(_disabled: boolean): void {
  }
  selectEntryAtTime(_events: Trace.Types.Events.Event[]|null, _time: number): void {
  }
  highlightEvent(_event: Trace.Types.Events.Event|null): void {
  }
  element = document.createElement('div');
}

describeWithEnvironment('TimelineFlameChartView', function() {
  beforeEach(() => {
    setupIgnoreListManagerEnvironment();
  });

  describe('groupForLevel', () => {
    const {groupForLevel} = Timeline.TimelineFlameChartView;

    it('finds the right group for the given level', async () => {
      const groups: PerfUI.FlameChart.Group[] = [
        {
          name: 'group-1' as Common.UIString.LocalizedString,
          startLevel: 0,
          style: {} as PerfUI.FlameChart.GroupStyle,
        },
        {
          name: 'group-2' as Common.UIString.LocalizedString,
          startLevel: 10,
          style: {} as PerfUI.FlameChart.GroupStyle,
        },
        {
          name: 'group-3' as Common.UIString.LocalizedString,
          startLevel: 12,
          style: {} as PerfUI.FlameChart.GroupStyle,
        },
      ];

      assert.strictEqual(groupForLevel(groups, 1), groups[0]);
      assert.strictEqual(groupForLevel(groups, 10), groups[1]);
      assert.strictEqual(groupForLevel(groups, 11), groups[1]);
      assert.strictEqual(groupForLevel(groups, 12), groups[2]);
      assert.strictEqual(groupForLevel(groups, 999), groups[2]);
    });
  });

  it('Can search for events by name in the timeline', async function() {
    const {parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'lcp-images.json.gz');
    // The timeline flamechart view will invoke the `select` method
    // of this delegate every time an event has matched on a search.
    const mockViewDelegate = new MockViewDelegate();

    const flameChartView = new Timeline.TimelineFlameChartView.TimelineFlameChartView(mockViewDelegate);
    const searchableView = new UI.SearchableView.SearchableView(flameChartView, null);
    flameChartView.setSearchableView(searchableView);
    flameChartView.setModel(parsedTrace, metadata);

    const searchQuery = 'Paint';
    const searchConfig =
        new UI.SearchableView.SearchConfig(/* query */ searchQuery, /* caseSensitive */ false, /* isRegex */ false);
    flameChartView.performSearch(searchConfig, true);

    assert.strictEqual(flameChartView.getSearchResults()?.length, 14);
    assertSelectionName('PrePaint');

    flameChartView.jumpToNextSearchResult();
    assertSelectionName('Paint');

    flameChartView.jumpToNextSearchResult();
    assertSelectionName('Paint');

    flameChartView.jumpToPreviousSearchResult();
    assertSelectionName('Paint');
    flameChartView.jumpToPreviousSearchResult();
    assertSelectionName('PrePaint');

    function assertSelectionName(name: string) {
      const selection = mockViewDelegate.selection;
      if (!selection || !Timeline.TimelineSelection.selectionIsEvent(selection)) {
        throw new Error('Selection is not present or not a Trace Event');
      }
      assert.strictEqual(selection.event.name, name);
    }
  });

  it('can search across both flame charts for events', async function() {
    const {parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
    // The timeline flamechart view will invoke the `select` method
    // of this delegate every time an event has matched on a search.
    const mockViewDelegate = new MockViewDelegate();

    const flameChartView = new Timeline.TimelineFlameChartView.TimelineFlameChartView(mockViewDelegate);
    const searchableView = new UI.SearchableView.SearchableView(flameChartView, null);
    flameChartView.setSearchableView(searchableView);
    flameChartView.setModel(parsedTrace, metadata);

    const searchQuery = 'app.js';
    const searchConfig =
        new UI.SearchableView.SearchConfig(/* query */ searchQuery, /* caseSensitive */ false, /* isRegex */ false);
    flameChartView.performSearch(searchConfig, true);

    const results = flameChartView.getSearchResults();
    assert.isOk(results);
    assert.lengthOf(results, 6);
    // We should have 5 results from the main provider, and 1 from the network
    assert.lengthOf(results.filter(r => r.provider === 'main'), 5);
    assert.lengthOf(results.filter(r => r.provider === 'network'), 1);
  });

  // This test is still failing after bumping up the timeout to 20 seconds. So
  // skip it while we work on a fix for the trace load speed.
  it.skip('[crbug.com/1492405] Shows the network track correctly', async function() {
    const {parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'load-simple.json.gz');
    // The timeline flamechart view will invoke the `select` method
    // of this delegate every time an event has matched on a search.
    const mockViewDelegate = new MockViewDelegate();

    const flameChartView = new Timeline.TimelineFlameChartView.TimelineFlameChartView(mockViewDelegate);
    flameChartView.setModel(parsedTrace, metadata);

    assert.isTrue(flameChartView.isNetworkTrackShownForTests());
  });

  it('Does not show the network track when there is no network request', async function() {
    const {parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'basic.json.gz');
    // The timeline flamechart view will invoke the `select` method
    // of this delegate every time an event has matched on a search.
    const mockViewDelegate = new MockViewDelegate();

    const flameChartView = new Timeline.TimelineFlameChartView.TimelineFlameChartView(mockViewDelegate);
    flameChartView.setModel(parsedTrace, metadata);

    assert.isFalse(flameChartView.isNetworkTrackShownForTests());
  });

  it('Adds Hidden Descendants Arrow as a decoration when a Context Menu action is applied on a node', async function() {
    const {parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'load-simple.json.gz');
    const mockViewDelegate = new MockViewDelegate();

    const flameChartView = new Timeline.TimelineFlameChartView.TimelineFlameChartView(mockViewDelegate);
    flameChartView.setModel(parsedTrace, metadata);

    // Find the main track to later collapse entries of
    const mainTrack = flameChartView.getMainFlameChart().timelineData()?.groups.find(group => {
      return group.name === 'Main — http://localhost:8080/';
    });
    if (!mainTrack) {
      throw new Error('Could not find main track');
    }

    // Find the first node that has children to collapse and is visible in the timeline
    const nodeOfGroup = flameChartView.getMainDataProvider().groupTreeEvents(mainTrack);
    const firstNodeWithChildren = nodeOfGroup?.find(node => {
      const childrenAmount = parsedTrace.Renderer.entryToNode.get(node as Trace.Types.Events.Event)?.children.length;
      if (!childrenAmount) {
        return false;
      }
      return childrenAmount > 0 && node.cat === 'devtools.timeline';
    });
    const node = parsedTrace.Renderer.entryToNode.get(firstNodeWithChildren as Trace.Types.Events.Event);
    if (!node) {
      throw new Error('Could not find a visible node with children');
    }

    // Apply COLLAPSE_FUNCTION action to the node. This action will hide all the children of the passed node and add HIDDEN_DESCENDANTS_ARROW decoration to it.
    flameChartView.getMainFlameChart().modifyTree(PerfUI.FlameChart.FilterAction.COLLAPSE_FUNCTION, node?.id);

    const decorationsForEntry = flameChartView.getMainFlameChart().timelineData()?.entryDecorations[node?.id];
    assert.deepEqual(decorationsForEntry, [
      {
        type: PerfUI.FlameChart.FlameChartDecorationType.HIDDEN_DESCENDANTS_ARROW,
      },
    ]);
  });

  it('Adds Hidden Descendants Arrow as a decoration when a Context Menu action is applied on a selected node with a key shortcut event',
     async function() {
       const {parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'load-simple.json.gz');
       const mockViewDelegate = new MockViewDelegate();

       const flameChartView = new Timeline.TimelineFlameChartView.TimelineFlameChartView(mockViewDelegate);
       flameChartView.setModel(parsedTrace, metadata);

       // Find the main track to later collapse entries of
       const mainTrack = flameChartView.getMainFlameChart().timelineData()?.groups.find(group => {
         return group.name === 'Main — http://localhost:8080/';
       });
       if (!mainTrack) {
         throw new Error('Could not find main track');
       }

       // Find the first node that has children to collapse and is visible in the timeline
       const groupTreeEvents = flameChartView.getMainDataProvider().groupTreeEvents(mainTrack);
       const firstEventWithChildren = groupTreeEvents?.find(node => {
         const childrenAmount = parsedTrace.Renderer.entryToNode.get(node as Trace.Types.Events.Event)?.children.length;
         if (!childrenAmount) {
           return false;
         }
         return childrenAmount > 0 && node.cat === 'devtools.timeline';
       });
       assert.exists(firstEventWithChildren);

       const nodeId = flameChartView.getMainDataProvider().indexForEvent(firstEventWithChildren);
       assert.exists(nodeId);

       flameChartView.getMainFlameChart().setSelectedEntry(nodeId);

       // Dispatch a shortcut keydown event that applies 'Hide Children' Context menu action
       const event = new KeyboardEvent('keydown', {code: 'KeyC'});
       flameChartView.getMainFlameChart().getCanvas().dispatchEvent(event);

       const decorationsForEntry = flameChartView.getMainFlameChart().timelineData()?.entryDecorations[nodeId];
       assert.deepEqual(decorationsForEntry, [
         {
           type: PerfUI.FlameChart.FlameChartDecorationType.HIDDEN_DESCENDANTS_ARROW,
         },
       ]);
     });

  it('Removes Hidden Descendants Arrow as a decoration when Reset Children action is applied on a node',
     async function() {
       const {parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'load-simple.json.gz');
       const mockViewDelegate = new MockViewDelegate();

       const flameChartView = new Timeline.TimelineFlameChartView.TimelineFlameChartView(mockViewDelegate);
       flameChartView.setModel(parsedTrace, metadata);
       Timeline.ModificationsManager.ModificationsManager.activeManager();

       // Find the main track to later collapse entries of
       let mainTrack = flameChartView.getMainFlameChart().timelineData()?.groups.find(group => {
         return group.name === 'Main — http://localhost:8080/';
       });
       if (!mainTrack) {
         throw new Error('Could not find main track');
       }

       // Find the first node that has children to collapse and is visible in the timeline
       const nodeOfGroup = flameChartView.getMainDataProvider().groupTreeEvents(mainTrack);
       const firstNodeWithChildren = nodeOfGroup?.find(node => {
         const childrenAmount = parsedTrace.Renderer.entryToNode.get(node as Trace.Types.Events.Event)?.children.length;
         if (!childrenAmount) {
           return false;
         }
         return childrenAmount > 0 && node.cat === 'devtools.timeline';
       });
       const node = parsedTrace.Renderer.entryToNode.get(firstNodeWithChildren as Trace.Types.Events.Event);
       if (!node) {
         throw new Error('Could not find a visible node with children');
       }

       // Apply COLLAPSE_FUNCTION Context Menu action to the node.
       // This action will hide all the children of the passed node and add HIDDEN_DESCENDANTS_ARROW decoration to it.
       flameChartView.getMainFlameChart().modifyTree(PerfUI.FlameChart.FilterAction.COLLAPSE_FUNCTION, node?.id);

       let decorationsForEntry = flameChartView.getMainFlameChart().timelineData()?.entryDecorations[node?.id];
       assert.deepEqual(decorationsForEntry, [
         {
           type: PerfUI.FlameChart.FlameChartDecorationType.HIDDEN_DESCENDANTS_ARROW,
         },
       ]);

       mainTrack = flameChartView.getMainFlameChart().timelineData()?.groups.find(group => {
         return group.name === 'Main — http://localhost:8080/';
       });
       if (!mainTrack) {
         throw new Error('Could not find main track');
       }
       // Apply a RESET_CHILDREN action that will reveal all of the hidden children of the passed node and remove HIDDEN_DESCENDANTS_ARROW decoration from it.
       flameChartView.getMainFlameChart().modifyTree(PerfUI.FlameChart.FilterAction.RESET_CHILDREN, node?.id);

       // No decorations should exist on the node
       decorationsForEntry = flameChartView.getMainFlameChart().timelineData()?.entryDecorations[node?.id];
       assert.isUndefined(decorationsForEntry);
     });

  it('renders metrics as marker overlays w/ tooltips', async function() {
    const {parsedTrace, metadata, insights} = await TraceLoader.traceEngine(this, 'crux.json.gz');
    const mockViewDelegate = new MockViewDelegate();

    const flameChartView = new Timeline.TimelineFlameChartView.TimelineFlameChartView(mockViewDelegate);
    flameChartView.setInsights(insights, new Map());
    flameChartView.setModel(parsedTrace, metadata);

    const tooltips =
        [...flameChartView.element.querySelectorAll('.overlay-type-TIMINGS_MARKER .marker-title')].map(el => {
          el?.dispatchEvent(new MouseEvent('mousemove', {
            clientX: 0,
            clientY: 0,
          }));
          return flameChartView.element.querySelector('.timeline-entry-tooltip-element')
              ?.textContent?.replaceAll('\xa0', ' ');
        });

    assert.deepEqual(tooltips, [
      '0 μsNav',
      '43.98 msL',
      '75.90 msFCP - Local939.00 msFCP - Field (URL)',
      '75.90 msLCP - Local936.00 msLCP - Field (URL)',
      '43.75 msDCL',
    ]);
  });

  describe('Context Menu', function() {
    let flameChartView: Timeline.TimelineFlameChartView.TimelineFlameChartView;
    let parsedTrace: Trace.Handlers.Types.ParsedTrace;
    let metadata: Trace.Types.File.MetaData|null;

    this.beforeEach(async () => {
      ({parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'recursive-blocking-js.json.gz'));
      const mockViewDelegate = new MockViewDelegate();

      flameChartView = new Timeline.TimelineFlameChartView.TimelineFlameChartView(mockViewDelegate);
      flameChartView.setModel(parsedTrace, metadata);
      Timeline.ModificationsManager.ModificationsManager.activeManager();
    });

    it('Does not create customized Context Menu for network track', async function() {
      // The mouse event passed to the Context Menu is used to indicate where the menu should appear. Since we don't
      // need it to actually appear for this test, pass an event with coordinates that is not in the track header.
      flameChartView.getNetworkFlameChart().onContextMenu(new MouseEvent('contextmenu', {clientX: 100, clientY: 100}));
      assert.isUndefined(flameChartView.getNetworkFlameChart().getContextMenu());
    });

    it('Does not create Context Menu for Network track header', async function() {
      // So for the first track header, its x will start from beginning.
      // And its y will start after the ruler (ruler's height is 17).
      flameChartView.getNetworkFlameChart().onContextMenu(new MouseEvent('contextmenu', {clientX: 0, clientY: 17}));
      assert.isUndefined(flameChartView.getNetworkFlameChart().getContextMenu());
    });

    it('Create correct Context Menu for track headers in main flame chart', async function() {
      // So for the first track header, its x will start from beginning.
      // And its y will start after the ruler (ruler's height is 17).
      flameChartView.getMainFlameChart().onContextMenu(new MouseEvent('contextmenu', {clientX: 0, clientY: 17}));

      assert.strictEqual(flameChartView.getMainFlameChart().getContextMenu()?.defaultSection().items.length, 1);
      assert.strictEqual(
          flameChartView.getMainFlameChart().getContextMenu()?.defaultSection().items.at(0)?.buildDescriptor().label,
          'Configure tracks');
    });

    describe('Context Menu Actions For Thread tracks', function() {
      this.beforeEach(async () => {
        // Find the Main track to later collapse entries of
        const mainTrack = flameChartView.getMainFlameChart().timelineData()?.groups.find(group => {
          return group.name === 'Main — http://127.0.0.1:8080/';
        });
        if (!mainTrack) {
          throw new Error('Could not find main track');
        }
      });

      function getMainThread(data: Trace.Handlers.ModelHandlers.Renderer.RendererHandlerData):
          Trace.Handlers.ModelHandlers.Renderer.RendererThread {
        let mainThread: Trace.Handlers.ModelHandlers.Renderer.RendererThread|null = null;
        for (const [, process] of data.processes) {
          for (const [, thread] of process.threads) {
            if (thread.name === 'CrRendererMain') {
              mainThread = thread;
              break;
            }
          }
        }
        if (!mainThread) {
          throw new Error('Could not find main thread.');
        }
        return mainThread;
      }

      function findFirstEntry(
          allEntries: readonly Trace.Types.Events.Event[],
          predicate: (entry: Trace.Types.Events.Event) => boolean): Trace.Types.Events.Event {
        const entry = allEntries.find(entry => predicate(entry));
        if (!entry) {
          throw new Error('Could not find expected entry.');
        }
        return entry;
      }

      function generateContextMenuForNodeId(nodeId: number): void {
        // Highlight the node to make the Context Menu dispatch on this node
        flameChartView.getMainFlameChart().highlightEntry(nodeId);

        const eventCoordinates = flameChartView.getMainFlameChart().entryIndexToCoordinates(nodeId);
        if (!eventCoordinates) {
          throw new Error('Coordinates were not found');
        }

        // The mouse event passed to the Context Menu is used to indicate where the menu should appear. So just simply
        // use the pixels of top left corner of the event.
        flameChartView.getMainFlameChart().onContextMenu(
            new MouseEvent('contextmenu', {clientX: eventCoordinates.x, clientY: eventCoordinates.y}));
      }

      function generateContextMenuForNode(node: Trace.Types.Events.Event): void {
        const nodeId = flameChartView.getMainDataProvider().indexForEvent(node);
        assert.isNotNull(nodeId);
        generateContextMenuForNodeId(nodeId);
      }

      it('When an entry has no children, correctly make only Hide Entry enabled in the Context Menu action',
         async function() {
           /** Part of this stack looks roughly like so (with some events omitted):
            * =============== foo ===============
            * =============== foo ===============
            * =============== foo ===============
            * =============== foo ===============
            * =============== foo ===============
            * =============== foo ===============
            * =============== foo ===============
            * == now ==      == updateCounters ==  <-- ID=245
            *
            * In this test we want to test that the Context Menu option available
            * for an entry with no children and a parent is to hide given entry only.
            * Since there are no children to hide, we don't want to show 'hide children' option.
            *
            * To achieve that, we will dispatch the context menu on the 'updateCounters' function that does not have
            * children.
            * The ID of 'updateCounters' is 245.
            **/

           const nodeIdWithNoChildren = 245;
           generateContextMenuForNodeId(nodeIdWithNoChildren);

           assert.strictEqual(flameChartView.getMainFlameChart().getContextMenu()?.defaultSection().items.length, 5);
           // Hide function enabled
           assert.isTrue(flameChartView.getMainFlameChart()
                             .getContextMenu()
                             ?.defaultSection()
                             .items.at(0)
                             ?.buildDescriptor()
                             .enabled);
           // Rest of the actions disabled
           assert.isFalse(flameChartView.getMainFlameChart()
                              .getContextMenu()
                              ?.defaultSection()
                              .items.at(1)
                              ?.buildDescriptor()
                              .enabled);
           assert.isFalse(flameChartView.getMainFlameChart()
                              .getContextMenu()
                              ?.defaultSection()
                              .items.at(2)
                              ?.buildDescriptor()
                              .enabled);
           assert.isFalse(flameChartView.getMainFlameChart()
                              .getContextMenu()
                              ?.defaultSection()
                              .items.at(3)
                              ?.buildDescriptor()
                              .enabled);
           assert.isFalse(flameChartView.getMainFlameChart()
                              .getContextMenu()
                              ?.defaultSection()
                              .items.at(4)
                              ?.buildDescriptor()
                              .enabled);
         });

      it('When an entry has children, correctly make only Hide Entry and Hide Children enabled in the Context Menu action',
         async function() {
           /** Part of this stack looks roughly like so (with some events omitted):
            * =============== foo ===============
            * =============== foo ===============
            * =============== foo ===============
            * =============== foo ===============
            * =============== foo ===============
            * =============== foo ===============
            * =============== foo ===============
            * ===== wait =====   ===== wait =====
            * = now =  = now =   = now =  = now =
            *
            * In this test we want to test that the Context Menu option available
            * for an entry with children and a parent is to hide given entry, and hide children only.
            * Since there are no repeating children to hide, we don't want to show 'hide repeating children' option.
            *
            * To achieve that, we will dispatch the context menu on the 'wait' function that has only non-repeating
            * children.
            **/
           const mainThread = getMainThread(parsedTrace.Renderer);
           const entry = findFirstEntry(mainThread.entries, entry => {
             return Trace.Types.Events.isProfileCall(entry) && entry.callFrame.functionName === 'wait';
           });
           const nodeIdWithNoChildren = flameChartView.getMainDataProvider().indexForEvent(entry);
           assert.exists(nodeIdWithNoChildren);
           generateContextMenuForNodeId(nodeIdWithNoChildren);

           // This entry has URL, so there are 5 always-shown actions, and one to add script to ignore list.
           assert.strictEqual(flameChartView.getMainFlameChart().getContextMenu()?.defaultSection().items.length, 6);
           // Hide function enabled
           assert.isTrue(flameChartView.getMainFlameChart()
                             .getContextMenu()
                             ?.defaultSection()
                             .items.at(0)
                             ?.buildDescriptor()
                             .enabled);
           // Hide children enabled
           assert.isTrue(flameChartView.getMainFlameChart()
                             .getContextMenu()
                             ?.defaultSection()
                             .items.at(1)
                             ?.buildDescriptor()
                             .enabled);
           // Rest of the actions disabled
           assert.isFalse(flameChartView.getMainFlameChart()
                              .getContextMenu()
                              ?.defaultSection()
                              .items.at(2)
                              ?.buildDescriptor()
                              .enabled);
           assert.isFalse(flameChartView.getMainFlameChart()
                              .getContextMenu()
                              ?.defaultSection()
                              .items.at(3)
                              ?.buildDescriptor()
                              .enabled);
           assert.isFalse(flameChartView.getMainFlameChart()
                              .getContextMenu()
                              ?.defaultSection()
                              .items.at(4)
                              ?.buildDescriptor()
                              .enabled);
         });

      it('When an entry has repeating children, correctly make only Hide Entry, Hide Children and Hide repeating children enabled in the Context Menu action',
         async function() {
           /** Part of this stack looks roughly like so (with some events omitted):
            * =============== foo ===============
            * =============== foo ===============
            * =============== foo ===============
            * =============== foo ===============
            * =============== foo ===============
            * =============== foo ===============
            * =============== foo ===============
            * ===== wait =====   ===== wait =====
            * = now =  = now =   = now =  = now =
            *
            * In this test we want to test that the Context Menu option available
            * for an entry with children repeating children and a parent is to hide given entry, hide children and hide
            * repeating children.
            *
            * To achieve that, we will dispatch the context menu on the 'foo' function that has child 'foo' calls.
            **/

           const mainThread = getMainThread(parsedTrace.Renderer);
           const entry = findFirstEntry(mainThread.entries, entry => {
             return Trace.Types.Events.isProfileCall(entry) && entry.callFrame.functionName === 'foo';
           });

           const nodeId = flameChartView.getMainDataProvider().indexForEvent(entry);
           assert.exists(nodeId);

           generateContextMenuForNodeId(nodeId);

           // This entry has URL, so there are 5 always-shown actions, and one to add script to ignore list.
           assert.strictEqual(flameChartView.getMainFlameChart().getContextMenu()?.defaultSection().items.length, 6);
           // Hide function enabled
           assert.isTrue(flameChartView.getMainFlameChart()
                             .getContextMenu()
                             ?.defaultSection()
                             .items.at(0)
                             ?.buildDescriptor()
                             .enabled);
           // Hide children enabled
           assert.isTrue(flameChartView.getMainFlameChart()
                             .getContextMenu()
                             ?.defaultSection()
                             .items.at(1)
                             ?.buildDescriptor()
                             .enabled);
           // Hide repeating children enabled
           assert.isTrue(flameChartView.getMainFlameChart()
                             .getContextMenu()
                             ?.defaultSection()
                             .items.at(2)
                             ?.buildDescriptor()
                             .enabled);
           // Rest of the actions disabled
           assert.isFalse(flameChartView.getMainFlameChart()
                              .getContextMenu()
                              ?.defaultSection()
                              .items.at(3)
                              ?.buildDescriptor()
                              .enabled);
           assert.isFalse(flameChartView.getMainFlameChart()
                              .getContextMenu()
                              ?.defaultSection()
                              .items.at(4)
                              ?.buildDescriptor()
                              .enabled);
         });

      it('When an entry has no parent and has children, correctly make only Hide Children enabled in the Context Menu action',
         async function() {
           /** Part of this stack looks roughly like so (with some events omitted):
            * =============== Task ==============
            * =============== foo ===============
            * =============== foo ===============
            * =============== foo ===============
            * =============== foo ===============
            * =============== foo ===============
            * =============== foo ===============
            * ===== wait =====   ===== wait =====
            * = now =  = now =   = now =  = now =
            *
            * In this test we want to test that the Context Menu option available for an entry with no parent is only to
            * hide children.
            * If an entry has no parent, we don't want to show an option to hide the entry since when an entry is hidden,
            * it is indicated by adding a decoration to the parent and if there is no parent, there is no way to show it
            * is hidden.
            *
            * To achieve that, we will dispatch the context menu on the 'Task' function that is on the top of the stack
            * and has no parent.
            **/

           const mainThread = getMainThread(parsedTrace.Renderer);
           const entry = findFirstEntry(mainThread.entries, entry => {
             const childrenAmount =
                 parsedTrace.Renderer.entryToNode.get(entry as Trace.Types.Events.Event)?.children.length;
             if (!childrenAmount) {
               return false;
             }
             return Trace.Types.Events.isRunTask(entry);
           });

           const nodeId = flameChartView.getMainDataProvider().indexForEvent(entry);
           assert.exists(nodeId);

           generateContextMenuForNodeId(nodeId);

           // Hide function disabled
           assert.isFalse(flameChartView.getMainFlameChart()
                              .getContextMenu()
                              ?.defaultSection()
                              .items.at(0)
                              ?.buildDescriptor()
                              .enabled);
           // Hide children enabled
           assert.isTrue(flameChartView.getMainFlameChart()
                             .getContextMenu()
                             ?.defaultSection()
                             .items.at(1)
                             ?.buildDescriptor()
                             .enabled);
           // Rest of the actions disabled
           assert.isFalse(flameChartView.getMainFlameChart()
                              .getContextMenu()
                              ?.defaultSection()
                              .items.at(2)
                              ?.buildDescriptor()
                              .enabled);
           assert.isFalse(flameChartView.getMainFlameChart()
                              .getContextMenu()
                              ?.defaultSection()
                              .items.at(3)
                              ?.buildDescriptor()
                              .enabled);
           assert.isFalse(flameChartView.getMainFlameChart()
                              .getContextMenu()
                              ?.defaultSection()
                              .items.at(4)
                              ?.buildDescriptor()
                              .enabled);
         });

      it('Reset Trace Context Menu action is disabled before some action has been applied', async function() {
        /** Part of this stack looks roughly like so (with some events omitted):
         * =============== Task ==============
         * =============== foo ===============
         * =============== foo ===============
         * =============== foo ===============
         * =============== foo ===============
         * =============== foo ===============
         * =============== foo ===============
         * ===== wait =====   ===== wait =====
         * = now =  = now =   = now =  = now =
         *
         * In this test we want to test that the Reset Trace Context Menu option is disabled by default and enabled after
         * some action has been applied.
         *
         * To achieve that, we will first check if Reset Trace is disabled and then dispatch a Context Menu action on
         * "Task" entry and then check if Reset Trace is enabled.
         **/

        const mainThread = getMainThread(parsedTrace.Renderer);
        const entry = findFirstEntry(mainThread.entries, entry => Trace.Types.Events.isRunTask(entry));
        const nodeId = flameChartView.getMainDataProvider().indexForEvent(entry);
        assert.exists(nodeId);

        generateContextMenuForNodeId(nodeId);
        assert.strictEqual(flameChartView.getMainFlameChart().getContextMenu()?.defaultSection().items.length, 5);
        assert.strictEqual(
            flameChartView.getMainFlameChart().getContextMenu()?.defaultSection().items.at(4)?.buildDescriptor().label,
            'Reset trace');
        // Check that Reset Trace is disabled
        assert.isFalse(flameChartView.getMainFlameChart()
                           .getContextMenu()
                           ?.defaultSection()
                           .items.at(4)
                           ?.buildDescriptor()
                           .enabled);

        flameChartView.getMainFlameChart().modifyTree(PerfUI.FlameChart.FilterAction.MERGE_FUNCTION, nodeId);
        generateContextMenuForNodeId(nodeId);

        // Check that Reset Trace is enabled
        assert.isTrue(flameChartView.getMainFlameChart()
                          .getContextMenu()
                          ?.defaultSection()
                          .items.at(4)
                          ?.buildDescriptor()
                          .enabled);
      });

      it('When an entry has URL and is not ignored, correctly show the Add script to ignore list in the Context Menu action',
         async function() {
           const mainThread = getMainThread(parsedTrace.Renderer);
           const entryWithUrl = findFirstEntry(mainThread.entries, entry => {
             // Let's find the first entry with URL.
             return Trace.Types.Events.isProfileCall(entry) && Boolean(entry.callFrame.url);
           });
           generateContextMenuForNode(entryWithUrl);

           assert.strictEqual(flameChartView.getMainFlameChart().getContextMenu()?.defaultSection().items.length, 6);

           assert.strictEqual(
               flameChartView.getMainFlameChart()
                   .getContextMenu()
                   ?.defaultSection()
                   .items.at(5)
                   ?.buildDescriptor()
                   .label,
               'Add script to ignore list');
         });

      it('When an entry has URL and is ignored, correctly show the Remove script from ignore list in the Context Menu action',
         async function() {
           const mainThread = getMainThread(parsedTrace.Renderer);
           const entryWithIgnoredUrl = findFirstEntry(mainThread.entries, entry => {
             // Let's find the first entry with URL.
             return Trace.Types.Events.isProfileCall(entry) && Boolean(entry.callFrame.url);
           });
           Bindings.IgnoreListManager.IgnoreListManager.instance().ignoreListURL(
               urlString`${(entryWithIgnoredUrl as Trace.Types.Events.SyntheticProfileCall).callFrame.url}`);

           generateContextMenuForNode(entryWithIgnoredUrl);

           assert.strictEqual(flameChartView.getMainFlameChart().getContextMenu()?.defaultSection().items.length, 6);

           assert.strictEqual(
               flameChartView.getMainFlameChart()
                   .getContextMenu()
                   ?.defaultSection()
                   .items.at(5)
                   ?.buildDescriptor()
                   .label,
               'Remove script from ignore list');
         });
    });
  });

  describe('updating the active AI call tree', () => {
    it('updates the UI Context with the active AI Call tree for the selected event', async function() {
      const {parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
      const mockViewDelegate = new MockViewDelegate();
      const flameChartView = new Timeline.TimelineFlameChartView.TimelineFlameChartView(mockViewDelegate);
      flameChartView.setModel(parsedTrace, metadata);
      // Find some task in the main thread that we can build an AI Call Tree from
      const task = parsedTrace.Renderer.allTraceEntries.find(event => {
        return Trace.Types.Events.isRunTask(event) && event.dur > 5_000 &&
            Utils.AICallTree.AICallTree.from(event, parsedTrace) !== null;
      });

      assert.isOk(task);
      UI.Context.Context.instance().setFlavor(Utils.AICallTree.AICallTree, null);
      const selection = Timeline.TimelineSelection.selectionFromEvent(task);
      flameChartView.setSelectionAndReveal(selection);
      const flavor = UI.Context.Context.instance().flavor(Utils.AICallTree.AICallTree);
      assert.instanceOf(flavor, Utils.AICallTree.AICallTree);
    });
  });

  describe('Link between entries annotation in progress', function() {
    let flameChartView: Timeline.TimelineFlameChartView.TimelineFlameChartView;
    let parsedTrace: Trace.Handlers.Types.ParsedTrace;
    let metadata: Trace.Types.File.MetaData|null;

    this.beforeEach(async () => {
      ({parsedTrace, metadata} = await TraceLoader.traceEngine(this, 'recursive-blocking-js.json.gz'));
      const mockViewDelegate = new MockViewDelegate();

      flameChartView = new Timeline.TimelineFlameChartView.TimelineFlameChartView(mockViewDelegate);
      flameChartView.setModel(parsedTrace, metadata);
      Timeline.ModificationsManager.ModificationsManager.activeManager();
    });

    it('Creates a `link between entries Annotation in progress` tracking object', async function() {
      // Make sure the link annotation in the progress of creation does not exist
      assert.isNull(flameChartView.getLinkSelectionAnnotation());

      // Start creating a link between entries from an entry with ID 204
      flameChartView.onEntriesLinkAnnotationCreate(flameChartView.getMainDataProvider(), 204);

      // Make sure the link is started and only has 'from' entry set
      assert.isNotNull(flameChartView.getLinkSelectionAnnotation());
      assert.isNotNull(flameChartView.getLinkSelectionAnnotation()?.entryFrom);
      assert.isUndefined(flameChartView.getLinkSelectionAnnotation()?.entryTo);

      // Make sure the annotation exists in the ModificationsManager
      const annotations = Timeline.ModificationsManager.ModificationsManager.activeManager()?.getAnnotations();
      assert.exists(annotations);
      assert.strictEqual(annotations?.length, 1);
      assert.strictEqual(annotations[0].type, 'ENTRIES_LINK');
    });

    it('Sets the link between entries annotation in progress to null when the second entry is selected',
       async function() {
         // Make sure the link annotation in the progress of creation does not exist
         assert.isNull(flameChartView.getLinkSelectionAnnotation());

         // Start creating a link between entries from an entry with ID 204
         flameChartView.onEntriesLinkAnnotationCreate(flameChartView.getMainDataProvider(), 204);
         const entryFrom = flameChartView.getMainDataProvider().eventByIndex(204);

         // Hover on another entry to complete the link
         flameChartView.updateLinkSelectionAnnotationWithToEntry(flameChartView.getMainDataProvider(), 245);
         const entryTo = flameChartView.getMainDataProvider().eventByIndex(245);
         // Make sure the entry 'to' is set
         assert.exists(flameChartView.getLinkSelectionAnnotation()?.entryTo);

         // Select the other entry to complete the link and set the one in progress to null
         flameChartView.handleToEntryOfLinkBetweenEntriesSelection(245);
         // Make sure the link annotation in progress is set to null
         assert.isNull(flameChartView.getLinkSelectionAnnotation());

         // Make sure the annotation exists in the ModificationsManager
         const annotations = Timeline.ModificationsManager.ModificationsManager.activeManager()?.getAnnotations();
         assert.exists(annotations);
         assert.strictEqual(annotations?.length, 1);
         assert.strictEqual(annotations[0].type, 'ENTRIES_LINK');
         const entriesLink = annotations[0] as Trace.Types.File.EntriesLinkAnnotation;

         assert.strictEqual(entriesLink.entryFrom, entryFrom);
         assert.strictEqual(entriesLink.entryTo, entryTo);
       });

    it('Reverses entries in the link if `to` entry timestamp is earlier than `from` entry timestamo', async function() {
      // Make sure the link annotation in the progress of creation does not exist
      assert.isNull(flameChartView.getLinkSelectionAnnotation());

      // Start creating a link between entries from an entry with ID 245
      flameChartView.onEntriesLinkAnnotationCreate(flameChartView.getMainDataProvider(), 245);
      const entryFrom = flameChartView.getMainDataProvider().eventByIndex(245);

      // Hover on another entry that starts before the entry that the link is being created from
      flameChartView.updateLinkSelectionAnnotationWithToEntry(flameChartView.getMainDataProvider(), 204);
      const entryTo = flameChartView.getMainDataProvider().eventByIndex(204);

      // Select the other entry to complete the link and set the one in progress to null
      flameChartView.handleToEntryOfLinkBetweenEntriesSelection(204);

      // Make sure the annotation exists in the ModificationsManager
      const annotations = Timeline.ModificationsManager.ModificationsManager.activeManager()?.getAnnotations();
      assert.exists(annotations);
      assert.strictEqual(annotations?.length, 1);
      assert.strictEqual(annotations[0].type, 'ENTRIES_LINK');
      const entriesLink = annotations[0] as Trace.Types.File.EntriesLinkAnnotation;

      // Make 'entryFrom' has an earlier timestamp and the entries `to` and `from` got switched up
      assert.strictEqual(entriesLink.entryFrom, entryTo);
      assert.strictEqual(entriesLink.entryTo, entryFrom);
    });
  });
});