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

chrome/browser/resources/md_history/history_list.html

Index: chrome/browser/resources/md_history/history_list.html
diff --git a/chrome/browser/resources/md_history/history_list.html b/chrome/browser/resources/md_history/history_list.html
index 5eac24f7eb4068e6a143c650efac4c33356ddb1c..4100f442680d3e6c3e6425eaa962875402ae6103 100644
--- a/chrome/browser/resources/md_history/history_list.html
+++ b/chrome/browser/resources/md_history/history_list.html
@@ -1,6 +1,7 @@
 <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">
@@ -20,6 +21,24 @@
         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;
@@ -48,6 +67,12 @@
         </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}