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

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 759 matching lines @@
         this.onTaskItemClicked_.bind(this));
 
     this.dialogDom_.ownerDocument.defaultView.addEventListener(
         'resize', this.onResize_.bind(this));
 
     if (loadTimeData.getBoolean('ASH'))
       this.dialogDom_.setAttribute('ash', 'true');
 
     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';
     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) {
       return self.createAutocompleteListItem_(item);
@@ skipping 22 matching lines @@
       // 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));
 
     var container = this.document_.querySelector('.dialog-header');
     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));
 
     this.defaultActionMenuItem_ =
         this.dialogDom_.querySelector('#default-action');
 
     this.openWithCommand_ =
         this.dialogDom_.querySelector('#open-with');
 
     this.driveBuyMoreStorageCommand_ =
@@ skipping 1172 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() {
-    var searchBox = this.dialogDom_.querySelector('#search-box');
-    if (!searchBox.disabled)
-      searchBox.value = '';
+    if (!this.searchBox_.disabled)
+      this.searchBox_.value = '';
   };
 
   /**
    * Update the gear menu.
    * @private
    */
   FileManager.prototype.updateGearMenu_ = function() {
     this.syncButton.hidden = !this.isOnDrive();
     this.hostedButton.hidden = !this.isOnDrive();
 
@@ skipping 932 matching lines @@
     if (newValue)
       event.target.setAttribute('checked', 'checked');
     else
       event.target.removeAttribute('checked');
 
     var changeInfo = {};
     changeInfo[pref] = inverted ? !newValue : newValue;
     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() {
       if (this.directoryModel_.getFileList().length === 0) {
         // The string 'SEARCH_NO_MATCHING_FILES_HTML' may contain HTML tags,
         // hence we escapes |searchString| here.
         var html = strf('SEARCH_NO_MATCHING_FILES_HTML',
                         util.htmlEscape(searchString));
         noResultsDiv.innerHTML = html;
         noResultsDiv.setAttribute('show', 'true');
@@ skipping 14 matching lines @@
   /**
    * Requests autocomplete suggestions for files on Drive.
    * Once the suggestions are returned, the autocomplete popup will show up.
    *
    * @param {string} query The text to autocomplete from.
    * @private
    */
   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) {
         // searchDriveMetadata() is asynchronous hence the result of an old
         // 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));
   };
 
   /**
    * Creates a ListItem element for autocomple.
    *
    * @param {Object} item An object representing a suggestion.
    * @return {HTMLElement} Element containing the autocomplete suggestions.
    * @private
    */
   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;
   };
 
   /**
    * Opens the currently selected suggestion item.
    * @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);
       return;
     }
 
     var urls = [entry.toURL()];
     var self = this;
 
     // To open a file, first get the mime type.
@@ skipping 162 matching lines @@
       callback(this.preferences_);
       return;
     }
 
     chrome.fileBrowserPrivate.getPreferences(function(prefs) {
       this.preferences_ = prefs;
       callback(prefs);
     }.bind(this));
   };
 })();