[MD History] Make synced devices keyboard navigation consistent.

chrome/browser/resources/md_history/synced_device_manager.js

 // Copyright 2016 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.
 
 /**
  * @typedef {{device: string,
  *           lastUpdateTime: string,
  *           opened: boolean,
  *           separatorIndexes: !Array<number>,
  *           timestamp: number,
  *           tabs: !Array<!ForeignSessionTab>,
  *           tag: string}}
  */
 var ForeignDeviceInternal;
 
 Polymer({
   is: 'history-synced-device-manager',
 
   properties: {
     /**
      * @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: {
       type: Boolean,
       observer: 'signInStateChanged_',
     },
 
     /** @private */
     guestSession_: {
       type: Boolean,
       value: loadTimeData.getBoolean('isGuestSession'),
     },
 
     /** @private */
     fetchingSyncedTabs_: {
       type: Boolean,
       value: false,
     },
 
     hasSeenForeignData_: Boolean,
   },
 
   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(
         SYNCED_TABS_HISTOGRAM_NAME, SyncedTabsHistogram.INITIALIZED,
         SyncedTabsHistogram.LIMIT);
   },
 
+  /** @override */
+  detached: function() { this.focusGrid_.destroy(); },
+
   /** @return {HTMLElement} */
   getContentScrollTarget: function() { return this; },
 
   /**
    * @param {!ForeignSession} session
    * @return {!ForeignDeviceInternal}
    */
   createInternalDevice_: function(session) {
     var tabs = [];
     var separatorIndexes = [];
@@ skipping 29 matching lines @@
       device: session.name,
       lastUpdateTime: '– ' + session.modifiedTime,
       opened: true,
       separatorIndexes: separatorIndexes,
       timestamp: session.timestamp,
       tabs: tabs,
       tag: session.tag,
     };
   },
 
-  onSignInTap_: function() {
-    chrome.send('startSignInFlow');
-  },
+  onSignInTap_: function() { chrome.send('startSignInFlow'); },
 
   onListScroll_: function() {
     var menu = this.$.menu.getIfExists();
     if (menu)
       menu.closeMenu();
   },
 
   onToggleMenu_: function(e) {
     var menu = /** @type {CrSharedMenuElement} */ this.$.menu.get();
     menu.toggleMenu(e.detail.target, e.detail.tag);
     if (menu.menuOpen) {
       md_history.BrowserService.getInstance().recordHistogram(
           SYNCED_TABS_HISTOGRAM_NAME, SyncedTabsHistogram.SHOW_SESSION_MENU,
           SyncedTabsHistogram.LIMIT);
     }
   },
 
   onOpenAllTap_: function() {
     var menu = assert(this.$.menu.getIfExists());
     var browserService = md_history.BrowserService.getInstance();
     browserService.recordHistogram(
         SYNCED_TABS_HISTOGRAM_NAME, SyncedTabsHistogram.OPEN_ALL,
         SyncedTabsHistogram.LIMIT);
     browserService.openForeignSessionAllTabs(
         menu.itemData);
     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();
     browserService.recordHistogram(
         SYNCED_TABS_HISTOGRAM_NAME, SyncedTabsHistogram.HIDE_FOR_NOW,
         SyncedTabsHistogram.LIMIT);
     browserService.deleteForeignSession(menu.itemData);
     menu.closeMenu();
   },
 
   /** @private */
-  clearDisplayedSyncedDevices_: function() {
-    this.syncedDevices_ = [];
-  },
+  clearDisplayedSyncedDevices_: function() { this.syncedDevices_ = []; },
 
   /**
    * Decide whether or not should display no synced tabs message.
    * @param {boolean} signInState
    * @param {number} syncedDevicesLength
    * @param {boolean} guestSession
    * @return {boolean}
    */
   showNoSyncedMessage: function(
       signInState, syncedDevicesLength, guestSession) {
@@ skipping 104 matching lines @@
     // User signed in, show the loading message when querying for synced
     // devices.
     this.fetchingSyncedTabs_ = true;
   },
 
   searchTermChanged: function(searchTerm) {
     this.clearDisplayedSyncedDevices_();
     this.updateSyncedDevices(this.sessionList);
   }
 });