In case of search add "Searching..." string to the spinner in the center.

Re-apply CL https://chromiumcodereview.appspot.com/10834062

BUG=137994

TEST=


Review URL: https://chromiumcodereview.appspot.com/10837020

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@149168 0039d316-1c4b-4281-b951-d872f2087c98

chrome/app/generated_resources.grd

@@ -11519,6 +11519,9 @@ Some features may be unavailable.  Please check that the profile exists and you
       <message name="IDS_FILE_BROWSER_SEARCH_EXPAND" desc="In the File Manager, the text on the link to expand search when no matching files were found.">
         Search all <ph name="DRIVE_NAME">$1<ex>Downloads</ex></ph>
       </message>
+      <message name="IDS_FILE_BROWSER_SEARCHING_SPINNER" desc="In the File Manager, the text is shown near the spinner while waiting for the results of a search.">
+        Searching...
+      </message>
 
       <message name="IDS_FILE_BROWSER_CHANGE_DEFAULT_MENU_ITEM" desc="In the File Manager, the text in the menu item to change the default action for a particular file type.">
         Change default...

chrome/browser/resources/file_manager/css/file_manager.css

@@ -522,6 +522,27 @@ button#detail-view:not([disabled]) {
   width: 22px;
 }
 
+#spinner-container {
+  -webkit-box-align: center;
+  -webkit-box-pack: center;
+  bottom: 0;
+  display: -webkit-box;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+#spinner-with-text {
+  background-image: url('../images/common/spinner.svg');
+  background-repeat: no-repeat;
+  font-size: 16px;
+  height: 22px;
+  min-width: 22px;
+  opacity: 0.6;
+  padding-left: 26px;
+}
+
 .downloads-warning {
   -webkit-box-align: center;
   -webkit-box-orient: horizontal;

chrome/browser/resources/file_manager/js/file_manager.js

@@ -609,7 +609,7 @@ FileManager.prototype = {
     this.deleteButton_ = this.dialogDom_.querySelector('#delete-button');
     this.table_ = this.dialogDom_.querySelector('.detail-table');
     this.grid_ = this.dialogDom_.querySelector('.thumbnail-grid');
-    this.spinner_ = this.dialogDom_.querySelector('.spinner');
+    this.spinner_ = this.dialogDom_.querySelector('#spinner-with-text');
     this.showSpinner_(false);
     this.butter_ = this.dialogDom_.querySelector('.butter-bar');
     this.unmountedPanel_ = this.dialogDom_.querySelector('#unmounted-panel');
@@ -3317,7 +3317,13 @@ FileManager.prototype = {
 
   FileManager.prototype.showSpinner_ = function(on) {
     this.cancelSpinnerTimeout_();
-    this.spinner_.style.display = on ? '' : 'none';
+    if (on) {
+      this.spinner_.textContent =
+          this.directoryModel_.isSearching() ? str('SEARCH_SPINNER') : '';
+      this.spinner_.style.display = '';
+    } else {
+      this.spinner_.style.display = 'none';
+    }
   };
 
   FileManager.prototype.onNewFolderCommand_ = function(event) {

chrome/browser/resources/file_manager/js/mock_chrome.js

@@ -659,6 +659,7 @@ chrome.fileBrowserPrivate = {
 
       SEARCH_TEXT_LABEL: 'Search',
       SEARCH_NO_MATCHING_FILES: 'No files match <b>"$1"</b>',
+      SEARCH_SPINNER: 'Searching...',
 
       TIME_TODAY: 'Today, $1',
       TIME_YESTERDAY: 'Yesterday, $1',

chrome/browser/resources/file_manager/main.html

@@ -195,7 +195,9 @@
             <div id="list-container">
               <div class=detail-table tabindex=0></div>
               <grid class=thumbnail-grid tabindex=0></grid>
-              <div class=spinner></div>
+              <div id="spinner-container">
+                <div id="spinner-with-text"></div>
+              </div>
               <div class="gdrive-welcome page"></div>
               <div id="no-search-results"></div>
             </div>