[CUPS] Implement the local CUPS printer setup waiting UI.

chrome/browser/resources/print_preview/search/destination_list_item.js

Index: chrome/browser/resources/print_preview/search/destination_list_item.js
diff --git a/chrome/browser/resources/print_preview/search/destination_list_item.js b/chrome/browser/resources/print_preview/search/destination_list_item.js
index 8b529d45acc919b3f3d5aec44328569b9268b49c..6ffd963004c661a3e1564830ee9edb13d214e1af 100644
--- a/chrome/browser/resources/print_preview/search/destination_list_item.js
+++ b/chrome/browser/resources/print_preview/search/destination_list_item.js
@@ -53,6 +53,8 @@ cr.define('print_preview', function() {
    * @enum {string}
    */
   DestinationListItem.EventType = {
+    // Dispatched to check the printer needs to be configured before activation.
+    CONFIGURE_REQUEST: 'print_preview.DestinationListItem.CONFIGURE_REQUEST',
     // Dispatched when the list item is activated.
     SELECT: 'print_preview.DestinationListItem.SELECT',
     REGISTER_PROMO_CLICKED:
@@ -99,6 +101,48 @@ cr.define('print_preview', function() {
     },
 
     /**
+     * Called if the printer configuration request is accepted. Show the waiting
+     * message to the user as the configuration might take longer than expected.
+     */
+    onConfigureRequestAccepted: function() {
+      // It must be a Chrome OS CUPS printer which hasn't been set up before.
+      assert(
+          this.destination_.origin == print_preview.Destination.Origin.CROS &&
+          !this.destination_.capabilities);
+      this.updateConfiguringMessage_(true);
+    },
+
+    /**
+     * Called if the printer configuration request is rejected. The request is
+     * rejected if another printer is setting up in process or the current
+     * printer doesn't need to be setup.
+     * @param {bool} shouldIgnore If true, which indicates another printer is

[dpapad, 2017/03/31 00:37:52]

s/bool/boolean. 

bool is not a valid type for JS Compiler. See details at
https://github.com/google/closure-compiler/wiki/Annotating-JavaScript-for-the....

[xdai1, 2017/03/31 22:19:29]

Done.

+     *     setting up in process, the printer should not be activated.
+     */
+    onConfigureRequestRejected: function(shouldIgnore) {
+      if (!shouldIgnore)

[dpapad, 2017/03/31 00:37:52]

|shouldIgnore| naming makes the pubilc API of this method coupled with the
implementation, unnecessarily. Can we rename as follows?

shouldIgnore -> otherPrinterSetupInProgress

Then this method will be 

if (!otherPrinterSetupInProgress)
  this.onDestinationActivated_();

This way, the public API does not leak how this method will handle the
parameter. The public API simply states what information is expected to be
passed in. Then you can also move the @param comment inside the method's body,
since it is not interesting to the callers anymore.

[xdai1, 2017/03/31 22:19:29]

Makes sense. Thanks! 

+        this.onDestinationActivated_();
+    },
+
+    /**
+     * Called when the printer configuration request is resolved successful or
+     * failed.
+     * @param response {!print_preview.PrinterSetupResponse}
+     */
+    onConfigureResolved: function(response) {
+      assert(response.printerId == this.destination_.id);
+      if (response.success) {
+        this.updateConfiguringMessage_(false);
+        this.destination_.capabilities = response.capabilities;
+        this.onDestinationActivated_();
+      } else {
+        this.updateConfiguringMessage_(false);
+        setIsVisible(
+            this.getChildElement('.configuring-failed-text'), true);
+      }
+    },
+
+    /**
      * Initializes the element with destination's info.
      * @private
      */
@@ -171,6 +215,11 @@ cr.define('print_preview', function() {
           this.getChildElement('.register-promo'),
           this.destination_.connectionStatus ==
               print_preview.Destination.ConnectionStatus.UNREGISTERED);
+
+      // Reset the configuring messages for CUPS printers.
+      this.updateConfiguringMessage_(false);
+      setIsVisible(
+          this.getChildElement('.configuring-failed-text'), false);
     },
 
     /**
@@ -195,11 +244,48 @@ cr.define('print_preview', function() {
     },
 
     /**
-     * Called when the destination item is activated. Dispatches a SELECT event
-     * on the given event target.
+     * Shows/Hides the configuring in progress message and starts/stops its
+     * animation accordingly.
+     * @param {bool} show If the message and animation should be shown.
+     * @private
+     */
+    updateConfiguringMessage_: function(show) {
+      setIsVisible(
+          this.getChildElement('.configuring-in-progress-text'), show);
+      if (show) {

[dpapad, 2017/03/31 00:37:52]

Lines 255-261 can be replaced by

this.getChildElement('.configuring-text-jumping-dots').classList.toggle('jumping-dots',
show);

[xdai1, 2017/03/31 22:19:29]

Done.

+        this.getChildElement('.configuring-text-jumping-dots')
+            .classList.add('jumping-dots');
+      } else {
+        this.getChildElement('.configuring-text-jumping-dots')
+            .classList.remove('jumping-dots');
+      }
+    },
+
+    /**
+     * Called when the destination item is activated. Check if the printer needs
+     * to be set up first before activation.
      * @private
      */
     onActivate_: function() {
+      if (!cr.isChromeOS) {
+        onDestinationActivated_();
+        return;
+      }
+
+      // Check if the printer needs configuration before using. The user is only
+      // allowed to set up one printer at one time.
+      var configureEvt =
+          new Event(DestinationListItem.EventType.CONFIGURE_REQUEST);
+      configureEvt.destination = this.destination_;

[dpapad, 2017/03/31 00:37:52]

Can you create a CustomEvent instead of augmenting a standard Event instance?

var configureEvent = new CustomEvevnt(
    'DestinationListItem.EventType.CONFIGURE_REQUEST',
    {detail: {destination: this.destination_}});

Then in the receiving side

/** @param {!CustomEvent} e */
myHandler: function(e) {
  // Use |e.detail.destination|
}

CustomEvent class (as implied by the name), is meant to be used for custom
events, see https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent, and it
is more appropriate than using Event.

[xdai1, 2017/03/31 22:19:28]

Done.

+      this.eventTarget_.dispatchEvent(configureEvt);
+    },
+
+    /**
+     * Called when the destination has been resolved successfully and needs to
+     * be activated. Dispatches a SELECT event on the given event target.
+     * @private
+     */
+    onDestinationActivated_: function() {
       if (this.destination_.id ==
               print_preview.Destination.GooglePromotedId.FEDEX &&
           !this.destination_.isTosAccepted) {