Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add debug toolbar buttons to jump to major DevTools pages #1323

Closed
mit-mit opened this issue Nov 30, 2018 · 14 comments · Fixed by #1935
Closed

Add debug toolbar buttons to jump to major DevTools pages #1323

mit-mit opened this issue Nov 30, 2018 · 14 comments · Fixed by #1935
Labels
in debugger Relates to the debug adapter or process of launching a debug session is enhancement
Milestone

Comments

@mit-mit
Copy link
Contributor

mit-mit commented Nov 30, 2018

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?

@DanTup
Copy link
Member

DanTup commented Nov 30, 2018

If I understand correctly, we already have this one :-)

https://dartcode.org/releases/v2-20/#return-of-inspect-widget

@mit-mit
Copy link
Contributor Author

mit-mit commented 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
Copy link
Member

DanTup commented 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.

@DanTup DanTup 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) Nov 30, 2018
@DanTup DanTup added this to the On Deck milestone Nov 30, 2018
@devoncarew
Copy link
Contributor

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)?

@DanTup
Copy link
Member

DanTup commented Dec 3, 2018

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":

screen shot 2018-12-03 at 12 44 40 pm

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 :/

@DanTup
Copy link
Member

DanTup commented 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
Copy link
Contributor

devoncarew commented Jul 18, 2019

Instead of adding several different service buttons, perrhaps just add a single devtools button?

@DanTup
Copy link
Member

DanTup commented 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.

@DanTup DanTup 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 Jul 25, 2019
@DanTup DanTup added in debugger Relates to the debug adapter or process of launching a debug session is enhancement and removed is discussion / feedback labels Jul 25, 2019
@DanTup DanTup modified the milestones: On Deck, v3.4.0 Jul 25, 2019
@DanTup
Copy link
Member

DanTup commented Aug 20, 2019

I've added a Dart icon to the debug toolbar to open DevTools (it has a tooltip saying what it is too).

Screenshot 2019-08-20 at 2 57 43 pm

Screenshot 2019-08-20 at 2 57 53 pm

Let me know if you think it needs any tweaks!

@mit-mit
Copy link
Contributor Author

mit-mit commented Aug 20, 2019

Love the button, but wondering if using the Dart logo for this is a little off-brand.

How about something more tools like, like a wrench icon?

@DanTup
Copy link
Member

DanTup commented Aug 20, 2019

Yeah, fair point. DevTools doesn't seem to have its own icon as far as I can tell, I'll see if anyone has any suggestions.

@DanTup DanTup reopened this Aug 20, 2019
@mit-mit
Copy link
Contributor Author

mit-mit commented Aug 20, 2019

Lots of icons here:
https://material.io/resources/icons/?icon=build&style=baseline

I like 'build' and 'location_sear'

@DanTup
Copy link
Member

DanTup commented Aug 26, 2019

Bumping this to next release, as after discussing today, we think it'd be better to add a couple of buttons here that hot-link to specific pages in DevTools (for ex. an Inspect button, Memory view, etc. - depending on whether it's Flutter or just Dart). To avoid spawning multiple browsers/tabs for each click though, it would be best to do after DevTools gets a server that lets us communicate with the tabs.

I'll hide the current icon for the upcoming release.

@DanTup DanTup modified the milestones: v3.4.0, v3.5.0 Aug 26, 2019
@DanTup DanTup changed the title Add a DevTools button to the debug toolbar Add debug toolbar buttons to jump to major DevTools pages Aug 26, 2019
DanTup added a commit that referenced this issue Aug 26, 2019
@DanTup DanTup removed this from the v3.5.0 milestone Oct 1, 2019
@DanTup DanTup added this to the v3.6.0 milestone Oct 1, 2019
DanTup added a commit that referenced this issue Oct 7, 2019
Placeholder icons based on current DevTools, but should be replaced.

Fixes #1323.
DanTup added a commit that referenced this issue Oct 16, 2019
Placeholder icons based on current DevTools, but should be replaced.

Fixes #1323.
DanTup added a commit that referenced this issue Oct 22, 2019
Placeholder icons based on current DevTools, but should be replaced.

Fixes #1323.
DanTup added a commit that referenced this issue Oct 22, 2019
Placeholder icons based on current DevTools, but should be replaced.

Fixes #1323.
DanTup added a commit that referenced this issue Oct 23, 2019
Placeholder icons based on current DevTools, but should be replaced.

Fixes #1323.
DanTup added a commit that referenced this issue Oct 23, 2019
Placeholder icons based on current DevTools, but should be replaced.

Fixes #1323.
@DanTup DanTup closed this as completed in a748241 Oct 23, 2019
@DanTup
Copy link
Member

DanTup commented Oct 23, 2019

Still needs final icons.

@DanTup DanTup reopened this Oct 23, 2019
@DanTup DanTup closed this as completed in 64a33aa Oct 28, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
in debugger Relates to the debug adapter or process of launching a debug session is enhancement
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants