Add an optional loading indicator to cr-searchable-dropdown

The indicator is enabled using the show-loading attribute. This will be
used by the SMB add share dialog to indicate that share discovery is
occuring in the background.

BUG=945188

Change-Id: I329e1c2192f54fb7c4338fb2fd7db0f811ff4e80
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1631154Reviewed-by: Bailey Berro <baileyberro@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Commit-Queue: Anand Mistry <amistry@chromium.org>
Cr-Commit-Position: refs/heads/master@{#665803}

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

@@ -132,4 +132,17 @@ suite('cr-searchable-drop-down', function() {
     assertEquals(dropDown.errorMessage, input.$.error.textContent);
     assertFalse(input.invalid);
   });
+
+  // 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;
+    assertTrue(progress.hidden);
+
+    dropDown.showLoading = true;
+    assertFalse(progress.hidden);
+
+    dropDown.showLoading = false;
+    assertTrue(progress.hidden);
+  });
 });

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

@@ -11,4 +11,7 @@ js_type_check("closure_compile") {
 }
 
 js_library("cr_searchable_drop_down") {
+  deps = [
+    "//third_party/polymer/v1_0/components-chromium/paper-progress:paper-progress-extracted",
+  ]
 }

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

@@ -4,6 +4,7 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_scrollable_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/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/paper-progress/paper-progress.html">
 
 <dom-module id="cr-searchable-drop-down">
   <template>
@@ -29,6 +30,25 @@
         padding: 8px 0;
       }
 
+      #progress-container {
+        border-radius: 4px;
+        height: 100%;
+        left: 0;
+        overflow: hidden;
+        pointer-events: none;
+        position: absolute;
+        top: 0;
+        width: 100%;
+      }
+
+      paper-progress {
+        --paper-progress-active-color: var(--google-blue-600);
+        --paper-progress-height: 2px;
+        bottom: 0;
+        position: absolute;
+        width: 100%;
+      }
+
       .list-item {
         background: none;
         border: none;
@@ -55,6 +75,10 @@
         placeholder="[[placeholder]]"
         error-message="[[getErrorMessage_(errorMessage, errorMessageAllowed)]]"
         invalid="[[shouldShowErrorMessage_(errorMessage, errorMessageAllowed)]]">
+      <div id="progress-container" slot="suffix">
+        <paper-progress id="loading" indeterminate hidden="[[!showLoading]]">
+        </paper-progress>
+      </div>
     </cr-input>
     <iron-dropdown horizontal-align="left" vertical-align="top"
         vertical-offset="52">

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

@@ -64,6 +64,12 @@ Polymer({
 
     /** @private {boolean} */
     dropdownRefitPending_: Boolean,
+
+    /** @private {boolean} */
+    showLoading: {
+      type: Boolean,
+      value: false,
+    },
   },
 
   /**