MD History: Display synced tabs history.

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
new file mode 100644
index 0000000000000000000000000000000000000000..f930057b2a29137e6cebd53f3018b60fc5bddf8a
--- /dev/null
+++ b/chrome/browser/resources/md_history/synced_device_card.js
@@ -0,0 +1,68 @@
+// 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: {
+      type: String,
+      value: ''
+    },
+
+    // When the device information was last updated.
+    lastUpdateTime: {
+      type: String,
+      value: ''
+    },
+
+    // The list of tabs open for this device.

[Dan Beam, 2016/03/10 18:57:15]

can you parameterize this type?  i.e. @type {!Array<TabDataThinger>}
                                                    ^^^^^^^^^^^^^^

[calamity, 2016/03/14 02:29:40]

Done. Didn't realize closure did good things with Polymer annotations.

+    tabs: {
+      type: Array,
+      value: function() { return []; },
+      observer: 'updateIcons_'
+    },
+
+    // Whether the card is open.
+    cardOpen_: {
+      type: Boolean,
+      value: true
+    },
+  },
+
+  /**
+   * Opens all the tabs displayed on the device in separate tabs.
+   * @private
+   */
+  openAllTabs_: function() {

[Dan Beam, 2016/03/10 18:57:15]

nit: in other parts of the code (i.e. bookmarks manager) we have a warning if
there's over X tabs that will open (where X is like 10 or something)

maybe worth adding a todo or asking tbuckley/rpop/bettes (PMs and UX) what
should happen?

[calamity, 2016/03/14 02:29:39]

Added a TODO. Will follow up with PMs/UX.

+    for (var i = 0; i < this.tabs.length; i++)
+      window.open(this.tabs[i].url, '_blank');
+  },
+
+  /**
+   * Toggles the dropdown display of synced tabs for each device card.
+   */
+  toggleTabCard: function() {
+    this.$.collapse.toggle();
+    this.$['dropdown-indicator'].icon =
+        this.$.collapse.opened ? 'expand-less' : 'expand-more';
+  },
+
+  /**
+   * 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');
+
+      for (var i = 0; i < this.tabs.length; i++) {
+        icons[i].style.backgroundImage =
+            getFaviconImageSet(this.tabs[i].url);
+      }
+    });
+  }
+});