Add message list search feature

- Search as you type (client side)
- Add makeDelay to reduce resize and search callback frequency
- Rename class listEntry to message-list-entry
- Move Refresh button into search button bar

themes/bootstrap/templates/mailbox/index.html

@@ -13,7 +13,7 @@ $(document).ready(function() {
 });
 </script>
 <script type="text/html" id="list-entry-template">
-  <button data-id="id" type="button" class="listEntry list-group-item">
+  <button data-id="id" type="button" class="message-list-entry list-group-item">
     <div class="row">
       <div class="col-sm-4 col-md-12 text-primary" data-content="subject"/>
       <div class="col-sm-4 col-md-12 small" data-content="from"/>
@@ -31,11 +31,32 @@ $(document).ready(function() {
   </div>
 </div>
 <div class="col-md-3">
-  <div class="text-center">
-    <a href="javascript:loadList()">
-      <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
-      Refresh
-    </a>
+  <div class="input-group">
+    <input id="message-search"
+           type="search" 
+           class="form-control" 
+           placeholder="search"
+           data-toggle="tooltip"
+           data-placement="top"
+           title="Search Sender and Subject"/>
+    <div class ="input-group-btn">
+      <button class="btn btn-default"
+              type="button"
+              data-toggle="tooltip"
+              data-placement="top"
+              title="Clear&nbsp;Search"
+              onclick="clearMessageSearch()">
+        <span class="glyphicon glyphicon-remove-circle"></span>
+      </button>
+      <button class="btn btn-default"
+              type="button"
+              data-toggle="tooltip"
+              data-placement="top"
+              title="Refresh&nbsp;List"
+              onclick="loadList()">
+        <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
+      </button>
+    </div>
   </div>
   <div id="message-list-wrapper">
     <div id="message-list" class="list-group"></div>