You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I love the color and icon preview in intelliJ and Android Studio but prefer VS Code for almost everything else (Inspector etc notwithstanding).
Is this feature on the roadmap (or even possible in VS Code)?
I'm not sure if we have easy access to all the info we need for this (I guess we must have it in some form, since IntelliJ is doing it, but I haven't seen the implementation). For vNext we do show the icons in the tooltips which is a slight improvement (#638).
I think what you're seeing is the images that are embedded in the docs (see https://docs.flutter.io/flutter/material/Colors-class.html). These work for the named colours because they can have images tags in the docs - it won't work for the fromARGB constructor as the docs for that can't take into account the params being passed.
@bwilkerson do you think it'd make sense to handle these in the server? Either as a colours/icons structure or maybe something in the (Flutter) Outline data? I don't know that the server currently has enough info to do this (esp. the icons), but it might be better-placed to have it than in the editor.
This is slightly related to flutter/flutter#11073 (for Icons, at least - colours, not so much).
(I forgot to mention, IntelliJ currently has scripts that are run to extract the info and ship it inside the plugin.. We could also do something similar here if we don't think it's a good fit for the server)
It makes sense to me for server to send information to allow these icons to be displayed. It isn't clear what that information should be. One possibility is to define a JSON representation of an icon and just ship the whole icon over, but that seems a bit extreme. Another would be to send a "reference" (of a to-be-determined form) to allow the client to choose an icon from a known location.
@devoncarew probably has more visibility into some of the design constraints.
For icons in the tooltips, we regex out the material icon name and then construct our own image tag for it. Sending the material icon name would keep the server from being too specific about the image (eg. format, size, colour), however would also limit it to material-icons.
Colours are probably a bit simpler - I think we could just include a document range and a colour (eg. as hex or something fairly standard the editor could easily transform if required).
@wyattbiker this issue is about both colours and icons. IntelliJ shows both in the Gutter and this request was to support them both.
Perhaps surprisingly, it's not actually easy for us to display an arbitrary colour in the doc tooltip even if we knew what the colour was (which we don't currently, which is why I was asking about having the server supply it). The doc tooltips are a restricted set of Markdown. We can easily show images (which is how the named colours you see work), but we can't just put arbitrary CSS in - so in order to show a block of colour there, we'd need to generate/fetch an image of the colour we want to show.
Just FYI, there is already a VSCode plugin that works perfectly for me with for gutter image previews for image paths used in Flutter (dart) src.
On the colour preview side, unfortunately the pigments plugin doesn't suppor the typical format used in Flutter app source so I've opened an issue to request that.
@DanTup Not sure what the Flutter teams policy is about recommending third party plugins? But if it ok then I think this issue can be closed once the pigments plugin gets support added for Flutters format.
@maks as far as I can tell, that extension is using urls from the editor to render icons. That part isn't what was holding this up - it was knowing where there are icons in the editor (without doing crude searches for Icon.xxx in the editor text).
I've managed to make this work on some situations by using outline data and looking for parameters where the value is Icon.foo (which is not perfect, but less dirty than just regexing the whole document).
@DanTup oh my apologies! I completely missed that this was about the Material Icon constants. But wow, that would be fantastic to have support for them!
Activity
DanTup commentedon Apr 17, 2018
I'm not sure if we have easy access to all the info we need for this (I guess we must have it in some form, since IntelliJ is doing it, but I haven't seen the implementation). For vNext we do show the icons in the tooltips which is a slight improvement (#638).
wyattbiker commentedon Mar 25, 2019
Just adding my comment on this feature request improvement:
DanTup commentedon Mar 25, 2019
I think what you're seeing is the images that are embedded in the docs (see https://docs.flutter.io/flutter/material/Colors-class.html). These work for the named colours because they can have images tags in the docs - it won't work for the
fromARGBconstructor as the docs for that can't take into account the params being passed.@bwilkerson do you think it'd make sense to handle these in the server? Either as a colours/icons structure or maybe something in the (Flutter) Outline data? I don't know that the server currently has enough info to do this (esp. the icons), but it might be better-placed to have it than in the editor.
This is slightly related to flutter/flutter#11073 (for Icons, at least - colours, not so much).
DanTup commentedon Mar 25, 2019
(I forgot to mention, IntelliJ currently has scripts that are run to extract the info and ship it inside the plugin.. We could also do something similar here if we don't think it's a good fit for the server)
bwilkerson commentedon Mar 25, 2019
It makes sense to me for server to send information to allow these icons to be displayed. It isn't clear what that information should be. One possibility is to define a JSON representation of an icon and just ship the whole icon over, but that seems a bit extreme. Another would be to send a "reference" (of a to-be-determined form) to allow the client to choose an icon from a known location.
@devoncarew probably has more visibility into some of the design constraints.
DanTup commentedon Mar 25, 2019
For icons in the tooltips, we regex out the material icon name and then construct our own image tag for it. Sending the material icon name would keep the server from being too specific about the image (eg. format, size, colour), however would also limit it to material-icons.
Colours are probably a bit simpler - I think we could just include a document range and a colour (eg. as hex or something fairly standard the editor could easily transform if required).
wyattbiker commentedon Mar 25, 2019
Why does it have to be an icon? Just show the color at the top or bottom of the doc tooltip.
DanTup commentedon Mar 26, 2019
@wyattbiker this issue is about both colours and icons. IntelliJ shows both in the Gutter and this request was to support them both.
Perhaps surprisingly, it's not actually easy for us to display an arbitrary colour in the doc tooltip even if we knew what the colour was (which we don't currently, which is why I was asking about having the server supply it). The doc tooltips are a restricted set of Markdown. We can easily show images (which is how the named colours you see work), but we can't just put arbitrary CSS in - so in order to show a block of colour there, we'd need to generate/fetch an image of the colour we want to show.
amorenew commentedon Aug 5, 2019
maybe helpful
https://github.com/DeMoorJasper/vscode-pigments
maks commentedon Oct 4, 2019
Just FYI, there is already a VSCode plugin that works perfectly for me with for gutter image previews for image paths used in Flutter (dart) src.
On the colour preview side, unfortunately the pigments plugin doesn't suppor the typical format used in Flutter app source so I've opened an issue to request that.
@DanTup Not sure what the Flutter teams policy is about recommending third party plugins? But if it ok then I think this issue can be closed once the pigments plugin gets support added for Flutters format.
[-]Gutter icons and color chips like intelliJ/AS[/-][+]Show Flutter icons in the editor gutter[/+]DanTup commentedon Oct 8, 2019
Splitting this into two issues, one for icons (this one) and another for colours (#2039) so they can be tracked separately.
Add support for displaying Flutter icons in the gutter
DanTup commentedon Oct 8, 2019
@maks as far as I can tell, that extension is using urls from the editor to render icons. That part isn't what was holding this up - it was knowing where there are icons in the editor (without doing crude searches for
Icon.xxxin the editor text).I've managed to make this work on some situations by using outline data and looking for parameters where the value is
Icon.foo(which is not perfect, but less dirty than just regexing the whole document).maks commentedon Oct 8, 2019
@DanTup oh my apologies! I completely missed that this was about the Material Icon constants. But wow, that would be fantastic to have support for them!
Add support for displaying Flutter icons in the gutter
DanTup commentedon Oct 9, 2019
There's a preview build with this functionality here if you want to try it out:
https://github.com/Dart-Code/Dart-Code/releases/tag/v3.6.0-alpha.2
You'll need to enable
dart.previewFlutterGutterIconsfor them to show up (and Reload Window). More info on installing from vsix is here: https://dartcode.org/docs/installing-a-preview-release/