MD History: Display synced tabs history

chrome/browser/resources/md_history/synced_device_card.html

Index: chrome/browser/resources/md_history/synced_device_card.html
diff --git a/chrome/browser/resources/md_history/synced_device_card.html b/chrome/browser/resources/md_history/synced_device_card.html
new file mode 100644
index 0000000000000000000000000000000000000000..d3b27e9f5a2bee250170a14e1ea0eed33e2381c7
--- /dev/null
+++ b/chrome/browser/resources/md_history/synced_device_card.html
@@ -0,0 +1,124 @@
+<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">
+
+<dom-module id="synced-device-card">
+  <template>
+    <style>
+      :host {
+        @apply(--layout-center);
+        @apply(--layout-vertical);
+        padding: 0 24px 20px 24px;
+      }
+
+      #main-container {
+        @apply(--shadow-elevation-2dp);
+        background: #fff;
+        border-radius: 2px;
+        max-width: 960px;
+        width: 100%;
+      }
+
+      #tab-url {
+        -webkit-margin-end: 20px;
+        color: #333;
+        overflow: hidden;
+        text-decoration: none;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      #tab-url:hover {
+        text-decoration: underline;
+      }
+
+      #title {
+        @apply(--layout-center);
+        @apply(--layout-horizontal);
+        @apply(--layout-justified);
+        -webkit-padding-start: 20px;
+        background: #fafafa;
+        border: 0;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.14);
+        border-radius: 2px 2px 0 0;
+        color: #333;
+        cursor: pointer;
+        font-size: 14px;
+        font-weight: 500;
+        height: 48px;
+      }
+
+      .website-icon {
+        -webkit-margin-end: 16px;
+        -webkit-margin-start: 20px;
+        height: 16px;
+        min-width: 16px;
+      }
+
+      .item-container {
+        @apply(--layout-center);
+        @apply(--layout-horizontal);
+        min-height: 40px;
+      }
+
+      #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 {
+        -webkit-padding-start: 0.3em;

[calamity, 2016/02/02 04:09:47]

Hmm. Maybe nbsp is the right thing to use here? (Tim, halp)

[tsergeant, 2016/02/03 03:00:00]

uuuuuhhhh, I'm mostly impartial. If nbsp looks the same, go for it, it's
probably marginally nicer.

[yingran, 2016/02/09 04:21:34]

It adds a slightly fatter space so I'm gunna leave it as is for now...

+        color: #969696;
+      }
+
+      #dropdown-indicator {
+        -webkit-margin-end: 12px;
+        max-width: 16px;
+      }
+
+      #collapse {
+        overflow: hidden;
+      }

[calamity, 2016/02/02 04:09:47]

Too much shared style!

Consider:
https://www.polymer-project.org/1.0/docs/devguide/styling.html#style-modules

[yingran, 2016/02/09 04:21:34]

Done.

still a lot of shared styles with history item as well- but this will be added
in my refactor

+    </style>
+
+    <div id="main-container">
+      <div id="title" aria-expanded$="[[isExpanded(cardOpen)]]"

[calamity, 2016/02/02 04:09:47]

Let's get rid of this isExpanded stuff.

[yingran, 2016/02/09 04:21:34]

Done.

+          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 class="item-container">
+              <div class="website-icon" id="icon"></div>
+              <a href="{{tab.url}}" id="tab-url">{{tab.title}}</a>
+            </div>
+          </template>
+          <div class="item-container">
+            <p on-tap="openAllTabs_" id="open-tabs">Open all in new tab(s)</p>

[calamity, 2016/02/02 04:09:47]

This gon need some i18n.

[yingran, 2016/02/09 04:21:34]

Done.

+          </div>
+        </div>
+      </iron-collapse>
+
+    </div>
+  </template>
+  <script src="chrome://history/synced_device_card.js"></script>
+</dom-module>