MD History: Display synced tabs history

chrome/browser/resources/md_history/history_card.html

Index: chrome/browser/resources/md_history/history_card.html
diff --git a/chrome/browser/resources/md_history/history_card.html b/chrome/browser/resources/md_history/history_card.html
new file mode 100644
index 0000000000000000000000000000000000000000..cbb82aacd94dd0eab5463447a19fc6bedcf7f079
--- /dev/null
+++ b/chrome/browser/resources/md_history/history_card.html
@@ -0,0 +1,50 @@
+<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html">
+<link rel="import" href="chrome://history/history_item.html">
+
+<link rel="import" href="chrome://history/shared_style.html">
+<dom-module id="history-card">
+  <template>
+    <style include="shared-style"></style>
+    <style>
+      :host {
+        @apply(--layout-center);
+        @apply(--layout-vertical);
+        padding: 0 24px 20px 24px;
+      }
+
+      #time-gap-separator {
+        -webkit-border-start: 1px solid #888;
+        -webkit-margin-start: 77px;
+        height: 15px;
+      }
+
+      #history-item-list {
+        padding: 8px 0;
+      }
+    </style>
+
+    <div class="history-item-container">
+      <div class="card-title">[[historyDate]]</div>
+      <div id="history-item-list">
+        <template is="dom-repeat" items="{{historyItems}}"
+            as="historyItem">
+          <history-item time-accessed_="[[historyItem.dateTimeOfDay]]"
+              website-title_="[[historyItem.title]]"
+              website-domain_="[[historyItem.domain]]"
+              website-url_="[[historyItem.url]]"
+              starred="[[historyItem.starred]]"
+              selected="{{historyItem.selected}}"
+              timestamp_="[[historyItem.time]]">
+          </history-item>
+          <template is="dom-if"
+              if="[[needsTimeGap_(index, historyItems.length)]]">
+            <div id="time-gap-separator"></div>
+          </template>
+        </template>
+      </div>
+    </div>
+  </template>
+  <script src="chrome://history/history_card.js"></script>
+</dom-module>