Handling PNaCl KeyboardInputEvent(s) in the key tester app.

BUG=407778

Review URL: https://codereview.chromium.org/884703006

Cr-Commit-Position: refs/heads/master@{#314424}

9 files changed, 369 insertions, 37 deletions

diff --git a/remoting/tools/javascript_key_tester/DEPS b/remoting/tools/javascript_key_tester/DEPS
new file mode 100644
index 0000000..d5f5a0b
--- /dev/null
+++ b/remoting/tools/javascript_key_tester/DEPS
@@ -0,0 +1,3 @@
+include_rules = [
+  "+ppapi"
+]
diff --git a/remoting/tools/javascript_key_tester/README b/remoting/tools/javascript_key_tester/README
new file mode 100644
index 0000000..0b0e492
--- /dev/null
+++ b/remoting/tools/javascript_key_tester/README
@@ -0,0 +1,9 @@
+The key tester is a Chrome app that dumps:
+- PNaCl KeyboardInputEvent events
+- JavaScript keydown/keyup events
+
+To use the key tester:
+1. Build: ninja -C out/Debug remoting_key_tester
+2. In Chrome navigate to: chrome://extensions
+3. Use "Load unpacked extension" to load the key tester
+
diff --git a/remoting/tools/javascript_key_tester/chord_tracker.js b/remoting/tools/javascript_key_tester/chord_tracker.js
index ee2a327..a7cded1 100644
--- a/remoting/tools/javascript_key_tester/chord_tracker.js
+++ b/remoting/tools/javascript_key_tester/chord_tracker.js
@@ -14,26 +14,42 @@ var ChordTracker = function(parentDiv) {
 };
 
 /**
- * @param {Event} event The keyup or keydown event.
+ * @param {number} keyCode
+ * @param {string} title
+ * @return {void}
  */
-ChordTracker.prototype.addKeyEvent = function(event) {
-  this.begin_();
-  var span = document.createElement('span');
-  span.title = this.makeTitle_(event);
-  if (event.type == 'keydown') {
-    span.classList.add('key-down');
-    this.pressedKeys_[event.keyCode] = span;
-  } else {
-    span.classList.add('key-up');
-    delete this.pressedKeys_[event.keyCode];
-  }
-  span.innerText = this.keyName_(event.keyCode);
-  this.currentDiv_.appendChild(span);
+ChordTracker.prototype.addKeyUpEvent = function(keyCode, title) {
+  var text = this.keyName_(keyCode);
+  var span = this.addSpanElement_('key-up', text, title);
+  delete this.pressedKeys_[keyCode];
   if (!this.keysPressed_()) {
     this.end_();
   }
 };
 
+/**
+ * @param {number} keyCode
+ * @param {string} title
+ * @return {void}
+ */
+ChordTracker.prototype.addKeyDownEvent = function(keyCode, title) {
+  var text = this.keyName_(keyCode);
+  var span = this.addSpanElement_('key-down', text, title);
+  this.pressedKeys_[keyCode] = span;
+};
+
+/**
+ * @param {string} characterText
+ * @param {string} title
+ * @return {void}
+ */
+ChordTracker.prototype.addCharEvent = function(characterText, title) {
+  this.addSpanElement_('char-event', characterText, title);
+};
+
+/**
+ * @return {void}
+ */
 ChordTracker.prototype.releaseAllKeys = function() {
   this.end_();
   for (var i in this.pressedKeys_) {
@@ -44,6 +60,22 @@ ChordTracker.prototype.releaseAllKeys = function() {
 
 /**
  * @private
+ * @param {string} className
+ * @param {string} text
+ * @param {string} title
+ */
+ChordTracker.prototype.addSpanElement_ = function(className, text, title) {
+  this.begin_();
+  var span = document.createElement('span');
+  span.classList.add(className);
+  span.innerText = text;
+  span.title = title;
+  this.currentDiv_.appendChild(span);
+  return span;
+}
+
+/**
+ * @private
  */
 ChordTracker.prototype.begin_ = function() {
   if (this.currentDiv_) {
@@ -93,18 +125,3 @@ ChordTracker.prototype.keyName_ = function(keyCode) {
   return result;
 };
 
-/**
- * @param {Event} event The keyup or keydown event.
- * @private
- */
-ChordTracker.prototype.makeTitle_ = function(event) {
-  return 'type: ' + event.type + '\n' +
-         'alt: ' + event.altKey + '\n' +
-         'shift: ' + event.shiftKey + '\n' +
-         'control: ' + event.controlKey + '\n' +
-         'meta: ' + event.metaKey + '\n' +
-         'charCode: ' + event.charCode + '\n' +
-         'keyCode: ' + event.keyCode + '\n' +
-         'keyIdentifier: ' + event.keyIdentifier + '\n' +
-         'repeat: ' + event.repeat + '\n';
-};
diff --git a/remoting/tools/javascript_key_tester/keyboard_map.js b/remoting/tools/javascript_key_tester/keyboard_map.js
index 869bf54..8fd268a 100644
--- a/remoting/tools/javascript_key_tester/keyboard_map.js
+++ b/remoting/tools/javascript_key_tester/keyboard_map.js
@@ -3,6 +3,7 @@
  * found in the LICENSE file.
  */
 
+/** @type {Array.<string>} */
 var keyboardMap = [
   '',
   '',
diff --git a/remoting/tools/javascript_key_tester/main.css b/remoting/tools/javascript_key_tester/main.css
index 725f2ca..8010f61 100644
--- a/remoting/tools/javascript_key_tester/main.css
+++ b/remoting/tools/javascript_key_tester/main.css
@@ -12,6 +12,30 @@ html {
   height: 100%;
 }
 
+#pnacl-plugin {
+  background-color: gray;
+  border: 1px solid
+}
+
+#pnacl-plugin:focus {
+  background-color: yellow;
+}
+
+.summary-log-container {
+  width: 50%;
+  height: 50vh;
+  overflow-y: auto;
+  float: left;
+}
+
+.text-log-container {
+  width: 100%;
+  max-height: 25vh;
+  overflow-y: auto;
+  float: left;
+}
+
+.char-event,
 .key-down,
 .key-up {
   border-radius: 4px;
@@ -20,6 +44,14 @@ html {
   margin-right: 2px;
 }
 
+.char-event {
+  background-color: yellow;
+}
+
+.char-event::before {
+  content: "char:";
+}
+
 .key-up {
   background-color: #DFD;
 }
diff --git a/remoting/tools/javascript_key_tester/main.html b/remoting/tools/javascript_key_tester/main.html
index 141b03b..791c024 100644
--- a/remoting/tools/javascript_key_tester/main.html
+++ b/remoting/tools/javascript_key_tester/main.html
@@ -15,8 +15,30 @@ found in the LICENSE file.
   </head>
   <body>
     <h2>Chrome AppsV2  Key Event Tester</h2>
-    <button id="clear-log">Clear log</button>
-    <div id="key-log">
+    <div id="pnacl-listener">
+      PNaCl focus box:
+      <embed id="pnacl-plugin" width=100 height=12
+             src="remoting_key_tester.nmf" type="application/x-pnacl" />
+      (click inside to get focus, yellow background means it has focus).
+    </div>
+    <button id="clear-log">Clear logs</button>
+    <hr/>
+    <div class="logs">
+      <div class="summary-log-container">
+        Summary of JavaScript logs:
+        <div id="javascript-log">
+        </div>
+      </div>
+      <div class="summary-log-container">
+        Summary of PNaCl logs:
+        <div id="pnacl-log">
+        </div>
+      </div>
+      <div class="text-log-container">
+        Text log of JSON-ified events:
+        <div id="text-log">
+        </div>
+      </div>
     </div>
   </body>
 </html>
diff --git a/remoting/tools/javascript_key_tester/main.js b/remoting/tools/javascript_key_tester/main.js
index e777b48..e37e426 100644
--- a/remoting/tools/javascript_key_tester/main.js
+++ b/remoting/tools/javascript_key_tester/main.js
@@ -3,17 +3,142 @@
  * found in the LICENSE file.
  */
 
+/**
+ * @param {string} eventName
+ * @param {number=} opt_space
+ * @return {string}
+ */
+function jsonifyJavascriptKeyEvent(event, eventName, opt_space) {
+  return "JavaScript '" + eventName + "' event = " + JSON.stringify(
+      event,
+      ['type', 'alt', 'shift', 'control', 'meta', 'charCode', 'keyCode',
+          'keyIdentifier', 'repeat'],
+      opt_space);
+};
+
+/**
+ * @param {ChordTracker} jsChordTracker
+ * @param {Event} event
+ * @return {void}
+ */
+function handleJavascriptKeyDownEvent(jsChordTracker, event) {
+  appendToTextLog(jsonifyJavascriptKeyEvent(event, 'keydown', undefined));
+  jsChordTracker.addKeyDownEvent(
+      event.keyCode, jsonifyJavascriptKeyEvent(event, 'keydown', 2));
+}
+
+/**
+ * @param {ChordTracker} jsChordTracker
+ * @param {Event} event
+ * @return {void}
+ */
+function handleJavascriptKeyUpEvent(jsChordTracker, event) {
+  appendToTextLog(jsonifyJavascriptKeyEvent(event, 'keyup', undefined));
+  jsChordTracker.addKeyUpEvent(
+      event.keyCode, jsonifyJavascriptKeyEvent(event, 'keyup', 2));
+}
+
+/** @constructor */
+var PNaClEvent = function() {
+  /** @type {string} */
+  this.type = "";
+  /** @type {number} */
+  this.modifiers = 0;
+  /** @type {number} */
+  this.keyCode = 0;
+  /** @type {string|undefined} */
+  this.characterText = undefined;
+  /** @type {string} */
+  this.code = "";
+};
+
+/**
+ * @param {PNaClEvent} event
+ * @param {number|undefined} space
+ * @return {string}
+ */
+function jsonifyPnaclKeyboardInputEvent(event, space) {
+  return "PNaCl KeyboardInputEvent = " + JSON.stringify(
+      event,
+      ['type', 'modifiers', 'keyCode', 'characterText', 'code'],
+      space);
+};
+
+/**
+ * @param {ChordTracker} pnaclChordTracker
+ * @param {Event} event
+ * @return {void}
+ */
+function handlePNaclMessage(pnaclChordTracker, event) {
+  var pnaclEvent = /** @type {PNaClEvent} */ (event.data);
+
+  appendToTextLog(jsonifyPnaclKeyboardInputEvent(pnaclEvent, undefined));
+  var title = jsonifyPnaclKeyboardInputEvent(pnaclEvent, 2);
+  if (pnaclEvent.type == "KEYDOWN") {
+    pnaclChordTracker.addKeyDownEvent(pnaclEvent.keyCode, title);
+  }
+  if (pnaclEvent.type == "KEYUP") {
+    pnaclChordTracker.addKeyUpEvent(pnaclEvent.keyCode, title);
+  }
+  if (pnaclEvent.type == "CHAR") {
+    pnaclChordTracker.addCharEvent(pnaclEvent.characterText, title);
+  }
+}
+
+/**
+ * @param {string} str
+ * @return {void}
+ */
+function appendToTextLog(str) {
+  var textLog = document.getElementById('text-log');
+  var div = document.createElement('div');
+  div.innerText = str;
+  textLog.appendChild(div);
+}
+
 function onLoad() {
-  var parentDiv = document.getElementById('key-log');
-  var chordTracker = new ChordTracker(parentDiv);
+  // Start listening to Javascript keyup/keydown events.
+  var jsLog = document.getElementById('javascript-log');
+  var jsChordTracker = new ChordTracker(jsLog);
   document.body.addEventListener(
-      'keydown', chordTracker.addKeyEvent.bind(chordTracker), false);
+      'keydown',
+      function (event) {
+        handleJavascriptKeyDownEvent(jsChordTracker, event);
+      },
+      false);
   document.body.addEventListener(
-      'keyup', chordTracker.addKeyEvent.bind(chordTracker), false);
+      'keyup',
+      function (event) {
+        handleJavascriptKeyUpEvent(jsChordTracker, event);
+      },
+      false);
+
+  // Start listening to PNaCl keyboard input events.
+  var pnaclLog = document.getElementById('pnacl-log');
+  var pnaclChordTracker = new ChordTracker(pnaclLog);
+  document.getElementById('pnacl-listener').addEventListener(
+       'message',
+       function (message) {
+         handlePNaclMessage(pnaclChordTracker, message);
+       },
+       true);
+
+  // Start listening to generic, source-agnostic events.
   window.addEventListener(
-      'blur', chordTracker.releaseAllKeys.bind(chordTracker), false);
+      'blur',
+      function () {
+        jsChordTracker.releaseAllKeys();
+        pnaclChordTracker.releaseAllKeys();
+      },
+      false);
   document.getElementById('clear-log').addEventListener(
-      'click', function() { parentDiv.innerText = ''; }, false);
+      'click',
+      function() {
+        jsLog.innerText = '';
+        pnaclLog.innerText = '';
+        document.getElementById('text-log').innerText = '';
+      },
+      false);
 }
 
 window.addEventListener('load', onLoad, false);
diff --git a/remoting/tools/javascript_key_tester/pnacl/remoting_key_tester.cc b/remoting/tools/javascript_key_tester/pnacl/remoting_key_tester.cc
new file mode 100644
index 0000000..408725c
--- /dev/null
+++ b/remoting/tools/javascript_key_tester/pnacl/remoting_key_tester.cc
@@ -0,0 +1,114 @@
+// Copyright (c) 2015 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.
+
+#include <sstream>
+
+#include "ppapi/cpp/input_event.h"
+#include "ppapi/cpp/instance.h"
+#include "ppapi/cpp/module.h"
+#include "ppapi/cpp/var.h"
+#include "ppapi/cpp/var_dictionary.h"
+
+namespace remoting {
+
+class KeyTesterInstance : public pp::Instance {
+ public:
+  explicit KeyTesterInstance(PP_Instance instance) : pp::Instance(instance) {
+    RequestFilteringInputEvents(PP_INPUTEVENT_CLASS_KEYBOARD);
+  }
+
+  virtual ~KeyTesterInstance() {}
+
+  virtual bool HandleInputEvent(const pp::InputEvent& event) {
+    switch (event.GetType()) {
+      case PP_INPUTEVENT_TYPE_KEYDOWN:
+      case PP_INPUTEVENT_TYPE_KEYUP:
+      case PP_INPUTEVENT_TYPE_CHAR: {
+        HandleKeyboardEvent(pp::KeyboardInputEvent(event));
+        break;
+      }
+      default:
+        break;
+    }
+    return true;
+  }
+
+ private:
+  void HandleKeyboardEvent(const pp::KeyboardInputEvent& event) {
+    pp::VarDictionary out;
+    out.Set("type", EventTypeToString(event.GetType()));
+    out.Set("modifiers", (double)event.GetModifiers());
+    out.Set("keyCode", (double)event.GetKeyCode());
+    out.Set("characterText", event.GetCharacterText());
+    out.Set("code", event.GetCode());
+    PostMessage(out);
+  }
+
+  std::string EventTypeToString(PP_InputEvent_Type t) {
+    switch (t) {
+      case PP_INPUTEVENT_TYPE_UNDEFINED:
+        return "UNDEFINED";
+      case PP_INPUTEVENT_TYPE_MOUSEDOWN:
+        return "MOUSEDOWN";
+      case PP_INPUTEVENT_TYPE_MOUSEUP:
+        return "MOUSEUP";
+      case PP_INPUTEVENT_TYPE_MOUSEMOVE:
+        return "MOUSEMOVE";
+      case PP_INPUTEVENT_TYPE_MOUSEENTER:
+        return "MOUSEENTER";
+      case PP_INPUTEVENT_TYPE_MOUSELEAVE:
+        return "MOUSELEAVE";
+      case PP_INPUTEVENT_TYPE_WHEEL:
+        return "WHEEL";
+      case PP_INPUTEVENT_TYPE_RAWKEYDOWN:
+        return "RAWKEYDOWN";
+      case PP_INPUTEVENT_TYPE_KEYDOWN:
+        return "KEYDOWN";
+      case PP_INPUTEVENT_TYPE_KEYUP:
+        return "KEYUP";
+      case PP_INPUTEVENT_TYPE_CHAR:
+        return "CHAR";
+      case PP_INPUTEVENT_TYPE_CONTEXTMENU:
+        return "CONTEXTMENU";
+      case PP_INPUTEVENT_TYPE_IME_COMPOSITION_START:
+        return "IME_COMPOSITION_START";
+      case PP_INPUTEVENT_TYPE_IME_COMPOSITION_UPDATE:
+        return "IME_COMPOSITION_UPDATE";
+      case PP_INPUTEVENT_TYPE_IME_COMPOSITION_END:
+        return "IME_COMPOSITION_END";
+      case PP_INPUTEVENT_TYPE_IME_TEXT:
+        return "IME_TEXT";
+      case PP_INPUTEVENT_TYPE_TOUCHSTART:
+        return "TOUCHSTART";
+      case PP_INPUTEVENT_TYPE_TOUCHMOVE:
+        return "TOUCHMOVE";
+      case PP_INPUTEVENT_TYPE_TOUCHEND:
+        return "TOUCHEND";
+      case PP_INPUTEVENT_TYPE_TOUCHCANCEL:
+        return "TOUCHCANCEL";
+      default:
+        return "[UNRECOGNIZED]";
+    }
+  }
+};
+
+class KeyTesterModule : public pp::Module {
+ public:
+  KeyTesterModule() : pp::Module() {}
+  virtual ~KeyTesterModule() {}
+
+  virtual pp::Instance* CreateInstance(PP_Instance instance) {
+    return new KeyTesterInstance(instance);
+  }
+};
+
+}  // namespace remoting
+
+namespace pp {
+
+Module* CreateModule() {
+  return new remoting::KeyTesterModule();
+}
+
+}  // namespace pp
diff --git a/remoting/tools/javascript_key_tester/pnacl/remoting_key_tester.nmf b/remoting/tools/javascript_key_tester/pnacl/remoting_key_tester.nmf
new file mode 100644
index 0000000..5f49117
--- /dev/null
+++ b/remoting/tools/javascript_key_tester/pnacl/remoting_key_tester.nmf
@@ -0,0 +1,9 @@
+{
+  "program": {
+    "portable": {
+      "pnacl-translate": {
+        "url": "remoting_key_tester_newlib.pexe"
+      }
+    }
+  }
+}