[CUPS] Implement the UI handler for adding a new printer.

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

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview 'settings-cups-add-printer-dialog' includes multiple dialogs to
  * set up a new CUPS printer.
  * Subdialogs include:
  * - 'add-printer-discovery-dialog' is a dialog showing discovered printers on
  *   the network that are available for setup.
@@ skipping 83 matching lines @@
     this.$$('add-printer-dialog').close();
     this.fire('open-discovery-printers-dialog');
   },
 
   /** @private */
   onCancelTap_: function() {
     this.$$('add-printer-dialog').close();
   },
 
   /** @private */
-  switchToManufacturerDialog_: function() {
+  switchToConfiguringDialog_: function() {
     this.$$('add-printer-dialog').close();
-    this.fire('open-manufacturer-model-dialog');
+    this.fire('open-configuring-printer-dialog');
   },
 
   /** @private */
   onAddressChanged_: function() {
-    this.$.searchInProgress.hidden = false;
-    this.$.searchFound.hidden = true;
-    this.$.searchNotFound.hidden = true;
-
-    var value = this.$.printerAddressInput.value;
-    if (this.isValidIpAddress_(value)) {
-      // TODO(xdai): Check if the printer address exists after the API is ready.
-      this.$.searchInProgress.hidden = true;
-      this.$.searchFound.hidden = false;
-      this.$.searchNotFound.hidden = true;
-    } else {
-      this.$.searchInProgress.hidden = true;
-      this.$.searchFound.hidden = true;
-      this.$.searchNotFound.hidden = false;
-    }
-  },
-
-  /**
-   * @param {string} ip
-   * @return {boolean}
-   * @private
-   */
-  isValidIpAddress_: function(ip) {
-    var addressRegex = RegExp('^([01]?\\d\\d?|2[0-4]\\d|25[0-5])\\.' +
-                              '([01]?\\d\\d?|2[0-4]\\d|25[0-5])\\.' +
-                              '([01]?\\d\\d?|2[0-4]\\d|25[0-5])\\.' +
-                              '([01]?\\d\\d?|2[0-4]\\d|25[0-5])$');
-    return addressRegex.test(ip);
-  },
-
-  /**
-   * @param {string} printerName
-   * @param {string} printerAddress
-   * @return {boolean}
-   * @private
-   */
-  addPrinterNotAllowed_: function(printerName, printerAddress) {
-    return !printerName || !printerAddress ||
-           !this.isValidIpAddress_(printerAddress);
+    // TODO(xdai): Check if the printer address exists and then show the
+    // corresponding message after the API is ready.
+    // The format of address is: ip-address-or-hostname:port-number.
   },
 });
 
 Polymer({
   is: 'add-printer-manufacturer-model-dialog',
 
   properties: {
     /** @type {!CupsPrinterInfo} */
     newPrinter: {
       type: Object,
       notify: true,
     },
 
     /** @type {!Array<string>} */
     manufacturerList: {
       type: Array,
     },
 
     /** @type {!Array<string>} */
     modelList: {
       type: Array,
     },
+
+    setupFailed: {
+      type: Boolean,
+      value: false,
+    },
   },
 
   observers: [
     'selectedManufacturerChanged_(newPrinter.printerManufacturer)',
   ],
 
   /** @override */
   ready: function() {
     // TODO(xdai): Get available manufacturerList after the API is ready.
   },
@@ skipping 33 matching lines @@
   attached: function() {
     this.$.configuringMessage.textContent = loadTimeData.getStringF(
         'printerConfiguringMessage', this.printerName);
   },
 
   /** @private */
   onCancelConfiguringTap_: function() {
     this.$$('add-printer-dialog').close();
     this.fire('configuring-dialog-closed');
   },
+
+  close: function() {
+    this.$$('add-printer-dialog').close();
+  },
 });
 
 Polymer({
   is: 'settings-cups-add-printer-dialog',
 
+  behaviors: [WebUIListenerBehavior],
+
   properties: {
     /** @type {!CupsPrinterInfo} */
     selectedPrinter: {
       type: Object,
     },
 
     /** @type {!CupsPrinterInfo} */
     newPrinter: {
       type: Object,
     },
 
+    /** @type {boolean} whether the new printer setup is failed. */
+    setupFailed: {
+      type: Boolean,
+      value: false,
+    },
+
     /** @private {string} */
     previousDialog_: String,
 
     /** @private {string} */
     currentDialog_: String,
 
     /** @private {boolean} */
     showDiscoveryDialog_: Boolean,
 
     /** @private {boolean} */
     showManuallyAddDialog_: Boolean,
 
     /** @private {boolean} */
     showConfiguringDialog_: Boolean,
 
     /** @private {boolean} */
     showManufacturerDialog_: Boolean,
   },
 
   listeners: {
     'configuring-dialog-closed': 'configuringDialogClosed_',
     'open-manually-add-printer-dialog': 'openManuallyAddPrinterDialog_',
     'open-configuring-printer-dialog': 'openConfiguringPrinterDialog_',
     'open-discovery-printers-dialog': 'openDiscoveryPrintersDialog_',
     'open-manufacturer-model-dialog': 'openManufacturerModelDialog_',
   },
 
+  /** @override */
+  ready: function() {
+    this.addWebUIListener('on-add-cups-printer', this.onAddPrinter_.bind(this));
+  },
+
   /** Opens the Add printer discovery dialog. */
   open: function() {
+    this.resetData_();
     this.switchDialog_('', AddPrinterDialogs.DISCOVERY, 'showDiscoveryDialog_');
   },
 
+  /**
+   * Reset all the printer data in the Add printer flow.
+   * @private
+   */
+  resetData_: function() {
+    if (this.selectedPrinter)
+      this.resetPrinterData_(this.selectedPrinter);

[michaelpg, 2016/09/20 20:58:42]

This doesn't notify Polymer of these changes. How does the dialog get updated?

A Polymer-y pattern might look like:
    this.selectedPrinter = this.getEmptyPrinter_();

[xdai1, 2016/09/21 17:40:19]

Actually it works. For example, this.resetPrinterData_(this.newPrinter) sets
this.newPrinter.printerName to an empty string, the element in the html file
that binds to newPrinter.printerName gets notified and updates itself
immediately, right?

[michaelpg, 2016/09/21 19:13:23]

No: https://jsfiddle.net/jdysdxey/

See https://www.polymer-project.org/1.0/docs/devguide/model-data#notify-path

[xdai1, 2016/09/21 23:16:16]

Thanks! You're right. But then I'm confused why it does work in my case. Could
it because we only reset the printer data each time we reopen the dialog? I
modified it as you suggested.

+    if (this.newPrinter)
+      this.resetPrinterData_(this.newPrinter);
+    this.setupFailed = false;
+  },
+
+  /**
+   * @param {!CupsPrinterInfo} printer
+   * @private
+   */
+  resetPrinterData_: function(printer) {
+    printer.printerAddress = '';
+    printer.printerDescription = '';
+    printer.printerId = '';
+    printer.printerManufacturer = '';
+    printer.printerModel = '';
+    printer.printerName = '';
+    printer.printerProtocol = 'ipp';
+    printer.printerQueue = '';
+    printer.printerStatus = '';
+  },
+
   /** @private */
   openManuallyAddPrinterDialog_: function() {
     this.switchDialog_(this.currentDialog_, AddPrinterDialogs.MANUALLY,
                        'showManuallyAddDialog_');
   },
 
   /** @private */
   openDiscoveryPrintersDialog_: function() {
     this.switchDialog_(this.currentDialog_, AddPrinterDialogs.DISCOVERY,
                        'showDiscoveryDialog_');
   },
 
   /** @private */
   openConfiguringPrinterDialog_: function() {
     this.switchDialog_(this.currentDialog_, AddPrinterDialogs.CONFIGURING,
                        'showConfiguringDialog_');
+    settings.CupsPrintersBrowserProxyImpl.getInstance().
+        addCupsPrinter(this.newPrinter);
   },
 
   /** @private */
   openManufacturerModelDialog_: function() {
     this.switchDialog_(this.currentDialog_, AddPrinterDialogs.MANUFACTURER,
                        'showManufacturerDialog_');
   },
 
   /** @private */
   configuringDialogClosed_: function() {
@@ skipping 36 matching lines @@
    */
   getConfiguringPrinterName_: function() {
     if (this.previousDialog_ == AddPrinterDialogs.DISCOVERY)
       return this.selectedPrinter.printerName;
     if (this.previousDialog_ == AddPrinterDialogs.MANUALLY ||
         this.previousDialog_ == AddPrinterDialogs.MANUFACTURER) {
       return this.newPrinter.printerName;
     }
     return '';
   },
+
+  /**
+   * @param {boolean} success
+   * @param {string} printerName
+   * @private
+   */
+  onAddPrinter_: function(success, printerName) {
+    this.$$('add-printer-configuring-dialog').close();
+    if (success)
+      return;
+
+    if (this.previousDialog_ == AddPrinterDialogs.MANUFACTURER)

[michaelpg, 2016/09/20 20:58:42]

I'm having trouble following the flow here. When would this fail without the
previous dialog being the manufacturer dialog? Why would that not be considered
a failed setup, if |success| is false?

[xdai1, 2016/09/21 17:40:19]

This is the flow
https://folio.googleplex.com/chrome-ux/mocks/390-CrOS-settings-printing#%2FCU....
For manually setup flow, it's only considered as "failed" in the path:
04->04a->05->05a->05b. So on 04a, user clicks "Add" button to set up a printer,
wait for true/false response from the backend, if the backend returns false, go
to 05 and make the user specifies the maker/model and ppd file and clicks "Add"
button to retry to set up the printer, if it fails again, show 05b. So
|this.previousDialog_| could be AddPrinterDialogs.MANUALLY or
AddPrinterDialogs.MANUFACTURER, only the latter one is considered a real
failure. 

[michaelpg, 2016/09/21 19:13:23]

Is this just because you haven't implemented the 04b error message yet?

[xdai1, 2016/09/21 23:16:16]

Actually based on the discussion I had with the PM (weifangsun@) and the backend
engineer (skau@), for now we never show img04b directly. We will always fallback
to ask the user for more info(img05) and re-try and then show the error message
if failed. I'll follow up with the PM to see if we still need the flow from
img04a->img04b.  

+      this.setupFailed = true;
+    this.switchDialog_(this.currentDialog_, AddPrinterDialogs.MANUFACTURER,
+                       'showManufacturerDialog_');
+  },
 });