Fix bug where |i| was reused in a nested loop.

chrome/browser/resources/history/other_devices.js

 // Copyright (c) 2013 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 section of the history page that shows tabs from sessions
                  on other devices.
  */
 
 ///////////////////////////////////////////////////////////////////////////////
@@ skipping 149 matching lines @@
 // Device, Public: ------------------------------------------------------------
 
 /**
  * Get the DOM node to display this device.
  * @param {int} maxNumTabs The maximum number of tabs to display.
  * @param {int} row The row in which this device is displayed.
  * @return {Object} A DOM node to draw the device.
  */
 Device.prototype.getDOMNode = function(maxNumTabs, row) {
   var deviceDiv = createElementWithClassName('div', 'device');
+  this.focusGrid_ = new cr.ui.FocusGrid();
   this.row_ = row;
   if (!this.session_)
     return deviceDiv;
 
   // Name heading
   var heading = document.createElement('h3');
   var name = heading.appendChild(
       createElementWithClassName('span', 'device-name'));
   name.textContent = this.session_.name;
   heading.sessionData_ = this.session_;
@@ skipping 57 matching lines @@
 
 // Device, Private ------------------------------------------------------------
 
 /**
  * Create the DOM tree representing the tabs and windows of this device.
  * @param {int} maxNumTabs The maximum number of tabs to display.
  * @return {Element} A single div containing the list of tabs & windows.
  * @private
  */
 Device.prototype.createSessionContents_ = function(maxNumTabs) {
-  var contents = createElementWithClassName('ol', 'device-contents');
+  var contents = createElementWithClassName('div', '');
+
+  // |list| will be used as the boundary for the DevicesViewFocusRows.
+  var list = createElementWithClassName('ol', 'device-contents');
+  contents.appendChild(list);
 
   var sessionTag = this.session_.tag;
   var numTabsShown = 0;
   var numTabsHidden = 0;
   for (var i = 0; i < this.session_.windows.length; i++) {
     var win = this.session_.windows[i];
     if (win.hidden)
       continue;
 
     // Show a separator between multiple windows in the same session.
     if (i > 0 && numTabsShown < maxNumTabs)
-      contents.appendChild(document.createElement('hr'));
+      list.appendChild(document.createElement('hr'));
 
     for (var j = 0; j < win.tabs.length; j++) {
       var tab = win.tabs[j];
       if (tab.hidden)
         continue;
 
       if (numTabsShown < maxNumTabs) {
         numTabsShown++;
         var a = createElementWithClassName('a', 'device-tab-entry');
         a.href = tab.url;
@@ skipping 10 matching lines @@
           return function(e) {
             recordUmaEvent_(HISTOGRAM_EVENT.LINK_CLICKED);
             chrome.send('openForeignSession', [sessionTag, windowId, tabId,
                 e.button, e.altKey, e.ctrlKey, e.metaKey, e.shiftKey]);
             e.preventDefault();
           };
         };
         a.addEventListener('click', makeClickHandler(sessionTag,
                                                      String(win.sessionId),
                                                      String(tab.sessionId)));
-        contents.appendChild(a);
+        list.appendChild(a);
+        DevicesViewFocusRow.decorate(a, list);
+        this.focusGrid_.addRow(a);
       } else {
         numTabsHidden++;
       }
     }
   }
 
   if (numTabsHidden > 0) {
     var moreLink = document.createElement('a', 'action-link');
     moreLink.classList.add('device-show-more-tabs');
     moreLink.addEventListener('click', this.view_.increaseRowHeight.bind(
@@ skipping 44 matching lines @@
 
 /**
  * Functions and state for populating the page with HTML.
  * @constructor
  */
 function DevicesView() {
   this.devices_ = [];  // List of individual devices.
   this.resultDiv_ = $('other-devices');
   this.searchText_ = '';
   this.rowHeights_ = [NB_ENTRIES_FIRST_ROW_COLUMN];
-  this.focusGrids_ = [];
   this.updateSignInState(loadTimeData.getBoolean('isUserSignedIn'));
   recordUmaEvent_(HISTOGRAM_EVENT.INITIALIZED);
 }
 
 // DevicesView, public: -------------------------------------------------------
 
 /**
  * Updates our sign in state by clearing the view is not signed in or sending
  * a request to get the data to display otherwise.
  * @param {boolean} signedIn Whether the user is signed in or not.
@@ skipping 129 matching lines @@
   // width, and the nodeValue could contain sub nodes for highlighting, which
   // makes it harder to extract the text data here.
   tabs = document.getElementsByClassName('device-tab-entry');
   for (var i = 0; i < tabs.length; i++) {
     if (tabs[i].scrollWidth <= tabs[i].clientWidth)
       tabs[i].title = '';
   }
 
   this.resultDiv_.appendChild(
       createElementWithClassName('div', 'other-devices-bottom'));
-
-  this.focusGrids_.forEach(function(grid) { grid.destroy(); });
-  this.focusGrids_.length = 0;
-
-  var devices = this.resultDiv_.querySelectorAll('.device-contents');
-  for (var i = 0; i < devices.length; ++i) {
-    var rows = devices[i].querySelectorAll('.device-tab-entry, button');
-    if (!rows.length)
-      continue;
-
-    var grid = new cr.ui.FocusGrid();
-    for (var i = 0; i < rows.length; ++i) {

[Dan Beam, 2015/03/05 02:25:56]

oh, this is the problem?  i'd just change i -> j here first so we can merge a
fix

-      DevicesViewFocusRow.decorate(rows[i], devices[i]);
-      grid.addRow(rows[i]);
-    }
-    this.focusGrids_.push(grid);
-  }
 };
 
 /**
  * Sets the menu model data. An empty list means that either there are no
  * foreign sessions, or tab sync is disabled for this profile.
  * |isTabSyncEnabled| makes it possible to distinguish between the cases.
  *
  * @param {Array} sessionList Array of objects describing the sessions
  *     from other devices.
  * @param {boolean} isTabSyncEnabled Is tab sync enabled for this profile?
@@ skipping 46 matching lines @@
 
   var doSearch = function(e) {
     devicesView.setSearchText($('search-field').value);
   };
   $('search-field').addEventListener('search', doSearch);
   $('search-button').addEventListener('click', doSearch);
 }
 
 // Add handlers to HTML elements.
 document.addEventListener('DOMContentLoaded', load);