[MD History] Make synced devices keyboard navigation consistent.

chrome/browser/resources/md_history/synced_device_card.js

Index: chrome/browser/resources/md_history/synced_device_card.js
diff --git a/chrome/browser/resources/md_history/synced_device_card.js b/chrome/browser/resources/md_history/synced_device_card.js
index e0b7c8e9313ca42b18d411b7eb8d44261d60315d..91a41d3b49aefc35460bbad9e2116ebe945f9619 100644
--- a/chrome/browser/resources/md_history/synced_device_card.js
+++ b/chrome/browser/resources/md_history/synced_device_card.js
@@ -39,6 +39,30 @@ Polymer({
     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>}
+   */
+  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.
@@ -71,6 +95,14 @@ Polymer({
     this.$.collapse.toggle();
     this.$['dropdown-indicator'].icon =
         this.$.collapse.opened ? 'cr:expand-less' : 'cr:expand-more';
+
+    this.fire('update-focus-grid');
+  },
+
+  /** @private */
+  notifyFocusUpdate_: function() {
+    // Refresh focus after all rows are rendered.
+    this.fire('update-focus-grid');
   },
 
   /**