MD History: Add spinners when new data is loading or searching

chrome/browser/resources/md_history/history_list.html

 <link rel="import" href="chrome://resources/html/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-spinner/paper-spinner.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_shared_menu/cr_shared_menu.html">
 <link rel="import" href="chrome://history/constants.html">
 <link rel="import" href="chrome://history/history_item.html">
 <link rel="import" href="chrome://history/shared_style.html">
 
 <dom-module id="history-list">
   <template>
     <style include="shared-style"></style>
     <style>
       :host {
         display: flex;
         flex-direction: column;
       }
 
       #infinite-list {
         flex: 1;
         padding-top: var(--first-card-padding-top);
       }
 
+      #loading_spinner {

[tsergeant, 2016/04/07 01:07:02]

We generally use '#loading-spinner' rather than '#loading_spinner' for element
IDs (although in some places we do use '#loadingSpinner' instead).

[lshang, 2016/04/15 03:31:54]

Done.

+        bottom: 15px;
+        left: 50%;

[tsergeant, 2016/04/07 01:07:02]

This will be ~not quite~ centered. This is because the spinner will start 50%
from the left, then the spinner will be rendered, then there'll only be
something like 45% of space left right of the center.

To fix this, you need to make sure that the size of the spinner itself is
included in the calculation. You can do this with:

position: absolute
left: 0
right: 0
margin: 0 auto;
width: 28px;
  (shorthand for margin-left: auto, margin-right: auto)

Centering something in CSS is one of the hardest problems in software
engineering.

[lshang, 2016/04/15 03:31:54]

Done. 
And I think it might look better if the spinner is at the center of history-list
rather than the whole page, so I add a 200px left, which is the width of history
side bar.

+        position: absolute;
+      }
+
+      #searching_spinner {
+        padding-right: 200px;
+        position: absolute;
+        right: 0;
+        top: 15px;
+      }
+
+      paper-spinner.search {
+        height: 20px;
+        width: 20px;
+      }
+
       paper-item {
         -webkit-user-select: none;
         cursor: pointer;
         font: inherit;
       }
 
       paper-item:hover {
         background: #eaeaea;
       }
     </style>
     <div id="no-results" class="centered-message"
         hidden$="{{hasResults(historyData.length)}}">
       {{noResultsMessage_(searchTerm, loading_)}}
     </div>
     <iron-list items="{{historyData}}" as="item" id="infinite-list"
         on-scroll="scrollHandler_"
         hidden$="{{!hasResults(historyData.length)}}">
       <template>
         <history-item item="[[item]]"
             starred="[[item.starred]]"
             selected="{{item.selected}}"
             is-card-start="[[item.isFirstItem]]"
             is-card-end="[[item.isLastItem]]"
             search-term="[[searchTerm]]"
             number-of-items="[[historyData.length]]">
         </history-item>
       </template>
     </iron-list>
+    <div id="loading_spinner" hidden$="[[!loading_]]">
+      <paper-spinner alt="Loading more history" active></paper-spinner>
+    </div>
+    <div id="searching_spinner"  hidden$="[[!searching_]]">

[tsergeant, 2016/04/07 01:07:02]

It would be nice if this was part of the <history-toolbar> rather than
<history-list>, since that's where it's being positioned.

[lshang, 2016/04/15 03:31:54]

Done.

+      <paper-spinner class="search" alt="searching in history" active></paper-spinner>
+    </div>
     <cr-shared-menu id="sharedMenu">
       <paper-item on-tap="onMoreFromSiteTap_">
         $i18n{moreFromSite}
       </paper-item>
       <paper-item on-tap="onRemoveFromHistoryTap_">
         $i18n{removeFromHistory}
       </paper-item>
     </cr-shared-menu>
   </template>
   <script src="chrome://history/history_list.js"></script>
 </dom-module>