Support multi-line braille in the virtual braille display.

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

 // 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 The ChromeVox panel and menus.
  */
 
 goog.provide('Panel');
 
@@ skipping 27 matching lines @@
   this.brailleContainer_ = $('braille-container');
 
   /** @type {Element} @private */
   this.searchContainer_ = $('search-container');
 
   /** @type {Element} @private */
   this.searchInput_ = $('search');
 
   /** @type {Element} @private */
   this.brailleTableElement_ = $('braille-table');
+  this.brailleTableElement2_ = $('braille-table2');
 
   /**
    * The array of top-level menus.
    * @type {!Array<PanelMenu>}
    * @private
    */
   this.menus_ = [];
 
   /**
    * The currently active menu, if any.
@@ skipping 120 matching lines @@
                                        '</span>';
       break;
     case PanelCommandType.ADD_ANNOTATION_SPEECH:
       if (this.speechElement_.innerHTML != '') {
         this.speechElement_.innerHTML += '&nbsp;&nbsp;';
       }
       this.speechElement_.innerHTML += escapeForHtml(command.data);
       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);
+        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);
-        topCell.innerHTML = groups[i][0];
         bottomCell.innerHTML = groups[i][1];
+        bottomCell.id = i + '-brailleCell';
+        bottomCell.setAttribute('companionID', i + '-textCell');
       }
 
       break;
     case PanelCommandType.ENABLE_MENUS:
       Panel.onEnableMenus();
       break;
     case PanelCommandType.DISABLE_MENUS:
       Panel.onDisableMenus();
       break;
     case PanelCommandType.OPEN_MENUS:
@@ skipping 493 matching lines @@
 }, false);
 
 window.addEventListener('hashchange', function() {
   if (location.hash == '#fullscreen' || location.hash == '#focus') {
     this.originalStickyState_ = cvox.ChromeVox.isStickyPrefOn;
     cvox.ChromeVox.isStickyPrefOn = false;
   } else {
     cvox.ChromeVox.isStickyPrefOn = this.originalStickyState_;
   }
 }, false);