ported from #13

Hover-enabled tooltips may not be the ideal solution for explaining buttons, but they are kinda handy.

Changing the style changes the editor box which can mess with the divider position.

Put the UI widgets into the Code Mirror DOM, instead of trying to manually float them in the right position.

http://blacktie.io/

better documentation uploaded here:
http://louhuang.com/blacktie/

cc @souperneon @hanbyul-here

With the example picker no longer force-reloading the page (which is how it should be), example styles that have images and remote resources (like Crosshatch, Sandbox) will not load those resources anymore. That's because the content of the file is being injected directly into the editor (https://github.com/tangrams/tangram-play/blob/gh-pages/src/cm-tangram/ui.js#L188), then turned into a local object URL (like other editor content), and then loaded as a scene.

Tangram uses the URL that the scene was loaded from to determine where other resources should be loaded from, since they are treated as relative paths in the scene file. In these cases, the correct URL/path info has been lost, as the content was "laundered" through CodeMirror.

We need a better way to deal with resources for this editor anyway, so logging this here and will think on it more.

For example:
You have NOT saved your style.
Go back and EXPORT the style if you want to keep a copy.
Are you sure you want to leave this page?
Go Back Close Anyway

The minimum amount of YAML necessary as the most basic style available

Lightbox has thumbnails with the style templates available.
(Basic style is one of these templates)

Do we have a JS style? Should we match tangram's .jshintrc & .editorconfig? cc @bcamper

Not necessarily an endorsement for this project, but personally (and without other organizational oversight) my JS follows Standard, just so you know where I'm coming from (such as lines where semi-colons drop off when I am writing in a hurry).