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

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

 // Copyright (c) 2012 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.
 
 cr.define('print_preview', function() {
   'use strict';
 
   /**
    * Component that renders a destination item in a destination list.
    * @param {!cr.EventTarget} eventTarget Event target to dispatch selection
@@ skipping 35 matching lines @@
      * @private
      */
     this.fedexTos_ = null;
   };
 
   /**
    * Event types dispatched by the destination list item.
    * @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:
         'print_preview.DestinationListItem.REGISTER_PROMO_CLICKED'
   };
 
   DestinationListItem.prototype = {
     __proto__: print_preview.Component.prototype,
 
     /** @override */
@@ skipping 26 matching lines @@
      *     to render.
      * @param {RegExp} query Active filter query.
      */
     update: function(destination, query) {
       this.destination_ = destination;
       this.query_ = query;
       this.updateUi_();
     },
 
     /**
+     * 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
      */
     updateUi_: function() {
       var iconImg = this.getChildElement('.destination-list-item-icon');
       iconImg.src = this.destination_.iconUrl;
 
       var nameEl = this.getChildElement('.destination-list-item-name');
       var textContent = this.destination_.displayName;
       if (this.query_) {
@@ skipping 52 matching lines @@
       this.getElement().classList.toggle('stale', this.destination_.isOffline);
       var offlineStatusEl = this.getChildElement('.offline-status');
       offlineStatusEl.textContent = this.destination_.offlineStatusText;
       setIsVisible(offlineStatusEl, this.destination_.isOffline);
 
       // Initialize registration promo element for Privet unregistered printers.
       setIsVisible(
           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);
     },
 
     /**
      * Adds text to parent element wrapping search query matches in highlighted
      * spans.
      * @param {!Element} parent Element to build the text in.
      * @param {string} text The text string to highlight segments in.
      * @private
      */
     addTextWithHighlight_: function(parent, text) {
       var sections = text.split(this.query_);
       for (var i = 0; i < sections.length; ++i) {
         if (i % 2 == 0) {
           parent.appendChild(document.createTextNode(sections[i]));
         } else {
           var span = document.createElement('span');
           span.className = 'destination-list-item-query-highlight';
           span.textContent = sections[i];
           parent.appendChild(span);
         }
       }
     },
 
     /**
-     * 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) {
         if (!this.fedexTos_) {
           this.fedexTos_ = new print_preview.FedexTos();
           this.fedexTos_.render(this.getElement());
           this.tracker.add(
               this.fedexTos_,
               print_preview.FedexTos.EventType.AGREE,
               this.onTosAgree_.bind(this));
@@ skipping 74 matching lines @@
         return;
       this.onExtensionIconClicked_(event);
     }
   };
 
   // Export
   return {
     DestinationListItem: DestinationListItem
   };
 });