Properly parse compiler errors for fiddles and mark them in the editor.

experimental/webtry/res/js/webtry.js

 /**
  * Common JS that talks XHR back to the server and runs the code and receives
  * the results.
  */
 
 
 /**
  * All the functionality is wrapped up in this anonymous closure, but we need
  * to be told if we are on the workspace page or a normal try page, so the
  * workspaceName is passed into the closure, it must be set in the global
  * namespace. If workspaceName is the empty string then we know we aren't
  * running on a workspace page.
  *
  * If we are on a workspace page we also look for a 'history_'
  * variable in the global namespace which contains the list of tries
  * that are included in this workspace. That variable is used to
  * populate the history list.
  */
 (function() {
     function onLoad() {
       var run             = document.getElementById('run');
       var permalink       = document.getElementById('permalink');
       var embed           = document.getElementById('embed');
       var embedButton     = document.getElementById('embedButton');
       var code            = document.getElementById('code');
       var output          = document.getElementById('output');
-      var stdout          = document.getElementById('stdout');
+      var outputWrapper   = document.getElementById('output-wrapper');
       var gpu             = document.getElementById('use-gpu');
       var img             = document.getElementById('img');
       var imageWidth      = document.getElementById('image-width');
       var imageHeight     = document.getElementById('image-height');
       var tryHistory      = document.getElementById('tryHistory');
       var parser          = new DOMParser();
       var tryTemplate     = document.getElementById('tryTemplate');
       var sourcesTemplate = document.getElementById('sourcesTemplate');
 
       var enableSource   = document.getElementById('enableSource');
@@ skipping 118 matching lines @@
         lineWrapping: true,
         mode: "text/x-c++src",
         indentUnit: 4,
       });
 
       // Match the initial textarea width, but leave the height alone
       // The css will automatically resize the editor vertically.
       editor.setSize(editor.defaultCharWidth() * code.cols,
                      null);
 
+      editor.on('beforeChange', function(instance, changeObj) {
+        var startLine = changeObj.from.line;
+        var endLine = changeObj.to.line;
+
+        for (var i = startLine ; i <= endLine ; i++) {
+          editor.removeLineClass( i, "wrap", "error" );
+        }
+      });
 
       /**
        * Callback when there's an XHR error.
        * @param e The callback event.
        */
       function xhrError(e) {
         endWait();
         alert('Something bad happened: ' + e);
       }
 
       function clearOutput() {
         output.textContent = "";
-        output.style.display='none';
-        if (stdout) {
-          stdout.textContent = "";
-          stdout.style.display='none';
-        }
+        outputWrapper.style.display='none';
         if (embed) {
           embed.style.display='none';
         }
       }
 
       /**
        * Called when an image in the workspace history is clicked.
        */
       function historyClick() {
         beginWait();
@@ skipping 36 matching lines @@
        * Add the given try image to the history of a workspace.
        */
       function addToHistory(hash, imgUrl) {
         var clone = tryTemplate.content.cloneNode(true);
         clone.querySelector('img').src = imgUrl;
         clone.querySelector('.tries').setAttribute('data-try', '/json/' + hash);
         tryHistory.insertBefore(clone, tryHistory.firstChild);
         tryHistory.querySelector('.tries').addEventListener('click', historyClick, true);
       }
 
+      /**
+       * Callback for when the user clicks on a compile error message
+       *
+       */
+
+      function errorClick() {
+        var line = this.getAttribute('data-line');
+        var col = this.getAttribute('data-col');
+
+        editor.setCursor(line-1,col-1);
+        editor.focus();
+      }
+
 
       /**
        * Callback for when the XHR returns after attempting to run the code.
        * @param e The callback event.
        */
       function codeComplete(e) {
         // The response is JSON of the form:
         // {
         //   "message": "you had an error...",
         //   "img": "<base64 encoded image but only on success>"
         // }
         //
         // The img is optional and only appears if there is a valid
         // image to display.
         endWait();
         body = JSON.parse(e.target.response);
-        output.textContent = body.message;
-        if (body.message) {
-          output.style.display = 'block';
-        }
-        if (stdout) {
-          stdout.textContent = body.stdout;
-          if (body.stdout) {
-            stdout.style.display = 'block';
+        if (body.compileErrors.length) {
+          html = "";
+          for (i = 0 ; i < body.compileErrors.length ; i++) {
+            compileError = body.compileErrors[i];
+
+            err = document.createElement("div");
+            err.className = "compile-error";
+
+            loc = document.createElement("span");
+            loc.className = "error-location";
+            loc.innerHTML = "Line " + compileError.line + ", col " + compileError.column + ": ";
+
+            errorMessage = document.createElement("span");
+            errorMessage.className = "error-mesage";
+            errorMessage.innerHTML = compileError.error;
+
+            err.appendChild(loc);
+            err.appendChild(errorMessage);
+
+            err.setAttribute('data-line', compileError.line);
+            err.setAttribute('data-col', compileError.column);
+
+            output.appendChild(err);
+
+            err.addEventListener('click', errorClick);
+
+            editor.addLineClass( parseInt( compileError.line ) - 1, "wrap", "error" );
+          }
+          outputWrapper.style.display = 'block';
+        } else {
+          output.textContent = body.message;
+          if (body.message) {
+            outputWrapper.style.display = 'block';
           }
         }
         if (body.hasOwnProperty('img')) {
           img.src = 'data:image/png;base64,' + body.img;
         } else {
           img.src = '';
         }
         // Add the image to the history if we are on a workspace page.
         if (tryHistory) {
           addToHistory(body.hash, 'data:image/png;base64,' + body.img);
@@ skipping 53 matching lines @@
     }
 
     // If loaded via HTML Imports then DOMContentLoaded will be long done.
     if (document.readyState != "loading") {
       onLoad();
     } else {
       this.addEventListener('load', onLoad);
     }
 
 })();