Change loading progress bar to a spinner in cr-searchable-dropdown

This change also adds a loading message to be displayed next to the
spinner.

BUG=916506,972551

Change-Id: I0ea753d7c594fc9b62ae73b8c8c7449cd72b6571
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1819092
Commit-Queue: Anand Mistry <amistry@chromium.org>
Reviewed-by: Michael Giuffrida <michaelpg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#701423}

chrome/test/data/webui/cr_elements/cr_searchable_drop_down_tests.js

@@ -274,9 +274,9 @@ suite('cr-searchable-drop-down', function() {
   });
 
   // The show-loading attribute should determine whether or not the loading
-  // progress bar is shown.
-  test('progress bar is shown and hidden', function() {
-    const progress = dropDown.$.loading;
+  // spinner and message are shown.
+  test('loading spinner is shown and hidden', function() {
+    const progress = dropDown.shadowRoot.querySelector('#loading-box');
     assertTrue(progress.hidden);
 
     dropDown.showLoading = true;

ui/webui/resources/cr_elements/cr_searchable_drop_down/BUILD.gn

@@ -14,7 +14,7 @@ js_library("cr_searchable_drop_down") {
   deps = [
     "//third_party/polymer/v1_0/components-chromium/iron-dropdown:iron-dropdown-extracted",
     "//third_party/polymer/v1_0/components-chromium/iron-icon:iron-icon-extracted",
-    "//third_party/polymer/v1_0/components-chromium/paper-progress:paper-progress-extracted",
+    "//third_party/polymer/v1_0/components-chromium/paper-spinner:paper-spinner-lite-extracted",
     "//ui/webui/resources/cr_elements/cr_input:cr_input",
   ]
 }

ui/webui/resources/cr_elements/cr_searchable_drop_down/cr_searchable_drop_down.html

@@ -2,15 +2,16 @@
 
 <link rel="import" href="../cr_input/cr_input.html">
 <link rel="import" href="../cr_scrollable_behavior.html">
+<link rel="import" href="../hidden_style_css.html">
 <link rel="import" href="../icons.html">
 <link rel="import" href="../shared_vars_css.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-dropdown/iron-dropdown.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
-<link rel="import" href="chrome://resources/polymer/v1_0/paper-progress/paper-progress.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html">
 
 <dom-module id="cr-searchable-drop-down">
   <template>
-    <style>
+    <style include="cr-hidden-style">
       :host(:not([error-message-allowed])) cr-input {
         --cr-input-error-display: none;
       }
@@ -79,14 +80,29 @@
         width: 100%;
       }
 
-      paper-progress {
-        --paper-progress-active-color: var(--google-blue-600);
-        --paper-progress-height: 2px;
-        bottom: 0;
-        position: absolute;
+      #loading-box {
+        align-items: center;
+        box-sizing: border-box;
+        display: flex;
+        height: 32px;
+        padding: 0 8px;
+        text-align: start;
         width: 100%;
       }
 
+      #loading-box div {
+        @apply --cr-secondary-text;
+        font-size: 12px;
+        padding: 0 16px;
+      }
+
+      #loading-box paper-spinner-lite {
+        --paper-spinner-color: var(--google-blue-600);
+        --paper-spinner-stroke-width: 2px;
+        height: 16px;
+        width: 16px;
+      }
+
       .list-item {
         background: none;
         border: none;
@@ -121,14 +137,16 @@
       <div id="input-overlay" slot="suffix">
         <div id="input-box">
           <iron-icon id="dropdown-icon" icon="cr:arrow-drop-down"></iron-icon>
-          <paper-progress id="loading" indeterminate hidden="[[!showLoading]]">
-          </paper-progress>
         </div>
         <div id="dropdown-box">
           <iron-dropdown horizontal-align="left" vertical-align="top"
               vertical-offset="4" no-cancel-on-outside-click
               no-cancel-on-esc-key>
             <div slot="dropdown-content">
+              <div id="loading-box" hidden="[[!showLoading]]">
+                <paper-spinner-lite active></paper-spinner-lite>
+                <div>[[loadingMessage]]</div>
+              </div>
               <template is="dom-repeat" items="[[items]]"
                   filter="[[filterItems_(searchTerm_)]]">
                 <button class="list-item" on-click="onSelect_" tabindex="-1">

ui/webui/resources/cr_elements/cr_searchable_drop_down/cr_searchable_drop_down.js

@@ -41,6 +41,11 @@ Polymer({
      */
     errorMessage: String,
 
+    /**
+     * Message to display next to the loading spinner.
+     */
+    loadingMessage: String,
+
     placeholder: String,
 
     /** @type {!Array<string>} */
@@ -64,7 +69,7 @@ Polymer({
     /** @type {boolean} */
     updateValueOnInput: Boolean,
 
-    /** @private {boolean} */
+    /** @type {boolean} */
     showLoading: {
       type: Boolean,
       value: false,