Support multi-line braille in the virtual braille display.

chrome/browser/resources/chromeos/chromevox/chromevox/background/options.js

Index: chrome/browser/resources/chromeos/chromevox/chromevox/background/options.js
diff --git a/chrome/browser/resources/chromeos/chromevox/chromevox/background/options.js b/chrome/browser/resources/chromeos/chromevox/chromevox/background/options.js
index f4e2e0ceffd829321ab5dbd11e33eae9d834a0a9..0ec41eb34e2059c646cbc18d1fd63e3f78c85a29 100644
--- a/chrome/browser/resources/chromeos/chromevox/chromevox/background/options.js
+++ b/chrome/browser/resources/chromeos/chromevox/chromevox/background/options.js
@@ -10,6 +10,7 @@
 goog.provide('cvox.OptionsPage');
 
 goog.require('Msgs');
+goog.require('PanelCommand');
 goog.require('cvox.BrailleTable');
 goog.require('cvox.BrailleTranslatorManager');
 goog.require('cvox.ChromeEarcons');
@@ -71,6 +72,26 @@ cvox.OptionsPage.init = function() {
     $('brailleWordWrap').checked = items.brailleWordWrap;
   });
 
+  $('virtual_braille_display_rows_input').value =
+      localStorage['virtualBrailleRows'];
+  $('virtual_braille_display_columns_input').value =
+      localStorage['virtualBrailleColumns'];
+  var changeToInterleave =
+      Msgs.getMsg('options_change_current_display_style_interleave');
+  var changeToSideBySide =
+      Msgs.getMsg('options_change_current_display_style_side_by_side');
+  var currentlyDisplayingInterleave =
+      Msgs.getMsg('options_current_display_style_interleave');
+  var currentlyDisplayingSideBySide =
+      Msgs.getMsg('options_current_display_style_side_by_side');
+  $('changeDisplayStyle').textContent =
+      localStorage['brailleSideBySide'] === 'true' ?
+      changeToInterleave : changeToSideBySide;
+  $('currentDisplayStyle').textContent =
+      localStorage['brailleSideBySide'] === 'true' ?
+      currentlyDisplayingSideBySide : currentlyDisplayingInterleave;
+
+
   Msgs.addTranslatedMessagesToDom(document);
   cvox.OptionsPage.hidePlatformSpecifics();
 
@@ -93,6 +114,33 @@ cvox.OptionsPage.init = function() {
     $('version').textContent =
         chrome.app.getDetails().version;
   }
+
+  var clearVirtualDisplay = function() {
+    var groups = [];
+    var sizeOfDisplay = parseInt(localStorage['virtualBrailleRows'], 10) *
+        parseInt(localStorage['virtualBrailleColumns'], 10);
+    for (var i = 0; i < sizeOfDisplay; i++) {
+        groups.push(['X', 'X']);
+    }
+    (new PanelCommand(PanelCommandType.UPDATE_BRAILLE,
+                      {groups: groups})).send();
+  };
+
+  $('changeDisplayStyle').addEventListener('click', function(evt) {
+    var sideBySide = localStorage['brailleSideBySide'] !== 'true';
+    localStorage['brailleSideBySide'] = sideBySide;
+    $('changeDisplayStyle').textContent =
+        sideBySide ? changeToInterleave : changeToSideBySide;
+    $('currentDisplayStyle').textContent =
+        sideBySide ? currentlyDisplayingSideBySide :
+        currentlyDisplayingInterleave;
+    clearVirtualDisplay();
+  }, true);
+
+  handleNumbericalInputPref('virtual_braille_display_rows_input',
+      'virtualBrailleRows');
+  handleNumbericalInputPref('virtual_braille_display_columns_input',
+      'virtualBrailleColumns');
 };
 
 /**
@@ -111,6 +159,28 @@ cvox.OptionsPage.update = function() {
     }
   }
 };
+/**
+ * Adds event listeners to input boxes to update local storage values and
+ * make sure that the input is a positive nonempty number between 1 and 99.
+ * @param {string} id Id of the input box.
+ * @param {string} pref Preference key in localStorage to access and modify.
+ */
+var handleNumbericalInputPref = function(id, pref) {
+  $(id).addEventListener('input', function(evt) {
+    if ($(id).value === '')
+      return;

[dmazzoni, 2016/10/31 20:03:44]

nit: Need braces throughout this if/else

[ultimatedbz, 2016/10/31 20:05:57]

What if I bring line 173 up to line 172 so the whole else/if is only one line,
assuming that it fits?

[dmazzoni, 2016/10/31 20:55:41]

If it fits, that's fine. If anything wraps then uses braces for everything.

[ultimatedbz, 2016/10/31 20:57:15]

Gotcha!

+    else if (parseInt($(id).value, 10) < 1 ||
+        parseInt($(id).value, 10) > 99)
+      $(id).value = localStorage[pref];
+    else
+      localStorage[pref] = $(id).value;
+  }, true);
+
+  $(id).addEventListener('focusout', function(evt) {
+    if ($(id).value === '')
+      $(id).value = localStorage[pref];
+  }, true);
+};
 
 /**
  * Populate the keymap select element with stored keymaps