Use new printer status icon in destination dialog

Add 3 printer status specific icon SVGs to print-preview.

In destination dialog replace printer-status-icon-cros element with new
icons.

Screenshot: http://screen/AaaU5KHz26fmFHS

Bug: 1123754
Change-Id: I8d7a9a764e4f59843623227e57d9ef9bc743193d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2432767Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Gavin Williams <gavinwill@chromium.org>
Cr-Commit-Position: refs/heads/master@{#811557}

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

 // Copyright 2020 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.
+import {assertNotReached} from 'chrome://resources/js/assert.m.js';
 
 /**
  *  These values must be kept in sync with the Reason enum in
@@ -140,3 +141,20 @@ export function computePrinterState(printerStatusReason) {
   }
   return PrinterState.ERROR;
 }
+
+/**
+ * @param {?PrinterStatusReason} printerStatusReason
+ * @return {string}
+ */
+export function getPrinterStatusIcon(printerStatusReason) {
+  switch (computePrinterState(printerStatusReason)) {
+    case PrinterState.GOOD:
+      return 'print-preview:printer-status-green';
+    case PrinterState.ERROR:
+      return 'print-preview:printer-status-red';
+    case PrinterState.UNKNOWN:
+      return 'print-preview:printer-status-grey';
+    default:
+      assertNotReached();
+  }
+}
\ No newline at end of file

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

@@ -67,23 +67,12 @@
       }
 
 <if expr="chromeos">
-      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]]"
-        hidden="[[isDestinationCrosLocal_]]">
-    </iron-icon>
-<if expr="chromeos">
-    <printer-status-icon-cros icon-location="[[iconLocation_.DROPDOWN]]"
-        printer-state="[[printerState_]]" hidden="[[!isDestinationCrosLocal_]]">
-    </printer-status-icon-cros>
-</if>
+    <iron-icon icon="[[destinationIcon_]]"></iron-icon>
     <span class="name searchable">[[destination.displayName]]</span>
     <span class="search-hint searchable" hidden="[[!searchHint_]]">
       [[searchHint_]]

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

@@ -8,9 +8,6 @@ import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 import './icons.js';
 import './print_preview_vars_css.js';
-// <if expr="chromeos">
-import './printer_status_icon_cros.js';
-// </if>
 import '../strings.m.js';
 
 import {assert} from 'chrome://resources/js/assert.m.js';
@@ -22,7 +19,7 @@ import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bun
 
 import {Destination, DestinationOrigin} from '../data/destination.js';
 // <if expr="chromeos">
-import {computePrinterState, ERROR_STRING_KEY_MAP, IconLocation, PrinterState, PrinterStatusReason} from '../data/printer_status_cros.js';
+import {ERROR_STRING_KEY_MAP, getPrinterStatusIcon, PrinterStatusReason} from '../data/printer_status_cros.js';
 // </if>
 
 import {updateHighlights} from './highlight_utils.js';
@@ -53,6 +50,13 @@ Polymer({
     /** @type {?RegExp} */
     searchQuery: Object,
 
+    /** @private */
+    destinationIcon_: {
+      type: String,
+      computed: 'computeDestinationIcon_(destination, ' +
+          'destination.printerStatusReason)',
+    },
+
     /** @private */
     stale_: {
       type: Boolean,
@@ -62,6 +66,14 @@ Polymer({
     /** @private {string} */
     searchHint_: String,
 
+    /** @private */
+    statusText_: {
+      type: String,
+      computed:
+          'computeStatusText_(destination, destination.printerStatusReason)',
+    },
+
+    // <if expr="chromeos">
     /** @private */
     isDestinationCrosLocal_: {
       type: Boolean,
@@ -69,30 +81,13 @@ Polymer({
       reflectToAttribute: true,
     },
 
-    /** @private */
-    statusText_: {
-      type: String,
-      computed:
-          'computeStatusText_(destination, destination.printerStatusReason,' +
-              'isDestinationCrosLocal_)',
-    },
 
-    // <if expr="chromeos">
     /** @private {!DestinationConfigStatus} */
     configurationStatus_: {
       type: Number,
       value: DestinationConfigStatus.IDLE,
     },
 
-    /**
-     * Mirroring the enum so that it can be used from HTML bindings.
-     * @private
-     */
-    iconLocation_: {
-      type: Object,
-      value: IconLocation,
-    },
-
     /**
      * Mirroring the enum so that it can be used from HTML bindings.
      * @private
@@ -110,12 +105,6 @@ Polymer({
       },
       readOnly: true,
     },
-
-    /** @private */
-    printerState_: {
-      type: Number,
-      value: PrinterState.UNKNOWN,
-    }
     // </if>
   },
 
@@ -208,26 +197,6 @@ Polymer({
         'extensionDestinationIconTooltip', this.destination.extensionName);
   },
 
-  /**
-   * True when the destination is a CrOS local printer.
-   * @return {boolean}
-   * @private
-   */
-  computeIsDestinationCrosLocal_: function() {
-    if (!isChromeOS) {
-      return false;
-    }
-
-    // <if expr="chromeos">
-    if (!this.printerStatusFlagEnabled_) {
-      return false;
-    }
-
-    return this.destination &&
-        this.destination.origin === DestinationOrigin.CROS;
-    // </if>
-  },
-
   /**
    * @return {string} If the destination is a local CrOS printer, this returns
    *    the error text associated with the printer status. For all other
@@ -240,7 +209,8 @@ Polymer({
     }
 
     // <if expr="chromeos">
-    if (this.isDestinationCrosLocal_) {
+    if (this.printerStatusFlagEnabled_ &&
+        this.destination.origin === DestinationOrigin.CROS) {
       const printerStatusReason = this.destination.printerStatusReason;
       if (!printerStatusReason ||
           printerStatusReason === PrinterStatusReason.NO_ERROR ||
@@ -258,7 +228,40 @@ Polymer({
         '';
   },
 
+  /**
+   * @return {string}
+   * @private
+   */
+  computeDestinationIcon_: function() {
+    if (!this.destination) {
+      return '';
+    }
+
+    // <if expr="chromeos">
+    if (this.printerStatusFlagEnabled_ &&
+        this.destination.origin === DestinationOrigin.CROS) {
+      return getPrinterStatusIcon(this.destination.printerStatusReason);
+    }
+    // </if>
+
+    return this.destination.icon;
+  },
+
   // <if expr="chromeos">
+  /**
+   * True when the destination is a CrOS local printer.
+   * @return {boolean}
+   * @private
+   */
+  computeIsDestinationCrosLocal_: function() {
+    if (!this.printerStatusFlagEnabled_) {
+      return false;
+    }
+
+    return this.destination &&
+        this.destination.origin === DestinationOrigin.CROS;
+  },
+
   /** @private */
   requestPrinterStatus_() {
     if (!this.printerStatusFlagEnabled_) {
@@ -280,9 +283,7 @@ Polymer({
    */
   onPrinterStatusReceived_(destinationKey) {
     if (this.destination.key === destinationKey) {
-      this.printerState_ =
-          computePrinterState(this.destination.printerStatusReason);
-      // Notify printerStatusReason to trigger |statusText_| update.
+      // Notify printerStatusReason to trigger icon and status text update.
       this.notifyPath(`destination.printerStatusReason`);
     }
   },

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

@@ -32,6 +32,21 @@
         <path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm-8.5 11l-1.1-2.14 2.84-4.96 1.5 2.66L12.25 17h-.75zm6.8 0h-5.55l1.4-2.5h5.11l.26.46L18.3 17zm-4.55-8h2.39l2.84 5h-2.93l-2.56-4.54.26-.46z"></path>
       </g>
 
+    <if expr="chromeos">
+      <g id="printer-status-green">
+        <path d="M19,8 C20.66,8 22,9.34 22,11 L22,11 L22.0008411,12.1834702 C20.9260374,10.5660653 19.0875152,9.5 17,9.5 C14.2041481,9.5 11.8549346,11.412286 11.1889599,14.0002575 L8,14 L8,19 L12.1267078,19.0009178 C12.7530956,19.8713157 13.6069102,20.5670952 14.6011413,21.0012461 L6,21 L6,17 L2,17 L2,11 C2,9.34 3.34,8 5,8 L5,8 Z M18,3 L18,7 L6,7 L6,3 L18,3 Z"></path>
+        <circle fill="#188038" cx="17" cy="15.5" r="3.5"></circle>
+      </g>
+      <g id="printer-status-grey">
+        <path d="M19,8 C20.66,8 22,9.34 22,11 L22,11 L22.0008411,12.1834702 C20.9260374,10.5660653 19.0875152,9.5 17,9.5 C14.2041481,9.5 11.8549346,11.412286 11.1889599,14.0002575 L8,14 L8,19 L12.1267078,19.0009178 C12.7530956,19.8713157 13.6069102,20.5670952 14.6011413,21.0012461 L6,21 L6,17 L2,17 L2,11 C2,9.34 3.34,8 5,8 L5,8 Z M18,3 L18,7 L6,7 L6,3 L18,3 Z"></path>
+        <circle fill="#9aa0a6" cx="17" cy="15.5" r="3.5"></circle>
+      </g>
+      <g id="printer-status-red">
+        <path d="M19,8 C20.66,8 22,9.34 22,11 L22,11 L22.0008411,12.1834702 C20.9260374,10.5660653 19.0875152,9.5 17,9.5 C14.2041481,9.5 11.8549346,11.412286 11.1889599,14.0002575 L8,14 L8,19 L12.1267078,19.0009178 C12.7530956,19.8713157 13.6069102,20.5670952 14.6011413,21.0012461 L6,21 L6,17 L2,17 L2,11 C2,9.34 3.34,8 5,8 L5,8 Z M18,3 L18,7 L6,7 L6,3 L18,3 Z"></path>
+        <circle fill="#d93025" cx="17" cy="15.5" r="3.5"></circle>
+      </g>
+    </if>
+
       <!--
       These icons are copied from Polymer's iron-icons and kept in sorted order.
       See http://goo.gl/Y1OdAq for instructions on adding additional icons.

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

@@ -70,11 +70,11 @@ suite(destination_item_test_cros.suiteName, function() {
   test(
       assert(destination_item_test_cros.TestNames.NewStatusUpdatesIcon),
       function() {
-        const statusIcon = listItem.$$('printer-status-icon-cros');
-        assertEquals(PrinterState.UNKNOWN, statusIcon.printerState);
+        const icon = listItem.$$('iron-icon');
+        assertEquals('print-preview:printer-status-grey', icon.icon);
 
         return listItem.destination.requestPrinterStatus().then(() => {
-          assertEquals(PrinterState.GOOD, statusIcon.printerState);
+          assertEquals('print-preview:printer-status-green', icon.icon);
         });
       });
 
@@ -82,8 +82,8 @@ suite(destination_item_test_cros.suiteName, function() {
       assert(
           destination_item_test_cros.TestNames.ChangingDestinationUpdatesIcon),
       function() {
-        const statusIcon = listItem.$$('printer-status-icon-cros');
-        assertEquals(PrinterState.UNKNOWN, statusIcon.printerState);
+        const icon = listItem.$$('iron-icon');
+        assertEquals('print-preview:printer-status-grey', icon.icon);
 
         listItem.destination = new Destination(
             'Two', DestinationType.LOCAL, DestinationOrigin.CROS,
@@ -91,7 +91,7 @@ suite(destination_item_test_cros.suiteName, function() {
             {description: 'ABC'});
 
         return waitBeforeNextRender(listItem).then(() => {
-          assertEquals(PrinterState.ERROR, statusIcon.printerState);
+          assertEquals('print-preview:printer-status-red', icon.icon);
         });
       });
 
@@ -102,8 +102,8 @@ suite(destination_item_test_cros.suiteName, function() {
       assert(
           destination_item_test_cros.TestNames.OnlyUpdateMatchingDestination),
       function() {
-        const statusIcon = listItem.$$('printer-status-icon-cros');
-        assertEquals(PrinterState.UNKNOWN, statusIcon.printerState);
+        const icon = listItem.$$('iron-icon');
+        assertEquals('print-preview:printer-status-grey', icon.icon);
         const firstDestinationStatusRequestPromise =
             listItem.destination.requestPrinterStatus();
 
@@ -117,7 +117,7 @@ suite(destination_item_test_cros.suiteName, function() {
         return firstDestinationStatusRequestPromise.then(() => {
           // PrinterState should stay the same because the destination in the
           // status request response doesn't match.
-          assertEquals(PrinterState.UNKNOWN, statusIcon.printerState);
+          assertEquals('print-preview:printer-status-grey', icon.icon);
         });
       });
 });