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

Improve Outline display in VS Code (add elements preview) #2475

Closed
subzero911 opened this issue May 19, 2020 · 8 comments
Closed

Improve Outline display in VS Code (add elements preview) #2475

subzero911 opened this issue May 19, 2020 · 8 comments
Labels
in editor Relates to code editing or language features in flutter Relates to running Flutter apps is enhancement
Milestone

Comments

@subzero911
Copy link

subzero911 commented May 19, 2020

That's how outline looks in VS Code
image
It's really hard to navigate here. You can't figure out: "What's an icon? What's a text?"
Much better how it looks in Android Studio:
image
Also with nice round icons for widgets ("R" for Row, "S" for Scaffold etc.)

@DanTup DanTup added this to the v3.11.0 milestone May 19, 2020
@DanTup DanTup added in editor Relates to code editing or language features in flutter Relates to running Flutter apps is enhancement labels May 19, 2020
@DanTup
Copy link
Member

DanTup commented May 20, 2020

@jacob314 what's the best way to decide which attributes labels to show here? I noticed in DevTools, it doesn't seem to show the same as in the Android Studio above (it shows the key instead of the text):

Screenshot 2020-05-20 at 13 56 18

Screenshot 2020-05-20 at 13 56 14

@DanTup DanTup modified the milestones: v3.11.0, On Deck, v3.12.0 May 25, 2020
@beevatsyu
Copy link

Why do we have a seperate sidebar for outline, when the explorer outline does the same thing better (e.g. can sort from "More Action")?

Screenshot from 2020-05-27 09-11-43

@DanTup
Copy link
Member

DanTup commented May 27, 2020

@beevatsyu

Why do we have a seperate sidebar for outline, when the explorer outline does the same thing better (e.g. can sort from "More Action")?

I really wanted to use the built-in Outline view, but there are issues that prevented us, most notable:

@beevatsyu
Copy link

@DanTup
Thanks for the clarification. Any plan to incorporate sort functionality on the outline?

@DanTup
Copy link
Member

DanTup commented Jun 1, 2020

@beevatsyu not currently. There's a lot of functionality built in to the built-in outline and reproducing it all in the Flutter Outline would be a lot of effort. It would be nice to have only a single outline, but it doesn't seem likely this will be easy in the near future because of VS Code limitations. Generally I'd suggest to just switch between the outlines depending on your needs.

@DanTup DanTup closed this as completed in a04596d Jun 1, 2020
@DanTup
Copy link
Member

DanTup commented Jun 1, 2020

We'll now show the first attribute that's named data, icon or value alongside nodes in the Outline:

Screenshot 2020-06-01 at 14 43 32

We can add other attribute names to the list if there are widgets that are missing significant info, but it looked weird to just always show the first (for example sometimes it'd be key which is a bit useless) and it looks really crammed if we show them all.

DanTup added a commit that referenced this issue Jun 11, 2020
Wasn't updated with #2475.
@cgilbu
Copy link

cgilbu commented Sep 21, 2023

How about configuring it to show the first comment within the widget? By doing that, we can establish references to every widget, simplifying the navigation through the widget tree and the outline?

@DanTup
Copy link
Member

DanTup commented Oct 9, 2023

@cgilbu sorry for the delay in responding. Though I'm not sure exactly what you're suggesting - do you mean the dartdoc, or really the first comment inside the class?

If you have ideas, please open a new issue with more details and an example. I'm also interested to know if people use this outline functionality much - my feeling was that it's probably not used much (I don't really get any bug reports or feature requests for it), but I don't know if that's accurate. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
in editor Relates to code editing or language features in flutter Relates to running Flutter apps is enhancement
Projects
None yet
Development

No branches or pull requests

4 participants