Use printer status icon elements for dropdown destinations

On CrOS, printer icons with a status badge will be displayed next to
each printer in the dropdown.

The printer status responses are saved in a dictionary accessible by the
dropdown. When the dictionary is updated with a new status, the
printers in the dropdown are triggered to recalculate the color of its
status badge.

Screenshot: http://screen/nOgp4BEL9i7

Bug: 1059607
Change-Id: I4422d628ab6627ab74fa1810dda89cbe19a9acf8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2238509
Commit-Queue: Gavin Williams <gavinwill@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Bailey Berro <baileyberro@chromium.org>
Cr-Commit-Position: refs/heads/master@{#781232}

chrome/browser/resources/print_preview/data/destination.js

@@ -10,6 +10,7 @@ import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 
 // <if expr="chromeos">
 import {ColorModeRestriction, DestinationPolicies, DuplexModeRestriction, PinModeRestriction} from './destination_policies.js';
+import {PrinterStatusReason} from '../data/printer_status_cros.js';
 // </if>
 
 /**
@@ -413,6 +414,12 @@ export class Destination {
      * @private {string}
      */
     this.eulaUrl_ = '';
+
+    /**
+     * Stores the printer status reason for a local Chrome OS printer.
+     * @private {!PrinterStatusReason}
+     */
+    this.printerStatusReason_ = PrinterStatusReason.UNKNOWN_REASON;
     // </if>
 
     assert(
@@ -598,6 +605,22 @@ export class Destination {
   set eulaUrl(eulaUrl) {
     this.eulaUrl_ = eulaUrl;
   }
+
+  /**
+   * @return {!PrinterStatusReason} The printer status reason for a local
+   *    Chrome OS printer.
+   */
+  get printerStatusReason() {
+    return this.printerStatusReason_;
+  }
+
+  /**
+   * @param {!PrinterStatusReason} printerStatusReason The printer status reason
+   *    to be set.
+   */
+  set printerStatusReason(printerStatusReason) {
+    this.printerStatusReason_ = printerStatusReason;
+  }
   // </if>
 
   /**

chrome/browser/resources/print_preview/print_preview.js

@@ -12,7 +12,7 @@ export {PrinterType} from './data/destination_match.js';
 // <if expr="chromeos">
 export {ColorModeRestriction, DuplexModeRestriction, PinModeRestriction} from './data/destination_policies.js';
 export {PrinterStatus, PrinterStatusReason, PrinterStatusSeverity} from './data/printer_status_cros.js';
-export {GREEN_PRINTER_STATUS, RED_PRINTER_STATUS} from './ui/destination_select_cros.js';
+export {PrinterState} from './ui/printer_status_icon_cros.js';
 // </if>
 export {DestinationErrorType, DestinationStore} from './data/destination_store.js';
 export {PageLayoutInfo} from './data/document_info.js';

chrome/browser/resources/print_preview/ui/BUILD.gn

@@ -187,6 +187,7 @@ if (is_chromeos) {
 
   js_library("destination_dropdown_cros") {
     deps = [
+      ":printer_status_icon_cros",
       "..:print_preview_utils",
       "//third_party/polymer/v3_0/components-chromium/iron-dropdown:iron-dropdown",
       "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",

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

@@ -92,7 +92,7 @@
 </style>
 <cr-input id="dropdownInput" on-keydown="onKeyDown_"
     value="[[value.displayName]]" disabled="[[disabled]]">
-  <div id="pre-input-overlay" slot="prefix">
+  <div id="pre-input-overlay" slot="inline-prefix">
     <div id="pre-input-box">
       <iron-icon icon="[[destinationIcon]]"></iron-icon>
     </div>
@@ -109,7 +109,9 @@
           <template is="dom-repeat" items="[[itemList]]">
             <button id="[[item.key]]" class="list-item" on-click="onSelect_"
                 tabindex="-1" value="[[item.key]]">
-              <span class="dot"></span>
+              <printer-status-icon-cros background="white"
+                  state$="[[computePrinterState_(item.printerStatusReason)]]">
+              </printer-status-icon-cros>
               [[item.displayName]]
             </button>
           </template>

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

@@ -13,6 +13,9 @@ import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {Destination} from '../data/destination.js';
+import {PrinterStatusReason} from '../data/printer_status_cros.js';
+
+import {PrinterState} from './printer_status_icon_cros.js';
 
 Polymer({
   is: 'print-preview-destination-dropdown-cros',
@@ -251,4 +254,20 @@ Polymer({
     return Array.from(dropdown.getElementsByClassName('list-item'))
         .filter(item => !item.hidden);
   },
+
+  /**
+   * @param {?PrinterStatusReason} printerStatusReason
+   * @return {number}
+   * @private
+   */
+  computePrinterState_(printerStatusReason) {
+    if (!printerStatusReason ||
+        printerStatusReason === PrinterStatusReason.UNKNOWN_REASON) {
+      return PrinterState.UNKNOWN;
+    }
+    if (printerStatusReason === PrinterStatusReason.NO_ERROR) {
+      return PrinterState.GOOD;
+    }
+    return PrinterState.ERROR;
+  },
 });

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

@@ -28,9 +28,6 @@ import {getSelectDropdownBackground} from '../print_preview_utils.js';
 
 import {SelectBehavior} from './select_behavior.js';
 
-export const GREEN_PRINTER_STATUS = 'var(--google-green-700)';
-export const RED_PRINTER_STATUS = 'var(--google-red-600)';
-
 Polymer({
   is: 'print-preview-destination-select-cros',
 
@@ -263,24 +260,24 @@ Polymer({
       return;
     }
 
-    // Regex to escape the forward slashes in destination keys.
-    // TODO(gavinwill): Change from circle styles to real icons.
-    const circle =
-        this.$$('#dropdown').$$(`#${destinationKey.replace(/\//g, '\\/')}`);
-    if (!circle) {
+    const indexFound = this.recentDestinationList.findIndex(destination => {
+      return destination.id === printerStatus.printerId &&
+          destination.origin === DestinationOrigin.CROS;
+    });
+    if (indexFound === -1) {
       return;
     }
 
     const statusReason = this.getStatusReasonFromPrinterStatus_(printerStatus);
-    if (statusReason === PrinterStatusReason.NO_ERROR) {
-      circle.firstChild.style.backgroundColor = GREEN_PRINTER_STATUS;
+    if (!statusReason) {
       return;
     }
 
-    if (statusReason !== PrinterStatusReason.UNKNOWN_REASON) {
-      circle.firstChild.style.backgroundColor = RED_PRINTER_STATUS;
-      return;
-    }
+
+    this.recentDestinationList[indexFound].printerStatusReason = statusReason;
+    // Set the new printer status reason then use notifyPath to trigger the
+    // dropdown printer status icons to recalculate their badge color.
+    this.notifyPath(`recentDestinationList.${indexFound}.printerStatusReason`);
   },
 
   /**

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

@@ -25,16 +25,16 @@
     width: var(--status-badge-radius);
   }
 
-  :host-context([status='green']) #status-badge {
+  :host-context([state='0']) #status-badge {
     background-color: var(--google-green-700);
   }
 
-  :host-context([status='grey']) #status-badge {
-    background-color: var(--google-grey-500);
+  :host-context([state='1']) #status-badge {
+    background-color: var(--google-red-600);
   }
 
-  :host-context([status='red']) #status-badge {
-    background-color: var(--google-red-600);
+  :host-context([state='2']) #status-badge {
+    background-color: var(--google-grey-500);
   }
 
   :host-context([dir='rtl']) #status-badge {

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

@@ -7,6 +7,17 @@ import './icons.js';
 
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
+/**
+ * Enumeration giving a local Chrome OS printer 3 different state possibilities
+ * depending on its current status.
+ * @enum {number}
+ */
+export const PrinterState = {
+  GOOD: 0,
+  ERROR: 1,
+  UNKNOWN: 2,
+};
+
 Polymer({
   is: 'printer-status-icon-cros',
 
@@ -14,8 +25,14 @@ Polymer({
     /** Determines color of the background badge. */
     background: String,
 
-    /** Determines color of the status badge. */
-    status: String,
+    /**
+     * State of the associated printer. Determines color of the status badge.
+     * @type {!PrinterState}
+     */
+    state: {
+      type: Number,
+      reflectToAttribute: true,
+    }
   },
 
   _template: html`{__html_template__}`,

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

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import {Destination, DestinationConnectionStatus, DestinationOrigin, DestinationType, getSelectDropdownBackground, GREEN_PRINTER_STATUS, NativeLayer, NativeLayerImpl, PrinterStatus, PrinterStatusReason, PrinterStatusSeverity, RED_PRINTER_STATUS} from 'chrome://print/print_preview.js';
+import {Destination, DestinationConnectionStatus, DestinationOrigin, DestinationType, getSelectDropdownBackground, NativeLayer, NativeLayerImpl, PrinterState, PrinterStatus, PrinterStatusReason, PrinterStatusSeverity} from 'chrome://print/print_preview.js';
 import {assert} from 'chrome://resources/js/assert.m.js';
 import {Base, flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
@@ -189,33 +189,33 @@ suite(printer_status_test_cros.suiteName, function() {
           const dropdown = destinationSelect.$$('#dropdown');
           return whenStatusRequestsDone.then(() => {
             assertEquals(
-                GREEN_PRINTER_STATUS,
+                PrinterState.GOOD,
                 dropdown.$$(`#${escapeForwardSlahes(destination1.key)}`)
-                    .firstChild.style.backgroundColor);
+                    .firstChild.state);
             assertEquals(
-                GREEN_PRINTER_STATUS,
+                PrinterState.GOOD,
                 dropdown.$$(`#${escapeForwardSlahes(destination2.key)}`)
-                    .firstChild.style.backgroundColor);
+                    .firstChild.state);
             assertEquals(
-                GREEN_PRINTER_STATUS,
+                PrinterState.GOOD,
                 dropdown.$$(`#${escapeForwardSlahes(destination3.key)}`)
-                    .firstChild.style.backgroundColor);
+                    .firstChild.state);
             assertEquals(
-                RED_PRINTER_STATUS,
+                PrinterState.ERROR,
                 dropdown.$$(`#${escapeForwardSlahes(destination4.key)}`)
-                    .firstChild.style.backgroundColor);
+                    .firstChild.state);
             assertEquals(
-                RED_PRINTER_STATUS,
+                PrinterState.ERROR,
                 dropdown.$$(`#${escapeForwardSlahes(destination5.key)}`)
-                    .firstChild.style.backgroundColor);
+                    .firstChild.state);
             assertEquals(
-                RED_PRINTER_STATUS,
+                PrinterState.ERROR,
                 dropdown.$$(`#${escapeForwardSlahes(destination6.key)}`)
-                    .firstChild.style.backgroundColor);
+                    .firstChild.state);
             assertEquals(
-                '',
+                PrinterState.UNKNOWN,
                 dropdown.$$(`#${escapeForwardSlahes(destination7.key)}`)
-                    .firstChild.style.backgroundColor);
+                    .firstChild.state);
           });
         });
       });