Add ChromeVox panel and implement caption display functionality.

chrome/browser/resources/chromeos/chromevox/cvox2/background/panel.js

Index: chrome/browser/resources/chromeos/chromevox/cvox2/background/panel.js
diff --git a/chrome/browser/resources/chromeos/chromevox/cvox2/background/panel.js b/chrome/browser/resources/chromeos/chromevox/cvox2/background/panel.js
new file mode 100644
index 0000000000000000000000000000000000000000..90f9076e906400b80996d06402abcb0f7c8e10e0
--- /dev/null
+++ b/chrome/browser/resources/chromeos/chromevox/cvox2/background/panel.js
@@ -0,0 +1,132 @@
+// Copyright 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.
+
+/**
+ * @fileoverview ChromeVox panel.
+ *
+ */
+
+goog.provide('Panel');
+
+goog.require('PanelCommand');
+goog.require('cvox.ChromeVox');
+goog.require('cvox.ExtensionBridge');

[Peter Lundblad, 2015/11/06 15:00:58]

Do you need to pull in this and the above?

[dmazzoni, 2015/11/06 21:01:00]

ExtensionBridge isn't needed.

cvox.ChromeVox is where we define $(), because Chrome's JS linting complains if
we use document.getElementById.

+
+/**
+ * Class to manage the panel.
+ * @constructor
+ */
+Panel = function() {
+};
+
+/**
+ * Initialize the panel.
+ */
+Panel.init = function() {
+  /** @type {Element} @private */
+  this.speechContainer_ = $('speech-container');
+
+  /** @type {Element} @private*/

[Peter Lundblad, 2015/11/06 15:00:58]

nit: missing space after @private

[dmazzoni, 2015/11/06 21:01:00]

Done.

+  this.speechElement_ = $('speech');
+
+  /** @type {Element} @private*/

[Peter Lundblad, 2015/11/06 15:00:58]

nit: missing space after @private

[dmazzoni, 2015/11/06 21:01:01]

Done.

+  this.brailleContainer_ = $('braille-container');
+
+  /** @type {Element} @private*/
+  this.brailleTextElement_ = $('braille-text');
+
+  /** @type {Element} @private*/
+  this.brailleCellsElement_ = $('braille-cells');
+
+  Panel.updateFromPrefs();
+  window.addEventListener('storage', function(event) {
+    if (event.key == 'brailleCaptions') {
+      Panel.updateFromPrefs();
+    }
+  }, false);
+
+  window.addEventListener('message', function(message) {
+    var command = JSON.parse(message.data);
+    Panel.exec(/** @type {PanelCommand} */(command));
+  }, false);
+
+  $('menu').addEventListener('click', Panel.onMenu, false);
+  $('options').addEventListener('click', Panel.onOptions, false);
+  $('close').addEventListener('click', Panel.onClose, false);
+};

[Peter Lundblad, 2015/11/06 15:00:58]

Do you need an Msgs.addTranslatedMessagesToDom somewhere here?

[dmazzoni, 2015/11/06 21:01:00]

Yes. Done and tested.

+
+/**
+ * Update the display based on prefs.
+ */
+Panel.updateFromPrefs = function() {
+  if (localStorage['brailleCaptions'] === String(true)) {
+    this.speechContainer_.style.visibility = 'hidden';
+    this.brailleContainer_.style.visibility = 'visible';
+  } else {
+    this.speechContainer_.style.visibility = 'visible';
+    this.brailleContainer_.style.visibility = 'hidden';
+  }
+};
+
+/**
+ * Execute a command to update the panel.
+ *
+ * @param {PanelCommand} command The command to execute.
+ */
+Panel.exec = function(command) {
+  switch (command.type) {
+    case PanelCommandType.CLEAR_SPEECH:
+      this.speechElement_.innerHTML = '';
+      break;
+    case PanelCommandType.ADD_NORMAL_SPEECH:
+      if (this.speechElement_.innerHTML != '') {
+        this.speechElement_.innerHTML += '  ';
+      }
+      this.speechElement_.innerHTML += '<span class="usertext">' +
+                                       command.data +

[Peter Lundblad, 2015/11/06 15:00:58]

Where is this & and < escaped?

[dmazzoni, 2015/11/06 21:01:01]

Good catch.

+                                       '</span>';
+      break;
+    case PanelCommandType.ADD_ANNOTATION_SPEECH:
+      if (this.speechElement_.innerHTML != '') {
+        this.speechElement_.innerHTML += '&nbsp;&nbsp;';
+      }
+      this.speechElement_.innerHTML += command.data;
+      break;
+    case PanelCommandType.UPDATE_BRAILLE_TEXT:
+      this.brailleTextElement_.textContent = command.data;

[Peter Lundblad, 2015/11/06 15:00:58]

Will this collapse whitespace? Perhaps this needs a whitespace style property
in the css.

[dmazzoni, 2015/11/06 21:01:00]

Good idea, done.

+      break;
+    case PanelCommandType.UPDATE_BRAILLE_CELLS:
+      this.brailleCellsElement_.textContent = command.data;
+      break;
+  }
+};
+
+/**
+ * Open the ChromeVox Menu.
+ */
+Panel.onMenu = function() {
+  window.location = '#fullscreen';
+  // TODO(dmazzoni): implement the menu UI here.
+};
+
+/**
+ * Open the ChromeVox Options.
+ */
+Panel.onOptions = function() {
+  var bkgnd =
+      chrome.extension.getBackgroundPage()['global']['backgroundObj'];
+  bkgnd['showOptionsPage']();
+  window.location = '#';
+};
+
+/**
+ * Exit ChromeVox.
+ */
+Panel.onClose = function() {
+  window.location = '#close';
+};
+
+window.addEventListener('load', function() {
+  Panel.init();
+}, false);