[CUPS] Implement the Add Printer dialogs.

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

Index: chrome/browser/resources/settings/printing_page/cups_add_printer_dialog_util.html
diff --git a/chrome/browser/resources/settings/printing_page/cups_add_printer_dialog_util.html b/chrome/browser/resources/settings/printing_page/cups_add_printer_dialog_util.html
new file mode 100644
index 0000000000000000000000000000000000000000..bccb54611ea035bef3628dcada3224e72788fa1d
--- /dev/null
+++ b/chrome/browser/resources/settings/printing_page/cups_add_printer_dialog_util.html
@@ -0,0 +1,69 @@
+<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.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-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"></style>
+    <style>
+      .list-frame {
+        -webkit-padding-end: 0;
+        -webkit-padding-start: 0;
+      }
+
+      .list-item {
+        -webkit-padding-start: 20px;
+        min-height: 35px;
+      }
+

[michaelpg, 2016/08/29 17:10:33]

nit: remove trailing blank line

[xdai1, 2016/08/29 18:45:45]

Done.

+    </style>
+    <div class="list-frame">
+      <array-selector id="arraySelector" items="[[printers]]"
+          selected="{{selectedPrinter}}">
+      </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="add-printer-dialog-template">
+  <template>
+    <style include="settings-shared"></style>
+    <style>
+      #dialog .body {
+        -webkit-padding-end: 0;
+        -webkit-padding-start: 0;
+        height: 350px;
+      }
+
+      #dialog .button-container {
+        border-top: 1px solid rgba(0, 0, 0, 0.14);
+        margin-top: 0;
+        padding-top: 10px;
+      }
+
+      #dialog .button-container ::content paper-button {
+        font-size: 14px;
+        font-weight: bold;
+      }
+    </style>
+
+    <dialog is="cr-dialog" id="dialog">
+      <div class="title">$i18n{addPrinterTitle}</div>
+      <div class="body">
+        <content select=":not(paper-button)"></content>

[michaelpg, 2016/08/29 17:10:33]

IMO this is a bit dangerous -- if I try to add a <paper-button> in the dialog,
it wouldn't be obvious to me why it shows up in the wrong place. I'd suggest
using a class or a containing div instead, but it's up to you.

[xdai1, 2016/08/29 18:45:45]

Thanks! This logic works for this particular setup flow. But I still modified it
as you suggested to avoid future problem. 

+      </div>
+      <div class="button-container">
+        <content select="paper-button"></content>
+      </div>
+    </dialog>
+  </template>
+  <script src="cups_add_printer_dialog_util.js"></script>
+</dom-module>