Incorporate existing features into new print preview dropdown

- Show the 3 default print preview destinations Save to PDF,
  Save to Google Drive, and See More...

- Add the existing icons to inside the dropdown using |destinationIcon|

Bug: 1059607
Change-Id: Icef448773ac3f350c0fd3bf5eb8b63c8d567cb48
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2194789
Commit-Queue: Gavin Williams <gavinwill@chromium.org>
Auto-Submit: 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@{#774642}

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

@@ -98,7 +98,12 @@
   }
 </style>
 <cr-input id="dropdownInput" on-keydown="onKeyDown_"
-    value="[[value.displayName]]" readonly>
+    value="[[value.displayName]]" disabled="[[disabled]]">
+  <div id="pre-input-overlay" slot="prefix">
+    <div id="pre-input-box">
+      <iron-icon icon="[[destinationIcon]]"></iron-icon>
+    </div>
+  </div>
   <div id="input-overlay" slot="suffix">
     <div id="input-box">
       <iron-icon id="dropdown-icon" icon="cr:arrow-drop-down"></iron-icon>
@@ -115,6 +120,22 @@
               [[item.displayName]]
             </button>
           </template>
+          <button class="list-item" on-click="onSelect_" tabindex="-1"
+            value="[[pdfDestinationKey]]" hidden$="[[pdfPrinterDisabled]]">
+            $i18n{printToPDF}
+          </button>
+          <button class="list-item" on-click="onSelect_" tabindex="-1"
+            value="[[driveDestinationKey]]" hidden$="[[!driveDestinationKey]]">
+            $i18n{printToGoogleDrive}
+          </button>
+          <button class="list-item" on-click="onSelect_" tabindex="-1"
+            value="noDestinations" hidden$="[[!noDestinations]]">
+            $i18n{noDestinationsMessage}
+          </button>
+          <button class="list-item" on-click="onSelect_" tabindex="-1"
+            value="seeMore" aria-label$="[[i18n(seeMoreDestinationsLabel)]]">
+            $i18n{seeMore}
+          </button>
         </div>
       </iron-dropdown>
     </div>

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

@@ -28,6 +28,22 @@ Polymer({
       type: Array,
       observer: 'enqueueDropdownRefit_',
     },
+
+    /** @type {boolean} */
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+
+    driveDestinationKey: String,
+
+    noDestinations: Boolean,
+
+    pdfPrinterDisabled: Boolean,
+
+    pdfDestinationKey: String,
+
+    destinationIcon: String,
   },
 
   listeners: {
@@ -62,6 +78,10 @@ Polymer({
 
   /** @private */
   openDropdown_() {
+    if (this.disabled) {
+      return;
+    }
+
     this.$$('iron-dropdown').open();
     this.opened_ = true;
   },

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

@@ -34,7 +34,13 @@
     </template>
     <template is="dom-if" if="[[printerStatusFlagEnabled_]]">
       <print-preview-destination-dropdown-cros id="dropdown"
-          value="[[destination]]" item-list="[[recentDestinationList]]"
+          value="[[destination]]" hidden$="[[!loaded]]"
+          item-list="[[recentDestinationList]]"
+          pdf-destination-key="[[pdfDestinationKey_]]"
+          drive-destination-key="[[driveDestinationKey]]"
+          no-destinations="[[noDestinations]]"
+          pdf-printer-disabled="[[pdfPrinterDisabled]]"
+          destination-icon="[[destinationIcon_]]" disabled="[[disabled]]"
           on-dropdown-value-selected="onDropdownValueSelected_">
       </print-preview-destination-dropdown-cros>
     </template>

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

@@ -75,7 +75,13 @@ Polymer({
     backgroundImages_: {
       type: String,
       computed:
-          'computeBackgroundImages_(selectedValue, destination, noDestinations, dark)',
+          'computeBackgroundImages_(destinationIcon_, dark, noDestinations)',
+    },
+
+    /** @private {string} */
+    destinationIcon_: {
+      type: String,
+      computed: 'computeDestinationIcon_(selectedValue, destination)',
     },
 
     /** @private */
@@ -126,7 +132,7 @@ Polymer({
    * @return {string} The iconset and icon for the current selection.
    * @private
    */
-  getDestinationIcon_() {
+  computeDestinationIcon_() {
     if (!this.selectedValue) {
       return '';
     }
@@ -166,8 +172,7 @@ Polymer({
    * @private
    */
   computeBackgroundImages_() {
-    const icon = this.getDestinationIcon_();
-    if (!icon) {
+    if (!this.destinationIcon_) {
       return '';
     }
 
@@ -175,7 +180,7 @@ Polymer({
     if (this.noDestinations) {
       iconSetAndIcon = ['cr', 'error'];
     }
-    iconSetAndIcon = iconSetAndIcon || icon.split(':');
+    iconSetAndIcon = iconSetAndIcon || this.destinationIcon_.split(':');
     const iconset = /** @type {!IronIconsetSvgElement} */ (
         this.meta_.byKey(iconSetAndIcon[0]));
     return getSelectDropdownBackground(iconset, iconSetAndIcon[1], this);

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

@@ -21,6 +21,7 @@ destination_dropdown_cros_test.TestNames = {
   SelectedAfterUpDown: 'selected after keyboard press up and down',
   EnterOpensCloses: 'enter opens and closes dropdown',
   SelectedFollowsMouse: 'selected follows mouse',
+  Disabled: 'disabled',
 };
 
 suite(destination_dropdown_cros_test.suiteName, function() {
@@ -92,6 +93,7 @@ suite(destination_dropdown_cros_test.suiteName, function() {
         /** @type {!PrintPreviewDestinationDropdownCrosElement} */
         (document.createElement('print-preview-destination-dropdown-cros'));
     document.body.appendChild(dropdown);
+    dropdown.noDestinations = false;
   });
 
   test(
@@ -103,7 +105,7 @@ suite(destination_dropdown_cros_test.suiteName, function() {
         ]);
 
         const itemList = getList();
-        assertEquals(3, itemList.length);
+        assertEquals(7, itemList.length);
         assertEquals('One', itemList[0].textContent.trim());
         assertEquals('Two', itemList[1].textContent.trim());
         assertEquals('Three', itemList[2].textContent.trim());
@@ -155,30 +157,29 @@ suite(destination_dropdown_cros_test.suiteName, function() {
   test(
       assert(destination_dropdown_cros_test.TestNames.SelectedAfterUpDown),
       function() {
-        setItemList([
-          createDestination('One'), createDestination('Two'),
-          createDestination('Three')
-        ]);
+        setItemList([createDestination('One')]);
 
         pointerDown(dropdown.$$('#dropdownInput'));
 
         down();
         assertEquals('One', getSelectedElementText());
         down();
-        assertEquals('Two', getSelectedElementText());
+        assertEquals('Save as PDF', getSelectedElementText());
         down();
-        assertEquals('Three', getSelectedElementText());
+        assertEquals('Save to Google Drive', getSelectedElementText());
+        down();
+        assertEquals('See more…', getSelectedElementText());
         down();
         assertEquals('One', getSelectedElementText());
 
         up();
-        assertEquals('Three', getSelectedElementText());
+        assertEquals('See more…', getSelectedElementText());
         up();
-        assertEquals('Two', getSelectedElementText());
+        assertEquals('Save to Google Drive', getSelectedElementText());
         up();
-        assertEquals('One', getSelectedElementText());
+        assertEquals('Save as PDF', getSelectedElementText());
         up();
-        assertEquals('Three', getSelectedElementText());
+        assertEquals('One', getSelectedElementText());
       });
 
   test(
@@ -217,4 +218,16 @@ suite(destination_dropdown_cros_test.suiteName, function() {
         move(getList()[0], {x: 0, y: 0}, {x: 0, y: 0}, 1);
         assertEquals('One', getSelectedElementText());
       });
+
+  test(assert(destination_dropdown_cros_test.TestNames.Disabled), function() {
+    setItemList([createDestination('One')]);
+    dropdown.disabled = true;
+
+    pointerDown(dropdown.$$('#dropdownInput'));
+    assertFalse(dropdown.$$('iron-dropdown').opened);
+
+    dropdown.disabled = false;
+    pointerDown(dropdown.$$('#dropdownInput'));
+    assertTrue(dropdown.$$('iron-dropdown').opened);
+  });
 });

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

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