Use CodeMirror for WebTry snippets.

Use CodeMirror for WebTry snippets.

CodeMirror (http://codemirror.net) is a rich code editor. This CL
adds the needed library and wires it with some minimal features, to
update the editor appearance to something like this:
http://codemirror.net/demo/theme.html?ambiance

We can later add Skia-customized features (custom keyword highlighting,
code completion, etc.).

(only tested locally)

R=jcgregorio@google.com, mtklein@google.com

Committed: https://code.google.com/p/skia/source/detail?r=14499

[jcgregorio, 2014-05-01 13:27:30]

This is an awesome enhancement, thanks!

https://codereview.chromium.org/261693003/diff/20001/experimental/webtry/res/...
File experimental/webtry/res/js/webtry.js (right):

https://codereview.chromium.org/261693003/diff/20001/experimental/webtry/res/...
experimental/webtry/res/js/webtry.js:131: var editor =
CodeMirror.fromTextArea(code, {
Can we fix the editor so that it defaults to 100 chars wide? Right now it's as
wide as the screen, which interferes a bit with the image zooming.

Also, the textarea doesn't seem resizeable anymore, can it be?

https://codereview.chromium.org/261693003/diff/20001/experimental/webtry/temp...
File experimental/webtry/templates/index.html (right):

https://codereview.chromium.org/261693003/diff/20001/experimental/webtry/temp...
experimental/webtry/templates/index.html:9: <script
src="/res/js/cm/codemirror.js"></script>
Move js to content.html, keep the CSS here.

Do this for iframe.html and workspace.html also.

https://codereview.chromium.org/261693003/diff/20001/experimental/webtry/webt...
File experimental/webtry/webtry.go (right):

https://codereview.chromium.org/261693003/diff/20001/experimental/webtry/webt...
experimental/webtry/webtry.go:679: // Resources are served directly
The codemirror js is 294K, add a TODO here to add support for caching/etags/gzip
support.

[jcgregorio, 2014-05-01 14:11:24]

https://codereview.chromium.org/261693003/diff/20001/experimental/webtry/temp...
File experimental/webtry/templates/index.html (right):

https://codereview.chromium.org/261693003/diff/20001/experimental/webtry/temp...
experimental/webtry/templates/index.html:9: <script
src="/res/js/cm/codemirror.js"></script>
Also the js and css imports for recent.html need to be updated.

On 2014/05/01 13:27:30, jcgregorio wrote:
> Move js to content.html, keep the CSS here.
> 
> Do this for iframe.html and workspace.html also.

[f(malita), 2014-05-01 14:24:39]

https://codereview.chromium.org/261693003/diff/20001/experimental/webtry/res/...
File experimental/webtry/res/js/webtry.js (right):

https://codereview.chromium.org/261693003/diff/20001/experimental/webtry/res/...
experimental/webtry/res/js/webtry.js:131: var editor =
CodeMirror.fromTextArea(code, {
On 2014/05/01 13:27:30, jcgregorio wrote:
> Can we fix the editor so that it defaults to 100 chars wide? Right now it's as
> wide as the screen, which interferes a bit with the image zooming.

Done.


> Also, the textarea doesn't seem resizeable anymore, can it be?

Not easily :(

There might be ways to hack that in, or we could set it as a percentage of
window size.

https://codereview.chromium.org/261693003/diff/20001/experimental/webtry/temp...
File experimental/webtry/templates/index.html (right):

https://codereview.chromium.org/261693003/diff/20001/experimental/webtry/temp...
experimental/webtry/templates/index.html:9: <script
src="/res/js/cm/codemirror.js"></script>
On 2014/05/01 13:27:30, jcgregorio wrote:
> Move js to content.html, keep the CSS here.
> 
> Do this for iframe.html and workspace.html also.

Done.

https://codereview.chromium.org/261693003/diff/20001/experimental/webtry/temp...
experimental/webtry/templates/index.html:9: <script
src="/res/js/cm/codemirror.js"></script>
On 2014/05/01 14:11:25, jcgregorio wrote:
> Also the js and css imports for recent.html need to be updated.
> 
> On 2014/05/01 13:27:30, jcgregorio wrote:
> > Move js to content.html, keep the CSS here.
> > 
> > Do this for iframe.html and workspace.html also.
> 

Done.

https://codereview.chromium.org/261693003/diff/20001/experimental/webtry/webt...
File experimental/webtry/webtry.go (right):

https://codereview.chromium.org/261693003/diff/20001/experimental/webtry/webt...
experimental/webtry/webtry.go:679: // Resources are served directly
On 2014/05/01 13:27:30, jcgregorio wrote:
> The codemirror js is 294K, add a TODO here to add support for
caching/etags/gzip
> support.

Done.

[jcgregorio, 2014-05-01 14:31:19]

On 2014/05/01 14:24:39, Florin Malita wrote:
>
https://codereview.chromium.org/261693003/diff/20001/experimental/webtry/res/...
> File experimental/webtry/res/js/webtry.js (right):
> 
>
https://codereview.chromium.org/261693003/diff/20001/experimental/webtry/res/...
> experimental/webtry/res/js/webtry.js:131: var editor =
> CodeMirror.fromTextArea(code, {
> On 2014/05/01 13:27:30, jcgregorio wrote:
> > Can we fix the editor so that it defaults to 100 chars wide? Right now it's
as
> > wide as the screen, which interferes a bit with the image zooming.
> 
> Done.
> 
> 
> > Also, the textarea doesn't seem resizeable anymore, can it be?
> 
> Not easily :(
> 
> There might be ways to hack that in, or we could set it as a percentage of
> window size.
> 
>
https://codereview.chromium.org/261693003/diff/20001/experimental/webtry/temp...
> File experimental/webtry/templates/index.html (right):
> 
>
https://codereview.chromium.org/261693003/diff/20001/experimental/webtry/temp...
> experimental/webtry/templates/index.html:9: <script
> src="/res/js/cm/codemirror.js"></script>
> On 2014/05/01 13:27:30, jcgregorio wrote:
> > Move js to content.html, keep the CSS here.
> > 
> > Do this for iframe.html and workspace.html also.
> 
> Done.
> 
>
https://codereview.chromium.org/261693003/diff/20001/experimental/webtry/temp...
> experimental/webtry/templates/index.html:9: <script
> src="/res/js/cm/codemirror.js"></script>
> On 2014/05/01 14:11:25, jcgregorio wrote:
> > Also the js and css imports for recent.html need to be updated.
> > 
> > On 2014/05/01 13:27:30, jcgregorio wrote:
> > > Move js to content.html, keep the CSS here.
> > > 
> > > Do this for iframe.html and workspace.html also.
> > 
> 
> Done.
> 
>
https://codereview.chromium.org/261693003/diff/20001/experimental/webtry/webt...
> File experimental/webtry/webtry.go (right):
> 
>
https://codereview.chromium.org/261693003/diff/20001/experimental/webtry/webt...
> experimental/webtry/webtry.go:679: // Resources are served directly
> On 2014/05/01 13:27:30, jcgregorio wrote:
> > The codemirror js is 294K, add a TODO here to add support for
> caching/etags/gzip
> > support.
> 
> Done.

LGTM, just add a new section to DESIGN.md describing the use of CodeMirror and
where you go the files to include in this project and how to update them.

[f(malita), 2014-05-01 15:06:41]

On 2014/05/01 14:31:19, jcgregorio wrote:
> LGTM, just add a new section to DESIGN.md describing the use of CodeMirror and
> where you go the files to include in this project and how to update them.

Done.

[f(malita), 2014-05-01 15:06:51]

The CQ bit was checked by fmalita@chromium.org

[commit-bot: I haz the power, 2014-05-01 15:07:08]

CQ is trying da patch. Follow status at
https://skia-tree-status.appspot.com/cq/fmalita@chromium.org/261693003/60001

[commit-bot: I haz the power, 2014-05-01 15:11:42]

The CQ bit was unchecked by commit-bot@chromium.org

[commit-bot: I haz the power, 2014-05-01 15:11:43]

Retried try job too often on Build-Ubuntu13.10-GCC4.8-x86_64-Release-Trybot for
step(s) BuildBench, BuildEverything, BuildGm, BuildSkiaLib, BuildTests,
BuildTools
http://skia-tree-status.appspot.com/redirect/compile-buildbots/buildstatus?bu...

[f(malita), 2014-05-01 15:15:06]

Committed patchset #4 manually as r14499 (presubmit successful).