NOT FOR REVIEW: A set of patches for Josh to work on top of.

chrome/browser/resources/vr_shell/vk.js

Index: chrome/browser/resources/vr_shell/vk.js
diff --git a/chrome/browser/resources/vr_shell/vk.js b/chrome/browser/resources/vr_shell/vk.js
new file mode 100644
index 0000000000000000000000000000000000000000..e2cdcfcfe132e3aa4f8fdddb1fce83361118d092
--- /dev/null
+++ b/chrome/browser/resources/vr_shell/vk.js
@@ -0,0 +1,487 @@
+vk_l_panel_layout = [
+  [
+    { "code": "Key1", "key": "1" },
+    { "code": "Key2", "key": "2" },
+    { "code": "Key3", "key": "3" },
+  ],
+  [
+    { "code": "Key4", "key": "4" },
+    { "code": "Key5", "key": "5" },
+    { "code": "Key6", "key": "6" },
+  ],
+  [
+    { "code": "Key7", "key": "7" },
+    { "code": "Key8", "key": "8" },
+    { "code": "Key9", "key": "9" },
+  ],
+  [
+    { "code": "KeyNegative", "key": "-" },
+    { "code": "Key0", "key": "0" },
+    { "code": "KeyPoint", "key": "." },
+  ]
+];
+
+vk_r_panel_layout = [
+  [
+    { "code": "Backspace", "key": "Backspace",
+      "image-class": "vk-backspace-icon" },
+  ],
+  [
+    { "code": "Enter", "key": "Enter",
+      "height": 2.0, "image-class": "vk-enter-icon", },
+  ],
+  [
+    { "code": "Abort", "key": "Escape",
+      "image-class": "vk-escape-icon", "action": vk_hide },
+  ],
+];
+
+vk_layouts = {
+  "en-us-compact": {
+    "levels": [
+      [
+        // Level 0: Unshifted.
+        [
+          { "code": "KeyQ", "key": "q" },
+          { "code": "KeyW", "key": "w" },
+          { "code": "KeyE", "key": "e" },
+          { "code": "KeyR", "key": "r" },
+          { "code": "KeyT", "key": "t" },
+          { "code": "KeyY", "key": "y" },
+          { "code": "KeyU", "key": "u" },
+          { "code": "KeyI", "key": "i" },
+          { "code": "KeyO", "key": "o" },
+          { "code": "KeyP", "key": "p" },
+        ],
+        [
+          { "width": 0.5, "display": "spacer" },
+          { "code": "KeyA", "key": "a" },
+          { "code": "KeyS", "key": "s" },
+          { "code": "KeyD", "key": "d" },
+          { "code": "KeyF", "key": "f" },
+          { "code": "KeyG", "key": "g" },
+          { "code": "KeyH", "key": "h" },
+          { "code": "KeyJ", "key": "j" },
+          { "code": "KeyK", "key": "k" },
+          { "code": "KeyL", "key": "l" },
+        ],
+        [
+          { "code": "ShiftLeft", "key": "Shift",
+            "image-class": "vk-shift-icon", "action": vk_level, "level": 1 },
+          { "code": "KeyZ", "key": "z" },
+          { "code": "KeyX", "key": "x" },
+          { "code": "KeyC", "key": "c" },
+          { "code": "KeyV", "key": "v" },
+          { "code": "KeyB", "key": "b" },
+          { "code": "KeyN", "key": "n" },
+          { "code": "KeyM", "key": "m" },
+          { "code": "", "key": "!" },
+          { "code": "", "key": "?" },
+        ],
+        [
+          { "code": "AltRight", "key": "AltGraph", "text": "=\\<",
+            "action": vk_level, "level": 2 },
+          { "code": "Slash", "key": "/" },
+          { "code": "Space", "key": " ",
+            "width": 6.00, "image-class": "vk-space-icon" },
+          { "code": "Comma", "key": "," },
+          { "code": "Period", "key": "." },
+        ]
+      ],
+      [
+        // Level 1: Shifted.
+        [
+          { "code": "KeyQ", "key": "Q" },
+          { "code": "KeyW", "key": "W" },
+          { "code": "KeyE", "key": "E" },
+          { "code": "KeyR", "key": "R" },
+          { "code": "KeyT", "key": "T" },
+          { "code": "KeyY", "key": "Y" },
+          { "code": "KeyU", "key": "U" },
+          { "code": "KeyI", "key": "I" },
+          { "code": "KeyO", "key": "O" },
+          { "code": "KeyP", "key": "P" },
+        ],
+        [
+          { "width": 0.5, "display": "spacer" },
+          { "code": "KeyA", "key": "A" },
+          { "code": "KeyS", "key": "S" },
+          { "code": "KeyD", "key": "D" },
+          { "code": "KeyF", "key": "F" },
+          { "code": "KeyG", "key": "G" },
+          { "code": "KeyH", "key": "H" },
+          { "code": "KeyJ", "key": "J" },
+          { "code": "KeyK", "key": "K" },
+          { "code": "KeyL", "key": "L" },
+        ],
+        [
+          { "code": "ShiftLeft", "key": "Shift",
+            "image-class": "vk-shift-icon",
+            "action": vk_level, "level": 0, "up_action": vk_level0 },
+          { "code": "KeyZ", "key": "Z" },
+          { "code": "KeyX", "key": "X" },
+          { "code": "KeyC", "key": "C" },
+          { "code": "KeyV", "key": "V" },
+          { "code": "KeyB", "key": "B" },
+          { "code": "KeyN", "key": "N" },
+          { "code": "KeyM", "key": "M" },
+          { "code": "", "key": "!" },
+          { "code": "", "key": "?" },
+        ],
+        [
+          { "code": "AltRight", "key": "AltGraph", "text": "=\\<",
+            "action": vk_level, "level": 2 },
+          { "code": "Slash", "key": "/" },
+          { "code": "Space", "key": " ",
+            "width": 6.00, "image-class": "vk-space-icon" },
+          { "code": "Comma", "key": "," },
+          { "code": "Period", "key": "." },
+        ]
+      ],
+      [
+        // Level 2: Symbols.
+        [
+          { "code": "KeyQ", "key": "!" },
+          { "code": "KeyW", "key": "@" },
+          { "code": "KeyE", "key": "#" },
+          { "code": "KeyR", "key": "$" },
+          { "code": "KeyT", "key": "%" },
+          { "code": "KeyY", "key": "^" },
+          { "code": "KeyU", "key": "&" },
+          { "code": "KeyI", "key": "*" },
+          { "code": "KeyO", "key": "(" },
+          { "code": "KeyP", "key": ")" },
+        ],
+        [
+          { "width": 0.5, "display": "spacer" },
+          { "code": "KeyA", "key": "~" },
+          { "code": "KeyS", "key": "`" },
+          { "code": "KeyD", "key": "|" },
+          { "code": "KeyF", "key": "{" },
+          { "code": "KeyG", "key": "}" },
+          { "code": "KeyH", "key": "[" },
+          { "code": "KeyJ", "key": "]" },
+          { "code": "KeyK", "key": "-" },
+          { "code": "KeyL", "key": "_" },
+        ],
+        [
+          { "code": "ShiftLeft", "key": "/" },
+          { "code": "KeyZ", "key": "\\" },
+          { "code": "KeyX", "key": "+" },
+          { "code": "KeyC", "key": "=" },
+          { "code": "KeyV", "key": ":" },
+          { "code": "KeyB", "key": ":" },
+          { "code": "KeyN", "key": "'" },
+          { "code": "KeyM", "key": "<" },
+          { "key": ">" },
+          { "key": "\"" },
+        ],
+        [
+          { "code": "AltRight", "key": "AltGraph", "text": "ABC",
+            "action": vk_level, "level": 0, "up_action": vk_level0 },
+          { "code": "Slash", "key": "/" },
+          { "code": "Space", "key": " ",
+            "width": 6.00, "image-class": "vk-space-icon" },
+          { "code": "Comma", "key": "," },
+          { "code": "Period", "key": "." },
+        ]
+      ] 
+    ]
+  }
+};
+
+vk_button_size = [64, 64, "px"];
+
+vk_state = {
+  "query": { "language": "en-us", "layout": "compact" }
+};
+
+function vk_hide(button) {
+  if (chrome && chrome.virtualKeyboardPrivate)
+    chrome.virtualKeyboardPrivate.hideKeyboard();
+  else
+    console.log('hide keyboard');
+}
+
+function vk_level(button) {
+  vk_ch(button);
+  vk_activate_level(button.level);
+}
+
+function vk_level0(button) {
+  vk_ch(button);
+  vk_activate_level(0);
+}
+
+function vk_ch(button) {
+  if (button.key || button.code) {
+    console.log('Keyboard click: ' + performance.now());
+    document.querySelector("#omnibox-input-field").focus();
+    sendKey('key', button.code, button.key);
+    if (vk_state.level == 1)
+      vk_activate_level(0);
+    console.log('Done keyboard click: ' + performance.now());
+  }
+}
+
+function vk_ignore(button) {
+}
+
+function vk_onclick(e) {
+  console.log('click: ' + window.performance.now());
+  var button = e.vk_button_data;
+  button.action(button);
+}
+
+function vk_activate_level(n) {
+  vk_state.view.classList.remove("inputview-active-level-" + vk_state.level);
+  vk_state.level = n;
+  vk_state.view.classList.add("inputview-active-level-" + vk_state.level);
+}
+
+function vk_normalize_button_data(button_data) {
+  if (typeof button_data == "string") {
+    button_data = {"key": button_data, "code": ""};
+  }
+  if (!button_data.hasOwnProperty("text")) {
+    if (button_data.hasOwnProperty("key") && !button_data.hasOwnProperty("image-class"))
+      button_data.text = button_data.key;
+    else
+      button_data.text = null;
+  }
+  if (!button_data.hasOwnProperty("action")) {
+    button_data.action = vk_ch;
+  }
+  if (!button_data.hasOwnProperty("width")) {
+      button_data.width = 1.00;
+  }
+  if (!button_data.hasOwnProperty("height")) {
+      button_data.height = 1.00;
+  }
+
+  if (button_data.hasOwnProperty("display")) {
+    button_data.display = "inputview-sk-" + button_data.display;
+  } else if (button_data.hasOwnProperty("image-class")) {
+    button_data.display = "inputview-sk-0";
+  } else if (button_data.hasOwnProperty("text")) {
+    button_data.display = "inputview-sk-1";
+  } else {
+    button_data.display = "inputview-sk-none";
+  }
+  button_data.style_width = (button_data.width * vk_button_size[0]) + vk_button_size[2];
+  button_data.style_height = (button_data.height  * vk_button_size[1]) + vk_button_size[2];
+  return button_data;
+}
+
+function vk_mk_button(index, button_data) {
+  var b = document.createElement("div");
+
+  button_data = vk_normalize_button_data(button_data);
+  b.vk_button_data = button_data
+  b.classList.add("inputview-skv");
+  b.style.width = button_data.style_width;
+  b.style.height = button_data.style_height;
+  b.onclick = (function f(x) { return function() { vk_onclick(x); }; })(b);
+
+  var k = document.createElement("div");
+  k.classList.add("inputview-sk");
+  k.classList.add(button_data.display);
+  if (b.vk_button_data.hasOwnProperty("code"))
+    k.classList.add("inputview-code-" + button_data.code);
+  var c = k;
+  if (b.vk_button_data.hasOwnProperty("image-class")) {
+    c = document.createElement("div");
+    c.classList.add(b.vk_button_data["image-class"]);
+    k.appendChild(c);
+  }
+  if (b.vk_button_data.hasOwnProperty("class")) {
+    c.classList.add(b.vk_button_data.class);
+  }
+
+  if (button_data.text) {
+    var l = document.createElement("div");
+    l.classList.add("inputview-ch");
+    l.innerHTML = button_data.text;
+    c.appendChild(l);
+  }
+
+  b.appendChild(k);
+  return b;
+}
+
+function vk_mk_row(index, row_data) {
+  var row = document.createElement("div");
+  row.id = "row" + index;
+  row.classList.add("inputview-row");
+  for (var c = 0; c < row_data.length; ++c)
+    row.appendChild(vk_mk_button(c, row_data[c]));
+  return row;
+}
+
+function vk_mk_level(index, level_data) {
+  var level = document.createElement("div");
+  level.id = "level" + index;
+  level.classList.add("inputview-level");
+  level.classList.add("inputview-level-" + index);
+  for (var r = 0; r < level_data.length; ++r)
+    level.appendChild(vk_mk_row(r, level_data[r]));
+  return level;
+}
+
+function vk_mk_kb(view, layout) {
+  vk_state.view = view;
+  vk_state.layout = layout;
+  vk_state.levels = layout.levels.length;
+  if (!layout.hasOwnProperty("caps"))
+    layout.caps = false;
+  for (var k = 0; k < layout.levels.length; ++k)
+    view.appendChild(vk_mk_level(k, vk_state.layout.levels[k]));
+}
+
+function vk_mk_panel(view, l_panel_data) {
+  //var level = document.createElement("div");
+  //level.id = "left0";
+  //level.classList.add("inputview-level");
+  for (var r = 0; r < l_panel_data.length; ++r)
+    view.appendChild(vk_mk_row(r, l_panel_data[r]));
+  //view.appendChild(level);
+}
+
+function vk_onload() {
+  var q = window.location.search.substring(1).split("&");
+  for (var i = 0; i < q.length; ++i) {
+    var qv = q[i].split('=');
+    if (qv.length == 2) {
+      vk_state.query[qv[0]] = decodeURIComponent(qv[1]);
+    }
+  }
+
+  // Build keyboard.
+  vk_state.layout_name = vk_state.query.language + "-" + vk_state.query.layout;
+  console.log('Hey');
+  vk_mk_kb(document.getElementById("keyboardView"),
+           vk_layouts[vk_state.layout_name]);
+  console.log('Hey');
+  vk_mk_panel(document.getElementById("numberView"),
+           vk_l_panel_layout);
+  vk_mk_panel(document.getElementById("specialkeyView"),
+           vk_r_panel_layout);
+
+  vk_activate_level(0);
+
+}
+
+
+function inputHandler() {
+  var el = document.querySelector("#my_input");
+  //selStart = el.selectionStart;
+  //selEnd = el.selectionEnd;
+}
+
+document.addEventListener('DOMContentLoaded', vk_onload);
+
+
+function vk_ui_keystroke_handler(event) {
+  // If the event |code| matches a code on the current virtual keyboard layout,
+  // activate its button.
+  var level_map = vk_state.layout.levels[vk_state.level];
+  for (var row = 0; row < level_map.length; ++row) {
+    for (var col = 0; col < level_map[row].length; ++col) {
+      var button = level_map[row][col];
+      if (button.hasOwnProperty("code") && button["code"] == event.code) {
+        if (event.type == 'keydown') {
+          button.action(button);
+        } else if (event.type == 'keyup' &&
+                   button.hasOwnProperty("up_action")) {
+          button.up_action(button);
+        }
+        return;
+      }
+    }
+  }
+  // Otherwise, forward the event.
+  sendKeyEvent(event.type, dom_key_value(event.key), event.keyCode, event.code,
+               ui_event_to_modifiers(event));
+}
+
+/////// Chrome API ///////////////////////////////////////////////////////////
+
+// Flag values for ctrl, alt and shift as defined by EventFlags
+// in "event_constants.h".
+// @enum {number}
+var Modifier = {
+  NONE: 0,
+  ALT: 8,
+  CONTROL: 4,
+  SHIFT: 2
+};
+
+function ui_event_to_modifiers(event) {
+  var modifiers = 0;
+  if (event.altKey)
+    modifiers |= Modifier.ALT;
+  if (event.ctrlKey)
+    modifiers |= Modifier.CTRL;
+  if (event.shiftKey)
+    modifiers |= Modifier.SHIFT;
+  return modifiers;
+}
+
+dom_keys = {
+  "Backspace":    0x08,
+  "Enter":        0x0D,
+  "Escape":       0x1B,
+  "AltGraph":     0x200103,
+//  "ShiftLevel5":  0x200111,
+};
+
+function dom_key_value(key) {
+  if (key) {
+    if (typeof(key) == "number")
+      return key;
+    if (key.length == 1)
+      return key.charCodeAt(0);
+    if (dom_keys.hasOwnProperty(key))
+      return dom_keys[key];
+  }
+  return 0;
+}
+
+/**
+  * Displays a console message containing the last runtime error.
+  * @private
+  */
+function logIfError_() {
+  if (chrome.runtime.lastError) {
+    console.log(chrome.runtime.lastError);
+  }
+}
+
+function commitText_(text) {
+  chrome.virtualKeyboardPrivate.insertText(text, logIfError_);
+}
+
+function sendKey(type, code, key) {
+  sendKeyEvent(type, dom_key_value(key), 0, code, 0);
+}
+
+/**
+  * Dispatches a virtual key event. The system VK does not use the IME
+  * API as its primary role is to work in conjunction with a non-VK aware
+  * IME. Some reformatting of the key data is required to work with the
+  * virtualKeyboardPrivate API.
+  * @param {!Object} keyData Description of the key event.
+  */
+function sendKeyEvent(type, ch, vk, code, modifiers) {
+  var event = {
+    type: type,
+    charValue: ch,
+    keyCode: vk,
+    keyName: code,
+    modifiers: modifiers
+  };
+      //chrome.virtualKeyboardPrivate.sendKeyEvent(event, logIfError_);
+  console.log('KEY: t: ' + type + ' ch: ' +ch + ' kc: ' + vk +' kn: '+ code+ ' m: ' + modifiers);
+  api.doAction(api.Action.KEY_EVENT, event);
+}
+