MD History: Display synced tabs history.

chrome/browser/resources/md_history/synced_device.html

+<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="chrome://resources/html/util.html">
+<link rel="import" href="chrome://history/shared_style.html">
+
+<dom-module id="history-synced-device-card">

[tsergeant, 2016/03/09 04:36:50]

Were you going to rename this element to just

<history-synced-device> ?

[calamity, 2016/03/10 04:18:24]

Hmm, actually, I think that it's kind of weird to mention what kind of UI thing
the other elements are (list, toolbar, sidebar) but call this a 'device'.

Reverted the file names and stuff.

+  <template>
+    <style include="shared-style"></style>
+    <style>
+      :host {
+        @apply(--layout-center);
+        @apply(--layout-vertical);
+        padding: 0 24px 20px 24px;
+      }
+
+      #card-heading {
+        @apply(--layout-justified);
+        cursor: pointer;
+      }
+
+      #icon {
+        -webkit-margin-start: 20px;
+      }
+
+      #tab-item-list {
+        padding: 8px 0;
+      }
+
+      #open-tabs {
+        -webkit-margin-start: 20px;
+        color: rgb(102, 136, 238);
+        cursor: pointer;
+      }
+
+      #open-tabs:hover {
+        text-decoration: underline;
+      }
+
+      #last-update-time {
+        color: #969696;
+      }
+
+      #dropdown-indicator {
+        -webkit-margin-end: 12px;
+        max-width: 16px;
+      }
+
+      #collapse {
+        overflow: hidden;
+      }
+
+      #history-item-container {
+        background: #fff;
+        border: 1px solid var(--card-border-color);
+        border-bottom-width: 2px;
+        max-width: var(--card-max-width);
+        min-width: var(--card-min-width);
+        width: 100%;
+      }
+
+      #item-container {
+        @apply(--layout-center);
+        @apply(--layout-horizontal);
+        min-height: 40px;
+      }
+
+      #window-separator {
+        background-color: var(--card-border-color);
+        height: 1px;
+        margin: 5px auto;
+        width: 80%;
+      }
+    </style>
+    <div id="history-item-container">
+      <div class="card-title" id="card-heading" aria-expanded$="[[cardOpen]]"
+          aria-controls="collapse" on-tap="toggleTabCard">
+        <div>
+          {{device}}
+          <span id="last-update-time">{{lastUpdateTime}}</span>
+        </div>
+        <iron-icon icon="expand-less" id="dropdown-indicator"></iron-icon>
+      </div>
+
+      <iron-collapse opened="{{cardOpen}}" id="collapse">
+        <div id="tab-item-list">
+          <template is="dom-repeat" items="{{tabs}}" as="tab" id="tab-list">
+            <div id="item-container">
+              <div id="icon" class="website-icon"></div>
+              <a href="{{tab.url}}" class="website-title" title="{{tab.title}}">
+                {{tab.title}}
+              </a>
+            </div>
+            <template is="dom-if" if="{{tab.needsWindowSeparator}}">
+              <div id="window-separator"></div>
+            </template>
+          </template>
+          <div class="item-container">
+            <p on-tap="openAllTabs_" id="open-tabs" i18n-content="openAll"></p>
+          </div>
+        </div>
+      </iron-collapse>
+    </div>
+  </template>
+  <script src="chrome://history/synced_device_card.js"></script>
+</dom-module>