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

This CL updated CSS and javascript to make the size of search box fit to its
contents size.  In the JavaScript funciton 'updateSearchBoxStyles_', we measure
the widht of search box text by using TextMeasure class and set the search box
size depending on the width.

TextMeasure class has a dummy span element. When measuring text size, it sets
the text to the dummy span element and obtains its size by using
getBoundingClientRect method.

This CL also added #search-icon and #search-clear-button elements. Originally
these UI parts are implemented as the background image and
-webkit-search-cancel-button of the serach box respectively. This way had a
trouble about rtl mode thus we need the specific selectors for the rtl mode. On
the other hands, current implementation can handle rtl mode without other
selectors.

BUG=241300, 239292
TEST=manually. rtl mode and legacy UI are also checked.

Review URL: https://chromiumcodereview.appspot.com/15946005

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@202375 0039d316-1c4b-4281-b951-d872f2087c98

3 files changed, 149 insertions, 73 deletions

diff --git a/chrome/browser/resources/file_manager/css/file_manager.css b/chrome/browser/resources/file_manager/css/file_manager.css
index f4799bf..fa65943 100644
--- a/chrome/browser/resources/file_manager/css/file_manager.css
+++ b/chrome/browser/resources/file_manager/css/file_manager.css
@@ -517,21 +517,20 @@ body[new-ui] .dialog-header {
 }
 
 body[new-ui] .search-box-wrapper {
+  -webkit-align-items: center;
   -webkit-box-flex: 1;
-  display: -webkit-box;
+  display: -webkit-flex;
   height: 100%;
 }
 
 body[new-ui] .dialog-header #search-box,
 body[new-ui] .dialog-header #autocomplete-list,
+body[new-ui] .dialog-header #search-icon,
+body[new-ui] .dialog-header #search-clear-button,
 body[new-ui] .dialog-header .buttonbar button {
   -webkit-app-region: no-drag;
 }
 
-body[new-ui] .dialog-header #autocomplete-list {
-  max-width: 240px;
-}
-
 body[new-ui] .dialog-header #gear-button {
   background-image: -webkit-image-set(
     url('../images/files/ui/new-ui/topbar_button_settings.png') 1x,
@@ -810,44 +809,41 @@ body[new-ui] .dialog-header button:active {
 
 body[new-ui] #search-box {
   -webkit-margin-end: 0;
-  -webkit-padding-after: 0;
-  -webkit-padding-before: 0;
-  -webkit-padding-end: 52px;
-  -webkit-padding-start: 46px;
-  background: -webkit-image-set(
-    url('../images/files/ui/new-ui/search_icon_inactive.png') 1x,
-    url('../images/files/ui/new-ui/2x/search_icon_inactive.png') 2x);
-  background-position: 13px center;
-  background-repeat: no-repeat;
+  background-image: none;
   border-style: none;
   display: block;
   height: 48px;
   line-height: 1em;
-  max-width: none;
+  max-width: 100%;
+  outline: none;
+  padding: 0;
+  pointer-events: none;
   position: relative;
   transition: width 0;
-  width: 58px;
+  width: 0; /* Overrided by script */
+}
+
+body[new-ui] #search-box:focus,
+body[new-ui] #search-box:active,
+body[new-ui] .has-text #search-box {
+  pointer-events: auto;
 }
 
 body #search-box[hidden] {
   display: none;  /* Required, since overriden by #search-box. */
 }
 
-html[dir='rtl'] #search-box {
+html[dir='rtl'] body:not([new-ui]) #search-box {
   background-position: right 4px top 5.5px;
 }
 
-html[dir='rtl'] body[new-ui] #search-box {
-  background-position: right 13px center;
-}
-
-#search-box:hover {
+body:not([new-ui]) #search-box:hover {
   border: 1px solid #b9b9b9;
   border-top: 1px solid #a0a0a0;
   box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
 }
 
-#search-box:focus {
+body:not([new-ui]) #search-box:focus {
   border: 1px solid rgb(77, 144, 254);
   box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
   max-width: 240px;
@@ -855,32 +851,8 @@ html[dir='rtl'] body[new-ui] #search-box {
   width: 100%;
 }
 
-body[new-ui] #search-box.has-text,
-body[new-ui] #search-box:focus {
-  max-width: none;
-  width: 100%;
-}
-
-body[new-ui] #search-box:hover,
-body[new-ui] #search-box:focus {
-  background: -webkit-image-set(
-    url('../images/files/ui/new-ui/search_icon_active.png') 1x,
-    url('../images/files/ui/new-ui/2x/search_icon_active.png') 2x);
-  background-position: 13px center;
-  background-repeat: no-repeat;
-  border-style: none;
-  box-shadow: none;
-}
-
 #search-box::-webkit-search-cancel-button {
   -webkit-appearance: none;
-  background-image: -webkit-image-set(
-    url('../images/files/ui/new-ui/search_clear.png') 1x,
-    url('../images/files/ui/new-ui/2x/search_clear.png') 2x);
-  height: 12px;
-  position: absolute;
-  top: 18px;
-  width: 12px;
 }
 
 body:not([new-ui]) #search-box::-webkit-search-cancel-button {
@@ -888,49 +860,82 @@ body:not([new-ui]) #search-box::-webkit-search-cancel-button {
     url('../images/files/ui/search_clear.png') 1x,
     url('../images/files/ui/2x/search_clear.png') 2x);
   height: 16px;
+  position: absolute;
   top: 6px;
   width: 16px;
 }
 
-html:not([dir='rtl']) #search-box::-webkit-search-cancel-button {
-  right: 30px;
-}
-
-html[dir='rtl'] #search-box::-webkit-search-cancel-button {
-  left: 30px;
+html:not([dir='rtl']) body:not([new-ui])
+#search-box::-webkit-search-cancel-button {
+  right: 2px;
 }
 
 html[dir='rtl'] body:not([new-ui]) #search-box::-webkit-search-cancel-button {
   left: 2px;
 }
 
-html:not([dir='rtl']) body:not([new-ui])
-#search-box::-webkit-search-cancel-button {
-  right: 2px;
+body:not([new-ui]) #search-box::-webkit-search-cancel-button:hover {
+  background-image: -webkit-image-set(
+    url('../images/files/ui/search_clear_hover.png') 1x,
+    url('../images/files/ui/2x/search_clear_hover.png') 2x);
 }
 
-#search-box::-webkit-search-cancel-button:hover {
+body:not([new-ui]) #search-box::-webkit-search-cancel-button:active {
   background-image: -webkit-image-set(
-    url('../images/files/ui/new-ui/search_clear_hover.png') 1x,
-    url('../images/files/ui/new-ui/2x/search_clear_hover.png') 2x);
+    url('../images/files/ui/search_clear_pressed.png') 1x,
+    url('../images/files/ui/2x/search_clear_pressed.png') 2x);
 }
 
-body:not([new-ui]) #search-box::-webkit-search-cancel-button:hover {
+body[new-ui] #search-icon {
+  -webkit-flex-shrink: 0;
+  -webkit-margin-end: 3px;
+  -webkit-margin-start: 10px;
+  -webkit-order: -1;
   background-image: -webkit-image-set(
-    url('../images/files/ui/search_clear_hover.png') 1x,
-    url('../images/files/ui/2x/search_clear_hover.png') 2x);
+    url('../images/files/ui/new-ui/search_icon_inactive.png') 1x,
+    url('../images/files/ui/new-ui/2x/search_icon_inactive.png') 2x);
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 32px;
+  width: 32px;
 }
 
-#search-box::-webkit-search-cancel-button:active {
+body[new-ui] #search-icon:hover,
+body[new-ui] #search-box:active + #search-icon,
+body[new-ui] #search-box:focus + #search-icon,
+body[new-ui] .has-text #search-icon {
+  background: -webkit-image-set(
+    url('../images/files/ui/new-ui/search_icon_active.png') 1x,
+    url('../images/files/ui/new-ui/2x/search_icon_active.png') 2x);
+}
+
+body[new-ui] #search-clear-button {
+  -webkit-margin-end: 30px;
+  -webkit-margin-start: 10px;
   background-image: -webkit-image-set(
-    url('../images/files/ui/new-ui/search_clear_pressed.png') 1x,
-    url('../images/files/ui/new-ui/2x/search_clear_pressed.png') 2x);
+    url('../images/files/ui/new-ui/search_clear.png') 1x,
+    url('../images/files/ui/new-ui/2x/search_clear.png') 2x);
+  background-position: center;
+  background-repeat: no-repeat;
+  display: none;
+  height: 12px;
+  width: 12px;
 }
 
-body:not([new-ui]) #search-box::-webkit-search-cancel-button:active {
+body[new-ui] .search-box-wrapper.has-text + #search-clear-button {
+  display: block;
+}
+
+body[new-ui] #search-clear-button:hover {
   background-image: -webkit-image-set(
-    url('../images/files/ui/search_clear_pressed.png') 1x,
-    url('../images/files/ui/2x/search_clear_pressed.png') 2x);
+    url('../images/files/ui/new-ui/search_clear_hover.png') 1x,
+    url('../images/files/ui/new-ui/2x/search_clear_hover.png') 2x);
+}
+
+body[new-ui] #search-clear-button:active {
+  background-image: -webkit-image-set(
+    url('../images/files/ui/new-ui/search_clear_pressed.png') 1x,
+    url('../images/files/ui/new-ui/2x/search_clear_pressed.png') 2x);
 }
 
 body:not([new-ui]) button#detail-view::before {
@@ -2253,7 +2258,8 @@ body:not([new-ui]) list.autocomplete-suggestions {
 }
 
 body[new-ui] list.autocomplete-suggestions {
-  -webkit-margin-start: 10px;
+  -webkit-margin-before: -7px;
+  -webkit-margin-start: -38px;
   background-color: rgb(250, 250, 250);
   border: 1px solid rgb(255, 255, 255);
   border-radius: 3px;
@@ -2263,6 +2269,7 @@ body[new-ui] list.autocomplete-suggestions {
   overflow: hidden;
   padding: 5px 0;
   position: fixed;
+  width: 300px !important; /* This overrides the value specified by script. */
   z-index: 3;
 }
 
diff --git a/chrome/browser/resources/file_manager/js/file_manager.js b/chrome/browser/resources/file_manager/js/file_manager.js
index 0b5ec67..8ae8d9d 100644
--- a/chrome/browser/resources/file_manager/js/file_manager.js
+++ b/chrome/browser/resources/file_manager/js/file_manager.js
@@ -78,6 +78,50 @@ var DialogType = {
 };
 
 /**
+ * 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.
  */
@@ -1005,6 +1049,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();
@@ -2369,7 +2428,7 @@ DialogType.isModal = function(type) {
   FileManager.prototype.updateSearchBoxOnDirChange_ = function() {
     if (!this.searchBox_.disabled) {
       this.searchBox_.value = '';
-      this.updateSearchBoxClass_();
+      this.updateSearchBoxStyles_();
     }
   };
 
@@ -3445,7 +3504,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
@@ -3469,8 +3528,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; // 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';
   };
 
   /**
diff --git a/chrome/browser/resources/file_manager/main_new_ui.html b/chrome/browser/resources/file_manager/main_new_ui.html
index 9eacfea..6976b21 100644
--- a/chrome/browser/resources/file_manager/main_new_ui.html
+++ b/chrome/browser/resources/file_manager/main_new_ui.html
@@ -258,7 +258,10 @@
           <div class="search-box-wrapper">
             <input id="search-box" type="search" tabindex="9"
                    i18n-values="aria-label:SEARCH_TEXT_LABEL">
+            <!-- This is placed at the head of search-box -->
+            <div id="search-icon"></div>
           </div>
+          <div id="search-clear-button"></div>
           <div class="buttonbar">
             <button class="menubutton" id="gear-button" tabindex="10"
                     menu="#gear-menu">