Repository navigation
Add debug toolbar buttons to jump to major DevTools pages #1323
Description
Flutter's Android Studio plugin allow running a Flutter app, and then selecting a widget in the running app. The tool then selects the corresponding widget in the widget inspector and the corresponding source code file and place in that file.
Flutter Code doesn't have a widget inspector, but this capability would IMHO still be super useful if it just did the source code selection part. cc @DanTup @devoncarew WDYT?
Activity
DanTup commentedon Nov 30, 2018
If I understand correctly, we already have this one :-)
https://dartcode.org/releases/v2-20/#return-of-inspect-widget
mit-mit commentedon Nov 30, 2018
Awesome, just tried it and that was exactly what I was suggesting!
I really wish we had a good way to advertise these kinds of things (like a Flutter toolbar, or something like that)...
DanTup commentedon Nov 30, 2018
Great! :-)
VS Code does support toolbars, but they're editor-scoped (for ex. we have package update buttons when you have a pubspec open) so they wouldn't work well for something like this (for ex. they'd vanish if you didn't have a file open, or be duplicated if you had split panes).
Advertising features is definitely an issue though - we do show a Release Notes button on every update to encourage people to click and read through what's new, but of course it doesn't help new users know all the stuff that came before. I do keep meaning to tidy up the website with a better feature list that would at least make it easier for people to discover all the things we support but it hasn't happened yet (and, most people probably won't look outside of the editor).
In the editor, we could potentially show some one-time notifications to point people to more info (eg. on the website(s)) for ex. the first time you run a debug session, we could show a notification with a link to a page that explains all the debugging features - but we'd have to be careful to not feel spammy.
I'll rename this issue and keep it open as somewhere to collect ideas for improving visibility of things like this.
[-]Support selecting widgets and locating the corresponding source code location[/-][+]Make it easier for users to discover useful features (for ex. the Flutter Inspect Widget command)[/+]devoncarew commentedon Nov 30, 2018
This might still be acceptable, if we could scope the toolbar to just displaying for Dart files when a Flutter app was running. Would we have enough content for a toolbar? The Inspector 'select widget' button? Icons to toggle on and off some of the framework debug features (like debug draw)?
DanTup commentedon Dec 3, 2018
I believe we can do that, my concern is more around the placement since they're "editor scoped":
The two icons on the right of tabs is where they'd appear (the one on the left is our
pub get, the right one is built-in to split the editor).There are quite a few things we could put there, though given the placement, the more we add, the more we eat away at the set of tabs. In some ways I wonder whether they'd be better on the dbeug toolbar, but that's blocked by microsoft/vscode#45116.
Many people wanting something like custom toolbars (see microsoft/vscode#41309) seem to be using the system tray. I don't know if it's particularly discoverable but we could have something there that opens a menu of as many things as we want when clicked.
No solution seems ideal :/
DanTup commentedon Jul 18, 2019
We have the ability to add buttons to the debug toolbar now (we added Hot Reload as its own icon). Maybe that's a more appropriate place to put some of the things discussed above?
The only caveat is that we need to set the contexts as the debug session starts due to microsoft/vscode#69398 so we wouldn't be able to wait until we know if they're supported (eg. when the services register).
devoncarew commentedon Jul 18, 2019
Instead of adding several different service buttons, perrhaps just add a single devtools button?
DanTup commentedon Jul 25, 2019
I'm not sure if that entirely addresses the problem (since we add features that aren't in DevTools, and when DevTools adds new features, the continued presence of a DevTools button doesn't help advertise there are new things), however I think it's a good idea (we currently show a prompt to open DevTools, but only periodically).
I'll re-title this case for that, but happy to discuss more (or open new issues) if it doesn't address @mit-mit's original concern.
[-]Make it easier for users to discover useful features (for ex. the Flutter Inspect Widget command)[/-][+]Add a DevTools button to the debug toolbar[/+]10 remaining items
[-]Add a DevTools button to the debug toolbar[/-][+]Add debug toolbar buttons to jump to major DevTools pages[/+]Remove DevTools button from debug toolbar
Add icons for opening Inspector and Timeline
Add icons for opening Inspector and Timeline
Add icons for opening Inspector and Timeline
Add icons for opening Inspector and Timeline
Add icons for opening Inspector and Timeline
Add icons for opening Inspector and Timeline
DanTup commentedon Oct 23, 2019
Still needs final icons.