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

chrome/browser/resources/md_history/history_item.html

+<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>
+      #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;

[Dan Beam, 2016/01/27 03:07:31]

why both min-width and width?

[yingran, 2016/01/27 05:05:04]

Done.

[yingran, 2016/01/28 00:51:00]

Actually needed both - just took a close look.

Min-width is set to keep the icon from shrinking when the window becomes
smaller. Width is set so that the icon does not expand past 36px with the flex
layout.When width is removed, the icon width became 40px, and some icons didn't
align with the rest.

[Dan Beam, 2016/01/28 01:25:23]

you should probably be setting a min-width or flex-basis at a much higher level.
 downloads doesn't let the page get smaller than ~670px before causing a
horizontal scrollbar, for instance.

i tried to patch in this CL for more concrete guidance but didn't have much look
trying to run this UI

+        width: 36px;
+      }
+
+      #bookmark {
+        -webkit-margin-end: 10px;
+        -webkit-margin-start: 20px;
+        color: #48f;
+        min-width: 16px;
+        visibility: hidden;
+      }
+
+      :host([starred]) #bookmark {
+        visibility: visible;
+      }
+    </style>
+    <div id="main-container">
+      <paper-checkbox id="checkbox" on-tap="onCheckboxSelected_"
+          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="onMenuButtonTap_">
+      </paper-icon-button>
+    </div>
+  </template>
+  <script src="chrome://history/history_item.js"></script>
+

[Dan Beam, 2016/01/27 03:07:31]

nit: why \n here?

[yingran, 2016/01/27 05:05:04]

Done.

+</dom-module>