webui: Make AutocompleteList customizable

AutocompleteList is not flexible enough for purposes other than selecting
a web site, for the following reasons:

1) There is no way to customize how a list item is rendered.
2) There is no way to customize what to do when a suggestion is selected.

This patch fixes the two issues, and make AutocompleteList useful for
other purposes.

BUG=174584
TEST=Go to "Settings" -> "On startup" -> "Set pages" and autocomplete of a web site works as before

Review URL: https://codereview.chromium.org/12217034

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

1 files changed, 43 insertions, 12 deletions

diff --git a/ui/webui/resources/js/cr/ui/autocomplete_list.js b/ui/webui/resources/js/cr/ui/autocomplete_list.js
index e0c9cd4..e626567 100644
--- a/ui/webui/resources/js/cr/ui/autocomplete_list.js
+++ b/ui/webui/resources/js/cr/ui/autocomplete_list.js
@@ -9,6 +9,8 @@ cr.define('cr.ui', function() {
 
   /**
    * Creates a new autocomplete list item.
+   * This is suitable for selecting a web site, and used by default.
+   * A different behavior can be set by AutocompleteListItem.itemConstructor.
    * @param {Object} pageInfo The page this item represents.
    * @constructor
    * @extends {cr.ui.ListItem}
@@ -93,36 +95,37 @@ cr.define('cr.ui', function() {
      */
     suggestionUpdateRequestCallback_: null,
 
+    /**
+     * A function to call when a suggestion is
+     * selected. setInputValueToSelectedUrl_ is used by default.
+     * @type {Function}
+     * @private
+     */
+    suggestionSelectedCallback_: null,
+
     /** @override */
     decorate: function() {
       List.prototype.decorate.call(this);
       this.classList.add('autocomplete-suggestions');
       this.selectionModel = new cr.ui.ListSingleSelectionModel;
 
+      this.itemConstructor = AutocompleteListItem;
       this.textFieldKeyHandler_ = this.handleAutocompleteKeydown_.bind(this);
       var self = this;
       this.textFieldInputHandler_ = function(e) {
         if (self.suggestionUpdateRequestCallback_)
           self.suggestionUpdateRequestCallback_(self.targetInput_.value);
       };
-      this.addEventListener('change', function(e) {
-        var input = self.targetInput;
-        if (!input || !self.selectedItem)
-          return;
-        input.value = self.selectedItem['url'];
-        // Programatically change the value won't trigger a change event, but
-        // clients are likely to want to know when changes happen, so fire one.
-        var changeEvent = document.createEvent('Event');
-        changeEvent.initEvent('change', true, true);
-        input.dispatchEvent(changeEvent);
-      });
+      this.suggestionSelectedCallback_ =
+          this.setInputValueToSelectedUrl_.bind(this);
+      this.addEventListener('change', this.suggestionSelectedCallback_);
       // Start hidden; adding suggestions will unhide.
       this.hidden = true;
     },
 
     /** @override */
     createItem: function(pageInfo) {
-      return new AutocompleteListItem(pageInfo);
+      return new this.itemConstructor(pageInfo);
     },
 
     /**
@@ -145,6 +148,18 @@ cr.define('cr.ui', function() {
     },
 
     /**
+     * A function to call when a suggestion is selected.
+     * The function should take one change Event argument, which is raised
+     * when a suggestion is selected.
+     * @type {Function}
+     */
+    set suggestionSelectedCallback(callback) {
+      this.removeEventListener('change', this.suggestionSelectedCallback_);
+      this.suggestionSelectedCallback_ = callback;
+      this.addEventListener('change', this.suggestionSelectedCallback_);
+    },
+
+    /**
      * Attaches the popup to the given input element. Requires
      * that the input be wrapped in a block-level container of the same width.
      * @param {HTMLElement} input The input element to attach to.
@@ -233,6 +248,22 @@ cr.define('cr.ui', function() {
         event.stopPropagation();
       }
     },
+
+    /**
+     * Sets the target input element's value to the 'url' field of the
+     * selected item.
+     * @param {Event} event The change event.
+     * @private
+     */
+    setInputValueToSelectedUrl_ : function(event) {
+      var input = this.targetInput_;
+      if (!input || !this.selectedItem)
+        return;
+      input.value = this.selectedItem['url'];
+      // Programatically change the value won't trigger a change event, but
+      // clients are likely to want to know when changes happen, so fire one.
+      cr.dispatchSimpleEvent(input, 'change', true);
+    },
   };
 
   return {