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

chrome/browser/resources/md_history/history-card-manager.html

Index: chrome/browser/resources/md_history/history-card-manager.html
diff --git a/chrome/browser/resources/md_history/history-card-manager.html b/chrome/browser/resources/md_history/history-card-manager.html
new file mode 100644
index 0000000000000000000000000000000000000000..288919c4a7f997af436b5f045d1b49e41f5384a7
--- /dev/null
+++ b/chrome/browser/resources/md_history/history-card-manager.html
@@ -0,0 +1,60 @@
+<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-menu/paper-menu.html">
+<link rel="import" href="chrome://resources/html/cr/ui/position_util.html">
+<link rel="import" href="chrome://history/history-card.html">
+
+<dom-module id="history-card-manager">
+  <template>
+    <style>
+      :host {
+        display: flex;
+        flex-direction: column;
+      }
+
+      :host([menu-open]) #overflow-menu {
+        display: block;
+      }
+
+      #overflow-menu {
+        @apply(--shadow-elevation-2dp);
+        border-radius: 2px;
+        display: none;
+        left: 0;
+        position: absolute;
+        top: 0;

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

does this work in RTL?

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

yep- position_util,js handles the actual positioning. The top & left styles are
set as absolute positioning requires initial values.

+      }
+
+      #infinite-list {
+        flex: 1;
+        padding: 40px 0 0 0;
+      }
+
+      paper-item {
+        -webkit-user-select: none;
+        cursor: pointer;
+        font: inherit;
+      }
+
+      paper-item:hover {
+        background: #eaeaea;
+      }
+    </style>
+    <iron-list items="{{historyDataByDay_}}" as="historyDay" id="infinite-list"
+        on-scroll="scrollHandler">
+      <template>
+        <history-card history-date="{{historyDay.date}}"
+            history-items="{{historyDay.historyItems}}">
+        </history-card>
+      </template>
+    </iron-list>
+    <paper-menu id="overflow-menu">
+      <paper-item i18n-content="moreFromSite" on-tap="searchDomain">

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

event handlers should be of the form:

  id="thing" on-action="onThingAction_"

i.e. on-tap="onMoreFromSiteTap_"

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

Done.

+      </paper-item>
+      <paper-item i18n-content="removeFromHistory" on-tap="removeItem">
+      </paper-item>
+    </paper-menu>
+  </template>
+  <script src="chrome://history/history-card-manager.js"></script>
+</dom-module>