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

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 60 matching lines @@
  */
 var DialogType = {
   SELECT_FOLDER: 'folder',
   SELECT_SAVEAS_FILE: 'saveas-file',
   SELECT_OPEN_FILE: 'open-file',
   SELECT_OPEN_MULTI_FILE: 'open-multi-file',
   FULL_PAGE: 'full-page'
 };
 
 /**
+ * TextMeasure constructor.
+ *
+ * TextMeasure is a measure for text that returns the width of text.  This
+ * class has a dummy span element. When measuring the width of text, it sets
+ * the text to the element and obtains the element's size by
+ * getBoundingClientRect.
+ *
+ * @constructor
+ * @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) {
+  var doc = element.ownerDocument;
+  this.dummySpan_ = doc.createElement('span');
+  this.dummySpan_ = doc.getElementsByTagName('body')[0].
+                        appendChild(this.dummySpan_);
+  this.dummySpan_.style.position = 'absolute';
+  this.dummySpan_.style.visibility = 'hidden';
+  var styles = window.getComputedStyle(element, '');
+  var stylesToBeCopied = [
+    'fontSize',
+    'fontStyle',
+    'fontWeight',
+    'fontFamily',
+    'letterSpacing'
+  ];
+  for (var i = 0; i < stylesToBeCopied.length; i++) {
+    this.dummySpan_.style[stylesToBeCopied[i]] = styles[stylesToBeCopied[i]];
+  }
+};
+
+/**
+ * Measures the widht of text.
+ *
+ * @param {string} text Text that is measured the width.
+ * @return {number} Width of the specified text.
+ */
+TextMeasure.prototype.getWidth = function(text) {
+  this.dummySpan_.innerText = text;
+  var rect = this.dummySpan_.getBoundingClientRect();
+  return rect ? rect.width : 0;
+};
+
+/**
  * @param {string} type Dialog type.
  * @return {boolean} Whether the type is modal.
  */
 DialogType.isModal = function(type) {
   return type == DialogType.SELECT_FOLDER ||
       type == DialogType.SELECT_SAVEAS_FILE ||
       type == DialogType.SELECT_OPEN_FILE ||
       type == DialogType.SELECT_OPEN_MULTI_FILE;
 };
 
@@ skipping 907 matching lines @@
     if (loadTimeData.getBoolean('ASH'))
       this.dialogDom_.setAttribute('ash', 'true');
 
     this.filePopup_ = null;
 
     this.searchBoxWrapper_ =
         this.dialogDom_.querySelector('.search-box-wrapper');
     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();
     autocompleteList.id = 'autocomplete-list';
     autocompleteList.autoExpands = true;
     autocompleteList.requestSuggestions =
         this.requestAutocompleteSuggestions_.bind(this);
     // function(item) {}.bind(this) does not work here, as it's a constructor.
     var self = this;
     autocompleteList.itemConstructor = function(item) {
@@ skipping 1344 matching lines @@
                            path.substring(rootPath.length);
   };
 
   /**
    * Updates search box value when directory gets changed.
    * @private
    */
   FileManager.prototype.updateSearchBoxOnDirChange_ = function() {
     if (!this.searchBox_.disabled) {
       this.searchBox_.value = '';
-      this.updateSearchBoxClass_();
+      this.updateSearchBoxStyles_();
     }
   };
 
   /**
    * Update the gear menu.
    * @private
    */
   FileManager.prototype.updateGearMenu_ = function() {
     var hideItemsForDrive = !this.isOnDrive();
     this.syncButton.hidden = hideItemsForDrive;
@@ skipping 1055 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_();
+    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
       // {@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);
+  FileManager.prototype.updateSearchBoxStyles_ = function() {
+    if (!util.platform.newUI())
+      return;
+    var TEXT_BOX_PADDING = 16; // in px.
+    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';
   };
 
   /**
    * 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');
@@ skipping 367 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();
   };
 })();