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

chrome/browser/resources/md_history/history_toolbar.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.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-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_search_field/cr_search_field.html">
 <link rel="import" href="chrome://history/shared_style.html">
 
 <dom-module id="history-toolbar">
   <template>
     <style include="shared-style">
       :host {
         background: rgb(63, 85, 102);
         color: #fff;
         height: 56px;
@@ skipping 29 matching lines @@
 
       :host([has-sidebar]) #left-content {
         flex: 1 0 var(--side-bar-width);
       }
 
       #centered-buttons {
         flex: 0 1 var(--card-max-width);
         padding: 0 var(--card-padding-side);
       }
 
+      #right-content {
+        @apply(--layout-center);
+        @apply(--layout-horizontal);
+        justify-content: flex-end;
+      }
+
       #search-input {
         -webkit-padding-end: 20px;
       }
 
+      paper-spinner.search {
+        height: 20px;
+        width: 20px;
+        -webkit-padding-end: 10px;
+      }
+
       #overlay-buttons {
         margin: 0 auto;
         max-width: var(--card-max-width);
         padding: 0 var(--card-padding-side);
       }
 
       :host([has-sidebar]) #overlay-wrapper {
         -webkit-margin-start: var(--side-bar-width);
       }
 
@@ skipping 18 matching lines @@
         <div id="left-content">
           <h1 id="title">$i18n{title}</h1>
         </div>
         <div id="centered-buttons">
           <paper-button on-tap="onClearBrowsingDataTap_"
               id="clear-browsing-data-button">
             $i18n{clearBrowsingData}
           </paper-button>
         </div>
         <div id="right-content">
+          <div id="searching-spinner" hidden$="[[!searching]]">
+            <paper-spinner class="search" active>

[tsergeant, 2016/04/22 02:18:44]

Nit: Instead of class="search", you can move id="searching-spinner" down to this
paper-spinner and use that in the CSS above.

FYI, we typically only use classes for things where you want the same styling to
apply to multiple different elements. IDs are more useful for applying styles to
a single element.

[lshang, 2016/04/22 04:08:46]

Done.

After I removed the class and moved id "searching-spinner" into paper-spinner, I
feel like there is no benefit to still have a div here? (And the div has no ids,
just a hidden property.) So I use 'searching' to directly control the 'active'
property of paper-spinner. I'm not fully sure this is appropriate, but if you
feel ok with this, I might change the loading spinner as well, because I found
that it looks more smooth when the spinner switches between active/not-active
mode. It has a fade-in/fade-out effect.
Got it!:-)

+            </paper-spinner>
+          </div>
           <cr-search-field id="search-input" label="$i18n{search}"
               clear-label="$i18n{clearSearch}">
           </cr-search-field>
         </div>
       </div>
 
       <div id="overlay-wrapper" hidden$="[[!itemsSelected_]]">
         <div id="overlay-buttons">
           <paper-icon-button icon="clear" id="cancel-icon-button"
               on-tap="onClearSelectionTap_"></paper-icon-button>
           <div id="number-selected">[[numberOfItemsSelected_(count)]]</div>
           <paper-button id="cancel-button" on-tap="onClearSelectionTap_">
             $i18n{cancel}
           </paper-button>
           <paper-button id="delete-button" on-tap="onDeleteTap_">
             $i18n{delete}
           </paper-button>
         </div>
       </div>
     </div>
   </template>
   <script src="chrome://history/history_toolbar.js"></script>
 </dom-module>