[OsSettingsSearch] Stylize search bar and dropdown.

* Moved the <iron-list> into the dropdown slot instead of being the slot
  because of margin and padding issues (<iron-list> secretly has hidden
  rows it 'hides').
* Stylize colors and edges to bridge search bar and dropdown more neatly
* Decrease length of search bar to specified 480px
* Extra padding within icons inside the cr_toolbar_search_field will
  be added in another CL.
* |Narrow| interaction changes will be made in another CL.

Mocks:
https://carbon.googleplex.com/cros-ux/pages/search-bar/style

Screenshots:
https://screenshot.googleplex.com/6b8WsKBROdD (no focus)
https://screenshot.googleplex.com/v7gu6fR3WLA (focused)
https://screenshot.googleplex.com/EOG12tdPRrE (results)
https://screenshot.googleplex.com/LeG0pbmy6n8 (results narrow)

Bug: 1056909
Change-Id: I3931e3dd812ae2f627d6e5349de2141ddda7d2af
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2131466Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Commit-Queue: Regan Hsu <hsuregan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#756333}

chrome/browser/resources/settings/chromeos/os_settings_search_box/os_settings_search_box.html

@@ -16,8 +16,10 @@
   <template>
     <style include="settings-shared">
       :host {
+        --cr-toolbar-field-width: 480px;
         display: flex;
-        flex-basis: var(--cr-toolbar-field-width, 680px);
+        flex-basis: var(--cr-toolbar-field-width);
+        flex-direction: row;
         transition: width 150ms cubic-bezier(0.4, 0, 0.2, 1);
       }
 
@@ -30,15 +32,36 @@
         flex-basis: 100%;
       }
 
+      cr-toolbar-search-field {
+        --cr-toolbar-search-field-border-radius: 20px;
+        transition: height 150ms;
+      }
+
+      :host(:focus-within) cr-toolbar-search-field {
+        --cr-toolbar-search-field-background: var(--cr-card-background-color);
+      }
+
+      :host(:focus-within[should-show-dropdown_]) cr-toolbar-search-field {
+        --cr-toolbar-search-field-border-radius: 20px 20px 0 0;
+        border-bottom: var(--cr-separator-line);
+        height: 48px;
+      }
+
+      :host(:focus-within:not([narrow])) cr-toolbar-search-field {
+        box-shadow: var(--cr-menu-shadow);
+      }
+
       :host([narrow]) iron-dropdown {
         left: 0;
         right: 0;
       }
 
       iron-dropdown [slot='dropdown-content'] {
-        background-color: var(--cr-card-background-color);
-        box-shadow: var(--cr-card-shadow);
+        background-color: var(--cr-menu-background-color);
+        border-radius: 0 0 20px 20px;
+        box-shadow: var(--cr-menu-shadow);
         display: table;
+        padding: 8px 0 13px 0;
       }
 
       :host([narrow]) iron-dropdown [slot='dropdown-content'] {
@@ -58,24 +81,26 @@
       <!--  As part of iron-dropdown's behavior, the slot 'dropdown-content' is
             hidden until iron-dropdown's opened attribute is set true, or when
             iron-dropdown's open() is called on the JS side. -->
-      <iron-list id="searchResultList" slot="dropdown-content" selection-enabled
-          items="[[searchResults_]]" selected-item="{{selectedItem_}}"
-          on-selected-item-changed="onSelectedItemChanged_">
-        <!-- TODO(crbug/1056909): Use template dom-if if searchResults_ is
-             empty, show 'No Results' UI -->
-        <template>
-          <os-search-result-row actionable search-result="[[item]]"
-              selected="[[isItemSelected_(item, selectedItem_)]]"
-              tabindex$="[[getRowTabIndex_(item, selectedItem_)]]"
-              iron-list-tab-index$="[[getRowTabIndex_(item, selectedItem_)]]"
-              on-navigated-to-result-route="onNavigatedtoResultRowRoute_"
-              last-focused="{{lastFocused_}}"
-              list-blurred="{{listBlurred_}}"
-              focus-row-index="[[index]]"
-              first$="[[!index]]">
-          </os-search-result-row>
-        </template>
-      </iron-list>
+      <div slot="dropdown-content">
+        <iron-list id="searchResultList" selection-enabled
+            items="[[searchResults_]]" selected-item="{{selectedItem_}}"
+            on-selected-item-changed="onSelectedItemChanged_">
+          <!-- TODO(crbug/1056909): Use template dom-if if searchResults_ is
+               empty, show 'No Results' UI -->
+          <template>
+            <os-search-result-row actionable search-result="[[item]]"
+                selected="[[isItemSelected_(item, selectedItem_)]]"
+                tabindex$="[[getRowTabIndex_(item, selectedItem_)]]"
+                iron-list-tab-index$="[[getRowTabIndex_(item, selectedItem_)]]"
+                on-navigated-to-result-route="onNavigatedtoResultRowRoute_"
+                last-focused="{{lastFocused_}}"
+                list-blurred="{{listBlurred_}}"
+                focus-row-index="[[index]]"
+                first$="[[!index]]">
+            </os-search-result-row>
+          </template>
+        </iron-list>
+      </div>
     </iron-dropdown>
   </template>
   <script src="os_settings_search_box.js"></script>

chrome/browser/resources/settings/chromeos/os_settings_search_box/os_settings_search_box.js

@@ -125,6 +125,7 @@ Polymer({
       type: Boolean,
       value: false,
       computed: 'computeShouldShowDropdown_(searchResults_)',
+      reflectToAttribute: true,
     },
 
     /**