Fix print servers selector dropdown width

Makes print servers selector dropdown width only expand to the width of
the search input. Previously it would expand to the bounds of the print
preview dialog below it.

Bug: b:168650771
Change-Id: I9c3eef88b1fe9efaf4ac9ab27f44c4f5bfded01a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2586376
Commit-Queue: Matt Menard <mattme@google.com>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#837662}

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

@@ -11,6 +11,11 @@
     --cr-searchable-drop-down-width: 100%;
     display: inline-block;
     flex-grow: 1;
+    width: 100%;
+  }
+
+  .server-search-box-container {
+    width: 100%;
   }
 </style>
 <cr-dialog id="dialog" on-close="onCloseOrCancel_">
@@ -27,7 +32,8 @@
           <option value="">$i18n{addAccountTitle}</option>
         </select>
       </div>
-      <template is="dom-if" if="[[printServerScalingFlagEnabled_]]">
+      <div hidden$="[[printServerScalingFlagEnabled_]]"
+          class="server-search-box-container">
         <!-- TODO(crbug.com/1013408): Uses deprecated iron-dropdown. -->
         <cr-searchable-drop-down class="server-search-box-input"
             hidden$="[[!isSingleServerFetchingMode_]]"
@@ -35,7 +41,7 @@
             value="{{printServerSelected_}}"
             items="[[printServerNames_]]">
         </cr-searchable-drop-down>
-      </template>
+      </div>
     </div>
     <print-preview-search-box id="searchBox"
         label="$i18n{searchBoxPlaceholder}" search-query="{{searchQuery_}}"

ui/webui/resources/cr_elements/cr_searchable_drop_down/cr_searchable_drop_down.js

@@ -119,15 +119,23 @@ Polymer({
   /** @private {number} */
   openDropdownTimeoutId_: 0,
 
+  /** @private {?ResizeObserver} */
+  resizeObserver_: null,
+
   /** @override */
   attached() {
     this.pointerDownListener_ = this.onPointerDown_.bind(this);
     document.addEventListener('pointerdown', this.pointerDownListener_);
+    this.resizeObserver_ = new ResizeObserver(() => {
+      this.resizeDropdown_();
+    });
+    this.resizeObserver_.observe(this.$.search);
   },
 
   /** @override */
   detached() {
     document.removeEventListener('pointerdown', this.pointerDownListener_);
+    this.resizeObserver_.unobserve(this.$.search);
   },
 
   /**
@@ -145,6 +153,19 @@ Polymer({
     }
   },
 
+  /**
+   * Keeps the dropdown from expanding beyond the width of the search input when
+   * its width is specified as a percentage.
+   * @private
+   */
+  resizeDropdown_() {
+    const dropdown = this.$$('iron-dropdown').containedElement;
+    const dropdownWidth =
+        Math.max(dropdown.offsetWidth, this.$.search.offsetWidth);
+    dropdown.style.width = `${dropdownWidth}px`;
+    this.enqueueDropdownRefit_();
+  },
+
   /** @private */
   openDropdown_() {
     this.$$('iron-dropdown').open();
@@ -439,7 +460,7 @@ Polymer({
    * leave the user's text in the dropdown search bar when focus is changed.
    * @private
    */
-  onBlur_ : function () {
+  onBlur_() {
     if (!this.updateValueOnInput) {
       this.$.search.value = this.value;
     }
@@ -453,7 +474,7 @@ Polymer({
    * |invalid| to false.
    * @private
    */
-  updateInvalid_: function () {
+  updateInvalid_() {
     this.invalid =
         !this.updateValueOnInput && (this.value !== this.$.search.value);
   },