Repository navigation
Add debug toolbar buttons to jump to major DevTools pages #1323
Description
Activity
If I understand correctly, we already have this one :-)
https://dartcode.org/releases/v2-20/#return-of-inspect-widget
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)...
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.
- changed the title
[-]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)[/+]on Nov 30, 2018 for ex. they'd vanish if you didn't have a file open, or be duplicated if you had split panes
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)?
This might still be acceptable, if we could scope the toolbar to just displaying for Dart files when a Flutter app was running
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).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)?
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 :/
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).
Instead of adding several different service buttons, perrhaps just add a single devtools button?
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.
- changed the title
[-]Make it easier for users to discover useful features (for ex. the Flutter Inspect Widget command)[/-][+]Add a DevTools button to the debug toolbar[/+]on Jul 25, 2019 - addedin debuggingRelates to the debug adapter or process of running debug sessionsRelates to the debug adapter or process of running debug sessionsis enhancementAn enhancement or improvement that should be listed in release notes but is not a bug fix.An enhancement or improvement that should be listed in release notes but is not a bug fix.and removed
on Jul 25, 2019 10 remaining items
- changed the title
[-]Add a DevTools button to the debug toolbar[/-][+]Add debug toolbar buttons to jump to major DevTools pages[/+]on Aug 26, 2019 - added a commit that references this issue
on Aug 26, 2019 - added a commit that references this issue
on Oct 7, 2019 - added 5 commits that reference this issue
on Oct 16, 2019 Still needs final icons.

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?