Print Preview: Update the icon immediately in destinations dropdown

Previously, there was a delay while the new destination was retrieved
where the previous destination's icon showed with the new text. This
looked odd, so update the icon immediately on selection.

Bug: None
Change-Id: Ifda42525c82726b84fa9277839deaa197169bc57
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1859590Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#707531}

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

@@ -268,7 +268,9 @@ cr.define('print_preview', function() {
    *            capabilities: ?print_preview.Cdd,
    *            displayName: string,
    *            extensionId: string,
-   *            extensionName: string}}
+   *            extensionName: string,
+   *            icon: (string | undefined)
+   *          }}
    */
   let RecentDestination;
 
@@ -287,6 +289,7 @@ cr.define('print_preview', function() {
       displayName: destination.displayName || '',
       extensionId: destination.extensionId || '',
       extensionName: destination.extensionName || '',
+      icon: destination.icon || '',
     };
   }
 

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

@@ -38,7 +38,8 @@
     </style>
     <select class="md-select" aria-label$="[[i18n(destinationLabel)]]"
         style="background-image:
-            [[getBackgroundImages_(destination.icon, destinationState, dark)]];"
+            [[getBackgroundImages_(selectedValue, destination,
+                                   destinationState, dark)]];"
         disabled$="[[disabled]]"
         value="{{selectedValue::change}}">
       <template is="dom-repeat" items="[[recentDestinationList]]">

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

@@ -59,12 +59,54 @@ Polymer({
   },
 
   /**
-   * @param {string} icon The icon set and icon to obtain.
-   * @return {string} An inline svg corresponding to |icon| and the image for
-   *     the dropdown arrow.
+   * Returns the iconset and icon for the selected printer. If printer details
+   * have not yet been retrieved from the backend, attempts to return an
+   * appropriate icon early based on the printer's sticky information.
+   * @return {string} The iconset and icon for the current selection.
    * @private
    */
-  getBackgroundImages_: function(icon) {
+  getDestinationIcon_: function() {
+    if (!this.selectedValue) {
+      return '';
+    }
+
+    // If the destination matches the selected value, pull the icon from the
+    // destination.
+    if (this.destination && this.destination.key === this.selectedValue) {
+      return this.destination.icon;
+    }
+
+    // Check for the Docs or Save as PDF ids first.
+    const keyParams = this.selectedValue.split('/');
+    if (keyParams[0] === print_preview.Destination.GooglePromotedId.DOCS) {
+      return 'print-preview:save-to-drive';
+    }
+    if (keyParams[0] ===
+        print_preview.Destination.GooglePromotedId.SAVE_AS_PDF) {
+      return 'cr:insert-drive-file';
+    }
+
+    // Otherwise, must be in the recent list.
+    const recent = this.recentDestinationList.find(d => {
+      return print_preview.createRecentDestinationKey(d) === this.selectedValue;
+    });
+    if (recent && recent.icon) {
+      return recent.icon;
+    }
+
+    // The key/recent destinations don't have information about what icon to
+    // use, so just return the generic print icon for now. It will be updated
+    // when the destination is set.
+    return 'print-preview:print';
+  },
+
+  /**
+   * @return {string} An inline svg corresponding to the icon for the current
+   *     destination and the image for the dropdown arrow.
+   * @private
+   */
+  getBackgroundImages_: function() {
+    const icon = this.getDestinationIcon_();
     if (!icon) {
       return '';
     }

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

+// Copyright 2019 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.
+
+cr.define('destination_select_test', function() {
+  /** @enum {string} */
+  const TestNames = {
+    ChangeIcon: 'change icon',
+  };
+
+  const suiteName = 'DestinationSelectTest';
+  suite(suiteName, function() {
+    /** @type {?PrintPreviewDestinationSelectElement} */
+    let destinationSelect = null;
+
+    const account = 'foo@chromium.org';
+
+    /** @override */
+    setup(function() {
+      PolymerTest.clearBody();
+
+      destinationSelect =
+          document.createElement('print-preview-destination-select');
+      destinationSelect.activeUser = account;
+      destinationSelect.appKioskMode = false;
+      destinationSelect.disabled = false;
+      destinationSelect.noDestinations = false;
+      destinationSelect.recentDestinationList = [
+        // Local printer without stickied icon
+        {
+          id: 'ID1',
+          origin: print_preview.DestinationOrigin.LOCAL,
+          account: '',
+          capabilities: null,
+          displayName: 'One',
+          extensionId: '',
+          extensionName: ''
+        },
+        // Shared cloud printer with stickied icon
+        {
+          id: 'ID2',
+          origin: print_preview.DestinationOrigin.COOKIES,
+          account: account,
+          capabilities: null,
+          displayName: 'Two',
+          extensionId: '',
+          extensionName: '',
+          icon: 'print-preview:printer-shared'
+        },
+        // Shared cloud printer without stickied icon
+        {
+          id: 'ID3',
+          origin: print_preview.DestinationOrigin.COOKIES,
+          account: account,
+          capabilities: null,
+          displayName: 'Three',
+          extensionId: '',
+          extensionName: ''
+        },
+      ];
+
+      document.body.appendChild(destinationSelect);
+    });
+
+    function compareIcon(selectEl, expectedIcon) {
+      const icon = selectEl.style['background-image'].replace(/ /gi, '');
+      const expected = getSelectDropdownBackground(
+          destinationSelect.meta_.byKey('print-preview'), expectedIcon,
+          destinationSelect);
+      assertEquals(expected, icon);
+    }
+
+    test(assert(TestNames.ChangeIcon), function() {
+      const destination = new print_preview.Destination(
+          'ID1', print_preview.DestinationType.LOCAL,
+          print_preview.DestinationOrigin.LOCAL, 'One',
+          print_preview.DestinationConnectionStatus.ONLINE);
+      destinationSelect.destination = destination;
+      destinationSelect.updateDestination();
+      const selectEl = destinationSelect.$$('.md-select');
+      compareIcon(selectEl, 'print');
+      const driveId = print_preview.Destination.GooglePromotedId.DOCS;
+      const cookieOrigin = print_preview.DestinationOrigin.COOKIES;
+
+      return print_preview_test_utils
+          .selectOption(
+              destinationSelect, `${driveId}/${cookieOrigin}/${account}`)
+          .then(() => {
+            // Icon updates early based on the ID.
+            compareIcon(selectEl, 'save-to-drive');
+
+            // Update the destination.
+            destinationSelect.destination =
+                print_preview_test_utils.getGoogleDriveDestination(account);
+
+            // Still Save to Drive icon.
+            compareIcon(selectEl, 'save-to-drive');
+
+            // Select a destination that has a sticky icon value.
+            return print_preview_test_utils.selectOption(
+                destinationSelect, `ID2/${cookieOrigin}/${account}`);
+          })
+          .then(() => {
+            // Should already be updated.
+            compareIcon(selectEl, 'printer-shared');
+
+            // Update destination.
+            destinationSelect.destination = new print_preview.Destination(
+                'ID2', print_preview.DestinationType.GOOGLE,
+                print_preview.DestinationOrigin.COOKIES, 'Two',
+                print_preview.DestinationConnectionStatus.ONLINE,
+                {account: account});
+            compareIcon(selectEl, 'printer-shared');
+
+            // Select a destination that doesn't have a sticky icon value.
+            return print_preview_test_utils.selectOption(
+                destinationSelect, `ID3/${cookieOrigin}/${account}`);
+          })
+          .then(() => {
+            // Falls back to normal printer icon.
+            compareIcon(selectEl, 'print');
+
+            // Update destination.
+            destinationSelect.destination = new print_preview.Destination(
+                'ID3', print_preview.DestinationType.GOOGLE,
+                print_preview.DestinationOrigin.COOKIES, 'Three',
+                print_preview.DestinationConnectionStatus.ONLINE,
+                {account: account});
+
+            // Icon updates based on full destination information.
+            compareIcon(selectEl, 'printer-shared');
+          });
+    });
+  });
+
+  return {
+    suiteName: suiteName,
+    TestNames: TestNames,
+  };
+});

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

@@ -200,7 +200,7 @@ cr.define('destination_settings_test', function() {
       let options =
           destinationSettings.$.destinationSelect.shadowRoot.querySelectorAll(
               'option:not([hidden])');
-      // assertEquals(expectedDestinations.length + 1, options.length);
+      assertEquals(expectedDestinations.length + 1, options.length);
       expectedDestinations.forEach((expectedValue, index) => {
         assertEquals(expectedValue, options[index].value);
       });

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

@@ -1332,6 +1332,32 @@ TEST_F('PrintPreviewKeyEventTest', 'CtrlShiftPOpensSystemDialog', function() {
   this.runMochaTest(key_event_test.TestNames.CtrlShiftPOpensSystemDialog);
 });
 
+// eslint-disable-next-line no-var
+var PrintPreviewDestinationSelectTest = class extends PrintPreviewTest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://print/ui/destination_select.html';
+  }
+
+  /** @override */
+  get extraLibraries() {
+    return super.extraLibraries.concat([
+      '../test_util.js',
+      'print_preview_test_utils.js',
+      'destination_select_test.js',
+    ]);
+  }
+
+  /** @override */
+  get suiteName() {
+    return destination_select_test.suiteName;
+  }
+};
+
+TEST_F('PrintPreviewDestinationSelectTest', 'ChangeIcon', function() {
+  this.runMochaTest(destination_select_test.TestNames.ChangeIcon);
+});
+
 // eslint-disable-next-line no-var
 var PrintPreviewDestinationSettingsTest = class extends PrintPreviewTest {
   /** @override */