Files.app: Make the design of search box match the spec.

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

Index: chrome/browser/resources/file_manager/js/file_manager.js
diff --git a/chrome/browser/resources/file_manager/js/file_manager.js b/chrome/browser/resources/file_manager/js/file_manager.js
index e753bdd2efa75a67c35a1614d4fa47a5ff15fe39..86c9cb4604c82c3b363b546fe11bd90231bf553e 100644
--- a/chrome/browser/resources/file_manager/js/file_manager.js
+++ b/chrome/browser/resources/file_manager/js/file_manager.js
@@ -2209,8 +2209,10 @@ DialogType.isModal = function(type) {
    * @private
    */
   FileManager.prototype.updateSearchBoxOnDirChange_ = function() {
-    if (!this.searchBox_.disabled)
+    if (!this.searchBox_.disabled) {
       this.searchBox_.value = '';
+      this.updateSearchBoxClass_();
+    }
   };
 
   /**
@@ -3285,6 +3287,7 @@ DialogType.isModal = function(type) {
   FileManager.prototype.onSearchBoxUpdate_ = function(event) {
     var searchString = this.searchBox_.value;
 
+    this.updateSearchBoxClass_();
     if (this.isOnDrive()) {
       // When the search text is changed, finishes the search and showes back
       // the last directory by passing an empty string to
@@ -3303,6 +3306,16 @@ DialogType.isModal = function(type) {
   };
 
   /**
+   * Updates search box's CSS classes.
+   * These classes are refered from CSS.
+   *
+   * @private
+   */
+  FileManager.prototype.updateSearchBoxClass_ = function() {
+    this.searchBox_.classList.toggle('has-text', !!this.searchBox_.value);
+  };
+
+  /**
    * Search files and update the list with the search result.
    *
    * @param {string} searchString String to be searched with.