I thought it would be useful to be able to use the DevTools performance page for debugging performance issues with the analysis server. The server already has some classes that record performance internally that map fairly closely onto the TimelineTask class used for the Performance page.

However, when using it I can't get the parent/child relationship to show up in the graphs so it's a little tricky to follow what's happening.

It's possible I'm using it wrong (or have the wrong expectations).

Here's a small repro. The code just runs some nested async tasks, and uses TimelineTask to record them. Each nested task has its parent provided.

import 'dart:developer';

const levelNames = ['zero', 'one', 'two', 'three', 'four', 'five'];

Future<void> main() async {
  print('Open DevTols performance page, filter to just Dart events, '
      'then resume, wait for break, click Refresh');
  debugger();

  var rootTask = TimelineTask();
  rootTask.start('root');
  await doWork(1, rootTask);
  rootTask.finish();

  debugger();
}

Future<void> doWork(int level, TimelineTask parent) async {
  final task = TimelineTask(parent: parent);
  task.start('level ${levelNames[level]}');
  await Future<void>.delayed(const Duration(milliseconds: 200));

  if (level < 5) {
    await doWork(level + 1, task);
  }
  task.finish();
}

When I review this in the performance page, it looks like this (both the new and legacy views are essentially the same):

The top-to-bottom ordering of the categories is not as I'd expect (it looks alphabetical), and there's no indication of which bars are children of other bars (although it's fairly clear in this case, when each async tasks have awaits that could allow other code to run, this relationship would be important).

I was expecting/hoping for it to look more like this chart from the docs page: