Playground: Add sandboxed iframe

[ajhager]

Replace 'generated code' pane with an iframe the program is injected into. This way, the user can experiment with dom manipulation without interfering with the appearance and functionality of the playground itself.

Also add fullscreen button that overlays the iframe on top of the playground with full width and height of the page.

[dmitshur]

Also add fullscreen button that overlays the iframe on top of the playground with full width and height of the page.

What does this mean and what is it for?

[ajhager]

They press run, and the consequences show up in the iframe. The user might then want to be able to see the iframe maximized a bit. So perhaps the button expands the iframe to 90% - 100%. They can then explore their demo in a more spacious and typical environment.

[dmitshur]

Gotcha.

[grantnelson-wf]

I have not completely fixed this with the most recent update, however, since the transpiled JS code is now run in a webworker, it is possible to open the dev tools, find the webworker and open the JS for it (as seen below).

We should still add a way to view the transpiled code directly. We could add a button to view the JS code in a new browser tab, we could add a new text box into the page (either have a tab control around the code box to switch the view, or maybe we could have an "open side panel" icon that opens a split screen view with both Go and JS code shown. I'm leaning towards the tab control since that would also allow us to head towards multiple code boxes that act like several files (as seen in some other playgrounds).