Both static and ACE editable snippets have optional play button

- list of available crates is dynamically loaded from play.rust-lang.org
- play button is enabled only if crates used in snippet are available on playground
- ACE editor's play button is dynamically updated on each text change
- `no_run` is honored by always disabling the play button
- minor cleanups

src/theme/book.js

@@ -1,5 +1,3 @@
-playground_crates = [];
-
 $( document ).ready(function() {
 
     // url
@@ -19,7 +17,7 @@ $( document ).ready(function() {
         tabReplace: '    ', // 4 spaces
         languages: [],      // Languages used for auto-detection
     });
-    
+
     if (window.ace) {
         // language-rust class needs to be removed for editable
         // blocks or highlightjs will capture events
@@ -33,7 +31,7 @@ $( document ).ready(function() {
             hljs.highlightBlock(block);
         });
     }
-    
+
     // Adding the hljs class gives code blocks the color css
     // even if highlighting doesn't apply
     $('code').addClass('hljs');
@@ -130,27 +128,27 @@ $( document ).ready(function() {
 
     function set_theme(theme) {
         let ace_theme;
-        
+
         if (theme == 'coal' || theme == 'navy') {
             $("[href='ayu-highlight.css']").prop('disabled', true);
             $("[href='tomorrow-night.css']").prop('disabled', false);
             $("[href='highlight.css']").prop('disabled', true);
-            
+
             ace_theme = "ace/theme/tomorrow_night";
         } else if (theme == 'ayu') {
             $("[href='ayu-highlight.css']").prop('disabled', false);
             $("[href='tomorrow-night.css']").prop('disabled', true);
             $("[href='highlight.css']").prop('disabled', true);
-            
+
             ace_theme = "ace/theme/tomorrow_night";
         } else {
             $("[href='ayu-highlight.css']").prop('disabled', true);
             $("[href='tomorrow-night.css']").prop('disabled', true);
             $("[href='highlight.css']").prop('disabled', false);
-            
+
             ace_theme = "ace/theme/dawn";
         }
-        
+
         if (window.ace && window.editors) {
             window.editors.forEach(function(editor) {
                 editor.setTheme(ace_theme);
@@ -265,9 +263,10 @@ $( document ).ready(function() {
         dataType: "json",
         contentType: "application/json",
         success: function(response){
-            playground_crates = response.crates.map(function(item) {return item["id"];} );
+            // get list of crates available in the rust playground
-            $(".playpen").each(function(block){
+            let playground_crates = response.crates.map(function(item) {return item["id"];} );
-                update_play_button(this, playground_crates);
+            $(".playpen").each(function(block) {
+                handle_crate_list_update($(this), playground_crates);
             });
         },
     });
@@ -285,19 +284,47 @@ function playpen_text(playpen) {
     }
 }
 
-function update_play_button(block, playground_crates) {
+function handle_crate_list_update(playpen_block, playground_crates) {
-    //TODO skip if `no_run` is set
+    // update the play buttons after receiving the response
-    var pre_block = $(block);
+    update_play_button(playpen_block, playground_crates);
+
+    // and install on change listener to dynamically update ACE editors
+    if (window.ace) {
+        let code_block = playpen_block.find("code").first();
+        if (code_block.hasClass("editable")) {
+            let editor = window.ace.edit(code_block.get(0));
+            editor.on("change", function(e){
+                update_play_button(playpen_block, playground_crates);
+            });
+        }
+    }
+}
+
+// updates the visibility of play button based on `no_run` class and
+// used crates vs ones available on http://play.rust-lang.org
+function update_play_button(pre_block, playground_crates) {
     var play_button = pre_block.find(".play-button");
 
-    var txt = playpen_text(pre_block);
+    var classes = pre_block.find("code").attr("class").split(" ");
+    // skip if code is `no_run`
+    if (classes.indexOf("no_run") > -1) {
+        play_button.addClass("hidden");
+        return;
+    }
 
+    // get list of `extern crate`'s from snippet
+    var txt = playpen_text(pre_block);
     var re = /extern\s+crate\s+([a-zA-Z_0-9]+)\s*;/g;
     var snippet_crates = [];
-    while (item = re.exec(txt))
+    while (item = re.exec(txt)) {
         snippet_crates.push(item[1]);
+    }
+
+    // check if all used crates are available on play.rust-lang.org
+    var all_available = snippet_crates.every(function(elem) {
+        return playground_crates.indexOf(elem) > -1;
+    });
 
-    var all_available = snippet_crates.every(elem => playground_crates.indexOf(elem) > -1);
     if (all_available) {
         play_button.removeClass("hidden");
     } else {
@@ -341,15 +368,7 @@ function run_rust_code(code_block) {
         result_block = code_block.find(".result");
     }
 
-    let text;
+    let text = playpen_text(code_block);;
-
-    let inner_code_block = code_block.find("code").first();
-    if (window.ace && inner_code_block.hasClass("editable")) {
-        let editor = window.ace.edit(inner_code_block.get(0));
-        text = editor.getValue();
-    } else {
-        text = inner_code_block.text();
-    }
 
     var params = {
         version: "stable",