MD WebUI: Add loading spinner to cr-toolbar, hook into MD History toolbar

ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html

Index: ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html
diff --git a/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html
index d64c02609bf2bec3a2c714a5e966973258c85fab..b187aff2c54c004d65cf0a3fd7ad31eb878595c8 100644
--- a/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html
+++ b/ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html
@@ -2,6 +2,7 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-input/iron-input.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-input/paper-input-container.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_search_field/cr_search_field_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 
@@ -30,12 +31,22 @@
 
       #icon {
         --paper-icon-button-ink-color: white;
+        transition: opacity 150ms;
       }
 
       #prompt {
         visibility: hidden;
       }
 
+      paper-spinner-lite {
+        --paper-spinner-color: white;
+        height: 20px;
+        margin: 0 6px;
+        padding: 6px;
+        position: absolute;
+        width: 20px;
+      }
+
       paper-input-container {
         --paper-input-container-input-color: white;
         --paper-input-container-underline: {
@@ -70,6 +81,9 @@
       :host(:not([narrow]):not([showing-search])) #icon,
       :host(:not([narrow]):not([showing-search])) #prompt {
         opacity: 0.6;
+      }
+
+      :host(:not([narrow]):not([showing-search])) #prompt {
         visibility: visible;
       }
 
@@ -78,10 +92,17 @@
         width: 100%;
       }
 
+      :host([showing-search][spinner-active]) #icon {
+        opacity: 0;
+      }
+
       :host([narrow][showing-search]) #icon {
         -webkit-margin-start: 18px;
       }
     </style>
+    <paper-spinner-lite
+        active="[[isSpinnerShown_(spinnerActive, showingSearch)]]">
+    </paper-spinner-lite>
     <paper-icon-button id="icon" icon="cr:search" title="[[label]]"
         tabindex$="[[computeIconTabIndex_(narrow)]]">
     </paper-icon-button>