Advanced printing destination settings modal dialog (non-functional yet, just the skeleton).

chrome/browser/resources/print_preview/common/search_box.js

Index: chrome/browser/resources/print_preview/common/search_box.js
diff --git a/chrome/browser/resources/print_preview/search/search_box.js b/chrome/browser/resources/print_preview/common/search_box.js
similarity index 79%
rename from chrome/browser/resources/print_preview/search/search_box.js
rename to chrome/browser/resources/print_preview/common/search_box.js
index dfdd466a0c0ebddc397c1d95c7d8d4d5934f4d0d..90c2f9c8124556fcbd798a71b4fad68a27d328d1 100644
--- a/chrome/browser/resources/print_preview/search/search_box.js
+++ b/chrome/browser/resources/print_preview/common/search_box.js
@@ -7,23 +7,28 @@ cr.define('print_preview', function() {
 
   /**
    * Component that renders a search box for searching through destinations.
+   * @param {string} searchBoxPlaceholderText Search box placeholder text.
    * @constructor
    * @extends {print_preview.Component}
    */
-  function SearchBox() {
+  function SearchBox(searchBoxPlaceholderText) {
     print_preview.Component.call(this);
 
     /**
+     * Search box placeholder text.
+     * @private {string}
+     */
+    this.searchBoxPlaceholderText_ = searchBoxPlaceholderText;
+
+    /**
      * Timeout used to control incremental search.
-     * @type {?number}
-     * @private
+     * @private {?number}
      */
      this.timeout_ = null;
 
     /**
      * Input box where the query is entered.
-     * @type {HTMLInputElement}
-     * @private
+     * @private {HTMLInputElement}
      */
     this.input_ = null;
   };
@@ -37,19 +42,9 @@ cr.define('print_preview', function() {
   };
 
   /**
-   * CSS classes used by the search box.
-   * @enum {string}
-   * @private
-   */
-  SearchBox.Classes_ = {
-    INPUT: 'search-box-input'
-  };
-
-  /**
    * Delay in milliseconds before dispatching a SEARCH event.
-   * @type {number}
+   * @private {number}
    * @const
-   * @private
    */
   SearchBox.SEARCH_DELAY_ = 150;
 
@@ -68,6 +63,14 @@ cr.define('print_preview', function() {
     },
 
     /** @override */
+    createDom: function() {
+      this.setElementInternal(this.cloneTemplateInternal(
+          'search-box-template'));
+      this.input_ = this.getChildElement('.search-box-input');
+      this.input_.setAttribute('placeholder', this.searchBoxPlaceholderText_);
+    },
+
+    /** @override */
     enterDocument: function() {
       print_preview.Component.prototype.enterDocument.call(this);
       this.tracker.add(this.input_, 'input', this.onInputInput_.bind(this));
@@ -79,12 +82,6 @@ cr.define('print_preview', function() {
       this.input_ = null;
     },
 
-    /** @override */
-    decorateInternal: function() {
-      this.input_ = this.getElement().getElementsByClassName(
-          SearchBox.Classes_.INPUT)[0];
-    },
-
     /**
      * @return {string} The current query of the search box.
      * @private
@@ -109,9 +106,8 @@ cr.define('print_preview', function() {
      * @private
      */
     onInputInput_: function() {
-      if (this.timeout_) {
+      if (this.timeout_)
         clearTimeout(this.timeout_);
-      }
       this.timeout_ = setTimeout(
           this.dispatchSearchEvent_.bind(this), SearchBox.SEARCH_DELAY_);
     }