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..88b15b118c755bd1caff9f078912af466839ecb1 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,66 @@ 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);

[dmazzoni, 2016/10/28 06:19:29]

indentation

[ultimatedbz, 2016/10/28 18:45:35]

Done.

+
+  $('virtual_braille_display_rows_input').addEventListener('input',
+      function(evt) {
+    if ($('virtual_braille_display_rows_input').value === '')

[dmazzoni, 2016/10/28 06:19:29]

Put braces around all of the blocks because at least one of them below needs
multiple lines

[ultimatedbz, 2016/10/28 18:45:35]

The code after it was moved to the helper function no longer needed multiple
lines so I didn't add braces. Please check if it's okay.

+      return;
+    else if (parseInt($('virtual_braille_display_rows_input').value, 10) < 1)
+      $('virtual_braille_display_rows_input').value =
+          localStorage['virtualBrailleRows'];
+    else
+      localStorage['virtualBrailleRows'] =
+          $('virtual_braille_display_rows_input').value;
+  }, true);
+
+  $('virtual_braille_display_rows_input').addEventListener('focusout',
+      function(evt) {
+    if ($('virtual_braille_display_rows_input').value === '')
+      $('virtual_braille_display_rows_input').value =

[dmazzoni, 2016/10/28 06:19:29]

Same here, braces needed

[ultimatedbz, 2016/10/28 18:45:35]

Done.

+          localStorage['virtualBrailleRows'];
+  }, true);
+
+  $('virtual_braille_display_columns_input').
+      addEventListener('input', function(evt) {

[dmazzoni, 2016/10/28 06:19:29]

put addEventListener( on the previous line and wrap before 'input' or before
function

[ultimatedbz, 2016/10/28 18:45:35]

Done.

+    if ($('virtual_braille_display_columns_input').value === '')

[dmazzoni, 2016/10/28 06:19:29]

Do you need to handle the empty string separately? What does parseInt return?

[ultimatedbz, 2016/10/28 18:45:35]

I believe so. I just checked in the console and parseInt('') would return NaN.

+      return;
+    else if (parseInt($('virtual_braille_display_columns_input').value, 10) < 1)
+      $('virtual_braille_display_columns_input').value =
+          localStorage['virtualBrailleColumns'];
+    else
+      localStorage['virtualBrailleColumns'] =
+          $('virtual_braille_display_columns_input').value;
+  }, true);
+
+  $('virtual_braille_display_columns_input').

[dmazzoni, 2016/10/28 06:19:29]

Can you cut down on code duplication by writing a helper function
handleNumericalInputPref() or something like that, taking these parameters:

* The id of the input element
* The name of the localStorage pref

I believe the rows and columns are basically the same code except for those
two variables, right?

[ultimatedbz, 2016/10/28 18:45:35]

Wow, I got rid of so much duplicated code!

+      addEventListener('focusout', function(evt) {
+    if ($('virtual_braille_display_columns_input').value === '')
+      $('virtual_braille_display_columns_input').value =
+          localStorage['virtualBrailleColumns'];
+  }, true);
 };
 
 /**