Improve UX for Flutter performance viewer task timelines

[matthew-carroll]

I'm working on performance profiling and optimizations for PDF rendering in Flutter. To understand the existing performance characteristics, I've used Timeline and TimelineTask to track various operations.

Unless I'm missing some controls for the timeline, the existing tools make it difficult to chart the information that I want to see.

I'll illustrate with an example. Here's a screenshot of one of my profiles.

Order of task lanes: It's too difficult to get these task lanes in a useful order.

• The order is alphabetical (except for Flutter's special lanes at the top). To keep my lanes from appearing way down below the fold, I had to prefix all of them with the highest priority alphabetical option, which was 0. I'm forced to trade readability of task titles for quicker access to the information.
• The name of the lane is tied to whichever task starts first. This is uncontrollable in situations where we're not always running the same set of tasks in the same order. I'd prefer that not all of my tasks start with "0.", but if any of them don't, then it's possible that the whole task lane will get a different name and then be pushed way down in the list, making it difficult for me to visually compare timelines.

Task parenting: Parenting one task to another doesn't have the expected visual effect.

• I wanted to control the parenting of my tasks so that I'd get a single lane with a multi-level flame chart. I'm tracking a number of asynchronous operations, so I couldn't log everything under Timeline.startSync(). I tried creating multiple TimelineTask objects with explicit parent tasks. I expected that parenting to be honored, visually, much the way that synchronous tasks are displayed, but instead I ended up with multiple timeline lanes and the order was still alphabetical, despite the parenting.

Color of tasks: I didn't see any controls for task colors, but it would be easier to quickly glance at the timing profile if I could choose colors for different tasks.

[jacob314]

Good news is @kenzieschmoll recently switched the DevTools performance page to use the excellent Perfetto trace viewer instead of our custom one. It would be great to get your feedback on it. Perfetto provides a lot more ways for power users to filter how the data is displayed.
#4207

[matthew-carroll]

@jacob314 how should I try it? Do I just need to pull the latest on master?

[kenzieschmoll]

Yes DevTools with the perfetto trace viewer is available on Flutter master. Just run your flutter app as normal and click the devtools link (or open from VS code, whatever your dev flow is).

Unlikely, but if you happen to be building DevTools from flutter/devtools master locally, you'll need to run on chrome not macos.

[matthew-carroll]

Are there any new APIs to go along with the new design? The new design looks different, but I don't see anything in that design that seems relevant to the points I raised in my original post.

[kenzieschmoll]

Order of task lanes: It's too difficult to get these task lanes in a useful order.

The Perfetto trace viewer allows you to "star" a task lane or a thread which will place it at the top of the viewer. There is an open issue #5242 to track fixing the drag and drop ordering of those lanes.

Task parenting: Parenting one task to another doesn't have the expected visual effect.

The legacy DevTools trace viewer does respect the parent ordering for TimelineTasks, but the Perfetto trace viewer does not. This parent field is not part of the Chrome trace format, but something special we added to support showing concurrent asynchronous events that were part of the same event "tree". The Chrome Trace format assigns parent child relationships for async events similar to how it assigns these relationships for sync events. You can read about async events in the Chrome trace format here here. I'd recommend reading that and seeing if you can use TimelineTask events to match the expected pattern, but once again the parent field will not apply to Perfetto trace viewer, only the legacy DevTools one.

Color of tasks: I didn't see any controls for task colors, but it would be easier to quickly glance at the timing profile if I could choose colors for different tasks.

this would be a feature request to raise here: https://github.com/google/perfetto/issues.

[kenzieschmoll]

Closing this since the feedback here is either addressed by the perfetto trace viewer or will need to be requested on the Perfetto issue tracker.