Files.app: Fit the size of search box as its contents size.

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 bd6972be36f43fbd503ca28b0dc465154b3803df..a8835670439249786d0007a0273703b4f352f442 100644
--- a/chrome/browser/resources/file_manager/js/file_manager.js
+++ b/chrome/browser/resources/file_manager/js/file_manager.js
@@ -993,6 +993,21 @@ DialogType.isModal = function(type) {
     this.searchBox_ = this.dialogDom_.querySelector('#search-box');
     this.searchBox_.addEventListener(
         'input', this.onSearchBoxUpdate_.bind(this));
+    this.searchTextMeasure_ = new TextMeasure(this.searchBox_);
+    if (util.platform.newUI()) {
+      this.searchIcon_ = this.dialogDom_.querySelector('#search-icon');
+      this.searchIcon_.addEventListener(
+          'click',
+          function() { this.searchBox_.focus(); }.bind(this));
+      this.searchClearButton_ =
+          this.dialogDom_.querySelector('#search-clear-button');
+      this.searchClearButton_.addEventListener(
+          'click',
+          function() {
+            this.searchBox_.value = '';
+            this.onSearchBoxUpdate_();
+          }.bind(this));
+    }
     this.lastSearchQuery_ = '';
 
     var autocompleteList = new cr.ui.AutocompleteList();
@@ -2344,7 +2359,7 @@ DialogType.isModal = function(type) {
   FileManager.prototype.updateSearchBoxOnDirChange_ = function() {
     if (!this.searchBox_.disabled) {
       this.searchBox_.value = '';
-      this.updateSearchBoxClass_();
+      this.updateSearchBoxStyles_();
     }
   };
 
@@ -3420,7 +3435,7 @@ DialogType.isModal = function(type) {
   FileManager.prototype.onSearchBoxUpdate_ = function(event) {
     var searchString = this.searchBox_.value;
 
-    this.updateSearchBoxClass_();
+    this.updateSearchBoxStyles_();
     if (this.isOnDrive()) {
       // When the search text is changed, finishes the search and showes back
       // the last directory by passing an empty string to
@@ -3444,8 +3459,15 @@ DialogType.isModal = function(type) {
    *
    * @private
    */
-  FileManager.prototype.updateSearchBoxClass_ = function() {
-    this.searchBox_.classList.toggle('has-text', !!this.searchBox_.value);
+  FileManager.prototype.updateSearchBoxStyles_ = function() {
+    if (!util.platform.newUI())
+      return;
+    var TEXT_BOX_PADDING = 16;

[yoshiki, 2013/05/24 09:56:16]

Add the comment '// in px.'

[hirono, 2013/05/24 10:36:43]

Done.

+    this.searchBoxWrapper_.classList.toggle('has-text',
+                                            !!this.searchBox_.value);
+    var width = this.searchTextMeasure_.getWidth(this.searchBox_.value) +
+                TEXT_BOX_PADDING;
+    this.searchBox_.style.width = width + 'px';
   };
 
   /**
@@ -3832,4 +3854,36 @@ DialogType.isModal = function(type) {
     this.document_.querySelector('#drive-clear-local-cache').canExecuteChange();
     this.document_.querySelector('#drive-reload').canExecuteChange();
   };
+
+  /**
+   * TextMeasure constructor.
+   *
+   * TextMeasure is a measure for text that returns the width of text.

[yoshiki, 2013/05/24 09:56:16]

I think this approach (creating dummySpan and measure it) is somewhat hacky.
Please write the comment about the implementation.

[hirono, 2013/05/24 10:36:43]

Done.

+   *
+   * @param {HTMLElement} element Element that has styles of measured text. The
+   *     width of text is mesures like as it is rendered in this element.
+   */
+  var TextMeasure = function(element) {
+    this.dummySpan = document.createElement('span');

[yoshiki, 2013/05/24 09:56:16]

This is a private variable, so please add an underscode at the end of the name.

[hirono, 2013/05/24 10:36:43]

Done.

+    this.dummySpan = document.getElementsByTagName('body')[0]

[yoshiki, 2013/05/24 09:56:16]

Pass FileManager.dialogDom_ or (dialogDom_.ownerDocument) from the caller and
use it instead of direct use of 'document'.

[hirono, 2013/05/24 10:36:43]

How about using element.document?
|element| is already passed as an argument.

+                             .appendChild(this.dummySpan);
+    this.dummySpan.style.position = 'absolute';
+    this.dummySpan.style.visibility = 'hidden';
+    var styles = getComputedStyle(element, '');

[yoshiki, 2013/05/24 09:58:33]

window.getComputedStyle()

[hirono, 2013/05/24 10:36:43]

Done.

+    var copiedStyles = ['fontSize',

[yoshiki, 2013/05/24 09:56:16]

"attributesToBeCopied" (or something like it) is better than "copiesStyles"?

[hirono, 2013/05/24 10:36:43]

attributes looks like HTML attributes. So 'stylesToBeCopied' is OK?
 

+                        'fontStyle',
+                        'fontWeight',
+                        'fontFamily',
+                        'letterSpacing'];
+    for (var i = 0; i < copiedStyles.length; i++) {
+      console.log(copiedStyles[i] + ': ' + styles[copiedStyles[i]]);

[yoshiki, 2013/05/24 09:56:16]

remove debug log

[hirono, 2013/05/24 10:36:43]

Done.

+      this.dummySpan.style[copiedStyles[i]] = styles[copiedStyles[i]];
+    }
+  };
+
+  TextMeasure.prototype.getWidth = function(text) {
+    this.dummySpan.innerText = text;
+    return this.dummySpan.getBoundingClientRect().width;

[yoshiki, 2013/05/24 09:56:16]

getBoundingClientRect() returns null if the element is hidden. Please add
null-check.

[hirono, 2013/05/24 10:36:43]

Done.

+  };
+
 })();