Create enum for printer status icon background styling

Preferable to use an enum rather than a hardcoded color string.

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

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

@@ -108,8 +108,8 @@
       </iron-icon>
       <printer-status-icon-cros id="destination-badge"
           hidden="[[!isCurrentDestinationCrosLocal]]"
-          background="grey" state$="[[computePrinterState_(
-                      value.printerStatusReason)]]">
+          icon-location="[[IconLocation.DISPLAY]]"
+          printer-state="[[computePrinterState_( value.printerStatusReason)]]">
       </printer-status-icon-cros>
     </div>
     <div id="destination-display">[[value.displayName]]</div>
@@ -125,8 +125,9 @@
               on-click="onSelect_"
               class$="list-item [[getHighlightedClass_(item.key,
                   highlightedIndex_)]]">
-            <printer-status-icon-cros background="white"
-                state$="[[computePrinterState_(item.printerStatusReason)]]">
+            <printer-status-icon-cros icon-location="[[IconLocation.DROPDOWN]]"
+                printer-state="[[computePrinterState_(
+                    item.printerStatusReason)]]">
             </printer-status-icon-cros>
             <span class="printer-display-name">[[item.displayName]]</span>
           </button>

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

@@ -15,7 +15,7 @@ import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bun
 import {Destination, DestinationOrigin} from '../data/destination.js';
 import {PrinterStatusReason} from '../data/printer_status_cros.js';
 
-import {PrinterState} from './printer_status_icon_cros.js';
+import {IconLocation, PrinterState} from './printer_status_icon_cros.js';
 
 Polymer({
   is: 'print-preview-destination-dropdown-cros',
@@ -57,6 +57,9 @@ Polymer({
      * @private
      */
     highlightedIndex_: Number,
+
+    /** Mirroring the enum so that it can be used from HTML bindings. */
+    IconLocation: Object,
   },
 
   listeners: {
@@ -68,6 +71,7 @@ Polymer({
     this.pointerDownListener_ = event => this.onPointerDown_(event);
     document.addEventListener('pointerdown', this.pointerDownListener_);
     this.updateTabIndex_();
+    this.IconLocation = IconLocation;
   },
 
   /** @override */

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

@@ -25,15 +25,15 @@
     width: var(--status-badge-radius);
   }
 
-  :host-context([state='0']) #status-badge {
+  :host([printer-state='0']) #status-badge {
     background-color: var(--google-green-700);
   }
 
-  :host-context([state='1']) #status-badge {
+  :host([printer-state='1']) #status-badge {
     background-color: var(--google-red-600);
   }
 
-  :host-context([state='2']) #status-badge {
+  :host([printer-state='2']) #status-badge {
     background-color: var(--google-grey-500);
   }
 
@@ -48,11 +48,11 @@
     width: var(--background-badge-radius);
   }
 
-  :host-context([background='grey']) #background-badge {
+  :host([icon-location='0']) #background-badge {
     background-color: var(--google-grey-refresh-100);
   }
 
-  :host-context([background='white']) #background-badge {
+  :host([icon-location='1']) #background-badge {
     background-color: white;
   }
 

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

@@ -18,6 +18,16 @@ export const PrinterState = {
   UNKNOWN: 2,
 };
 
+/**
+ * Enumeration used to choose styling based on whether this icon is located in
+ * the destination display or the destination dropdown.
+ * @enum {number}
+ */
+export const IconLocation = {
+  DISPLAY: 0,
+  DROPDOWN: 1,
+};
+
 Polymer({
   is: 'printer-status-icon-cros',
 
@@ -29,10 +39,19 @@ Polymer({
      * State of the associated printer. Determines color of the status badge.
      * @type {!PrinterState}
      */
-    state: {
+    printerState: {
+      type: Number,
+      reflectToAttribute: true,
+    },
+
+    /**
+     * Location of this icon. Determines color of the background badge.
+     * @type {!IconLocation}
+     */
+    iconLocation: {
       type: Number,
       reflectToAttribute: true,
-    }
+    },
   },
 
   _template: html`{__html_template__}`,

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

@@ -294,15 +294,15 @@ suite(destination_dropdown_cros_test.suiteName, function() {
 
         dropdown.value.printerStatusReason = PrinterStatusReason.NO_ERROR;
         dropdown.notifyPath(`value.printerStatusReason`);
-        assertEquals(PrinterState.GOOD, destinationBadge.state);
+        assertEquals(PrinterState.GOOD, destinationBadge.printerState);
 
         dropdown.value.printerStatusReason = PrinterStatusReason.OUT_OF_INK;
         dropdown.notifyPath(`value.printerStatusReason`);
-        assertEquals(PrinterState.ERROR, destinationBadge.state);
+        assertEquals(PrinterState.ERROR, destinationBadge.printerState);
 
         dropdown.value.printerStatusReason = PrinterStatusReason.UNKNOWN_REASON;
         dropdown.notifyPath(`value.printerStatusReason`);
-        assertEquals(PrinterState.UNKNOWN, destinationBadge.state);
+        assertEquals(PrinterState.UNKNOWN, destinationBadge.printerState);
       });
 
   test(
@@ -322,13 +322,13 @@ suite(destination_dropdown_cros_test.suiteName, function() {
         const destinationBadge = dropdown.$$('#destination-badge');
 
         dropdown.value = goodDestination;
-        assertEquals(PrinterState.GOOD, destinationBadge.state);
+        assertEquals(PrinterState.GOOD, destinationBadge.printerState);
 
         dropdown.value = errorDestination;
-        assertEquals(PrinterState.ERROR, destinationBadge.state);
+        assertEquals(PrinterState.ERROR, destinationBadge.printerState);
 
         dropdown.value = unknownDestination;
-        assertEquals(PrinterState.UNKNOWN, destinationBadge.state);
+        assertEquals(PrinterState.UNKNOWN, destinationBadge.printerState);
       });
 
   test(

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

@@ -192,31 +192,31 @@ suite(printer_status_test_cros.suiteName, function() {
             assertEquals(
                 PrinterState.GOOD,
                 dropdown.$$(`#${escapeForwardSlahes(destination1.key)}`)
-                    .firstChild.state);
+                    .firstChild.printerState);
             assertEquals(
                 PrinterState.GOOD,
                 dropdown.$$(`#${escapeForwardSlahes(destination2.key)}`)
-                    .firstChild.state);
+                    .firstChild.printerState);
             assertEquals(
                 PrinterState.GOOD,
                 dropdown.$$(`#${escapeForwardSlahes(destination3.key)}`)
-                    .firstChild.state);
+                    .firstChild.printerState);
             assertEquals(
                 PrinterState.ERROR,
                 dropdown.$$(`#${escapeForwardSlahes(destination4.key)}`)
-                    .firstChild.state);
+                    .firstChild.printerState);
             assertEquals(
                 PrinterState.ERROR,
                 dropdown.$$(`#${escapeForwardSlahes(destination5.key)}`)
-                    .firstChild.state);
+                    .firstChild.printerState);
             assertEquals(
                 PrinterState.ERROR,
                 dropdown.$$(`#${escapeForwardSlahes(destination6.key)}`)
-                    .firstChild.state);
+                    .firstChild.printerState);
             assertEquals(
                 PrinterState.UNKNOWN,
                 dropdown.$$(`#${escapeForwardSlahes(destination7.key)}`)
-                    .firstChild.state);
+                    .firstChild.printerState);
           });
         });
       });