[CUPS] Implelment Manufacturer and Model Dialog.

chrome/browser/resources/settings/printing_page/cups_add_printer_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-dropdown-menu/paper-dropdown-menu-light.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-spinner/paper-spinner.html">
 <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">
 <link rel="import" href="/settings_shared_css.html">
 
 <dom-module id="add-printer-discovery-dialog">
   <template>
     <style include="settings-shared">
       add-printer-list {
         max-height: 350px;
@@ skipping 40 matching lines @@
       }
 
       .settings-box.two-line {
         min-height: 72px;
       }
 
       .settings-box .start .label {
         color: var(--google-grey-700);
       }
 
-      paper-dropdown-menu,
+      paper-dropdown-menu-light,
       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">
         <div class="settings-box first two-line">
           <div class="start">
             <div class="label">$i18n{printerName}</div>
             <div class="secondary">
               <paper-input no-label-float id="printerNameInput"
                   value="{{newPrinter.printerName}}">
               </paper-input>
             </div>
           </div>
         </div>
         <div class="settings-box two-line">
           <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"
+                  value="{{newPrinter.printerAddress}}"
+                  on-input="onAddressChanged_">
               </paper-input>
             </div>
           </div>
         </div>
         <div class="settings-box two-line">
           <div class="start">
             <div class="label">$i18n{printerProtocol}</div>
             <div class="secondary">
-              <paper-dropdown-menu no-label-float>
+              <paper-dropdown-menu-light no-label-float>
                 <paper-listbox class="dropdown-content"
                     selected="{{newPrinter.printerProtocol}}"
                     attr-for-selected="value">
                   <paper-item value="ipp">
                     $i18n{printerProtocolIpp}
                   </paper-item>
                   <paper-item value="ipps">
                     $i18n{printerProtocolIpps}
                   </paper-item>
                   <paper-item value="http">
                     $i18n{printerProtocolHttp}
                   </paper-item>
                   <paper-item value="https">
                     $i18n{printerProtocolHttps}
                   </paper-item>
                   <paper-item value="socket">
                     $i18n{printerProtocolAppSocket}
                   </paper-item>
                   <paper-item value="lpd">$i18n{printerProtocolLpd}</paper-item>
                   <paper-item value="usb">$i18n{printerProtocolUsb}</paper-item>
                 </paper-listbox>
-              </paper-dropdown-menu>
+              </paper-dropdown-menu-light>
             </div>
           </div>
         </div>
         <div class="settings-box two-line">
           <div class="start">
             <div class="label">$i18n{printerQueue}</div>
             <div class="secondary">
               <paper-input no-label-float value="{{newPrinter.printerQueue}}">
               </paper-input>
             </div>
           </div>
         </div>
-        <!-- TODO(xdai): Add paper-spinner -->
+        <div class="search-printer-box" id="searchInProgress" hidden>
+          <paper-spinner active></paper-spinner>
+          <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"
             on-tap="switchToDiscoveryDialog_">
           $i18n{discoverPrintersButtonText}
         </paper-button>
         <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>
     </add-printer-dialog>
   </template>
 </dom-module>
 
 <dom-module id="add-printer-configuring-dialog">
   <template>
     <style include="settings-shared">
       .dialog-body {
         padding-top: 140px;
         text-align: center;
@@ skipping 29 matching lines @@
       </add-printer-maually-dialog>
     </template>
 
     <!-- Configuring Printer Dialog -->
     <template is="dom-if" if="[[showConfiguringDialog_]]" restamp>
       <add-printer-configuring-dialog
           printer-name="[[getConfiguringPrinterName_()]]">
       </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>