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

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

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 'use strict';
 
 /**
  * This variable is checked in SelectFileDialogExtensionBrowserTest.
  * @type {number}
  */
@@ skipping 2191 matching lines @@
     var rootPath = PathUtil.getRootPath(path);
     this.document_.title = PathUtil.getRootLabel(rootPath) +
                            path.substring(rootPath.length);
   };
 
   /**
    * Updates search box value when directory gets changed.
    * @private
    */
   FileManager.prototype.updateSearchBoxOnDirChange_ = function() {
-    if (!this.searchBox_.disabled)
+    if (!this.searchBox_.disabled) {
       this.searchBox_.value = '';
+      this.updateSearchBoxClass_();
+    }
   };
 
   /**
    * Update the gear menu.
    * @private
    */
   FileManager.prototype.updateGearMenu_ = function() {
     var hideItemsForDrive = !this.isOnDrive();
     this.syncButton.hidden = hideItemsForDrive;
     this.hostedButton.hidden = hideItemsForDrive;
@@ skipping 1054 matching lines @@
 
   /**
    * Invoked when the search box is changed.
    *
    * @param {Event} event The 'changed' event.
    * @private
    */
   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
       // {@code DirectoryModel.search()}.
       if (this.directoryModel_.isSearching() &&
           this.lastSearchQuery_ != searchString) {
         this.doSearch('');
       }
 
       // On drive, incremental search is not invoked since we have an auto-
       // complete suggestion instead.
       return;
     }
 
     this.search_(searchString);
   };
 
   /**
+   * 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.
    * @private
    */
   FileManager.prototype.search_ = function(searchString) {
     var noResultsDiv = this.document_.getElementById('no-search-results');
 
     var reportEmptySearchResults = function() {
       if (this.directoryModel_.getFileList().length === 0) {
@@ skipping 364 matching lines @@
    * Set the flag expressing whether the ctrl key is pressed or not.
    * @param {boolean} flag New value of the flag
    * @private
    */
   FileManager.prototype.setCtrlKeyPressed_ = function(flag) {
     this.ctrlKeyPressed_ = flag;
     this.document_.querySelector('#drive-clear-local-cache').canExecuteChange();
     this.document_.querySelector('#drive-reload').canExecuteChange();
   };
 })();