rework webtry css with compass and bootstrap

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
@@ skipping 27 matching lines @@
       var chooseList     = document.getElementById('chooseList');
 
       // Id of the source image to use, 0 if no source image is used.
       var sourceId = 0;
 
       sourceId = parseInt(enableSource.getAttribute('data-id'));
       if (sourceId) {
         sourceSelectByID(sourceId);
       }
 
+      function setIFrameURL() {
+        var url = document.URL;
+        url = url.replace('/c/', '/iframe/');
+        embed.value = '<iframe src="' + url + '" width="740" height="550" style="border: solid #00a 5px; border-radius: 5px;"/>'
+      }
 
       function beginWait() {
         document.body.classList.add('waiting');
         run.disabled = true;
       }
 
 
       function endWait() {
         document.body.classList.remove('waiting');
         run.disabled = false;
@@ skipping 68 matching lines @@
         if (enableSource.checked) {
           beginWait();
           var req = new XMLHttpRequest();
           req.addEventListener('load', sourcesComplete);
           req.addEventListener('error', xhrError);
           req.overrideMimeType('application/json');
           req.open('GET', '/sources/', true);
           req.send();
         } else {
           sourceId = 0;
+          chooseSource.classList.remove('show');
         }
       }
 
       enableSource.addEventListener('click', sourceClick, true);
       selectedSource.addEventListener('click', sourceClick, true);
 
 
       var editor = CodeMirror.fromTextArea(code, {
         theme: "default",
         lineNumbers: true,
@@ skipping 13 matching lines @@
        * 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';
         }
-        embed.style.display='none';
+        if (embed) {
+          embed.style.display='none';
+        }
       }
 
       /**
        * Called when an image in the workspace history is clicked.
        */
       function historyClick() {
         beginWait();
         clearOutput();
         var req = new XMLHttpRequest();
         req.addEventListener('load', historyComplete);
@@ skipping 14 matching lines @@
         //   "code": "source code for try"
         // }
         endWait();
         body = JSON.parse(e.target.response);
         code.value = body.code;
         editor.setValue(body.code);
         img.src = '/i/'+body.hash+'.png';
         sourceSelectByID(body.source);
         if (permalink) {
           permalink.href = '/c/' + body.hash;
+          permalink.style.display='inline-block';
         }
       }
 
 
       /**
        * 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;
@@ skipping 13 matching lines @@
         //   "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();
         console.log(e.target.response);
         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.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);
         } else {
           window.history.pushState(null, null, '/c/' + body.hash);
         }
         if (permalink) {
           permalink.href = '/c/' + body.hash;
+          permalink.style.display = 'inline-block';
         }
         if (embed) {
-          var url = document.URL;
-          url = url.replace('/c/', '/iframe/');
-          embed.value = '<iframe src="' + url + '" width="740" height="550" style="border: solid #00a 5px; border-radius: 5px;"/>'
+          setIFrameURL();
         }
-        if (embedButton && embedButton.hasAttribute('disabled')) {
-          embedButton.removeAttribute('disabled');
+        if (embedButton) {
+          embedButton.style.display = 'inline-block';
         }
       }
 
 
       function onSubmitCode() {
         beginWait();
         clearOutput();
         var req = new XMLHttpRequest();
         req.addEventListener('load', codeComplete);
         req.addEventListener('error', xhrError);
         req.overrideMimeType('application/json');
         req.open('POST', '/', true);
         req.setRequestHeader('content-type', 'application/json');
         req.send(JSON.stringify({'code': editor.getValue(), 'name': workspaceName, 'source': sourceId}));
       }
       run.addEventListener('click', onSubmitCode);
 
 
       function onEmbedClick() {
         embed.style.display='inline';
       }
 
       if (embedButton) {
         embedButton.addEventListener('click', onEmbedClick);
       }
 
+      setIFrameURL();
+
       // Add the images to the history if we are on a workspace page.
       if (tryHistory && history_) {
         for (var i=0; i<history_.length; i++) {
           addToHistory(history_[i].hash, '/i/'+history_[i].hash+'.png');
         }
       }
     }
 
     // If loaded via HTML Imports then DOMContentLoaded will be long done.
     if (document.readyState != "loading") {
       onLoad();
     } else {
       this.addEventListener('load', onLoad);
     }
 
 })();