Use new printer status icon in destination dropdown

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

Screenshot: http://screen/8SUKwKANZWKfgpR

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

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

@@ -104,14 +104,7 @@
     aria-description$="[[destinationStatusText]]">
   <div id="destination-display-container">
     <div id="destination-icon-box">
-      <iron-icon icon="[[destinationIcon]]"
-          hidden="[[isCurrentDestinationCrosLocal]]">
-      </iron-icon>
-      <printer-status-icon-cros id="destination-badge"
-          hidden="[[!isCurrentDestinationCrosLocal]]"
-          icon-location="[[IconLocation.DISPLAY]]"
-          printer-state="[[computePrinterState_( value.printerStatusReason)]]">
-      </printer-status-icon-cros>
+      <iron-icon icon="[[destinationIcon]]"></iron-icon>
     </div>
     <div id="destination-display" title="[[value.displayName]]">
       [[value.displayName]]
@@ -131,11 +124,9 @@
                   highlightedIndex_)]]"
               aria-description$="[[getPrinterStatusErrorString_(
                   item.printerStatusReason)]]">
-            <printer-status-icon-cros icon-location="[[IconLocation.DROPDOWN]]"
-                printer-state="[[computePrinterState_(
-                    item.printerStatusReason)]]"
-                class$="[[getHighlightedClass_(item.key, highlightedIndex_)]]">
-            </printer-status-icon-cros>
+            <iron-icon icon="[[getPrinterStatusIcon_(
+                item.printerStatusReason)]]">
+            </iron-icon>
             <span class="printer-display-name">[[item.displayName]]</span>
           </button>
         </template>

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

@@ -9,13 +9,12 @@ import 'chrome://resources/polymer/v3_0/iron-dropdown/iron-dropdown.js';
 import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
 
 import './print_preview_vars_css.js';
-import './printer_status_icon_cros.js';
 
 import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {Destination, DestinationOrigin} from '../data/destination.js';
-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';
 
 Polymer({
   is: 'print-preview-destination-dropdown-cros',
@@ -52,17 +51,12 @@ Polymer({
 
     destinationIcon: String,
 
-    isCurrentDestinationCrosLocal: Boolean,
-
     /**
      * Index of the highlighted item in the dropdown.
      * @private
      */
     highlightedIndex_: Number,
 
-    /** Mirroring the enum so that it can be used from HTML bindings. */
-    IconLocation: Object,
-
     /** @private */
     dropdownLength_: {
       type: Number,
@@ -80,7 +74,6 @@ Polymer({
   /** @override */
   attached() {
     this.updateTabIndex_();
-    this.IconLocation = IconLocation;
   },
 
   /**
@@ -260,15 +253,6 @@ Polymer({
         .filter(item => !item.hidden);
   },
 
-  /**
-   * @param {?PrinterStatusReason} printerStatusReason
-   * @return {number}
-   * @private
-   */
-  computePrinterState_(printerStatusReason) {
-    return computePrinterState(printerStatusReason);
-  },
-
   /**
    * Sets tabindex to -1 when dropdown is disabled to prevent the dropdown from
    * being focusable.
@@ -340,4 +324,13 @@ Polymer({
     const errorStringKey = ERROR_STRING_KEY_MAP.get(printerStatusReason);
     return errorStringKey ? this.i18n(errorStringKey) : '';
   },
+
+  /**
+   * @param {!PrinterStatusReason} printerStatusReason
+   * @return {string}
+   * @private
+   */
+  getPrinterStatusIcon_(printerStatusReason) {
+    return getPrinterStatusIcon(printerStatusReason);
+  }
 });

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

@@ -49,7 +49,6 @@
           no-destinations="[[noDestinations]]"
           pdf-printer-disabled="[[pdfPrinterDisabled]]"
           destination-icon="[[destinationIcon_]]" disabled="[[disabled]]"
-          is-current-destination-cros-local="[[isCurrentDestinationCrosLocal_]]"
           on-dropdown-value-selected="onDropdownValueSelected_"
           destination-status-text="[[statusText_]]">
       </print-preview-destination-dropdown-cros>

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

@@ -22,7 +22,7 @@ import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {Base, html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {CloudOrigins, Destination, DestinationOrigin, PDF_DESTINATION_KEY, RecentDestination, SAVE_TO_DRIVE_CROS_DESTINATION_KEY} from '../data/destination.js';
-import {ERROR_STRING_KEY_MAP, getStatusReasonFromPrinterStatus, PrinterStatus, PrinterStatusReason, PrinterStatusSeverity} from '../data/printer_status_cros.js';
+import {ERROR_STRING_KEY_MAP, getPrinterStatusIcon, PrinterStatusReason} from '../data/printer_status_cros.js';
 import {getSelectDropdownBackground} from '../print_preview_utils.js';
 
 import {SelectBehavior} from './select_behavior.js';
@@ -87,7 +87,8 @@ Polymer({
     /** @private {string} */
     destinationIcon_: {
       type: String,
-      computed: 'computeDestinationIcon_(selectedValue, destination)',
+      computed:
+          'computeDestinationIcon_(selectedValue, destination, destination.printerStatusReason)',
     },
 
     /** @private */
@@ -155,6 +156,11 @@ Polymer({
     // If the destination matches the selected value, pull the icon from the
     // destination.
     if (this.destination && this.destination.key === this.selectedValue) {
+      if (this.printerStatusFlagEnabled_ &&
+          this.isCurrentDestinationCrosLocal_) {
+        return getPrinterStatusIcon(this.destination.printerStatusReason);
+      }
+
       return this.destination.icon;
     }
 

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, NativeLayer, NativeLayerImpl, PrinterState, PrinterStatusReason, PrinterStatusSeverity} from 'chrome://print/print_preview.js';
+import {Destination, DestinationConnectionStatus, DestinationOrigin, DestinationType} 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';
@@ -10,7 +10,6 @@ import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min
 import {assertEquals, assertFalse, assertTrue} from '../chai_assert.js';
 import {eventToPromise} from '../test_util.m.js';
 
-import {NativeLayerStub} from './native_layer_stub.js';
 import {getGoogleDriveDestination, getSaveAsPdfDestination} from './print_preview_test_utils.js';
 
 window.destination_dropdown_cros_test = {};
@@ -27,8 +26,6 @@ destination_dropdown_cros_test.TestNames = {
   EnterOpensCloses: 'enter opens and closes dropdown',
   HighlightedFollowsMouse: 'highlighted follows mouse',
   Disabled: 'disabled',
-  NewStatusUpdatesDestinationIcon: 'new status updates destination icon',
-  ChangingDestinationUpdatesIcon: 'changing destination updates icon',
   HighlightedWhenOpened: 'highlighted when opened',
 };
 
@@ -36,9 +33,6 @@ suite(destination_dropdown_cros_test.suiteName, function() {
   /** @type {!PrintPreviewDestinationDropdownCrosElement} */
   let dropdown;
 
-  /** @type {?NativeLayerStub} */
-  let nativeLayer = null;
-
   /** @param {!Array<!Destination>} items */
   function setItemList(items) {
     dropdown.itemList = items;
@@ -98,42 +92,10 @@ suite(destination_dropdown_cros_test.suiteName, function() {
         DestinationConnectionStatus.ONLINE);
   }
 
-  function setNativeLayerPrinterStatusMap() {
-    [{
-      printerId: 'One',
-      statusReasons: [{
-        reason: PrinterStatusReason.NO_ERROR,
-        severity: PrinterStatusSeverity.UNKNOWN_SEVERITY
-      }],
-    },
-     {
-       printerId: 'Two',
-       statusReasons: [{
-         reason: PrinterStatusReason.OUT_OF_INK,
-         severity: PrinterStatusSeverity.ERROR
-       }],
-     },
-     {
-       printerId: 'Three',
-       statusReasons: [{
-         reason: PrinterStatusReason.UNKNOWN_REASON,
-         severity: PrinterStatusSeverity.UNKNOWN_SEVERITY
-       }],
-     }]
-        .forEach(
-            status =>
-                nativeLayer.addPrinterStatusToMap(status.printerId, status));
-  }
-
   /** @override */
   setup(function() {
     document.body.innerHTML = '';
 
-    // Stub out native layer.
-    nativeLayer = new NativeLayerStub();
-    NativeLayerImpl.instance_ = nativeLayer;
-    setNativeLayerPrinterStatusMap();
-
     dropdown =
         /** @type {!PrintPreviewDestinationDropdownCrosElement} */
         (document.createElement('print-preview-destination-dropdown-cros'));
@@ -299,53 +261,6 @@ suite(destination_dropdown_cros_test.suiteName, function() {
         '0', dropdown.$$('#destination-dropdown').getAttribute('tabindex'));
   });
 
-  test(
-      assert(destination_dropdown_cros_test.TestNames
-                 .NewStatusUpdatesDestinationIcon),
-      function() {
-        const destinationBadge = dropdown.$$('#destination-badge');
-        dropdown.value = createDestination('Two', DestinationOrigin.CROS);
-        assertEquals(PrinterState.UNKNOWN, destinationBadge.printerState);
-
-        return dropdown.value.requestPrinterStatus().then(() => {
-          // After printer stauts is updated the state will still be UNKNOWN.
-          assertEquals(PrinterState.UNKNOWN, destinationBadge.printerState);
-
-          // Only after the path is notified will the state update to ERROR.
-          dropdown.notifyPath(`value.printerStatusReason`);
-          assertEquals(PrinterState.ERROR, destinationBadge.printerState);
-        });
-      });
-
-  test(
-      assert(destination_dropdown_cros_test.TestNames
-                 .ChangingDestinationUpdatesIcon),
-      function() {
-        const goodDestination =
-            createDestination('One', DestinationOrigin.CROS);
-        const errorDestination =
-            createDestination('Two', DestinationOrigin.CROS);
-        const unknownDestination =
-            createDestination('Three', DestinationOrigin.CROS);
-        const destinationBadge = dropdown.$$('#destination-badge');
-
-        return goodDestination.requestPrinterStatus()
-            .then(() => {
-              dropdown.value = goodDestination;
-              assertEquals(PrinterState.GOOD, destinationBadge.printerState);
-              return errorDestination.requestPrinterStatus();
-            })
-            .then(() => {
-              dropdown.value = errorDestination;
-              assertEquals(PrinterState.ERROR, destinationBadge.printerState);
-              return unknownDestination.requestPrinterStatus();
-            })
-            .then(() => {
-              dropdown.value = unknownDestination;
-              assertEquals(PrinterState.UNKNOWN, destinationBadge.printerState);
-            });
-      });
-
   test(
       assert(destination_dropdown_cros_test.TestNames.HighlightedWhenOpened),
       function() {

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, NativeLayer, NativeLayerImpl, PrinterState, PrinterStatus, PrinterStatusReason, PrinterStatusSeverity, SAVE_TO_DRIVE_CROS_DESTINATION_KEY} from 'chrome://print/print_preview.js';
+import {Destination, DestinationConnectionStatus, DestinationOrigin, DestinationType, getSelectDropdownBackground, NativeLayer, NativeLayerImpl, PrinterStatus, PrinterStatusReason, PrinterStatusSeverity, SAVE_TO_DRIVE_CROS_DESTINATION_KEY} from 'chrome://print/print_preview.js';
 import {assert} from 'chrome://resources/js/assert.m.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {Base, flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
@@ -199,33 +199,33 @@ suite(printer_status_test_cros.suiteName, function() {
             .then(() => {
               const dropdown = destinationSelect.$$('#dropdown');
               assertEquals(
-                  PrinterState.GOOD,
+                  'print-preview:printer-status-green',
                   dropdown.$$(`#${escapeForwardSlahes(destination1.key)}`)
-                      .firstChild.printerState);
+                      .firstChild.icon);
               assertEquals(
-                  PrinterState.GOOD,
+                  'print-preview:printer-status-green',
                   dropdown.$$(`#${escapeForwardSlahes(destination2.key)}`)
-                      .firstChild.printerState);
+                      .firstChild.icon);
               assertEquals(
-                  PrinterState.GOOD,
+                  'print-preview:printer-status-green',
                   dropdown.$$(`#${escapeForwardSlahes(destination3.key)}`)
-                      .firstChild.printerState);
+                      .firstChild.icon);
               assertEquals(
-                  PrinterState.ERROR,
+                  'print-preview:printer-status-red',
                   dropdown.$$(`#${escapeForwardSlahes(destination4.key)}`)
-                      .firstChild.printerState);
+                      .firstChild.icon);
               assertEquals(
-                  PrinterState.ERROR,
+                  'print-preview:printer-status-red',
                   dropdown.$$(`#${escapeForwardSlahes(destination5.key)}`)
-                      .firstChild.printerState);
+                      .firstChild.icon);
               assertEquals(
-                  PrinterState.ERROR,
+                  'print-preview:printer-status-red',
                   dropdown.$$(`#${escapeForwardSlahes(destination6.key)}`)
-                      .firstChild.printerState);
+                      .firstChild.icon);
               assertEquals(
-                  PrinterState.UNKNOWN,
+                  'print-preview:printer-status-grey',
                   dropdown.$$(`#${escapeForwardSlahes(destination7.key)}`)
-                      .firstChild.printerState);
+                      .firstChild.icon);
             });
         });
 
@@ -311,6 +311,8 @@ suite(printer_status_test_cros.suiteName, function() {
     return waitBeforeNextRender(destinationSelect).then(() => {
       const localCrosPrinter =
           createDestination('ID1', 'One', DestinationOrigin.CROS);
+      const localNonCrosPrinter =
+          createDestination('ID2', 'Two', DestinationOrigin.LOCAL);
       const saveToDrive = getGoogleDriveDestination('account');
       const saveAsPdf = getSaveAsPdfDestination();
 
@@ -323,6 +325,11 @@ suite(printer_status_test_cros.suiteName, function() {
 
       destinationSelect.destination = localCrosPrinter;
       destinationSelect.updateDestination();
+      assertEquals(
+          'print-preview:printer-status-grey', dropdown.destinationIcon);
+
+      destinationSelect.destination = localNonCrosPrinter;
+      destinationSelect.updateDestination();
       assertEquals('print-preview:print', dropdown.destinationIcon);
 
       destinationSelect.destination = saveToDrive;

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

@@ -1438,20 +1438,6 @@ TEST_F('PrintPreviewDestinationDropdownCrosTest', 'Disabled', function() {
   this.runMochaTest(destination_dropdown_cros_test.TestNames.Disabled);
 });
 
-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);
-    });
-
 TEST_F(
     'PrintPreviewDestinationDropdownCrosTest', 'HighlightedWhenOpened',
     function() {