Support multi-line braille in the virtual braille display.

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
index f7a7a31030813a1df6d780912f83570afdd63aa0..bf06f6ef5c50e1010598c2600f5b01b21f9a7c16 100644
--- a/chrome/browser/resources/chromeos/chromevox/cvox2/background/panel.js
+++ b/chrome/browser/resources/chromeos/chromevox/cvox2/background/panel.js
@@ -45,6 +45,7 @@ Panel.init = function() {
 
   /** @type {Element} @private */
   this.brailleTableElement_ = $('braille-table');
+  this.brailleTableElement2_ = $('braille-table2');
 
   /**
    * The array of top-level menus.
@@ -185,16 +186,76 @@ Panel.exec = function(command) {
       break;
     case PanelCommandType.UPDATE_BRAILLE:
       var groups = command.data.groups;
-      this.brailleTableElement_.deleteRow(0);
-      this.brailleTableElement_.deleteRow(0);
-      var row1 = this.brailleTableElement_.insertRow(-1);
-      var row2 = this.brailleTableElement_.insertRow(-1);
+      var cols = parseInt(localStorage['virtualBrailleColumns'], 10);

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

Since this is more than a few lines of code I think it'd be more clear to move
it out of the switch/case. Have case PanelCommandType.UPDATE_BRAILLE: call
Panel.onUpdateBraille() or something like that, and put all of the logic in that
function.

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

Done.

+      var rows = parseInt(localStorage['virtualBrailleRows'], 10);
+      var sideBySide = localStorage['brailleSideBySide'] === 'true';
+
+      var addBorders = function(event) {
+        var cell = event.target;
+        if (cell.tagName == 'TD') {
+          cell.style.border = '1px solid white';

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

Use cell.addClass or cell.removeClass, and then have a CSS style that sets the
border

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

I had to use cell.className = '[className]';
Thanks!

+          var companionID = cell.getAttribute('companionID');
+          var companion = $(companionID);
+          companion.style.border = '1px solid white';
 
+        }
+      };
+
+      var removeBorders = function(event) {
+        var cell = event.target;
+        if (cell.tagName == 'TD') {
+          cell.style.border = '1px solid black';
+          var companionID = cell.getAttribute('companionID');
+          var companion = $(companionID);
+          companion.style.border = '1px solid black';
+        }
+      };
+
+      this.brailleTableElement_.addEventListener('mouseover', addBorders);

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

Not a big deal, but is there an element that's a parent of both tables that you
could put the event listeners on rather than
needing two of them? It'd probably work if you put the listener on document.body

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

Yes, I added the eventListener to brailleContainer.

+      this.brailleTableElement_.addEventListener('mouseout', removeBorders);
+

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

Remove extra blank line

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

Done.

+
+      this.brailleTableElement2_.addEventListener('mouseover', addBorders);
+      this.brailleTableElement2_.addEventListener('mouseout', removeBorders);
+
+      // Clear the tables.
+      var rowCount = this.brailleTableElement_.rows.length;
+      for (var i = 0; i < rowCount; i++) {
+        this.brailleTableElement_.deleteRow(0);
+      }
+      rowCount = this.brailleTableElement2_.rows.length;
+      for (var i = 0; i < rowCount; i++) {
+        this.brailleTableElement2_.deleteRow(0);
+      }
+
+      var row1, row2;
+      rowCount = 0;
       for (var i = 0; i < groups.length; i++) {
+        if (i % cols == 0) {
+          // Check if we reached the limit on the number of rows we can have.
+          if (rowCount == rows)
+            break;
+          rowCount++;
+          row1 = this.brailleTableElement_.insertRow(-1);
+          if (sideBySide) {
+            // Side by side.
+            row2 = this.brailleTableElement2_.insertRow(-1);
+          } else {
+            // Interleaved.
+            row2 = this.brailleTableElement_.insertRow(-1);
+          }
+        }
+
         var topCell = row1.insertCell(-1);
-        var bottomCell = row2.insertCell(-1);
         topCell.innerHTML = groups[i][0];
+        topCell.id = i + '-textCell';
+        topCell.setAttribute('companionID', i + '-brailleCell');
+        topCell.style.fontSize = '85%';

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

Use panel.css for this

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

Do we still want to show regular letters at size '85%'? The original motivation
for doing so was so that when interleaved, the braille cells and text characters
would both completely show within the bounds of the virtual braille display.
Since we're already going to be expanding the height of the virtual braille
display, would we still want to do this?

+
+        var bottomCell = row2.insertCell(-1);
         bottomCell.innerHTML = groups[i][1];
+        bottomCell.id = i + '-brailleCell';
+        bottomCell.setAttribute('companionID', i + '-textCell');
       }
 
       break;