Show printer status error text on destination dialog

In destination dialog display red error status text whenever a local
CrOS printer has an error printer status.

Hide the search-hint <span> when empty to make more room for the error
status text.

Screenshot: http://screen/rsAqy3dWhECQNyS

Bug: 1123754
Change-Id: Ifbbee309b8dee17ad88c4a51923c0f445cf225c8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2405711Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Commit-Queue: Gavin Williams <gavinwill@chromium.org>
Cr-Commit-Position: refs/heads/master@{#809435}

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

@@ -70,6 +70,10 @@
       printer-status-icon-cros {
         padding-inline-end: 12px;
       }
+
+      :host([is-destination-cros-local_]) .connection-status {
+        color: var(--google-red-600);
+      }
 </if>
     </style>
     <iron-icon icon$="[[destination.icon]]"
@@ -81,10 +85,11 @@
     </printer-status-icon-cros>
 </if>
     <span class="name searchable">[[destination.displayName]]</span>
-    <span class="search-hint searchable">[[searchHint_]]</span>
-    <span class="connection-status"
-        hidden$="[[!destination.isOfflineOrInvalid]]">
-      [[destination.connectionStatusText]]
+    <span class="search-hint searchable" hidden="[[!searchHint_]]">
+      [[searchHint_]]
+    </span>
+    <span class="connection-status">
+      [[statusText_]]
     </span>
     <a href="$i18n{gcpCertificateErrorLearnMoreURL}"
         target="_blank" class="learn-more-link"

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

@@ -15,13 +15,14 @@ import '../strings.m.js';
 
 import {assert} from 'chrome://resources/js/assert.m.js';
 import {isChromeOS} from 'chrome://resources/js/cr.m.js';
+import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {removeHighlights} from 'chrome://resources/js/search_highlight_utils.m.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {Destination, DestinationOrigin} from '../data/destination.js';
 // <if expr="chromeos">
-import {computePrinterState, IconLocation, PrinterState, PrinterStatusReason} from '../data/printer_status_cros.js';
+import {computePrinterState, ERROR_STRING_KEY_MAP, IconLocation, PrinterState, PrinterStatusReason} from '../data/printer_status_cros.js';
 // </if>
 
 import {updateHighlights} from './highlight_utils.js';
@@ -41,6 +42,10 @@ Polymer({
 
   _template: html`{__html_template__}`,
 
+  // <if expr="chromeos">
+  behaviors: [I18nBehavior],
+  // </if>
+
   properties: {
     /** @type {!Destination} */
     destination: Object,
@@ -64,6 +69,14 @@ Polymer({
       reflectToAttribute: true,
     },
 
+    /** @private */
+    statusText_: {
+      type: String,
+      computed:
+          'computeStatusText_(destination, destination.printerStatusReason,' +
+              'isDestinationCrosLocal_)',
+    },
+
     // <if expr="chromeos">
     /** @private {!DestinationConfigStatus} */
     configurationStatus_: {
@@ -215,6 +228,36 @@ Polymer({
     // </if>
   },
 
+  /**
+   * @return {string} If the destination is a local CrOS printer, this returns
+   *    the error text associated with the printer status. For all other
+   *    printers this returns the connection status text.
+   * @private
+   */
+  computeStatusText_: function() {
+    if (!this.destination) {
+      return '';
+    }
+
+    // <if expr="chromeos">
+    if (this.isDestinationCrosLocal_) {
+      const printerStatusReason = this.destination.printerStatusReason;
+      if (!printerStatusReason ||
+          printerStatusReason === PrinterStatusReason.NO_ERROR ||
+          printerStatusReason === PrinterStatusReason.UNKNOWN_REASON) {
+        return '';
+      }
+
+      const errorStringKey = ERROR_STRING_KEY_MAP.get(printerStatusReason);
+      return errorStringKey ? this.i18n(errorStringKey) : '';
+    }
+    // </if>
+
+    return this.destination.isOfflineOrInvalid ?
+        this.destination.connectionStatusText :
+        '';
+  },
+
   // <if expr="chromeos">
   /** @private */
   requestPrinterStatus_() {
@@ -239,6 +282,8 @@ Polymer({
     if (this.destination.key === destinationKey) {
       this.printerState_ =
           computePrinterState(this.destination.printerStatusReason);
+      // Notify printerStatusReason to trigger |statusText_| update.
+      this.notifyPath(`destination.printerStatusReason`);
     }
   },
   // </if>

chrome/test/data/webui/print_preview/destination_item_test.js

@@ -140,7 +140,8 @@ suite(destination_item_test.suiteName, function() {
     // Search hint should be have the description and be highlighted.
     const hint = item.$$('.search-hint');
     assertEquals(
-        params.description + params.description, hint.textContent.trim());
+        params.description + '\n    \n      ' + params.description,
+        hint.textContent.trim());
     const searchHits = hint.querySelectorAll('.search-highlight-hit');
     assertEquals(1, searchHits.length);
     assertEquals('ABC', searchHits[0].textContent);