Use printer status icon for CrOS Print Preview destination input box

For CrOS, this will show a printer icon with a status badge next to the
currently selected destination only if it is a local printer.

Screenshot: http://screen/xOt5q6RBGHO

Bug: 1059607
Change-Id: I6afeed18ea5eb4ed9482f6358b59347ffd63d426
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2230761
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@{#782833}

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

@@ -33,7 +33,7 @@ export const PrinterStatusReason = {
  *  @enum {number}
  */
 export const PrinterStatusSeverity = {
-  UNKOWN_SEVERITY: 0,
+  UNKNOWN_SEVERITY: 0,
   REPORT: 1,
   WARNING: 2,
   ERROR: 3,

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

@@ -106,7 +106,14 @@
     value="[[value.displayName]]" disabled="[[disabled]]" readonly>
   <div id="pre-input-overlay" slot="inline-prefix">
     <div id="pre-input-box">
-      <iron-icon icon="[[destinationIcon]]"></iron-icon>
+      <iron-icon icon="[[destinationIcon]]"
+          hidden="[[shouldShowDestinationPrinterStatusIcon_]]">
+      </iron-icon>
+      <printer-status-icon-cros id="destination-badge"
+          hidden="[[!shouldShowDestinationPrinterStatusIcon_]]"
+          background="grey" state$="[[computePrinterState_(
+                      value.printerStatusReason)]]">
+      </printer-status-icon-cros>
     </div>
   </div>
   <div id="input-overlay" slot="suffix">

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

@@ -12,7 +12,7 @@ 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 {Destination, DestinationOrigin} from '../data/destination.js';
 import {PrinterStatusReason} from '../data/printer_status_cros.js';
 
 import {PrinterState} from './printer_status_icon_cros.js';
@@ -47,6 +47,12 @@ Polymer({
     pdfDestinationKey: String,
 
     destinationIcon: String,
+
+    /** @private */
+    shouldShowDestinationPrinterStatusIcon_: {
+      type: Boolean,
+      computed: 'computeShouldShowDestinationPrinterStatusIcon_(value)',
+    },
   },
 
   listeners: {
@@ -270,4 +276,14 @@ Polymer({
     }
     return PrinterState.ERROR;
   },
+
+  /**
+   * Only show the printer status badge if the currently selected destination is
+   * a CrOS local printer.
+   * @return {boolean}
+   * @private
+   */
+  computeShouldShowDestinationPrinterStatusIcon_: function() {
+    return this.value && this.value.origin === DestinationOrigin.CROS;
+  },
 });

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

@@ -62,7 +62,7 @@ Polymer({
     /** @type {!Destination} */
     destination: {
       type: Object,
-      observer: 'updateStatusText_',
+      observer: 'onDestinationChange_',
     },
 
 
@@ -284,9 +284,11 @@ Polymer({
     // dropdown printer status icons to recalculate their badge color.
     this.notifyPath(`recentDestinationList.${indexFound}.printerStatusReason`);
 
-    // Update the status text if this printer status is for the
-    // currently selected printer.
+    // If |printerStatus| is for the currently selected printer, use notifyPath
+    // to trigger the destination printer status icon to recalculate its badge
+    // color. Next update the destination error status text.
     if (this.destination && this.destination.key === destinationKey) {
+      this.notifyPath(`destination.printerStatusReason`);
       this.updateStatusText_();
     }
   },
@@ -329,6 +331,11 @@ Polymer({
                                PrinterStatusReason.UNKNOWN_REASON;
   },
 
+  /** @private */
+  onDestinationChange_: function() {
+    this.updateStatusText_();
+  },
+
   /**
    * Check the current destination for an error status then set |statusText_|
    * appropriately. If no error status exists, unset |statusText_|.

chrome/test/data/webui/print_preview/destination_dropdown_cros_test.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} from 'chrome://print/print_preview.js';
+import {Destination, DestinationConnectionStatus, DestinationOrigin, DestinationType, PrinterState, PrinterStatusReason, PrinterStatusSeverity} from 'chrome://print/print_preview.js';
 import {assert} from 'chrome://resources/js/assert.m.js';
 import {keyDownOn, move} from 'chrome://resources/polymer/v3_0/iron-test-helpers/mock-interactions.js';
 import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
@@ -22,6 +22,9 @@ destination_dropdown_cros_test.TestNames = {
   EnterOpensCloses: 'enter opens and closes dropdown',
   SelectedFollowsMouse: 'selected follows mouse',
   Disabled: 'disabled',
+  HiddenDestinationBadge: 'hidden destination badge',
+  NewStatusUpdatesDestinationIcon: 'new status updates destination icon',
+  ChangingDestinationUpdatesIcon: 'changing destination updates icon',
 };
 
 suite(destination_dropdown_cros_test.suiteName, function() {
@@ -77,12 +80,13 @@ suite(destination_dropdown_cros_test.suiteName, function() {
 
   /**
    * @param {string} displayName
+   * @param {!DestinationOrigin} destinationOrigin
    * @return {!Destination}
    */
-  function createDestination(displayName) {
+  function createDestination(displayName, destinationOrigin) {
     return new Destination(
-        displayName, DestinationType.LOCAL, DestinationOrigin.LOCAL,
-        displayName, DestinationConnectionStatus.ONLINE);
+        displayName, DestinationType.LOCAL, destinationOrigin, displayName,
+        DestinationConnectionStatus.ONLINE);
   }
 
   /** @override */
@@ -100,8 +104,9 @@ suite(destination_dropdown_cros_test.suiteName, function() {
       assert(destination_dropdown_cros_test.TestNames.CorrectListItems),
       function() {
         setItemList([
-          createDestination('One'), createDestination('Two'),
-          createDestination('Three')
+          createDestination('One', DestinationOrigin.CROS),
+          createDestination('Two', DestinationOrigin.CROS),
+          createDestination('Three', DestinationOrigin.CROS)
         ]);
 
         const itemList = getList();
@@ -114,8 +119,10 @@ suite(destination_dropdown_cros_test.suiteName, function() {
   test(
       assert(destination_dropdown_cros_test.TestNames.ClickRemovesSelected),
       function() {
-        setItemList([createDestination('One'), createDestination('Two')]);
-        dropdown.destination = createDestination('One');
+        setItemList([
+          createDestination('One', DestinationOrigin.CROS),
+          createDestination('Two', DestinationOrigin.CROS)
+        ]);
 
         getList()[1].setAttribute('selected_', '');
         assertTrue(getList()[1].hasAttribute('selected_'));
@@ -126,7 +133,7 @@ suite(destination_dropdown_cros_test.suiteName, function() {
 
   test(
       assert(destination_dropdown_cros_test.TestNames.ClickCloses), function() {
-        setItemList([createDestination('One')]);
+        setItemList([createDestination('One', DestinationOrigin.CROS)]);
         const ironDropdown = dropdown.$$('iron-dropdown');
 
         pointerDown(dropdown.$$('#dropdownInput'));
@@ -144,7 +151,7 @@ suite(destination_dropdown_cros_test.suiteName, function() {
       });
 
   test(assert(destination_dropdown_cros_test.TestNames.TabCloses), function() {
-    setItemList([createDestination('One')]);
+    setItemList([createDestination('One', DestinationOrigin.CROS)]);
     const ironDropdown = dropdown.$$('iron-dropdown');
 
     pointerDown(dropdown.$$('#dropdownInput'));
@@ -157,7 +164,7 @@ suite(destination_dropdown_cros_test.suiteName, function() {
   test(
       assert(destination_dropdown_cros_test.TestNames.SelectedAfterUpDown),
       function() {
-        setItemList([createDestination('One')]);
+        setItemList([createDestination('One', DestinationOrigin.CROS)]);
 
         pointerDown(dropdown.$$('#dropdownInput'));
 
@@ -185,7 +192,7 @@ suite(destination_dropdown_cros_test.suiteName, function() {
   test(
       assert(destination_dropdown_cros_test.TestNames.EnterOpensCloses),
       function() {
-        setItemList([createDestination('One')]);
+        setItemList([createDestination('One', DestinationOrigin.CROS)]);
 
         assertFalse(dropdown.$$('iron-dropdown').opened);
         enter();
@@ -198,8 +205,9 @@ suite(destination_dropdown_cros_test.suiteName, function() {
       assert(destination_dropdown_cros_test.TestNames.SelectedFollowsMouse),
       function() {
         setItemList([
-          createDestination('One'), createDestination('Two'),
-          createDestination('Three')
+          createDestination('One', DestinationOrigin.CROS),
+          createDestination('Two', DestinationOrigin.CROS),
+          createDestination('Three', DestinationOrigin.CROS)
         ]);
 
         pointerDown(dropdown.$$('#dropdownInput'));
@@ -220,7 +228,7 @@ suite(destination_dropdown_cros_test.suiteName, function() {
       });
 
   test(assert(destination_dropdown_cros_test.TestNames.Disabled), function() {
-    setItemList([createDestination('One')]);
+    setItemList([createDestination('One', DestinationOrigin.CROS)]);
     dropdown.disabled = true;
 
     pointerDown(dropdown.$$('#dropdownInput'));
@@ -230,4 +238,70 @@ suite(destination_dropdown_cros_test.suiteName, function() {
     pointerDown(dropdown.$$('#dropdownInput'));
     assertTrue(dropdown.$$('iron-dropdown').opened);
   });
+
+  test(
+      assert(destination_dropdown_cros_test.TestNames.HiddenDestinationBadge),
+      function() {
+        setItemList([
+          createDestination('One', DestinationOrigin.CROS),
+          createDestination('Two', DestinationOrigin.PRIVET)
+        ]);
+
+        // A DestinationOrigin.CROS printer destination.
+        dropdown.value = dropdown.itemList[0];
+        assertFalse(dropdown.$$('#destination-badge').hidden);
+        assertTrue(dropdown.$$('iron-icon').hidden);
+
+        // A non-local printer destination that should not have a printer status
+        // icon.
+        dropdown.value = dropdown.itemList[1];
+        assertTrue(dropdown.$$('#destination-badge').hidden);
+        assertFalse(dropdown.$$('iron-icon').hidden);
+      });
+
+  test(
+      assert(destination_dropdown_cros_test.TestNames
+                 .NewStatusUpdatesDestinationIcon),
+      function() {
+        const destinationBadge = dropdown.$$('#destination-badge');
+        dropdown.value = createDestination('One', DestinationOrigin.CROS);
+
+        dropdown.value.printerStatusReason = PrinterStatusReason.NO_ERROR;
+        dropdown.notifyPath(`value.printerStatusReason`);
+        assertEquals(PrinterState.GOOD, destinationBadge.state);
+
+        dropdown.value.printerStatusReason = PrinterStatusReason.OUT_OF_INK;
+        dropdown.notifyPath(`value.printerStatusReason`);
+        assertEquals(PrinterState.ERROR, destinationBadge.state);
+
+        dropdown.value.printerStatusReason = PrinterStatusReason.UNKNOWN_REASON;
+        dropdown.notifyPath(`value.printerStatusReason`);
+        assertEquals(PrinterState.UNKNOWN, destinationBadge.state);
+      });
+
+  test(
+      assert(destination_dropdown_cros_test.TestNames
+                 .ChangingDestinationUpdatesIcon),
+      function() {
+        const goodDestination =
+            createDestination('One', DestinationOrigin.CROS);
+        goodDestination.printerStatusReason = PrinterStatusReason.NO_ERROR;
+        const errorDestination =
+            createDestination('Two', DestinationOrigin.CROS);
+        errorDestination.printerStatusReason = PrinterStatusReason.OUT_OF_INK;
+        const unknownDestination =
+            createDestination('Three', DestinationOrigin.CROS);
+        unknownDestination.printerStatusReason =
+            PrinterStatusReason.UNKNOWN_REASON;
+        const destinationBadge = dropdown.$$('#destination-badge');
+
+        dropdown.value = goodDestination;
+        assertEquals(PrinterState.GOOD, destinationBadge.state);
+
+        dropdown.value = errorDestination;
+        assertEquals(PrinterState.ERROR, destinationBadge.state);
+
+        dropdown.value = unknownDestination;
+        assertEquals(PrinterState.UNKNOWN, destinationBadge.state);
+      });
 });

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

@@ -37,7 +37,7 @@ suite(printer_status_test_cros.suiteName, function() {
        printerId: 'ID1',
        statusReasons: [{
          reason: PrinterStatusReason.NO_ERROR,
-         severity: PrinterStatusSeverity.UNKOWN_SEVERITY
+         severity: PrinterStatusSeverity.UNKNOWN_SEVERITY
        }],
      },
      {
@@ -45,11 +45,11 @@ suite(printer_status_test_cros.suiteName, function() {
        statusReasons: [
          {
            reason: PrinterStatusReason.NO_ERROR,
-           severity: PrinterStatusSeverity.UNKOWN_SEVERITY
+           severity: PrinterStatusSeverity.UNKNOWN_SEVERITY
          },
          {
            reason: PrinterStatusReason.LOW_ON_PAPER,
-           severity: PrinterStatusSeverity.UNKOWN_SEVERITY
+           severity: PrinterStatusSeverity.UNKNOWN_SEVERITY
          }
        ],
      },
@@ -58,7 +58,7 @@ suite(printer_status_test_cros.suiteName, function() {
        statusReasons: [
          {
            reason: PrinterStatusReason.NO_ERROR,
-           severity: PrinterStatusSeverity.UNKOWN_SEVERITY
+           severity: PrinterStatusSeverity.UNKNOWN_SEVERITY
          },
          {
            reason: PrinterStatusReason.LOW_ON_PAPER,
@@ -71,7 +71,7 @@ suite(printer_status_test_cros.suiteName, function() {
        statusReasons: [
          {
            reason: PrinterStatusReason.NO_ERROR,
-           severity: PrinterStatusSeverity.UNKOWN_SEVERITY
+           severity: PrinterStatusSeverity.UNKNOWN_SEVERITY
          },
          {
            reason: PrinterStatusReason.LOW_ON_PAPER,
@@ -84,7 +84,7 @@ suite(printer_status_test_cros.suiteName, function() {
        statusReasons: [
          {
            reason: PrinterStatusReason.NO_ERROR,
-           severity: PrinterStatusSeverity.UNKOWN_SEVERITY
+           severity: PrinterStatusSeverity.UNKNOWN_SEVERITY
          },
          {
            reason: PrinterStatusReason.LOW_ON_PAPER,
@@ -97,7 +97,7 @@ suite(printer_status_test_cros.suiteName, function() {
        statusReasons: [
          {
            reason: PrinterStatusReason.DEVICE_ERROR,
-           severity: PrinterStatusSeverity.UNKOWN_SEVERITY
+           severity: PrinterStatusSeverity.UNKNOWN_SEVERITY
          },
          {
            reason: PrinterStatusReason.PRINTER_QUEUE_FULL,

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

@@ -1181,6 +1181,27 @@ TEST_F('PrintPreviewDestinationDropdownCrosTest', 'Disabled', function() {
   this.runMochaTest(destination_dropdown_cros_test.TestNames.Disabled);
 });
 
+TEST_F(
+    'PrintPreviewDestinationDropdownCrosTest', 'HiddenDestinationBadge',
+    function() {
+      this.runMochaTest(
+          destination_dropdown_cros_test.TestNames.HiddenDestinationBadge);
+    });
+
+TEST_F(
+    'PrintPreviewDestinationDropdownCrosTest',
+    'NewStatusUpdatesDestinationIcon', function() {
+      this.runMochaTest(destination_dropdown_cros_test.TestNames
+                            .NewStatusUpdatesDestinationIcon);
+    });
+
+TEST_F(
+    'PrintPreviewDestinationDropdownCrosTest', 'ChangingDestinationUpdatesIcon',
+    function() {
+      this.runMochaTest(destination_dropdown_cros_test.TestNames
+                            .ChangingDestinationUpdatesIcon);
+    });
+
 GEN('#else');
 // eslint-disable-next-line no-var
 var PrintPreviewDestinationSelectTest = class extends PrintPreviewTest {