feature: UI layout to maximize display of trace events

[osievert-gpfw]

When I am using perfetto, I want to devote as much of my screen to the actual tracing events as possible. Today, however, I feel like I am viewing the tracing events through a small porthole because so much of the screen is taken up with other things. A significant portion of the screen is taken up on the top by the overall timeline, and on the left by the thread name. Both are inefficient uses of space. The overall timeline height could be much smaller and still convey the same information (with my data sets, anyway). And the thread name is a huge block of space with very little in it. See attached screenshot.

It would be great if the UI allowed users some control over both of these spaces, i.e., allowed me to grab and drag to adjust the height of the overall timeline, and grab and drag to adjust the width of the box holding the thread name. By allowing users to adjust these layout boundaries, even if these areas are useful for some people in some circumstances, I can minimize them for my purposes.

Minor additional observation, related to this: the "folding" icon that toggles the display of the trace events (the up and down chevrons on the very left side of the attached screenshot, just above where it says "Process 5") takes up display space across the entire width of the screen. The UI would be much better if this icon were not full-screen-width, again allowing more room for trace events to be displayed, and allowing the timestamp display to be closer to the trace events.

[chromy]

Hey!

Thanks for the comments 😃 Information density is something that comes up a lot and I'm sympathetic to the 'small porthole' effect, it's something we want to improve.

Re the specific comments:

• Re drag/resize handles: Yep, it's a sad amount of work on the web but yes it would be an improvement.
• The top 'overall timeline' area & (to a lessor extent) the thread name area: Both of these are data dependant as you point out. They are better (more information dense) although not perfect if you have scheduling/thread names turned on.
• The area to the right of the expand/fold zone is used for flags/area notes iiuc:

[kenzieschmoll]

UI density is also something we'd like very much now that we are embedding the Perfetto trace viewer inside of Flutter DevTools. We have even less vertical space than ui.perfetto.dev since we have headers and footers that belong to the Flutter DevTools web app as well as other content on our performance page.

I saw another prototype of embedding Perfetto in an IDE tool window, and I suspect a more dense UI would also be a requirement there.

[LalitMaganti]

There's been a significant increase in density of displaying all the data we do so today but I think more work to be done on showing less data in the first place (and more specific to the problem in the trace).

[kenzieschmoll]

Some things we have done through CSS overrides are making the top bar and overview timeline shorter.

:root {
    --topbar-height: 36px! important;
}

.overview-timeline {
    height: 50px !important;
}

.topbar .omnibox {
    height: 28px !important;
}