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

chrome/browser/resources/md_history/history_item.html

Index: chrome/browser/resources/md_history/history_item.html
diff --git a/chrome/browser/resources/md_history/history_item.html b/chrome/browser/resources/md_history/history_item.html
new file mode 100644
index 0000000000000000000000000000000000000000..13408fa0225fca31c7806823bb1cd58bc4986c37
--- /dev/null
+++ b/chrome/browser/resources/md_history/history_item.html
@@ -0,0 +1,98 @@
+<link rel="import" href="chrome://resources/polymer/v1_0/polymer/polymer.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/paper-button/paper-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+
+<dom-module id="history-item">
+  <template>
+    <style>
+      :host([starred]) #bookmark {

[tsergeant, 2016/01/25 00:12:43]

Move this down below #bookmark so the two states are together.

[yingran, 2016/01/27 00:30:35]

Done.

+        visibility: visible;
+      }
+
+      #main-container {
+        @apply(--layout-center);
+        @apply(--layout-horizontal);
+        min-height: 40px;
+      }
+
+      paper-checkbox {
+        --paper-checkbox-checked-color: #48f;
+        --paper-checkbox-size: 16px;
+        --paper-checkbox-unchecked-color: #969696;
+        height: 16px;
+        margin: 0 16px 0 20px;
+        padding: 2px;
+        width: 16px;
+      }
+
+      #time {
+        color: #646464;
+        min-width: 96px;
+      }
+
+      #title {
+        color: #333;
+        overflow: hidden;
+        text-decoration: none;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      #title:hover {
+        text-decoration: underline;
+      }
+
+      #domain {
+        @apply(--layout-flex);
+        -webkit-margin-start: 16px;
+        color: #969696;
+        white-space: nowrap;
+      }
+
+      iron-icon {
+        --iron-icon-height: 16px;
+        --iron-icon-width: 16px;
+      }
+
+      #website-icon {
+        -webkit-margin-end: 16px;
+        height: 16px;
+        min-width: 16px;
+      }
+
+      #menu-button {
+        -webkit-margin-end: 12px;
+        -webkit-margin-start: 2px;
+        color: #969696;
+        height: 36px;
+        min-width: 36px;
+        width: 36px;
+      }
+
+      #bookmark {
+        -webkit-margin-end: 10px;
+        -webkit-margin-start: 20px;
+        color: #48f;
+        min-width: 16px;
+        visibility: hidden;
+      }
+    </style>
+    <div id="main-container">
+      <paper-checkbox id="checkbox" on-tap="checkboxSelected"

[tsergeant, 2016/01/25 00:12:43]

checkboxSelected -> onCheckboxSelected_

[yingran, 2016/01/27 00:30:35]

Done.

+          checked="{{selected}}">
+      </paper-checkbox>
+      <span id="time">{{timeAccessed}}</span>
+      <div id="website-icon"></div>
+      <a href="{{websiteUrl}}" id="title">{{websiteTitle}}</a>
+      <span id="domain">{{websiteDomain}}</span>
+      <iron-icon icon="star" id="bookmark"></iron-icon>
+      <paper-icon-button icon="more-vert" id="menu-button" on-tap="openMenu">

[tsergeant, 2016/01/25 00:12:43]

openMenu -> onMenuButtonTap_

[yingran, 2016/01/27 00:30:35]

Done.

+      </paper-icon-button>
+    </div>
+  </template>
+  <script src="chrome://history/history_item.js"></script>
+
+</dom-module>