MD History: Implement search functionality.

chrome/browser/resources/md_history/history_card_manager.html

 <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;
       }
 
+      [hidden] {
+        display: none !important;
+      }
+
       #overflow-menu {
         @apply(--shadow-elevation-2dp);
         border-radius: 2px;
         display: none;
         left: 0;
         position: absolute;
         top: 0;
       }
 
       #infinite-list {
         flex: 1;
         padding: 40px 0 0 0;
       }
 
       paper-item {
         -webkit-user-select: none;
         cursor: pointer;
         font: inherit;
       }
 
       paper-item:hover {
         background: #eaeaea;
       }
+
+      #no-results {
+        flex: 1;
+        align-items: center;
+        color: #b4b4b4;
+        display: flex;

[calamity, 2016/02/05 02:30:10]

Should be able to remove this.

[hsampson, 2016/02/08 04:40:23]

It looks like it but if I try removing any of the flex stuff it changes the
layout too much.

+        font-size: 123.1%;

[calamity, 2016/02/05 02:30:10]

This is an interesting font size...

[hsampson, 2016/02/08 04:40:23]

Yea just copied it from md_downloads as there are no specs for this. Have
changed it to the same size as the card titles.

+        font-weight: 500;
+        justify-content: center;
+      }
     </style>
+    <div id="no-results"
+        hidden$="{{resultsAvailable_(historyDataByDay_.length, loading_)}}">
+      {{noResultsMessage_}}

[tsergeant, 2016/02/04 02:28:49]

Can this be a computed function instead of a property?

[hsampson, 2016/02/08 04:40:23]

Done.

[tsergeant, 2016/02/08 22:59:01]

Meep, what I meant here was to create a function like

{{noResultsMessage_(searchTerm)}}

That way, the message would be updated automatically rather than having to call
noResults_ manually.

[hsampson, 2016/02/09 02:17:51]

Done.

[tsergeant, 2016/02/09 04:28:53]

This still isn't quite what I intended, but it does have its benefits. I'll
explain in person.

+    </div>
     <iron-list items="{{historyDataByDay_}}" as="historyDay" id="infinite-list"
-        on-scroll="scrollHandler_">
+        on-scroll="scrollHandler_"
+        hidden$="{{!resultsAvailable_(historyDataByDay_.length, loading_)}}">
       <template>
         <history-card history-date="{{historyDay.date}}"
+            search-term="[[searchTerm]]"
             history-items="{{historyDay.historyItems}}">
         </history-card>
       </template>
     </iron-list>
     <paper-menu id="overflow-menu">
       <paper-item i18n-content="moreFromSite" on-tap="onMoreFromSiteTap_">
       </paper-item>
       <paper-item i18n-content="removeFromHistory"
           on-tap="onRemoveFromHistoryTap_">
       </paper-item>
     </paper-menu>
   </template>
   <script src="chrome://history/history_card_manager.js"></script>
 </dom-module>