[MD History] Make synced devices keyboard navigation consistent.

chrome/browser/resources/md_history/synced_device_card.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.
 
 Polymer({
   is: 'history-synced-device-card',
 
   properties: {
     // Name of the synced device.
     device: String,
@@ skipping 21 matching lines @@
 
     // Whether the card is open.
     opened: Boolean,
 
     searchTerm: String,
 
     // Internal identifier for the device.
     sessionTag: String,
   },
 
+  listeners: {'dom-change': 'notifyFocusUpdate_'},
+
+  /**
+   * Create FocusRows for this card. One is always made for the card heading and
+   * one for each result if the card is open.
+   * @return {Array<cr.ui.FocusRow>}

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

Nit: !Array<!cr.ui.FocusRow>

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

Done.

+   */
+  createFocusRows: function() {
+    var titleRow = new cr.ui.FocusRow(this.$['card-heading'], null);
+    titleRow.addItem('menu', '#menu-button');
+    titleRow.addItem('collapse', '#collapse-button');
+    var rows = [titleRow];
+    if (this.opened) {
+      Polymer.dom(this.root)
+          .querySelectorAll('.item-container')
+          .forEach(function(el) {
+            var row = new cr.ui.FocusRow(el, null);
+            row.addItem('title', '.website-title');
+            rows.push(row);
+          });
+    }
+    return rows;
+  },
+
   /**
    * Open a single synced tab. Listens to 'click' rather than 'tap'
    * to determine what modifier keys were pressed.
    * @param {DomRepeatClickEvent} e
    * @private
    */
   openTab_: function(e) {
     var tab = /** @type {ForeignSessionTab} */(e.model.tab);
     var browserService = md_history.BrowserService.getInstance();
     browserService.recordHistogram(
@@ skipping 12 matching lines @@
         SyncedTabsHistogram.COLLAPSE_SESSION :
         SyncedTabsHistogram.EXPAND_SESSION;
 
     md_history.BrowserService.getInstance().recordHistogram(
         SYNCED_TABS_HISTOGRAM_NAME, histogramValue,
         SyncedTabsHistogram.LIMIT);
 
     this.$.collapse.toggle();
     this.$['dropdown-indicator'].icon =
         this.$.collapse.opened ? 'cr:expand-less' : 'cr:expand-more';
+
+    this.fire('update-focus-grid');
+  },
+
+  notifyFocusUpdate_: function() {
+    // Refresh focus after all rows are rendered.
+    this.fire('update-focus-grid');
   },
 
   /**
    * When the synced tab information is set, the icon associated with the tab
    * website is also set.
    * @private
    */
   updateIcons_: function() {
     this.async(function() {
       var icons = Polymer.dom(this.root).querySelectorAll('.website-icon');
@@ skipping 39 matching lines @@
     });
     e.stopPropagation();  // Prevent iron-collapse.
   },
 
   onLinkRightClick_: function() {
     md_history.BrowserService.getInstance().recordHistogram(
         SYNCED_TABS_HISTOGRAM_NAME, SyncedTabsHistogram.LINK_RIGHT_CLICKED,
         SyncedTabsHistogram.LIMIT);
   },
 });