Dart-code: Flutter Inspector

[DanTup]

Edit: 2018-12-06

Extending VS Code's UI is somewhat restricted - we can't just draw whatever we want anywhere we want it. The most flexible way of providing completely custom UI is in a web view (some details below), but that comes with its own restrictions (for example we can't connect back to localhost to communicate with the debugger).

This is definitely something I want to deliver, but it's not totally clear in what form it will be yet.

[DanTup]

The mssql extension looks to have lots of custom rendering (which also seems to fit in with the theme). Looks like it might be a bit Angular app; though interestingly it also has iframes (these appeared to be blocked when we tried)?

https://github.com/Microsoft/vscode-mssql/blob/b9ea17c2ebfccb8de8db05ab72c47b4b84c6c7e2/src/models/sqlOutputContentProvider.ts#L499

I'll check the code out and do some digging next week; but at first glance I think this looks promising. (cc @devoncarew @mit-mit)

[devoncarew]

Very cool! It'll be good to have a sense for what our options for more custom rendering are.

[DanTup]

@devoncarew @mit-mit This might be good news... We can render iframes and run scripts!

I tried to host the analysis server diagnostics app in there and it failed because of x-frame-options: sameorigin so we may need to set this accordingly (and understand the security implications of it) in order to host an inspector app inside it (otherwise, we can avoid the iframe if we can suck the html content in and just return it directly in the provider).

We'll need to do a little more testing (for example making sure we can pop this open alongside the editor easily to avoid the user messing around with layout; making sure we can connect web sockets between Dart Code and the web app, etc.) but it looks promising (the mssql extension is using expressjs for hosting its content and seems to also use websockets to communicate; it also passes some of the theme variables through so the embedded content fits in with the editor).

I pushed the code to a branch.. It's fairly simple - I added a test command you invoke to open the window.

[devoncarew]

it also passes some of the theme variables through so the embedded content fits in with the editor

ah, that's why it looked so integrated :)

This is really great news! It sounds like we now have a few more options w/ how to integrate ~external tooling; hosted in a web page we open, or hosted in a iframe closer to the source code. /cc @jacob314

[DanTup]

Yeah; I think we can pretty much do what we want this way. Should be relatively easy to build tools in a way that can be used standalone but with the ability to pass in some custom theming for editors that can host them internally like this (I think an iframe or just proxying requests through a simple proxy in the extension should work equally well (edit: actually just proxying might be more complicated due to websockets unless they're on another port/process?)).

If there's any existing tooling that already exists as a web app that'd be useful to embed, we could possibly use that as a real test.

[DanTup]

Some more info from Code issue tracker:

https://github.com/Microsoft/vscode/issues/28263#issuecomment-346628255
opening up VS Code for general UI extensibility is not on our 6-12 month roadmap.

However later on there is this:

https://github.com/Microsoft/vscode/issues/28263#issuecomment-366034187
I just checked in a new proposed webview API that addresses many of your points:
The proposal introduces an option to keepAlive a webview so that its content not destroyed when the webview itself becomes hidden, as well as adding an official message passing API

Related issues:

https://github.com/Microsoft/vscode/issues/28263
https://github.com/Microsoft/vscode/pull/42690
https://github.com/Microsoft/vscode/issues/43713

It's interesting that they're adding things like sending/receiving messages, though whether it makes sense here I'm not sure - eg. if we want to jump to a specific location in source and the debugger already has APIs for that it would make sense to have the web app talk to the debugger rather than across to Code (since that would be pretty generic and not specific to how it's embedded in an editor).

(These APIs are currently proposed, I don't know how soon they're likely to hit stable)

[timsneath]

Looks like this has been promoted to stable (yay!)
https://github.com/Microsoft/vscode/commit/91191fb866914e667ce086458ff0b37cc34eddb5

[jacob314]

Excellent!

[rakibtg]

Any updates regarding the inspector in VScode?

[jacob314]

Stay tuned. I'm about to start adding inspector support to https://github.com/flutter/devtools
Once the flutter web devtools work is further along we will make it easy to launch it from VSCode.

[DanTup]

v2.24.0 includes some integration to launch the Dart DevTools preview which - as mentioned above - includes an inspector 🎉

Release notes are here: https://dartcode.org/releases/v2-24/

The DevTools are still a work-in-progress, but can deliver more custom experience than we can build within VS Code's APIs. It's not currently possible to load the DevTools embedded inside the VS Code UI, but it's something I'd like to evaluate if/when WebView and multi-window support moves forwards.

Please try it out and send feedback through the Feedback button in the DevTools UI!

[zbarbuto]

Thanks so much for the devtools - they have been working a treat!

I noticed the angular console (an electron app that supports generating Angular code) recently integrated with vscode as a tab - would this be doable with the new flutter devtools web page?

https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console

[DanTup]

@zbarbuto Potentially. I have done a little testing and had it render in a web view, but there are some additional restrictions running in there. I think many people may want to run DevTools on a separate monitor to the code window, which wouldn't be possible until the VS Code supports multiple-windows for a single open project (it could be an option to support both, but it'd be nice to only have one integration).

I've opened https://github.com/Dart-Code/Dart-Code/issues/1488 for the request, feel free to subscribe and/or add additional ideas there. Thanks!

[jamesblasco]

Hello @DanTup, I am having a similar problem in a vs code extension with x-frame-options: sameorigin and a localhost website built with Flutter. I would like to know(if possible), how did you solve it.

[DanTup]

@jamesblasco You need to prevent the web server from giving headers that prevent it from being embedded in a frame. If you're using Shelf, I think that adds this header by default. For an example of how to remove it, see https://github.com/flutter/devtools/blob/177ac62a0d37d610cb837d4ea53c26a2170069d1/packages/devtools_server/lib/src/server.dart#L239 (though be sure to understand the implications of allowing the site to be embedded inside an iframe).

[jamesblasco]

Thanks for the guidance and the fast response. I was using the flutter run command, but I can't remove the header there. I will keep my project as a separate view from vscode for the moment.