Files.app: add 'search Drive' to the top of the auto-complete.

BUG=178631
TEST=manual 
TEST=Run browser_tests --gtest_filter="DriveFileSystemExtensionApiTest.Search"

TBR=satorux@chromium.org
NOTRY=True

Re-landing http://crrev.com/190346, fixing "browser_tests:DriveFileSystemExtensionApiTest.Search"

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

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

chrome/app/generated_resources.grd

@@ -13132,6 +13132,9 @@ Some features may be unavailable.  Please check that the profile exists and you
         There is not enough space.
       </message>
 
+      <message name="IDS_FILE_BROWSER_SEARCH_DRIVE_HTML" desc="In the File Manager, the item in the autocomplete suggestion item just under the search box, to continue searching in the list.">
+        '&lt;b&gt;<ph name="SEARCH_STRING">$1<ex>abc</ex></ph>&lt;/b&gt;' - search Drive
+      </message>
       <message name="IDS_FILE_BROWSER_SEARCH_NO_MATCHING_FILES_HTML" desc="In the File Manager, the message informing the user that the search did not match any files or directories.">
         No items match &lt;b&gt;"<ph name="SEARCH_STRING">$1<ex>abc</ex></ph>"&lt;/b&gt;
       </message>

chrome/browser/chromeos/extensions/file_browser_private_api.cc

@@ -2311,6 +2311,7 @@ bool FileDialogStringsFunction::RunImpl() {
   SET_STRING("FILE_ERROR_QUOTA_EXCEEDED",
              IDS_FILE_BROWSER_FILE_ERROR_QUOTA_EXCEEDED);
 
+  SET_STRING("SEARCH_DRIVE_HTML", IDS_FILE_BROWSER_SEARCH_DRIVE_HTML);
   SET_STRING("SEARCH_NO_MATCHING_FILES_HTML",
              IDS_FILE_BROWSER_SEARCH_NO_MATCHING_FILES_HTML);
   SET_STRING("SEARCH_EXPAND", IDS_FILE_BROWSER_SEARCH_EXPAND);
@@ -3074,7 +3075,7 @@ void SearchDriveMetadataFunction::OnFileSystemOpened(
     return;
   }
 
-  const int kAtMostNumMatches = 5;
+  const int kAtMostNumMatches = 4;
   drive::SearchMetadata(
       system_service->file_system(),
       query_,

chrome/browser/resources/file_manager/css/file_manager.css

@@ -1694,6 +1694,14 @@ list.autocomplete-suggestions > li > div.detail-text {
   text-overflow: ellipsis;
 }
 
+list.autocomplete-suggestions > li > div[search-icon] {
+  background: -webkit-image-set(
+    url('../images/files/ui/icon_search.png') 1x,
+    url('../images/files/ui/2x/icon_search.png') 2x);
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
 list.autocomplete-suggestions[hasElementFocus] > [selected],
 list.autocomplete-suggestions[hasElementFocus] > [lead],
 list.autocomplete-suggestions:not([hasElementFocus]) > [selected],

chrome/browser/resources/file_manager/js/file_manager.js

@@ -777,8 +777,9 @@ DialogType.isModal = function(type) {
 
     this.filePopup_ = null;
 
-    var searchBox = this.dialogDom_.querySelector('#search-box');
-    searchBox.addEventListener('input', this.onSearchBoxUpdate_.bind(this));
+    this.searchBox_ = this.dialogDom_.querySelector('#search-box');
+    this.searchBox_.addEventListener(
+        'input', this.onSearchBoxUpdate_.bind(this));
 
     var autocompleteList = new cr.ui.AutocompleteList();
     autocompleteList.id = 'autocomplete-list';
@@ -821,10 +822,10 @@ DialogType.isModal = function(type) {
     container.appendChild(autocompleteList);
     this.autocompleteList_ = autocompleteList;
 
-    searchBox.addEventListener('focus', function(event) {
-      this.autocompleteList_.attachToInput(searchBox);
+    this.searchBox_.addEventListener('focus', function(event) {
+      this.autocompleteList_.attachToInput(this.searchBox_);
     }.bind(this));
-    searchBox.addEventListener('blur', function(event) {
+    this.searchBox_.addEventListener('blur', function(event) {
       this.autocompleteList_.detach();
     }.bind(this));
 
@@ -2017,9 +2018,8 @@ DialogType.isModal = function(type) {
    * @private
    */
   FileManager.prototype.updateSearchBoxOnDirChange_ = function() {
-    var searchBox = this.dialogDom_.querySelector('#search-box');
-    if (!searchBox.disabled)
-      searchBox.value = '';
+    if (!this.searchBox_.disabled)
+      this.searchBox_.value = '';
   };
 
   /**
@@ -2972,8 +2972,27 @@ DialogType.isModal = function(type) {
     chrome.fileBrowserPrivate.setPreferences(changeInfo);
   };
 
+  /**
+   * Invoked when the sarch box is changed.
+   *
+   * @param {Event} event The 'changed' event.
+   * @private
+   */
   FileManager.prototype.onSearchBoxUpdate_ = function(event) {
-    var searchString = this.document_.getElementById('search-box').value;
+    if (this.isOnDrive())
+      return;
+
+    var searchString = this.searchBox_.value;
+    this.search_(searchString);
+  };
+
+  /**
+   * 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() {
@@ -3008,12 +3027,26 @@ DialogType.isModal = function(type) {
   FileManager.prototype.requestAutocompleteSuggestions_ = function(query) {
     if (!this.isOnDrive())
       return;
+
     this.lastQuery_ = query;
 
     // The autocomplete list should be resized and repositioned here as the
     // search box is resized when it's focused.
     this.autocompleteList_.syncWidthAndPositionToInput();
 
+    if (!query) {
+      this.autocompleteList_.suggestions = [];
+      return;
+    }
+
+    var headerItem = {isHeaderItem: true, searchQuery: query};
+    if (!this.autocompleteList_.dataModel ||
+        this.autocompleteList_.dataModel.length == 0)
+      this.autocompleteList_.suggestions = [headerItem];
+    else
+      // Updates only the head item to prevent a flickering on typing.
+      this.autocompleteList_.dataModel.splice(0, 1, headerItem);
+
     chrome.fileBrowserPrivate.searchDriveMetadata(
       query,
       function(suggestions) {
@@ -3021,7 +3054,9 @@ DialogType.isModal = function(type) {
         // query could be delivered at a later time.
         if (query != this.lastQuery_)
           return;
-        this.autocompleteList_.suggestions = suggestions;
+
+        // Keeps the items in the initial list.
+        this.autocompleteList_.suggestions = [headerItem].concat(suggestions);
       }.bind(this));
   };
 
@@ -3035,15 +3070,24 @@ DialogType.isModal = function(type) {
   FileManager.prototype.createAutocompleteListItem_ = function(item) {
     var li = new cr.ui.ListItem();
     li.itemInfo = item;
-    var iconType = FileType.getIcon(item.entry);
+
     var icon = this.document_.createElement('div');
     icon.className = 'detail-icon';
-    icon.setAttribute('file-type-icon', iconType);
+
     var text = this.document_.createElement('div');
     text.className = 'detail-text';
-    // highlightedBaseName is a piece of HTML with meta characters properly
-    // escaped. See the comment at fileBrowserPrivate.searchDriveMetadata().
-    text.innerHTML = item.highlightedBaseName;
+
+    if (item.isHeaderItem) {
+      icon.setAttribute('search-icon');
+      text.innerHTML =
+          strf('SEARCH_DRIVE_HTML', util.htmlEscape(item.searchQuery));
+    } else {
+      var iconType = FileType.getIcon(item.entry);
+      icon.setAttribute('file-type-icon', iconType);
+      // highlightedBaseName is a piece of HTML with meta characters properly
+      // escaped. See the comment at fileBrowserPrivate.searchDriveMetadata().
+      text.innerHTML = item.highlightedBaseName;
+    }
     li.appendChild(icon);
     li.appendChild(text);
     return li;
@@ -3054,7 +3098,18 @@ DialogType.isModal = function(type) {
    * @private
    */
   FileManager.prototype.openAutocompleteSuggestion_ = function() {
-    var entry = this.autocompleteList_.selectedItem.entry;
+    var selectedItem = this.autocompleteList_.selectedItem;
+
+    // If the entry is the search item or no entry is selected, just change to
+    // the search result.
+    if (!selectedItem || selectedItem.isHeaderItem) {
+      var query = selectedItem ?
+          selectedItem.searchQuery : this.searchBox_.value;
+      this.search_(query);
+      return;
+    }
+
+    var entry = selectedItem.entry;
     // If the entry is a directory, just change the directory.
     if (entry.isDirectory) {
       this.onDirectoryAction(entry);

chrome/browser/resources/file_manager/js/mock_chrome.js

@@ -789,6 +789,7 @@ chrome.fileBrowserPrivate = {
       EXCEL_FILE_TYPE: 'Excel spreadsheet',
 
       SEARCH_TEXT_LABEL: 'Search',
+      SEARCH_DRIVE_HTML: '<b>\'$1\'</b> - search Drive',
       SEARCH_NO_MATCHING_FILES_HTML: 'No files match <b>"$1"</b>',
       SEARCH_SPINNER: 'Searching...',
 

chrome/test/data/extensions/api_test/file_browser/drive_search_test/test.js

@@ -154,8 +154,6 @@ chrome.test.runTests([
         {path: '/drive/test_dir/test_file.tiff', type: 'file'},
         // (2012-01-01T11:00:00.000Z, 2012-01-01T10:00:30.00Z)
         {path: '/drive/test_dir/test_file.xul.foo', type: 'file'},
-        // (2011-11-02T04:00:00.000Z, 2011-11-02T04:00:00.000Z)
-        {path: '/drive/test_dir/empty_test_dir', type: 'dir'},
     ];
 
     chrome.fileBrowserPrivate.searchDriveMetadata(