MD History: Add basic material design history cards and history items

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..cf495955b83bf024d5d4081e540bf230316e20d5
--- /dev/null
+++ b/chrome/browser/resources/md_history/history-card.html
@@ -0,0 +1,70 @@
+<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-flex-layout/iron-flex-layout.html">
+<link rel="import" href="chrome://history/history-item.html">
+
+<dom-module id="history-card">
+  <template>
+    <style>

[Dan Beam, 2016/01/16 02:54:36]

is there a reason why you're doing the styling inline vs in a separate .css
file?

[yingran, 2016/01/18 05:40:29]

We're following what is suggested by the Polymer style guide:
https://www.polymer-project.org/1.0/docs/devguide/styling.html

+      :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%;
+      }
+
+      #time-gap-separator {
+        border-left: 1px solid #888;

[Dan Beam, 2016/01/16 02:54:36]

border-left -> -webkit-border-start if it should be flipped in RTL

[yingran, 2016/01/18 05:40:29]

Done.

+        height: 15px;
+        margin-left: 77px;

[Dan Beam, 2016/01/16 02:54:36]

margin-left -> -webkit-margin-start if it should be flipped in RTL

[yingran, 2016/01/18 05:40:29]

Done.

+      }
+
+      #date-accessed {
+        @apply(--layout-center);
+        @apply(--layout-horizontal);
+        background: #fafafa;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.14);
+        border-radius: 2px 2px 0 0;

[Dan Beam, 2016/01/16 02:54:36]

RTL?

[yingran, 2016/01/18 05:40:29]

Border radius also applies for top left & right in RTL

+        color: #333;
+        font-size: 14px;

[Dan Beam, 2016/01/16 02:54:36]

this should be expressed in % or em instead of px (because % / em scale when the
default text size changes)

[yingran, 2016/01/18 05:40:29]

Can we change all the font sizes for %/em in a separate follow up patch to make
it a bit easier? It'll be hard to make the change across the two patches(me &
hannah's) separately.

+        font-weight: 500;
+        height: 48px;
+        padding-left: 20px;
+      }
+
+      #history-item-list {
+        padding: 8px 0;
+      }
+    </style>
+
+    <div id="main-container">
+      <div id="date-accessed">
+        {{historyDate}}
+      </div>

[Dan Beam, 2016/01/16 02:54:36]

nit: <div id="date-accessed">{{historyDate}}</div>

also, can this be [[historyDate]] instead?  (1-way binding)

[yingran, 2016/01/18 05:40:29]

Done.

+      <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, historyItem)}}">
+            <div id="time-gap-separator"></div>
+          </template>
+        </template>
+      </div>
+    </div>
+  </template>
+  <script src="chrome://history/history-card.js"></script>
+</dom-module>