Remove cr-input from CrOS destination dropdown

cr-input is mainly used for receiving user keyboard input and comes
with a lot of built-in features to support that. Since the print
preview dropdown does not directly receive keyboard input it makes
sense to replace cr-input with a standard div. This makes customization
of the dropdown cleaner as well.

"input" was removed from all of the element id's to reflect the removal
of cr-input.

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

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

-<style include="cr-shared-style cr-hidden-style md-select">
-  :host([opened_]) cr-input {
-    --cr-input-border-radius: 4px 4px 0 0;
-  }
-
-  iron-dropdown,
-  cr-input {
-    width: var(--md-select-width);
-  }
-
-  cr-input::part(input) {
-    cursor: pointer;
-    opacity: 1;
-    padding-inline-end: 32px;
-    padding-inline-start: 8px;
-    text-overflow: clip;
-  }
-
+<style include="cr-shared-style cr-hidden-style">
   iron-dropdown {
     border: 0.5px solid rgba(0, 0, 0, 0.5);
     max-height: 270px;
@@ -24,27 +7,14 @@
   iron-dropdown [slot='dropdown-content'] {
     background-color: white;
     box-shadow: 0 2px 6px var(--google-grey-600);
-    min-width: var(--md-select-width);
     padding: 8px 0;
   }
 
-  #input-overlay {
-    border-radius: 4px;
-    height: 100%;
-    left: 0;
-    overflow: hidden;
-    pointer-events: none;
-    position: absolute;
-    top: 0;
-    width: 100%;
-  }
-
   #dropdown-icon {
-    --iron-icon-height: 20px;
-    --iron-icon-width: 20px;
-    margin-top: -10px;
-    padding-inline-end: 6px;
-    position: absolute;
+    --iron-icon-height: 24px;
+    --iron-icon-width: 44px;
+    align-items: center;
+    margin-inline-start: -4px;
     right: 0;
     top: 50%;
   }
@@ -54,20 +24,15 @@
     right: unset;
   }
 
-  cr-input:focus-within #dropdown-icon {
-    --iron-icon-fill-color: var(--google-blue-600);
-  }
-
-  #input-box {
+  #dropdown-box {
+    border-radius: 4px;
     height: 100%;
     left: 0;
-    pointer-events: none;
-    top: 0;
-    width: 100%;
-  }
-
-  #dropdown-box {
+    margin-top: 24px;
+    overflow: hidden;
     pointer-events: initial;
+    position: absolute;
+    top: 0;
     width: 100%;
   }
 
@@ -91,27 +56,37 @@
     background-color: var(--google-blue-refresh-100);
   }
 
-  .dot {
-    background-color: #bbb;
-    border-radius: 50%;
-    display: inline-block;
-    height: 10px;
-    width: 10px;
-  }
-
-  #pre-input-box,
+  #destination-icon-box,
   .printer-display-name {
     padding-inline-start: 8px;
   }
 
-  #pre-input-box {
+  #destination-dropdown {
+    position: relative;
+  }
+
+  #destination-display-container {
+    align-items: center;
+    background-color: var(--google-grey-refresh-100);
+    border-radius: 4px;
     cursor: pointer;
+    display: flex;
+    width: 100%;
+  }
+
+  #destination-display {
+    box-sizing: border-box;
+    overflow: hidden;
+    padding-inline-end: 32px;
+    padding-inline-start: 8px;
+    text-overflow: clip;
+    white-space: nowrap;
+    width: 100%;
   }
 </style>
-<cr-input id="dropdownInput" on-keydown="onKeyDown_"
-    value="[[value.displayName]]" disabled="[[disabled]]" readonly>
-  <div id="pre-input-overlay" slot="inline-prefix">
-    <div id="pre-input-box">
+<div id="destination-dropdown" on-keydown="onKeyDown_" tabindex="0">
+  <div id="destination-display-container">
+    <div id="destination-icon-box">
       <iron-icon icon="[[destinationIcon]]"
           hidden="[[isCurrentDestinationCrosLocal]]">
       </iron-icon>
@@ -121,43 +96,40 @@
                       value.printerStatusReason)]]">
       </printer-status-icon-cros>
     </div>
+    <div id="destination-display">[[value.displayName]]</div>
+    <iron-icon id="dropdown-icon" icon="cr:arrow-drop-down"></iron-icon>
   </div>
-  <div id="input-overlay" slot="suffix">
-    <div id="input-box">
-      <iron-icon id="dropdown-icon" icon="cr:arrow-drop-down"></iron-icon>
-    </div>
-    <div id="dropdown-box">
-      <iron-dropdown horizontal-align="left" vertical-align="top"
-          vertical-offset="0" no-cancel-on-outside-click
-          no-cancel-on-esc-key>
-        <div slot="dropdown-content">
-          <template is="dom-repeat" items="[[itemList]]">
-            <button id="[[item.key]]" class="list-item" on-click="onSelect_"
-                tabindex="-1" value="[[item.key]]">
-              <printer-status-icon-cros background="white"
-                  state$="[[computePrinterState_(item.printerStatusReason)]]">
-              </printer-status-icon-cros>
-              <span class="printer-display-name">[[item.displayName]]</span>
-            </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}
+  <div id="dropdown-box">
+    <iron-dropdown horizontal-align="left" vertical-align="top"
+        vertical-offset="0" no-cancel-on-outside-click
+        no-cancel-on-esc-key>
+      <div slot="dropdown-content">
+        <template is="dom-repeat" items="[[itemList]]">
+          <button id="[[item.key]]" class="list-item" on-click="onSelect_"
+              tabindex="-1" value="[[item.key]]">
+            <printer-status-icon-cros background="white"
+                state$="[[computePrinterState_(item.printerStatusReason)]]">
+            </printer-status-icon-cros>
+            <span class="printer-display-name">[[item.displayName]]</span>
           </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>
+        </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>
-</cr-input>
+</div>

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

@@ -2,9 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'chrome://resources/cr_elements/cr_input/cr_input.m.js';
 import 'chrome://resources/cr_elements/hidden_style_css.m.js';
-import 'chrome://resources/cr_elements/md_select_css.m.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 // TODO(gavinwill): Remove iron-dropdown dependency https://crbug.com/1082587.
 import 'chrome://resources/polymer/v3_0/iron-dropdown/iron-dropdown.js';
@@ -142,8 +140,8 @@ Polymer({
     const paths = event.composedPath();
     const dropdown =
         /** @type {!IronDropdownElement} */ (this.$$('iron-dropdown'));
-    const dropdownInput =
-        /** @type {!CrInputElement} */ (this.$$('#dropdownInput'));
+    const destinationDropdown =
+        /** @type {!Element} */ (this.$$('#destination-dropdown'));
 
     // Exit if path includes |dropdown| because event will be handled by
     // onSelect_.
@@ -151,7 +149,7 @@ Polymer({
       return;
     }
 
-    if (!paths.includes(dropdownInput) || dropdown.opened) {
+    if (!paths.includes(destinationDropdown) || dropdown.opened) {
       this.closeDropdown_();
       return;
     }

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

@@ -48,9 +48,18 @@ suite(destination_dropdown_cros_test.suiteName, function() {
     return dropdown.shadowRoot.querySelectorAll('.list-item');
   }
 
-  /** @param {?Element} element */
-  function pointerDown(element) {
-    element.dispatchEvent(new PointerEvent('pointerdown', {
+  function clickDropdown() {
+    dropdown.$$('#destination-dropdown')
+        .dispatchEvent(new PointerEvent('pointerdown', {
+          bubbles: true,
+          cancelable: true,
+          composed: true,
+          buttons: 1,
+        }));
+  }
+
+  function clickOutsideDropdown() {
+    document.body.dispatchEvent(new PointerEvent('pointerdown', {
       bubbles: true,
       cancelable: true,
       composed: true,
@@ -59,19 +68,20 @@ suite(destination_dropdown_cros_test.suiteName, function() {
   }
 
   function down() {
-    keyDownOn(dropdown.$$('#dropdownInput'), 'ArrowDown', [], 'ArrowDown');
+    keyDownOn(
+        dropdown.$$('#destination-dropdown'), 'ArrowDown', [], 'ArrowDown');
   }
 
   function up() {
-    keyDownOn(dropdown.$$('#dropdownInput'), 'ArrowUp', [], 'ArrowUp');
+    keyDownOn(dropdown.$$('#destination-dropdown'), 'ArrowUp', [], 'ArrowUp');
   }
 
   function enter() {
-    keyDownOn(dropdown.$$('#dropdownInput'), 'Enter', [], 'Enter');
+    keyDownOn(dropdown.$$('#destination-dropdown'), 'Enter', [], 'Enter');
   }
 
   function tab() {
-    keyDownOn(dropdown.$$('#dropdownInput'), 'Tab', [], 'Tab');
+    keyDownOn(dropdown.$$('#destination-dropdown'), 'Tab', [], 'Tab');
   }
 
   /** @return {?Element} */
@@ -145,17 +155,17 @@ suite(destination_dropdown_cros_test.suiteName, function() {
         dropdown.value = destinationOne;
         const ironDropdown = dropdown.$$('iron-dropdown');
 
-        pointerDown(dropdown.$$('#dropdownInput'));
+        clickDropdown();
         assertTrue(ironDropdown.opened);
 
         getList()[0].click();
         assertFalse(ironDropdown.opened);
 
-        pointerDown(dropdown.$$('#dropdownInput'));
+        clickDropdown();
         assertTrue(ironDropdown.opened);
 
         // Click outside dropdown to close the dropdown.
-        pointerDown(document.body);
+        clickOutsideDropdown();
         assertFalse(ironDropdown.opened);
       });
 
@@ -165,7 +175,7 @@ suite(destination_dropdown_cros_test.suiteName, function() {
     dropdown.value = destinationOne;
     const ironDropdown = dropdown.$$('iron-dropdown');
 
-    pointerDown(dropdown.$$('#dropdownInput'));
+    clickDropdown();
     assertTrue(ironDropdown.opened);
 
     tab();
@@ -178,7 +188,7 @@ suite(destination_dropdown_cros_test.suiteName, function() {
         const destinationOne = createDestination('One', DestinationOrigin.CROS);
         setItemList([destinationOne]);
         dropdown.value = destinationOne;
-        pointerDown(dropdown.$$('#dropdownInput'));
+        clickDropdown();
 
         assertEquals('One', getHighlightedElementText());
         down();
@@ -255,7 +265,7 @@ suite(destination_dropdown_cros_test.suiteName, function() {
           createDestination('Three', DestinationOrigin.CROS)
         ]);
         dropdown.value = destinationOne;
-        pointerDown(dropdown.$$('#dropdownInput'));
+        clickDropdown();
 
         move(getList()[1], {x: 0, y: 0}, {x: 0, y: 0}, 1);
         assertEquals('Two', getHighlightedElementText());
@@ -278,11 +288,11 @@ suite(destination_dropdown_cros_test.suiteName, function() {
     dropdown.value = destinationOne;
     dropdown.disabled = true;
 
-    pointerDown(dropdown.$$('#dropdownInput'));
+    clickDropdown();
     assertFalse(dropdown.$$('iron-dropdown').opened);
 
     dropdown.disabled = false;
-    pointerDown(dropdown.$$('#dropdownInput'));
+    clickDropdown();
     assertTrue(dropdown.$$('iron-dropdown').opened);
   });
 
@@ -345,12 +355,12 @@ suite(destination_dropdown_cros_test.suiteName, function() {
         ]);
 
         dropdown.value = destinationTwo;
-        pointerDown(dropdown.$$('#dropdownInput'));
+        clickDropdown();
         assertEquals('Two', getHighlightedElementText());
-        pointerDown(dropdown.$$('#dropdownInput'));
+        clickDropdown();
 
         dropdown.value = destinationThree;
-        pointerDown(dropdown.$$('#dropdownInput'));
+        clickDropdown();
         assertEquals('Three', getHighlightedElementText());
       });
 });