I got a What's new in DevTools popup. It has a picture of the Perfetto trace viewer, but that picture is really small:
Is there a picture that would work better in this small space?
I opened DevTools using the blue magnifier glass icon:
That opens the Widget Inspector. From this screen, it's not clear how I can switch to the performance tool.
Could the Widget inspector link to other DevTools? Could all the DevTools be tabs within a single screen, similar to Chrome's dev tools?
The search bar's icon and placeholder text aren't vertically centered:
The timeline start time is in seconds. If my app has been running for some time, it's a huge value that's hard to read. Consider using minutes/hours for apps that have been running for some time.
I would consider adding tooltips to the timeline start time and end time as these values aren't obvious.
Tracks with long names do not overflow well:
The order of "tracks" in the timeline view seems random. My timeline view starts with many empty DartWorker and
FlutterConcurrentMessageLoopWork tracks. Should we make io.flutter.ui, io.flutter.raster,
io.flutter.io be at the top since these are the most important tracks that are likely to cause performance issues? Should we have collapsible groups of tracks, like Dart workers, Flutter message workers, etc...?
When I hover over a track's name, my cursor changes to the drag cursor. However, dragging and dropping tracks doesn't seem to do anything. Should that work? Or should the cursor remain a normal cursor instead?
The Pin to top star button overflows:
Starring a track splits the timeline events view, resulting in very limited space for the unstarred tracks. The starred tracks remain visible even if I scroll down. I would expect instead that starred tracks would simply be a the top of the tracks, and that scrolling down would hide the starred tracks.
Starring two tracks completely hides all other tracks on my screen:
The Slices and Flow Events tab highlighting is confusing. The dark tab is the currently selected tab,
the bright tab is the unselected tab. I found this surprising. Can we make it more clear which tab is currently
selected? I much prefer how the Frame Analysis, Raster Stats, and Timeline Events tabs look - it's clear
which tab is currently selected.
I suspect the colors for VsyncProcessCallback and COMPOSITING don't meet color contrast accessibility requirements:
The Material ink splash effect feels a bit jarring in VS Code. Should we disable that to make the DevTools feel more native to VS Code?
Thanks for the feedback. Tracking issues created from this feedback are listed below.
VS Code:
DevTools
Perfetto cc @chromy @LalitMaganti
With respect to the pinning behavior, IMO this is the desired effect of "pin to top". It sounds like what would fix your problem here is the ability to configure the ordering of tracks, either from the DevTools side by us specifying a desired order to Perfetto at least for the flutter thread (b/259303986), or from the user side by allowing users to drag and move tracks up or down (flutter/devtools#5242)