Add mojo web UI framework based on Nat's TVCM

mojo/spy/ui/spy.js

Index: mojo/spy/ui/spy.js
diff --git a/mojo/spy/ui/spy.js b/mojo/spy/ui/spy.js
new file mode 100644
index 0000000000000000000000000000000000000000..e3f47e1f01a2afe36d16ec3f22bccd3ba49bd3b2
--- /dev/null
+++ b/mojo/spy/ui/spy.js
@@ -0,0 +1,96 @@
+// Copyright 2014 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+'use strict';
+
+tvcm.require('tvcm.utils');
+tvcm.require('tvcm.ui');
+tvcm.requireTemplate('ui.spy');
+
+tvcm.exportTo('ui', function() {
+  /**
+   * @constructor
+   */
+  var LogMessage = tvcm.ui.define('x-spy-log-message');
+
+  LogMessage.prototype = {
+    __proto__: HTMLUnknownElement.prototype,
+
+    decorate: function() {
+    },
+
+    get message() {
+      return message_;
+    },
+
+    set message(message) {
+      this.message_ = message;
+      this.textContent = JSON.stringify(message);
+    }
+  };
+
+
+  /**
+   * @constructor
+   */
+  var Spy = tvcm.ui.define('x-spy');
+
+  Spy.prototype = {
+    __proto__: HTMLUnknownElement.prototype,
+
+    decorate: function() {
+      var node = tvcm.instantiateTemplate('#x-spy-template');
+      this.appendChild(node);
+
+      this.channel_ = undefined;
+      this.onMessage_ = this.onMessage_.bind(this);
+
+      var commandEl = this.querySelector('#command');
+      commandEl.addEventListener('keydown', function(e) {
+        if (e.keyCode == 13) {
+          e.stopPropagation();
+          this.onCommandEntered_();
+        }
+      }.bind(this));
+
+      this.updateDisabledStates_();
+    },
+
+    get channel() {
+      return channel_;
+    },
+
+    set channel(channel) {
+      if (this.channel_)
+        this.channel_.removeEventListener('message', this.onMessage_);
+      this.channel_ = channel;
+      if (this.channel_)
+        this.channel_.addEventListener('message', this.onMessage_);
+      this.updateDisabledStates_();
+    },
+
+    updateDisabledStates_: function() {
+      var connected = this.channel_ !== undefined;
+
+      this.querySelector('#command').disabled = !connected;
+    },
+
+    onCommandEntered_: function(cmd) {
+      var commandEl = this.querySelector('#command');
+      this.channel_.send(JSON.stringify(commandEl.value));
+      commandEl.value = '';
+    },
+
+    onMessage_: function(message) {
+      var messageEl = new LogMessage();
+      messageEl.message = message.data;
+      this.querySelector('messages').appendChild(messageEl);
+    }
+
+  };
+
+  return {
+    Spy: Spy
+  };
+});