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 881 matching lines @@
       //
       // 1) The user selects an item A with up/down keys (item A is highlighted)
       // 2) Then the user moves the cursor to another item B
       //
       // If we just change the color of moused over element (item B), both
       // the item A and B are highlighted. This is bad. We should change the
       // selection so only the item B is highlighted.
       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);
     this.autocompleteList_ = autocompleteList;
 
     this.searchBox_.addEventListener('focus', function(event) {
       this.autocompleteList_.attachToInput(this.searchBox_);
     }.bind(this));
     this.searchBox_.addEventListener('blur', function(event) {
       this.autocompleteList_.detach();
@@ skipping 1262 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 1051 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() {
+    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.
    * @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();
   };
 })();