CrOS Print Preview printer status dropdown styling enhancements

- Change the dropdown input field to read only. Need to explicitly
  override the cr-input readonly opacity to keep the text readable.

- Prevent the printer name from overflowing in the input field.

- Align the printer names in the dropdown with the printer name in
  the input field.

- Add a thin black border around the dropdown

- Remove the rounded corners on the bottom of the dropdown

- Remove black outline around printer item in dropdown when
  right-clicked.

Screenshot: http://screen/cdf0xxtWGHT

Bug: 1059607
Change-Id: I0d555ab7a1671ff36006ebfab648a84346c76834
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2240586
Commit-Queue: 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@{#781412}

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

@@ -8,17 +8,20 @@
     width: var(--md-select-width);
   }
 
-  cr-input {
-    --cr-input-padding-start: 8px;
+  cr-input::part(input) {
+    opacity: 1;
+    padding-inline-end: 32px;
+    padding-inline-start: 8px;
+    text-overflow: clip;
   }
 
   iron-dropdown {
+    border: 0.5px solid rgba(0, 0, 0, 0.5);
     max-height: 270px;
   }
 
   iron-dropdown [slot='dropdown-content'] {
     background-color: white;
-    border-radius: 0 0 4px 4px;
     box-shadow: 0 2px 6px var(--google-grey-600);
     min-width: var(--md-select-width);
     padding: 8px 0;
@@ -78,6 +81,10 @@
     width: 100%;
   }
 
+  .list-item:focus {
+    outline: none;
+  }
+
   .list-item[selected_] {
     background-color: var(--google-blue-refresh-100);
   }
@@ -89,9 +96,14 @@
     height: 10px;
     width: 10px;
   }
+
+  #pre-input-box,
+  .printer-display-name {
+    padding-inline-start: 8px;
+  }
 </style>
 <cr-input id="dropdownInput" on-keydown="onKeyDown_"
-    value="[[value.displayName]]" disabled="[[disabled]]">
+    value="[[value.displayName]]" disabled="[[disabled]]" readonly>
   <div id="pre-input-overlay" slot="inline-prefix">
     <div id="pre-input-box">
       <iron-icon icon="[[destinationIcon]]"></iron-icon>
@@ -112,7 +124,7 @@
               <printer-status-icon-cros background="white"
                   state$="[[computePrinterState_(item.printerStatusReason)]]">
               </printer-status-icon-cros>
-              [[item.displayName]]
+              <span class="printer-display-name">[[item.displayName]]</span>
             </button>
           </template>
           <button class="list-item" on-click="onSelect_" tabindex="-1"
@@ -135,4 +147,4 @@
       </iron-dropdown>
     </div>
   </div>
-</cr-input>
\ No newline at end of file
+</cr-input>