Add search to Print Preview advanced options and enable them in the UI.

chrome/browser/resources/print_preview/settings/advanced_settings/advanced_settings_item.js

 // Copyright 2014 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.
 
 cr.define('print_preview', function() {
   'use strict';
 
   /**
    * Component that renders a destination item in a destination list.
    * @param {!cr.EventTarget} eventTarget Event target to dispatch selection
@@ skipping 29 matching lines @@
 
     /**
      * Value selected by user. {@code null}, if user has not changed the default
      * value yet (still, the value can be the default one, if it is what user
      * selected).
      * @private {?string}
      */
     this.selectedValue_ = null;
 
     /**
-     * Active filter query text.
+     * Active filter query.
      * @private {RegExp}
      */
     this.query_ = null;
 
+    /**
+     * Search hint for the control.
+     * @private {print_preview.SearchBubble}
+     */
+    this.searchBubble_ = null;
+
     /** @private {!EventTracker} */
     this.tracker_ = new EventTracker();
   };
 
   AdvancedSettingsItem.prototype = {
     __proto__: print_preview.Component.prototype,
 
     /** @override */
     createDom: function() {
       this.setElementInternal(this.cloneTemplateInternal(
           'advanced-settings-item-template'));
 
-      var nameEl = this.getChildElement('.advanced-settings-item-label');
-      var textContent = this.capability_.display_name;
-      if (this.query_)
-        this.addTextWithHighlight_(nameEl, textContent);
-      else
-        nameEl.textContent = textContent;
-      nameEl.title = textContent;
-
       this.tracker_.add(
           this.select_, 'change', this.onSelectChange_.bind(this));
       this.tracker_.add(this.text_, 'input', this.onTextInput_.bind(this));
 
       this.initializeValue_();
+
+      this.renderCapability_();
     },
 
     /**
      * ID of the corresponding vendor capability.
      * @return {string}
      */
     get id() {
       return this.capability_.id;
     },
 
     /**
      * Currently selected value.
      * @return {string}
      */
     get selectedValue() {
       return this.selectedValue_ || '';
     },
 
     /**
      * Whether the corresponding ticket item was changed or not.
      * @return {boolean}
      */
     isModified: function() {
       return !!this.selectedValue_;
     },
 
+    /** @param {RegExp} query Query to update the filter with. */
+    updateSearchQuery: function(query) {
+      this.query_ = query;
+      this.renderCapability_();
+    },
+
     /**
      * @return {HTMLSelectElement} Select element.
      * @private
      */
     get select_() {
       return this.getChildElement(
           '.advanced-settings-item-value-select-control');
     },
 
     /**
@@ skipping 19 matching lines @@
 
     /**
      * Called when the text element value is changed.
      * @private
      */
     onTextInput_: function() {
       this.selectedValue_ = this.text_.value || null;
     },
 
     /**
+     * Renders capability properties according to the current state.
+     * @private
+     */
+    renderCapability_: function() {
+      var textContent = this.capability_.display_name;
+      var nameMatches = this.query_ ? !!textContent.match(this.query_) : true;
+      var optionMatches = null;
+      if (false && this.query_) {
+        if (this.capability_.type == 'SELECT') {
+          this.capability_.select_cap.option.some(function(option) {
+            optionMatches = (option.display_name || '').match(this.query_);
+            return !!optionMatches;
+          }.bind(this));
+        } else {
+          optionMatches = (this.text_.value || '').match(this.query_);
+        }
+      }
+      var matches = nameMatches || optionMatches;
+
+      if ((!matches || !optionMatches) && this.searchBubble_) {
+        this.searchBubble_.dispose();
+        this.searchBubble_ = null;
+      }
+
+      setIsVisible(this.getElement(), matches);
+      if (!matches)
+        return;
+
+      var nameEl = this.getChildElement('.advanced-settings-item-label');
+      if (this.query_) {
+        nameEl.textContent = '';
+        this.addTextWithHighlight_(nameEl, textContent);
+      } else {
+        nameEl.textContent = textContent;
+      }
+      nameEl.title = textContent;
+
+      if (optionMatches) {
+        window.console.log(optionMatches[0]);
+        var element =
+            this.capability_.type == 'SELECT' ? this.select_ : this.text_;
+        if (!this.searchBubble_) {
+          this.searchBubble_ = new print_preview.SearchBubble(optionMatches[0]);
+          this.searchBubble_.attachTo(element);
+        } else {
+          this.searchBubble_.content = optionMatches[0];
+        }
+      }
+    },
+
+    /**
      * Initializes the element's value control.
      * @private
      */
     initializeValue_: function() {
       this.selectedValue_ =
           this.printTicketStore_.vendorItems.ticketItems[this.id] || null;
 
       if (this.capability_.type == 'SELECT')
         this.initializeSelectValue_();
       else
@@ skipping 55 matching lines @@
         }
       });
     }
   };
 
   // Export
   return {
     AdvancedSettingsItem: AdvancedSettingsItem
   };
 });