1 files changed, 147 insertions, 0 deletions
diff --git a/addon-sdk/source/examples/actor-repl/data/index.html b/addon-sdk/source/examples/actor-repl/data/index.html
new file mode 100644
index 000000000..250ece249
--- /dev/null
+++ b/addon-sdk/source/examples/actor-repl/data/index.html
@@ -0,0 +1,147 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<html>
+  <head>
+      <link rel="stylesheet" href="./codemirror.css">
+      <link rel="stylesheet" href="./main.css">
+      <script src="./codemirror-compressed.js"></script>
+      <views>
+          <section class="task cm-s-default">
+            <pre class="request "></pre>
+            <pre class="response"><span class="one"></span><span class="two"></span><span class="three"></span></pre>
+          </section>
+       </views>
+  </head>
+  <body>
+      <pre class="input"></pre>
+  </body>
+  <script>
+      function debounce(fn, ms) {
+        var id;
+        return function(...args) {
+          clearTimeout(id);
+          id = setTimeout(fn, ms, ...args);
+        };
+      }
+
+      function Try(fn) {
+        return function(...args) {
+          try { return fn(...args); }
+          catch (error) { return null; }
+        };
+      }
+
+      var parse = Try(JSON.parse);
+
+      var CommandHistory = {
+        init: function() {
+          this._state = {};
+          this._state.els = document.querySelectorAll("body > section.task > .request");
+          this._state.idx = this._state.els.length;
+        },
+        get prev() {
+          if (!!this._state.els && this._state.idx > 0) {
+            this._state.idx--;
+            return this._state.els[this._state.idx].textContent;
+          }
+
+          return "";
+        },
+        get next() {
+          if (!!this._state.els && this._state.idx < this._state.els.length-1) {
+            this._state.idx++;
+            return this._state.els[this._state.idx].textContent;
+          }
+
+          return "";
+        }
+      }
+
+      function cmdHistory(fn, editor) {
+        editor.setValue(fn());
+        document.querySelector(".input").scrollIntoView();
+      }
+
+      var cmdHistoryNext = cmdHistory.bind(null, () => CommandHistory.next);
+      var cmdHistoryBack = cmdHistory.bind(null, () => CommandHistory.prev);
+
+      function send(editor) {
+          var input = editor.getWrapperElement().parentNode;
+          var code = editor.getValue().trim();
+          var packet = parse(code);
+          if (packet) {
+            var task = document.querySelector("views .task").cloneNode(true);
+            var request = task.querySelector(".request");
+            var response = task.querySelector(".response");
+
+            input.parentNode.insertBefore(task, input);
+
+            CodeMirror.runMode(JSON.stringify(packet, 2, 2),
+                               "application/json",
+                               request);
+            response.classList.add("pending");
+
+            editor.setValue("");
+
+            document.querySelector(".input").scrollIntoView();
+
+            port.postMessage(packet);
+          }
+      }
+
+      var editor = CodeMirror(document.querySelector(".input"), {
+        autofocus: true,
+        mode: "application/json",
+        matchBrackets: true,
+        value: '{"to": "root", "type": "requestTypes"}',
+        extraKeys: {"Cmd-Enter": send,
+                    "Ctrl-Enter": send,
+                    "Cmd-Down": cmdHistoryNext,
+                    "Ctrl-Down": cmdHistoryNext,
+                    "Cmd-Up": cmdHistoryBack,
+                    "Ctrl-Up": cmdHistoryBack}
+      });
+      editor.on("change", debounce(function(editor) {
+          var input = editor.getWrapperElement().parentNode;
+          if (parse(editor.getValue().trim())) {
+            input.classList.remove("invalid");
+          } else {
+            input.classList.add("invalid");
+          }
+      }, 800));
+  </script>
+  <script>
+    window.addEventListener("message", event => {
+      window.port = event.ports[0];
+      port.onmessage = onMessage;
+    });
+
+    var onMessage = (event) => {
+      var packet = event.data;
+      var code = JSON.stringify(packet, 2, 2);
+
+      var input = document.querySelector(".input");
+      var response = document.querySelector(".task .response.pending");
+
+      if (!response) {
+        message = document.querySelector("views .task").cloneNode(true);
+        response = message.querySelector(".response");
+        response.classList.add("message");
+
+        input.parentNode.insertBefore(message, input);
+      }
+
+      if (packet.error) {
+        response.classList.add("error");
+      }
+
+      CodeMirror.runMode(code, "application/json", response);
+      response.classList.remove("pending");
+
+      document.querySelector(".input").scrollIntoView();
+
+      CommandHistory.init();
+    };
+  </script>
+</html>