Timeline mode UI improvements

[epixian]

What problem does this feature solve?

v5 was fantastically simple and well organized. Components, Vuex, Events, Routes, etc were all top-level and required only a single click to access. Panes within each section could wrap to the next line if the available space shrank.

Except for components, these are all now buried within "Timeline" mode. Besides the fact that it now takes two clicks to get what used to be available after one click, this new mode has some usability issues.

1. While the graphical timeline is interesting, I don't find it particularly useful on a regular basis. I would like to be able to hide/show the timeline as needed.
2. It tries to fit too many columns in too narrow a space, and they don't wrap as before. Most often the information I need is on the last column and at that point it's too narrow to show all of it.

Instead of grouping Vuex, Events, Routes etc under "Timeline" mode, they should be "timeline-able" with the ability just to have a timeline (and hide/show it as needed). These sections should then return to the top nav next to Components as before.

What does the proposed API look like?

No API changes - just UI improvements

[Akryum]

You can collapse the apps pane, as well as either the timeline canvas or the events explorer, using the arrows in the middle of the draggers.

[Akryum]

For example:

[epixian]

Thanks, I didn't see the collapse arrow hiding there in the most recent update. Was expecting to see an icon/button above the column. This minor feature is actually a huge improvement to the UI. I also see that the panes wrap now as in v5. This is important to me because I generally use devtools in a "tall" configuration on one side of my widescreen monitor (allowing me to see a ton of application events/mutations at once without scrolling), not a "long" configuration along the bottom as in your screenshots.

I would still encourage you to put all the Vuex / Router /Events inspectors back up top the way it was, especially Vuex where we no longer have the ability to view state at a certain point in the mutations. Though if they moved, the remaining items seem so infrequently helpful that I'm not sure where they would then go. Maybe combine them into a single "Input" inspector and put it at the top with the others.

[saifobeidat]

+1 to your suggestion.

I really miss the UI of the old one.. It was so simple, this new one seems to have nice things but it's really too complex in terms of UI.. and I am not able to get used to it until now.

[plweil]

+1 to simplifying the UI. I don't know whether anything is broken now or not, but on page load, I should be seeing a long list of mutations as my Pinia stores get populated. Instead, I see nothing in the Timeline until I perform another action. I also would like a way to get rid of the dots pane. A list of events and mutations is all I need, and the dots just get in the way.

[Akryum]

You can collapse the different panes, see https://github.com/vuejs/devtools/discussions/1793#discussioncomment-2358488

[Tofandel]

Also +1 on a better UX, the way most buttons are positioned feels really unintuitive coming from v5 the timeline feels like a downgrade, we used to be able to see router events, eg redirections on page load and all that very well

That doesn't seem to be the case anymore, now the router plugin shows "no event" on page load, even though I'm expecting to see the initial route load event in there

Navigating the UI is very weird, if I click on the "plugin" icon in the timeline, I can go back to the previous view only with the top arrows, I feel like this arrow should be within the column (Next to the filter bar) because that's what the nesting columns suggest since the left one doesn't change and all the other ones after that, it feels like the top arrow will do something else like go back to the inspector

Same story for the top right icons, they look like global icons unrelated to the current view and yet are very important to navigate the view, so they should be within the layers columns and not so far off

I understand that now it's more plugin oriented but then maybe there should be a way to add shortcuts in the top bar