Print Preview Componentization: Port GCP Certificate Error message

Port the GCP certificate error messages
- Learn more links work
- UI shows up in preview area
- Destination information has correct styling in destination settings.

Also
- Ensure invalid printer gets set in PrintPreviewApp so that state
  is changed
- Adjust state transition logic, since the system dialog link is
  available and can be clicked in most states as long as the OS is not
  Windows.

Bug: 773928
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Id644932123ef570f0d304e5fc7739a9f14d6a7d9
Reviewed-on: https://chromium-review.googlesource.com/998843Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#549697}

chrome/browser/resources/print_preview/new/app.html

@@ -139,6 +139,7 @@
       <print-preview-preview-area id="previewArea" settings="{{settings}}"
           destination="[[destination_]]" document-info="{{documentInfo_}}"
           state="[[state]]" measurement-system="[[measurementSystem_]]"
+          on-invalid-printer="onInvalidPrinter_"
           on-preview-failed="onPreviewFailed_"
           on-preview-loaded="onPreviewLoaded_">
       </print-preview-preview-area>

chrome/browser/resources/print_preview/new/app.js

@@ -132,6 +132,11 @@ Polymer({
         print_preview.DestinationStore.EventType
             .SELECTED_DESTINATION_CAPABILITIES_READY,
         this.onDestinationUpdated_.bind(this));
+    this.tracker_.add(
+        this.destinationStore_,
+        print_preview.DestinationStore.EventType
+            .SELECTED_DESTINATION_UNSUPPORTED,
+        this.onInvalidPrinter_.bind(this));
     this.nativeLayer_.getInitialSettings().then(
         this.onInitialSettingsSet_.bind(this));
   },
@@ -211,8 +216,8 @@ Polymer({
 
   /** @private */
   onDestinationSelect_: function() {
-    this.destination_ = this.destinationStore_.selectedDestination;
     this.$.state.transitTo(print_preview_new.State.NOT_READY);
+    this.destination_ = this.destinationStore_.selectedDestination;
   },
 
   /** @private */
@@ -353,6 +358,11 @@ Polymer({
     this.$.state.transitTo(print_preview_new.State.FATAL_ERROR);
   },
 
+  /** @private */
+  onInvalidPrinter_: function() {
+    this.$.state.transitTo(print_preview_new.State.INVALID_PRINTER);
+  },
+
   /**
    * Called when there was an error communicating with Google Cloud print.
    * Displays an error message in the print header.

chrome/browser/resources/print_preview/new/compiled_resources2.gyp

@@ -57,6 +57,7 @@
         'destination_dialog',
         'state',
         '<(DEPTH)/ui/webui/resources/cr_elements/cr_lazy_render/compiled_resources2.gyp:cr_lazy_render',
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
@@ -256,7 +257,9 @@
     {
       'target_name': 'destination_list_item',
       'dependencies': [
+        '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:load_time_data',
         'highlight_utils',
+        '../compiled_resources2.gyp:native_layer',
         '../data/compiled_resources2.gyp:destination',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],

chrome/browser/resources/print_preview/new/destination_list_item.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
+<link rel="import" href="chrome://resources/html/load_time_data.html">
 <link rel="import" href="../native_layer.html">
 <link rel="import" href="../data/destination.html">
 <link rel="import" href="highlight_utils.html">
@@ -105,7 +106,8 @@
       [[destination.connectionStatusText]]
     </span>
     <a is="action-link" class="learn-more-link"
-        hidden$="[[!destination.shouldShowInvalidCertificateError]]">
+        hidden$="[[!destination.shouldShowInvalidCertificateError]]"
+        on-click="onLearnMoreLinkClick_">
       $i18n{learnMore}
     </a>
     <span class="register-promo" hidden$="[[!destination.isUnregistered]]">

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

@@ -36,6 +36,12 @@ Polymer({
     this.stale_ = this.destination.isOfflineOrInvalid;
   },
 
+  /** @private */
+  onLearnMoreLinkClick_: function() {
+    print_preview.NativeLayer.getInstance().forceOpenNewTab(
+        loadTimeData.getString('gcpCertificateErrorLearnMoreURL'));
+  },
+
   update: function() {
     this.updateSearchHint_();
     this.updateHighlighting_();

chrome/browser/resources/print_preview/new/destination_settings.html

@@ -3,6 +3,7 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_lazy_render/cr_lazy_render.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/html/event_tracker.html">
+<link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="../data/destination.html">
 <link rel="import" href="../data/destination_store.html">
 <link rel="import" href="../data/invitation_store.html">
@@ -60,7 +61,8 @@
         font-size: 110%;
       }
 
-      .destination-location {
+      .destination-location,
+      :host([stale_]) .destination-info-wrapper {
         opacity: 0.4;
       }
     </style>
@@ -78,7 +80,9 @@
             <div class="destination-name">[[destination.displayName]]</div>
             <div class="destination-location">[[destination.hint]]</div>
             <div class="destination-connection-status">
-                [[destination.connectionStatusText]]</div>
+              [[getStatusText_(destination.connectionStatusText,
+                  destination.shouldShowInvalidCertificateError)]]
+            </div>
           </div>
         </div>
         <button

chrome/browser/resources/print_preview/new/destination_settings.js

@@ -5,6 +5,8 @@
 Polymer({
   is: 'print-preview-destination-settings',
 
+  behaviors: [I18nBehavior],
+
   properties: {
     /** @type {!print_preview.Destination} */
     destination: Object,
@@ -40,6 +42,13 @@ Polymer({
       type: Boolean,
       value: true,
     },
+
+    /** @private {boolean} */
+    stale_: {
+      type: Boolean,
+      computed: 'computeStale_(destination)',
+      reflectToAttribute: true,
+    },
   },
 
   observers: ['onDestinationSet_(destination, destination.id)'],
@@ -60,6 +69,16 @@ Polymer({
       this.loadingDestination_ = false;
   },
 
+  /**
+   * @return {string} The connection status text to display.
+   * @private
+   */
+  getStatusText_: function() {
+    return this.destination.shouldShowInvalidCertificateError ?
+        this.i18n('noLongerSupportedFragment') :
+        this.destination.connectionStatusText;
+  },
+
   /** @private */
   onChangeButtonClick_: function() {
     this.destinationStore.startLoadAllDestinations();
@@ -81,4 +100,15 @@ Polymer({
     const destinationDialog = this.$$('print-preview-destination-dialog');
     return destinationDialog && destinationDialog.isOpen();
   },
+
+  /**
+   * @return {boolean} Whether the destination is offline or invalid, indicating
+   *     that "stale" styling should be applied.
+   * @private
+   */
+  computeStale_: function() {
+    return !!this.destination &&
+        (this.destination.isOffline ||
+         this.destination.shouldShowInvalidCertificateError);
+  },
 });

chrome/browser/resources/print_preview/new/preview_area.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
+<link rel="import" href="chrome://resources/html/action_link_css.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
@@ -18,7 +20,7 @@
 
 <dom-module id="print-preview-preview-area">
   <template>
-    <style>
+    <style include="action-link cr-hidden-style">
       @keyframes dancing-dots-jump {
         0% { top: 0; }
         55% { top: 0; }
@@ -123,6 +125,11 @@
                 hidden$="[[!isPreviewLoading_(previewState_)]]">
                 <span>.</span><span>.</span><span>.</span>
             </span>
+            <a is="action-link" class="learn-more-link"
+                hidden$="[[!shouldShowLearnMoreLink_(previewState_)]]"
+                on-click="onGcpErrorLearnMoreClick_">
+              $i18n{learnMore}
+            </a>
           </div>
           <div class="preview-area-action-area"
               hidden$="[[!displaySystemDialogButton_(previewState_)]]">

chrome/browser/resources/print_preview/new/preview_area.js

@@ -44,6 +44,7 @@ const PreviewAreaState_ = {
   OPEN_IN_PREVIEW: 'open-in-preview',
   INVALID_SETTINGS: 'invalid-settings',
   PREVIEW_FAILED: 'preview-failed',
+  UNSUPPORTED_CLOUD_PRINTER: 'unsupported-cloud-printer',
 };
 
 Polymer({
@@ -235,6 +236,15 @@ Polymer({
         this.previewState_ == PreviewAreaState_.OPEN_IN_PREVIEW;
   },
 
+  /**
+   * @return {boolean} Whether the "learn more" link to the cloud print help
+   *     page should be shown.
+   * @private
+   */
+  shouldShowLearnMoreLink_: function() {
+    return this.previewState_ == PreviewAreaState_.UNSUPPORTED_CLOUD_PRINTER;
+  },
+
   /**
    * @return {string} The current preview area message to display.
    * @private
@@ -248,6 +258,8 @@ Polymer({
       return this.i18n('invalidPrinterSettings');
     if (this.previewState_ == PreviewAreaState_.PREVIEW_FAILED)
       return this.i18n('previewFailed');
+    if (this.previewState_ == PreviewAreaState_.UNSUPPORTED_CLOUD_PRINTER)
+      return this.i18n('unsupportedCloudPrinter');
     return '';
   },
 
@@ -267,9 +279,10 @@ Polymer({
           }
         },
         type => {
-          if (/** @type{string} */ (type) == 'SETTINGS_INVALID')
+          if (/** @type{string} */ (type) == 'SETTINGS_INVALID') {
             this.previewState_ = PreviewAreaState_.INVALID_SETTINGS;
-          else if (/** @type{string} */ (type) != 'CANCELLED') {
+            this.fire('invalid-printer');
+          } else if (/** @type{string} */ (type) != 'CANCELLED') {
             this.previewState_ = PreviewAreaState_.PREVIEW_FAILED;
             this.fire('preview-failed');
           }
@@ -291,7 +304,8 @@ Polymer({
         }
         break;
       case (print_preview_new.State.INVALID_PRINTER):
-        this.previewState_ = PreviewAreaState_.INVALID_SETTINGS;
+        if (this.previewState_ != PreviewAreaState_.INVALID_SETTINGS)
+          this.previewState_ = PreviewAreaState_.UNSUPPORTED_CLOUD_PRINTER;
         break;
       default:
         break;
@@ -490,6 +504,17 @@ Polymer({
     this.plugin_.style.pointerEvents = e.detail ? 'none' : 'auto';
   },
 
+  /**
+   * Called when the learn more link for a cloud destination with an invalid
+   * certificate is clicked. Calls nativeLayer to open a new tab with the help
+   * page.
+   * @private
+   */
+  onGcpErrorLearnMoreClick_: function() {
+    this.nativeLayer_.forceOpenNewTab(
+        this.i18n('gcpCertificateErrorLearnMoreURL'));
+  },
+
   /**
    * Requests a preview from the native layer.
    * @return {!Promise} Promise that resolves when the preview has been

chrome/browser/resources/print_preview/new/state.js

@@ -53,13 +53,17 @@ Polymer({
             this.state == print_preview_new.State.HIDDEN);
         break;
       case (print_preview_new.State.SYSTEM_DIALOG):
-        assert(this.state == print_preview_new.State.READY);
+        assert(
+            this.state != print_preview_new.State.HIDDEN &&
+            this.state != print_preview_new.State.PRINTING &&
+            this.state != print_preview_new.State.CLOSING);
         break;
       case (print_preview_new.State.INVALID_TICKET):
         assert(this.state == print_preview_new.State.READY);
         break;
       case (print_preview_new.State.INVALID_PRINTER):
         assert(
+            this.state == print_preview_new.State.INVALID_PRINTER ||
             this.state == print_preview_new.State.NOT_READY ||
             this.state == print_preview_new.State.READY);
         break;