[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_',
   },
 
+  /** @type {?cr.ui.FocusGrid} */
+  focusGrid_: null,
+
   /** @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}
+   * @private
    */
   createInternalDevice_: function(session) {
     var tabs = [];
     var separatorIndexes = [];
     for (var i = 0; i < session.windows.length; i++) {
       var windowId = session.windows[i].sessionId;
       var newTabs = session.windows[i].tabs;
       if (newTabs.length == 0)
         continue;
 
@@ skipping 23 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');
-  },
+  /** @private */
+  onSignInTap_: function() { chrome.send('startSignInFlow'); },
 
+  /** @private */
   onListScroll_: function() {
     var menu = this.$.menu.getIfExists();
     if (menu)
       menu.closeMenu();
   },
 
+  /** @private */
   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);
     }
   },
 
+  /** @private */
   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();
   },
 
+  /** @private */
+  updateFocusGrid_: function() {
+    if (!this.focusGrid_)
+      return;
+
+    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();
+    });
+  },
+
+  /** @private */
   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 46 matching lines @@
     if (!sessionList)
       return;
 
     if (sessionList.length > 0 && !this.hasSeenForeignData_) {
       this.hasSeenForeignData_ = true;
       md_history.BrowserService.getInstance().recordHistogram(
         SYNCED_TABS_HISTOGRAM_NAME, SyncedTabsHistogram.HAS_FOREIGN_DATA,
         SyncedTabsHistogram.LIMIT);
     }
 
-    // First, update any existing devices that have changed.
-    var updateCount = Math.min(sessionList.length, this.syncedDevices_.length);
-    for (var i = 0; i < updateCount; i++) {
-      var oldDevice = this.syncedDevices_[i];
-      if (oldDevice.tag != sessionList[i].tag ||
-          oldDevice.timestamp != sessionList[i].timestamp) {
-        var device = this.createInternalDevice_(sessionList[i]);
-        if (device.tabs.length != 0)
-          this.splice('syncedDevices_', i, 1, device);
-      }
-    }
+    var devices = [];
+    sessionList.forEach(function(session) {
+      var device = this.createInternalDevice_(session);
+      if (device.tabs.length != 0)
+        devices.push(device);
+    }.bind(this));
 
-    if (sessionList.length >= this.syncedDevices_.length) {
-      // The list grew; append new items.
-      for (var i = updateCount; i < sessionList.length; i++) {
-        var device = this.createInternalDevice_(sessionList[i]);
-        if (device.tabs.length != 0)
-          this.push('syncedDevices_', device);
-      }
-    } else {
-      // The list shrank; remove deleted items.
-      this.splice(
-          'syncedDevices_', updateCount,
-          this.syncedDevices_.length - updateCount);
-    }

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

We took this code from the old history page and it really doesn't give us
anything... Data-binding here is cleaner.

[tsergeant, 2016/10/05 04:39:59]

The intention was that it would encourage Polymer to reuse old cards where
possible.

Agreed that we should change to the simpler version.

+    this.syncedDevices_ = devices;
   },
 
   /**
    * End fetching synced tabs when sync is disabled.
    */
   tabSyncDisabled: function() {
     this.fetchingSyncedTabs_ = false;
     this.clearDisplayedSyncedDevices_();
   },
 
@@ skipping 13 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);
   }
 });