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 7a95526baa657d6c579b48ace214b6a70a5ec264..e58ed2f904752d771aad3db05a0ad9cadd0aebd1 100644
--- a/chrome/browser/resources/file_manager/js/file_manager.js
+++ b/chrome/browser/resources/file_manager/js/file_manager.js
@@ -899,6 +899,18 @@ DialogType.isModal = function(type) {
       if (event.target.itemInfo)
         autocompleteList.selectedItem = event.target.itemInfo;
     }.bind(this));
+    autocompleteList.attachToInput = function(input) {

[yoshiki, 2013/05/10 06:06:15]

Ideally, it's better to create a separate class which inherits AutocompleteList
rather than overriding methods. But I'm sure this patch will go to merge to the
branch and we should make the diff smaller. As for now, it's better to keep the
patch as your way is.

Could you add a TODO comment and file an issue to create the separate class and
move it there?

[hirono, 2013/05/13 08:14:14]

I just removed these codes.

+      cr.ui.AutocompleteList.prototype.attachToInput.call(this, input);
+      this.shiftPosition(16);
+    };
+    autocompleteList.syncWidthAndPositionToInput = function() {
+      cr.ui.AutocompleteList.prototype.syncWidthAndPositionToInput.call(this);
+      this.shiftPosition(16);
+    };
+    autocompleteList.shiftPosition = function(offset) {
+      var leftNumber = parseInt(this.style.left.replace(/[^0-9]/g, ''));
+      this.style.left = (leftNumber + offset) + 'px';

[yoshiki, 2013/05/10 06:06:15]

This seems hacky. How about adding a CSS class to set 16px margin to shift the
position?

[hirono, 2013/05/13 08:14:14]

Done.

+    };
 
     var container = this.document_.querySelector('.dialog-header');
     container.appendChild(autocompleteList);
@@ -2181,8 +2193,10 @@ DialogType.isModal = function(type) {
    * @private
    */
   FileManager.prototype.updateSearchBoxOnDirChange_ = function() {
-    if (!this.searchBox_.disabled)
+    if (!this.searchBox_.disabled) {
       this.searchBox_.value = '';
+      this.updateSearchBoxClass_();
+    }
   };
 
   /**
@@ -3254,6 +3268,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
@@ -3272,6 +3287,20 @@ DialogType.isModal = function(type) {
   };
 
   /**
+   * Updates search box's CSS classes.
+   * These classes are refered from CSS.
+   *
+   * @private
+   */
+  FileManager.prototype.updateSearchBoxClass_ = function() {
+    if (this.searchBox_.value) {

[yoshiki, 2013/05/10 06:06:15]

nit: Remove braces.

[hirono, 2013/05/13 08:14:14]

I removed the if statement.

+      this.searchBox_.classList.add('has-text');
+    } else {
+      this.searchBox_.classList.remove('has-text');
+    }
+  };
+
+  /**
    * Search files and update the list with the search result.
    *
    * @param {string} searchString String to be searched with.