Add button in playground to run formatter (crystal-lang#3652)

src/compiler/crystal/tools/playground/public/application.css

@@ -13,7 +13,12 @@ nav ul a {
 }
 
 footer > div > div {
-  margin-bottom: 1em;
+  margin-bottom: 4px;
+}
+
+footer small {
+  display: block;
+  margin-bottom: 1.5em;
 }
 
 html {
@@ -168,6 +173,15 @@ h4 {
   font-weight: 400;
 }
 
+.code-btn {
+  font-size: 11px;
+  padding:1px 12px 0;
+  height: 26px;
+  line-height: 26px;
+}
+.code-btn .icon { margin-right: 3px; }
+.code-btn .icon :before { font-size:14px;}
+
 .run-button {
   padding-top: 5px;
   padding-left: 2px;

src/compiler/crystal/tools/playground/public/session.js

@@ -130,20 +130,20 @@ Playground.OutputIndicator = function(dom) {
   this.dom = dom;
   this.blinkTimeout = null;
 
-  this.dom.append($("<span>").addClass("octicon octicon-terminal"));
+  this.dom.addClass("octicon octicon-terminal");
 
   this.turnOnWithBlink = function () {
-    this.dom.addClass('grey-text').removeClass('teal-text red-text');
+    this.dom.removeClass('teal-text red-text');
     this.blinkTimeout = window.setTimeout(function(){
       if (this.isError) return;
-      this.dom.removeClass('grey-text').addClass('teal-text');
+      this.dom.addClass('teal-text');
     }.bind(this), 200);
   }.bind(this);
 
   this.turnOff = function () {
     this.isError = false;
     this._cancelBlink();
-    this.dom.addClass('grey-text').removeClass('teal-text red-text');
+    this.dom.removeClass('teal-text red-text');
   }.bind(this);
 
   this.turnError = function () {
@@ -281,7 +281,7 @@ Playground.Session = function(options) {
         .append(this.sidebarDom = cdiv("sidebar"))
       )
   );
-
+  this.isRunning = false;
   this.stdout = options.stdout;
   this.stdoutRawContent = "";
   this.outputIndicator = new Playground.OutputIndicator(options.outputIndicator);
@@ -377,6 +377,10 @@ Playground.Session = function(options) {
             $("<h2>").append("Exception"),
             $("<pre>").append(message.exception.message)).openModal();
 
+          break;
+        case "format":
+          codeFormatter.stop();
+          this.setSource(message.value);
           break;
         default:
           console.error("ws message not handled", message);
@@ -385,9 +389,26 @@ Playground.Session = function(options) {
   }.bind(this);
 
   this.runTag = 0;
+
+  this.format = function() {
+    this._removeScheduledRun();
+
+    this._clearInspectors();
+    this._hideEditorErrors();
+    this._clearStdout();
+
+    this.ws.send(JSON.stringify({
+      type: "format",
+      source: this.editor.getValue(),
+      tag: this.runTag
+    }));
+  }.bind(this);
+
   this.run = function() {
     if (Playground.connectLostShown) return;
+    if (this.isRunning) return;
 
+    this.isRunning = true;
     this._removeScheduledRun();
     this.runTag++;
 
@@ -435,7 +456,11 @@ Playground.Session = function(options) {
     }.bind(this);
 
     this.onFinish = function() {
+      this.isRunning = false;
       runButtons.showPlay();
+      if (codeFormatter && codeFormatter.isRunning) {
+        codeFormatter.stop();
+      }
     }.bind(this);
 
     this.onDisconnect = function() {
@@ -581,6 +606,48 @@ Playground.Session = function(options) {
     this._scheduleRun();
   }.bind(this));
 
+  // code formatter
+  var sessionInstance = this;
+  var codeFormatter = (function() {
+    var isRunning = false;
+    var btn = document.getElementById('runFormatterBtn');
+    if (!btn) { return; }
+    btn.addEventListener('click', function(evt) {
+      evt.preventDefault();
+      run();
+    });
+
+    var iconCont = btn.getElementsByClassName('icon')[0];
+    if (iconCont) {
+      iconCont.classList.add('octicon', 'octicon-checklist');
+    }
+
+    function run() {
+      if (isRunning) {
+        return console.info('code formatter is already running. Attempt aborted...');
+      }
+      if (sessionInstance.isRunning) {
+        return console.info('compiler running. Formatter attempt aborted...')
+      }
+      btn.classList.add('running');
+      isRunning = true;
+      sessionInstance.format();
+    };
+
+    function stop() {
+      isRunning = false;
+      btn.classList.remove('running');
+    }
+
+    var publicProps = { run, stop };
+
+    Object.defineProperty(publicProps, "isRunning", {
+      get: function() { return isRunning; }
+    });
+
+    return publicProps;
+  })();
+
   // when clicking below the editor, set the cursor at the very end
   this.editorDom.click(function(e){
     this._hideEditorErrors();

src/compiler/crystal/tools/playground/server.cr

@@ -3,6 +3,7 @@ require "tempfile"
 require "logger"
 require "ecr/macros"
 require "markdown"
+require "compiler/crystal/tools/formatter"
 
 module Crystal::Playground
   class Session
@@ -92,6 +93,25 @@ module Crystal::Playground
       end
     end
 
+    def format(source, tag)
+      @logger.info "Request to format code (session=#{@session_key}, tag=#{tag}).\n#{source}"
+
+      @tag = tag
+
+      begin
+        value = Crystal.format source
+      rescue ex : Crystal::Exception
+        send_exception ex, tag
+        return
+      end
+
+      send_with_json_builder do |json|
+        json.field "type", "format"
+        json.field "tag", tag
+        json.field "value", value
+      end
+    end
+
     def stop
       stop_process
     end
@@ -485,6 +505,10 @@ module Crystal::Playground
               session.run source, tag
             when "stop"
               session.stop
+            when "format"
+              source = json["source"].as_s
+              tag = json["tag"].as_i
+              session.format source, tag
             end
           end
         end

src/compiler/crystal/tools/playground/views/_index.html

@@ -6,10 +6,15 @@
 
 <div class="row">
   <div class="col s7">
-    <small class="crystal-version grey-text text-lighten-1"></small>
+    <a id="runFormatterBtn" class="code-btn waves-effect waves-light btn-flat" href="#run-formatter">
+      <span class="icon"></span>
+      <span>Run Formatter</span>
+    </a>
   </div>
   <div class="col s5">
-    <a class="modal-trigger" href="#output-modal" id="mainOutputIndicator">
+    <a class="modal-trigger code-btn waves-effect waves-light btn-flat" href="#output-modal">
+      <span id="mainOutputIndicator" class="icon"></span>
+      <span>Show Output</span>
     </a>
   </div>
 </div>

src/compiler/crystal/tools/playground/views/layout.html.ecr

@@ -45,6 +45,7 @@
     <footer>
       <div class="footer-copyright">
         <div class="center-align">Happy Crystalling ♥</div>
+        <small class="center-align crystal-version grey-text text-lighten-1"></small>
       </div>
     </footer>