[CUPS] Implelment Manufacturer and Model Dialog.

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

Index: chrome/browser/resources/settings/printing_page/cups_add_printer_dialog.html
diff --git a/chrome/browser/resources/settings/printing_page/cups_add_printer_dialog.html b/chrome/browser/resources/settings/printing_page/cups_add_printer_dialog.html
index cc22c0f2c454f2b4fef172d1d269429c997be7bb..ef7cb1793cd92b5ca1a412df2c17f1c0d6f1ce80 100644
--- a/chrome/browser/resources/settings/printing_page/cups_add_printer_dialog.html
+++ b/chrome/browser/resources/settings/printing_page/cups_add_printer_dialog.html
@@ -1,5 +1,6 @@
 <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-dropdown-menu/paper-dropdown-menu.html">

[michaelpg, 2016/09/02 19:49:11]

as a follow-up, please switch this file to use <paper-dropdown-menu-light>.
settings shouldn't use <paper-dropdown-menu> anymore.

note that the light version may require slightly different styling:
https://github.com/PolymerElements/paper-dropdown-menu

[xdai1, 2016/09/02 21:14:58]

Done.

 <link rel="import" href="/i18n_setup.html">
 <link rel="import" href="/printing_page/cups_add_printer_dialog_util.html">
 <link rel="import" href="/printing_page/cups_printers_browser_proxy.html">
@@ -62,20 +63,42 @@
 
       paper-dropdown-menu,
       paper-input {
-        width: 270px;
-      }
-
-      paper-input {
+        --paper-input-container-color: var(--google-grey-500);
         --paper-input-container-input: {
           font-size: inherit;
         };
-
-        --paper-input-container-color: var(--google-grey-500);
+        width: 270px;
       }
 
       #printerNameInput {
         width: 450px;
       }
+
+      .search-printer-box {
+        margin-top: 18px;
+      }
+
+      .search-printer-box paper-spinner {
+        --paper-spinner-stroke-width: 2px;
+        height: 15px;
+        margin-left: 20px;
+        margin-right: 3px;
+        width: 15px;
+      }
+
+      .search-printer-box .spinner-comment {
+        color: var(--google-grey-700);
+      }
+
+      .printer-not-found {
+        background-color: var(--paper-yellow-100);
+        padding: 10px 20px;
+      }
+
+      .printer-found {
+        background-color: var(--paper-green-100);
+        padding: 10px 20px;
+      }
     </style>
     <add-printer-dialog>
       <div class="dialog-body">
@@ -93,7 +116,9 @@
           <div class="start">
             <div class="label">$i18n{printerAddress}</div>
             <div class="secondary">
-              <paper-input no-label-float value="{{newPrinter.printerAddress}}">
+              <paper-input no-label-float id="printerAddressInput"

[michaelpg, 2016/09/02 19:49:11]

import paper-input

[xdai1, 2016/09/02 21:14:58]

Done.

+                  value="{{newPrinter.printerAddress}}"
+                  on-input="onAddressChanged_">
               </paper-input>
             </div>
           </div>
@@ -137,7 +162,17 @@
             </div>
           </div>
         </div>
-        <!-- TODO(xdai): Add paper-spinner -->
+        <div class="search-printer-box" id="searchInProgress" hidden>
+          <paper-spinner active></paper-spinner>

[michaelpg, 2016/09/02 19:49:11]

import paper-spinner

[xdai1, 2016/09/02 21:14:58]

Done.

+          <span class="spinner-comment">$i18n{searchingPrinter}</span>
+        </div>
+        <div class="search-printer-box printer-not-found"
+            id="searchNotFound" hidden>
+          <span>$i18n{printerNotFound}</span>
+        </div>
+        <div class="search-printer-box printer-found" id="searchFound" hidden>
+          <span>$i18n{printerFound}</span>
+        </div>
       </div>
       <div class="dialog-buttons">
         <paper-button id="discoverPrintersButton"
@@ -147,7 +182,68 @@
         <paper-button class="cancel-button" on-tap="onCancelTap_">
           $i18n{cancelButtonText}
         </paper-button>
-        <paper-button class="action-button" on-tap="switchToConfiguringDialog_">
+        <paper-button class="action-button" on-tap="switchToManufacturerDialog_"
+            disabled="[[addPrinterNotAllowed_(newPrinter.printerName,
+                                              newPrinter.printerAddress)]]">
+          $i18n{addPrinterButtonText}
+        </paper-button>
+      </div>
+    </add-printer-dialog>
+  </template>
+</dom-module>
+
+<dom-module id="add-printer-manufacturer-model-dialog">
+  <template>
+    <style include="settings-shared">
+      .settings-box {
+        border-top: none;
+        margin-bottom: 10px;
+      }
+
+      .settings-box .start .label {
+        color: var(--google-grey-700);
+      }
+
+      #manuallyAddPrinterButton {
+        -webkit-margin-end: 210px;
+      }
+    </style>
+    <add-printer-dialog>
+      <div class="dialog-body">
+        <div class="settings-box first">
+          $i18n{selectManufacturerModelMessage}
+        </div>
+        <div class="settings-box two-line">
+          <div class="start">
+            <div class="label">$i18n{printerManufacturer}</div>
+            <div class="secondary">
+              <drop-down-search-box items="[[manufacturerList]]"
+                  selected-item="{{newPrinter.printerManufacturer}}">
+              </drop-down-search-box>
+            </div>
+          </div>
+        </div>
+        <div class="settings-box two-line">
+          <div class="start">
+            <div class="label">$i18n{printerModel}</div>
+            <div class="secondary">
+              <drop-down-search-box items="[[modelList]]"
+                  selected-item="{{newPrinter.printerModel}}">
+              </drop-down-search-box>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="dialog-buttons">
+        <paper-button id="manuallyAddPrinterButton"
+            on-tap="switchToManualAddDialog_">
+          $i18n{manuallyAddPrinterButtonText}
+        </paper-button>
+        <paper-button class="cancel-button" on-tap="onCancelTap_">
+          $i18n{cancelButtonText}
+        </paper-button>
+        <paper-button class="action-button" id="addPrinterButton"
+            on-tap="switchToConfiguringDialog_">
           $i18n{addPrinterButtonText}
         </paper-button>
       </div>
@@ -200,7 +296,12 @@
       </add-printer-configuring-dialog>
     </template>
 
-    <!-- TODO(xdai): Implement Manufacturer and Model Dialog -->
+    <!-- Manufacturer and Model Dialog -->
+    <template is="dom-if" if="[[showManufacturerDialog_]]" restamp>
+      <add-printer-manufacturer-model-dialog new-printer="{{newPrinter}}">
+      </add-printer-manufacturer-model-dialog>
+    </template>
+
   </template>
   <script src="cups_add_printer_dialog.js"></script>
 </dom-module>