Automatically resize the webtry text editor to fit the content

BUG=skia:

Review URL: https://codereview.chromium.org/626033004

experimental/webtry/res/css/cm/codemirror.css

@@ -3,11 +3,13 @@
 .CodeMirror {
   /* Set height, width, borders, and global font properties here */
   font-family: monospace;
-  height: 300px;
 }
 .CodeMirror-scroll {
-  /* Set scrolling behaviour here */
-  overflow: auto;
+  /* These settings combine to allow the code portion to automatically resize itself */
+  height: auto;
+
+  overflow-x: auto;
+  overflow-y: hidden;
 }
 
 /* PADDING */
@@ -121,7 +123,6 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
   /* See overflow: hidden in .CodeMirror */
   margin-bottom: -30px; margin-right: -30px;
   padding-bottom: 30px;
-  height: 100%;
   outline: none; /* Prevent dragging from highlighting the element */
   position: relative;
   -moz-box-sizing: content-box;

experimental/webtry/res/js/webtry.js

@@ -144,13 +144,15 @@
         theme: "default",
         lineNumbers: true,
         matchBrackets: true,
+        lineWrapping: true,
         mode: "text/x-c++src",
         indentUnit: 4,
       });
 
-      // Match the initial textarea size.
+      // Match the initial textarea width, but leave the height alone
+      // The css will automatically resize the editor vertically.
       editor.setSize(editor.defaultCharWidth() * code.cols,
-                     editor.defaultTextHeight() * code.rows);
+                     null);
 
 
       /**

experimental/webtry/templates/content.html

@@ -6,9 +6,9 @@
   </template>
   <input type="checkbox" id="enableSource" data-id="{{.Source}}"> Use an input bitmap.
   <br>
-  <button id=selectedSource></button>
-  <pre id=sourceCode>SkBitmap source;</pre>
-  <div id=chooseSource>
+  <button id="selectedSource"></button>
+  <pre id="sourceCode">SkBitmap source;</pre>
+  <div id="chooseSource">
     Choose an image below or upload a new one to use as an input bitmap.
     <div id="chooseList">
     </div>