Update visual appearance of cr-searchable-dropdown

When the dropdown is opened, the entire element should appear as a
single element, with no space between the input field and the opened
dropdown.

http://go/siygs

BUG=977313

Change-Id: I81912cb7f6101a8fc8a54f60a4095e42a210ca8b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1847703
Commit-Queue: Anand Mistry <amistry@chromium.org>
Reviewed-by: Michael Giuffrida <michaelpg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#704451}

ui/webui/resources/cr_elements/cr_searchable_drop_down/cr_searchable_drop_down.html

@@ -16,6 +16,10 @@
         --cr-input-error-display: none;
       }
 
+      :host([opened_]) cr-input {
+        --cr-input-border-radius: 4px 4px 0 0;
+      }
+
       iron-dropdown,
       cr-input {
         /* 472px is the max width of the input field for a dialog. */
@@ -32,6 +36,7 @@
 
       iron-dropdown [slot='dropdown-content'] {
         background-color: white;
+        border-radius: 0 0 4px 4px;
         box-shadow: 0 2px 6px var(--paper-grey-500);
         min-width: 128px;
         padding: 8px 0;
@@ -141,7 +146,7 @@
         </div>
         <div id="dropdown-box">
           <iron-dropdown horizontal-align="left" vertical-align="top"
-              vertical-offset="4" no-cancel-on-outside-click
+              vertical-offset="0" no-cancel-on-outside-click
               no-cancel-on-esc-key>
             <div slot="dropdown-content">
               <div id="loading-box" hidden="[[!showLoading]]">

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

@@ -80,6 +80,17 @@ Polymer({
 
     /** @private {boolean} */
     dropdownRefitPending_: Boolean,
+
+    /**
+     * Whether the dropdown is currently open. Should only be used by CSS
+     * privately.
+     * @private {boolean}
+     */
+    opened_: {
+      type: Boolean,
+      value: false,
+      reflectToAttribute: true,
+    },
   },
 
   listeners: {
@@ -112,6 +123,18 @@ Polymer({
     }
   },
 
+  /** @private */
+  openDropdown_: function() {
+    this.$$('iron-dropdown').open();
+    this.opened_ = true;
+  },
+
+  /** @private */
+  closeDropdown_: function() {
+    this.$$('iron-dropdown').close();
+    this.opened_ = false;
+  },
+
   /**
    * @param {!Array<string>} oldValue
    * @param {!Array<string>} newValue
@@ -129,7 +152,7 @@ Polymer({
     if (this.readonly) {
       return;
     }
-    this.$$('iron-dropdown').open();
+    this.openDropdown_();
   },
 
   /**
@@ -177,11 +200,11 @@ Polymer({
       event.preventDefault();
     } else if (paths.includes(searchInput)) {
       // A click on the search input should open the dropdown.
-      dropdown.open();
+      this.openDropdown_();
     } else {
       // A click outside either the search input or dropdown should close the
       // dropdown. Implicitly, the search input has lost focus at this point.
-      dropdown.close();
+      this.closeDropdown_();
     }
   },
 
@@ -202,7 +225,7 @@ Polymer({
       case 'Tab':
         // Pressing tab will cause the input field to lose focus. Since the
         // dropdown visibility is tied to focus, close the dropdown.
-        this.$$('iron-dropdown').close();
+        this.closeDropdown_();
         break;
       case 'ArrowUp':
       case 'ArrowDown': {
@@ -223,7 +246,7 @@ Polymer({
         this.value =
             dropdown.querySelector('dom-repeat').modelForElement(selected).item;
         this.searchTerm_ = '';
-        dropdown.close();
+        this.closeDropdown_();
         // Stop the default submit action.
         event.preventDefault();
         break;
@@ -290,7 +313,7 @@ Polymer({
     // closed when the user makes a selection using the mouse or keyboard.
     // However, focus remains on the input field. If the user makes a further
     // change, then the dropdown should be shown.
-    this.$$('iron-dropdown').open();
+    this.openDropdown_();
 
     // iron-dropdown sets its max-height when it is opened. If the current value
     // results in no filtered items in the drop down list, the iron-dropdown
@@ -307,7 +330,7 @@ Polymer({
    * @private
    */
   onSelect_: function(event) {
-    this.$$('iron-dropdown').close();
+    this.closeDropdown_();
 
     this.value = event.model.item;
     this.searchTerm_ = '';