[CUPS] Implelment Manufacturer and Model Dialog.

chrome/browser/resources/settings/printing_page/cups_add_printer_dialog_util.html

 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
+<link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.html">
 <link rel="import" href="/printing_page/cups_printers_browser_proxy.html">
 <link rel="import" href="/settings_shared_css.html">
 
 <dom-module id="add-printer-list">
   <template>
     <style include="settings-shared">
       .list-frame {
         -webkit-padding-end: 0;
         -webkit-padding-start: 0;
@@ skipping 10 matching lines @@
       </array-selector>
       <template is="dom-repeat" items="[[printers]]">
         <paper-item class="list-item" on-tap="onSelect_">
           [[item.printerName]] [[item.printerModel]]
         </paper-item>
       </template>
     </div>
   </template>
 </dom-module>
 
+<dom-module id="drop-down-search-box">
+  <template>
+    <style include="settings-shared">
+      paper-input,
+      iron-dropdown {

[michaelpg, 2016/09/02 21:51:55]

nit: alphabetize this maybe

[xdai1, 2016/09/02 23:39:13]

Done.

+        width: 270px;
+      }
+      
+      paper-input {
+        --paper-input-container-color: var(--google-grey-500);
+        --paper-input-container-input: {
+          font-size: inherit;
+        };
+      }
+      
+      iron-dropdown .dropdown-content paper-item {
+        min-height: 40px;
+      }
+    </style>
+    <paper-input no-label-float on-tap="onTap_" on-input="onInputValueChanged_"

[michaelpg, 2016/09/02 21:51:55]

could be a performance issue with re-running the filter every keystroke. setting
`type="search"` would let you use on-search instead of on-input. additionally,
adding the `incremental` attribute will coalesce multiple keystrokes, so the
filter updates after a timeout instead of immediately on keystroke:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-incremental

[xdai1, 2016/09/02 23:39:13]

It seems 'paper-input' doesn't have on-search event. Thus use 'input' here.

[michaelpg, 2016/09/06 22:24:40]

Acknowledged.

[Dan Beam, 2016/09/06 22:37:12]

it does if you do this:
https://cs.chromium.org/chromium/src/ui/webui/resources/cr_elements/cr_search...

[michaelpg, 2016/09/06 22:58:52]

hmm, the difference between that and xdai1's latest patch (which you may not
have seen yet) is that cr-search-field has the on-search event on the
paper-input-container instead of the iron-input. I don't see the search event in
paper-input-container so my guess is the cr-search-field example just grabs the
bubbled event created by the input, so I'd argue xdai1's version is more
correct.

[xdai1, 2016/09/06 23:13:16]

Thanks for the explanation.

+        on-blur="onBlur_">
+      <paper-icon-button suffix id="searchIcon" icon="cr:search" hidden>
+      </paper-icon-button>
+      <paper-icon-button suffix id="dropdownIcon" icon="cr:arrow-drop-down">
+      </paper-icon-button>
+    </paper-input>
+    <iron-dropdown horizontal-align="left" vertical-align="top"
+        vertical-offset="47">

[michaelpg, 2016/09/02 21:51:55]

not a big fan of arbitrary numbers. will this work when scaling the page? maybe
it would make sense to set this programatically when needed, using the
paper-input offsetHeight?

[xdai1, 2016/09/02 23:39:13]

It does work with scaling the page. I addressed your comment to use the
offsetHeight instead, however, the dropdown window could not align with the
bottom of the input very well. Could you take a look at the screenshot in
https://drive.google.com/corp/drive/u/0/folders/0B4R9nvLdzmC9d3o2WDNyNGRjejQ to
see if it looks good to you?

[michaelpg, 2016/09/06 22:24:40]

yeah, that looks weird. If you couldn't find a property with the right size to
use, like offsetHeight, the constant here is fine.

[xdai1, 2016/09/06 23:13:16]

I don't find a proper way to dynamically determine the size. I reverted to use
the constant here but will come back to it if I know a good way to do it in the
future.

+      <div class="dropdown-content">
+        <template is="dom-repeat" items="[[items]]"
+            filter="[[filterItems_(searchTerm_)]]">
+          <paper-item on-tap="onSelect_">[[item]]</paper-item>
+        </template>
+      </div>
+    </iron-dropdown>
+  </template>
+</dom-module>
+
 <dom-module id="add-printer-dialog">
   <template>
     <style include="settings-shared">
       #dialog .body {
         -webkit-padding-end: 0;
         -webkit-padding-start: 0;
         height: 350px;
       }
 
       #dialog .button-container {
@@ skipping 13 matching lines @@
       <div class="body">
         <content select=".dialog-body"></content>
       </div>
       <div class="button-container">
         <content select=".dialog-buttons"></content>
       </div>
     </dialog>
   </template>
   <script src="cups_add_printer_dialog_util.js"></script>
 </dom-module>