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 119 matching lines @@
                                        escapeForHtml(command.data) +
                                        '</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);
-
-      for (var i = 0; i < groups.length; i++) {
-        var topCell = row1.insertCell(-1);
-        var bottomCell = row2.insertCell(-1);
-        topCell.innerHTML = groups[i][0];
-        bottomCell.innerHTML = groups[i][1];
-      }
-
+      Panel.onUpdateBraille(command.data);
       break;
     case PanelCommandType.ENABLE_MENUS:
       Panel.onEnableMenus();
       break;
     case PanelCommandType.DISABLE_MENUS:
       Panel.onDisableMenus();
       break;
     case PanelCommandType.OPEN_MENUS:
       Panel.onOpenMenus(undefined, command.data);
       break;
@@ skipping 197 matching lines @@
   $('menu-bar').appendChild(menu.menuBarItemElement);
   menu.menuBarItemElement.addEventListener('mouseover', function() {
     Panel.activateMenu(menu);
   }, false);
 
   $('menus_background').appendChild(menu.menuContainerElement);
   this.menus_.push(menu);
   return menu;
 };
 
+/**
+ * Updates the content shown on the virtual braille display.
+ * @param {*=} data The data sent through the PanelCommand.
+ */
+Panel.onUpdateBraille = function(data) {

[dmazzoni, 2016/10/28 20:19:18]

Note that you'll also need to edit
cvox.BrailleCaptionsBackground.getVirtualDisplayState and have it use this
virtual braille size, but that can come in the next change.

[ultimatedbz, 2016/10/28 23:51:43]

Acknowledged.

+      var groups = data.groups;

[dmazzoni, 2016/10/28 20:19:18]

Fix indentation here

[ultimatedbz, 2016/10/28 23:51:43]

Done.

+      var cols = parseInt(localStorage['virtualBrailleColumns'], 10);
+      var rows = parseInt(localStorage['virtualBrailleRows'], 10);
+      var sideBySide = localStorage['brailleSideBySide'] === 'true';
+
+      var addBorders = function(event) {
+        var cell = event.target;
+        if (cell.tagName == 'TD') {
+          cell.className = 'highlighted-cell';
+          var companionID = cell.getAttribute('companionID');
+          var companion = $(companionID);
+          companion.className = 'highlighted-cell';
+

[dmazzoni, 2016/10/28 20:19:18]

No blank line

[ultimatedbz, 2016/10/28 23:51:43]

Done.

+        }
+      };
+
+      var removeBorders = function(event) {
+        var cell = event.target;
+        if (cell.tagName == 'TD') {
+          cell.className = 'unhighlighted-cell';
+          var companionID = cell.getAttribute('companionID');
+          var companion = $(companionID);
+          companion.className = 'unhighlighted-cell';
+        }
+      };
+
+      this.brailleContainer_.addEventListener('mouseover', addBorders);
+      this.brailleContainer_.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 = '80%';
+        topCell.className = 'unhighlighted-cell';
+
+        var bottomCell = row2.insertCell(-1);
+        bottomCell.innerHTML = groups[i][1];
+        bottomCell.id = i + '-brailleCell';
+        bottomCell.setAttribute('companionID', i + '-textCell');
+        bottomCell.className = 'unhighlighted-cell';
+      }
+};
+
+
 
 /**
  * Create a new node menu with the given name and add it to the menu bar.
  * @param {string} menuMsg The msg id of the new menu to add.
  * @param {chrome.automation.AutomationNode} node
  * @param {AutomationPredicate.Unary} pred
  * @return {PanelMenu} The menu just created.
  */
 Panel.addNodeMenu = function(menuMsg, node, pred) {
   var menu = new PanelNodeMenu(menuMsg, node, pred);
@@ skipping 274 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);