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..86b5c33ca893f6ada910eb4a1c0ef10ac2636db5
--- /dev/null
+++ b/chrome/browser/resources/md_history/synced_device_card.js
@@ -0,0 +1,70 @@
+// 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: 'synced-device-card',
+
+  properties: {
+    // Synced device.

[calamity, 2016/02/11 00:23:31]

// Name of the synced device?

[yingran, 2016/02/11 02:06:36]

Done.

+    device: {
+      type: String,
+      value: ''
+    },
+
+    // When the device information was last updated.
+    lastUpdateTime: {
+      type: String,
+      value: ''
+    },
+
+    // The list of tabs open for this device.
+    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 synced device card in separate tabs on
+   * the user's browser.
+   * @private
+   */
+  openAllTabs_: function() {
+    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);
+      }
+    });
+  }
+});