[MD History] Make synced devices keyboard navigation consistent.

chrome/browser/resources/md_history/synced_device_manager.js

Index: chrome/browser/resources/md_history/synced_device_manager.js
diff --git a/chrome/browser/resources/md_history/synced_device_manager.js b/chrome/browser/resources/md_history/synced_device_manager.js
index 2177863b37b0316955cf9a1099d9f4b65c4acf0a..2527d088c3c484e970c087d728ae336e20cfc0f7 100644
--- a/chrome/browser/resources/md_history/synced_device_manager.js
+++ b/chrome/browser/resources/md_history/synced_device_manager.js
@@ -20,24 +20,15 @@ Polymer({
     /**
      * @type {?Array<!ForeignSession>}
      */
-    sessionList: {
-      type: Array,
-      observer: 'updateSyncedDevices'
-    },
+    sessionList: {type: Array, observer: 'updateSyncedDevices'},
 
-    searchTerm: {
-      type: String,
-      observer: 'searchTermChanged'
-    },
+    searchTerm: {type: String, observer: 'searchTermChanged'},
 
     /**
      * An array of synced devices with synced tab data.
      * @type {!Array<!ForeignDeviceInternal>}
      */
-    syncedDevices_: {
-      type: Array,
-      value: function() { return []; }
-    },
+    syncedDevices_: {type: Array, value: function() { return []; }},
 
     /** @private */
     signInState: {
@@ -62,11 +53,16 @@ Polymer({
 
   listeners: {
     'toggle-menu': 'onToggleMenu_',
-    'scroll': 'onListScroll_'
+    'scroll': 'onListScroll_',
+    'update-focus-grid': 'updateFocusGrid_',
   },
 
+  focusGrid_: null,

[tsergeant, 2016/10/04 06:09:02]

/** @type {?cr.ui.FocusGrid} */

[calamity, 2016/10/05 04:20:25]

Done.

+
   /** @override */
   attached: function() {
+    this.focusGrid_ = new cr.ui.FocusGrid();
+
     // Update the sign in state.
     chrome.send('otherDevicesInitialized');
     md_history.BrowserService.getInstance().recordHistogram(
@@ -74,6 +70,9 @@ Polymer({
         SyncedTabsHistogram.LIMIT);
   },
 
+  /** @override */
+  detached: function() { this.focusGrid_.destroy(); },
+
   /** @return {HTMLElement} */
   getContentScrollTarget: function() { return this; },
 
@@ -123,9 +122,7 @@ Polymer({
     };
   },
 
-  onSignInTap_: function() {
-    chrome.send('startSignInFlow');
-  },
+  onSignInTap_: function() { chrome.send('startSignInFlow'); },
 
   onListScroll_: function() {
     var menu = this.$.menu.getIfExists();
@@ -154,6 +151,22 @@ Polymer({
     menu.closeMenu();
   },
 
+  updateFocusGrid_: function() {

[tsergeant, 2016/10/04 06:09:02]

/** @private */

[calamity, 2016/10/05 04:20:25]

Privated the rest of this file too.

+    this.focusGrid_.destroy();
+
+    this.debounce('updateFocusGrid', function() {
+      Polymer.dom(this.root)
+          .querySelectorAll('history-synced-device-card')
+          .reduce(
+              function(prev, cur) {
+                return prev.concat(cur.createFocusRows());
+              },
+              [])
+          .forEach(function(row) { this.focusGrid_.addRow(row); }.bind(this));
+      this.focusGrid_.ensureRowActive();
+    });
+  },
+
   onDeleteSessionTap_: function() {
     var menu = assert(this.$.menu.getIfExists());
     var browserService = md_history.BrowserService.getInstance();
@@ -165,9 +178,7 @@ Polymer({
   },
 
   /** @private */
-  clearDisplayedSyncedDevices_: function() {
-    this.syncedDevices_ = [];
-  },
+  clearDisplayedSyncedDevices_: function() { this.syncedDevices_ = []; },
 
   /**
    * Decide whether or not should display no synced tabs message.