[OsSettingsSearch] Add no results UI to search box.

* No results UI shown when there are no results and the input text
  is nonempty.
* Dropdown is closed if input text is empty.
* Adds a separator that covers top box-shadow of dropdown.

Mock (See Zero State):
https://docs.google.com/presentation/d/1-DftlpMfwFvvCi5RDpT4chSRpNk13EUTyX3AzT80I1c

Screenshot:
* No results UI and no shadow on top of dropdown section:
  https://screenshot.googleplex.com/iv7QUkg28wn

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

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

@@ -19,6 +19,7 @@
         --cr-toolbar-field-width: 480px;
         --cr-toolbar-icon-container-size: 32px;
         --cr-toolbar-icon-margin: 6px 12px;
+        --separator-height: 8px;
         display: flex;
         flex-basis: var(--cr-toolbar-field-width);
         flex-direction: row;
@@ -39,7 +40,6 @@
         --cr-toolbar-search-field-border-radius: 20px;
         --cr-toolbar-search-field-paper-spinner-margin: 0 12px;
         --cr-toolbar-search-field-prompt-margin-inline-start: 140px;
-        transition: height 150ms;
       }
 
       :host(:focus-within) cr-toolbar-search-field {
@@ -48,8 +48,8 @@
 
       :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;
+        height: 56px;
+        margin-top: var(--separator-height);
       }
 
       :host(:focus-within:not([narrow])) cr-toolbar-search-field {
@@ -66,7 +66,7 @@
         border-radius: 0 0 20px 20px;
         box-shadow: var(--cr-menu-shadow);
         display: table;
-        padding: 8px 0 12px 0;
+        padding-bottom: 16px;
       }
 
       :host([narrow]) iron-dropdown [slot='dropdown-content'] {
@@ -74,12 +74,39 @@
       }
 
       :host(:not([narrow])) iron-dropdown [slot='dropdown-content'] {
-        width: var(--cr-toolbar-field-width, 680px);
+        width: var(--cr-toolbar-field-width);
       }
 
       :host([narrow]) os-search-result-row {
         --cr-toolbar-icon-margin: 6px 12px 6px 18px;
       }
+
+      #noSearchResultsContainer {
+        height: 24px;
+        margin-top: var(--separator-height);
+      }
+
+      :host(:not([narrow])) #noSearchResultsContainer {
+        margin-inline-start: 56px;
+      }
+
+      :host([narrow]) #noSearchResultsContainer {
+        margin-inline-start: 62px;
+      }
+
+      /* The separator covers the top box shadow of the dropdown so that
+       * var(--cr-menu-shadow) can be used instead of custom values. */
+      .separator {
+        background-color: var(--cr-menu-background-color);
+        border-bottom: none;
+        border-inline-end: none;
+        border-inline-start: none;
+        border-top: 2px solid var(--cr-separator-color);
+        height: var(--separator-height);
+        margin-inline-end: 0;
+        margin-inline-start: 0;
+        margin-top: calc(-1*var(--separator-height));
+      }
     </style>
     <cr-toolbar-search-field id="search" narrow="[[narrow]]"
         label="$i18n{searchPrompt}" clear-label="$i18n{clearSearch}"
@@ -91,6 +118,7 @@
             hidden until iron-dropdown's opened attribute is set true, or when
             iron-dropdown's open() is called on the JS side. -->
       <div slot="dropdown-content">
+        <div class="separator"></div>
         <iron-list id="searchResultList" selection-enabled
             items="[[searchResults_]]" selected-item="{{selectedItem_}}"
             on-selected-item-changed="onSelectedItemChanged_">
@@ -109,6 +137,9 @@
             </os-search-result-row>
           </template>
         </iron-list>
+        <div id="noSearchResultsContainer" hidden="[[searchResultsExist_]]">
+          $i18n{searchNoResults}
+        </div>
       </div>
     </iron-dropdown>
   </template>

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

@@ -117,17 +117,23 @@ Polymer({
      */
     searchResults_: {
       type: Array,
-      observer: 'selectFirstRow_',
+      observer: 'onSearchResultsChanged_',
     },
 
     /** @private */
     shouldShowDropdown_: {
       type: Boolean,
       value: false,
-      computed: 'computeShouldShowDropdown_(searchResults_)',
       reflectToAttribute: true,
     },
 
+    /** @private */
+    searchResultsExist_: {
+      type: Boolean,
+      value: false,
+      computed: 'computeSearchResultsExist_(searchResults_)',
+    },
+
     /**
      * Used by FocusRowBehavior to track the last focused element inside a
      * <os-search-result-row> with the attribute 'focus-row-control'.
@@ -176,17 +182,25 @@ Polymer({
         'No OsSearchResultRow is selected.');
   },
 
+  /**
+   * @return {string} The current input string.
+   * @private
+   */
+  getCurrentQuery_() {
+    return this.$.search.getSearchInput().value;
+  },
+
   /**
    * @return {boolean}
    * @private
    */
-  computeShouldShowDropdown_() {
+  computeSearchResultsExist_() {
     return this.searchResults_.length !== 0;
   },
 
   /** @private */
   fetchSearchResults_() {
-    const query = this.$.search.getSearchInput().value;
+    const query = this.getCurrentQuery_();
     if (query === '') {
       this.searchResults_ = [];
       return;
@@ -218,7 +232,7 @@ Polymer({
    * @private
    */
   onSearchResultsReceived_(query, results) {
-    if (query !== this.$.search.getSearchInput().value) {
+    if (query !== this.getCurrentQuery_()) {
       // Received search results are invalid as the query has since changed.
       return;
     }
@@ -232,7 +246,7 @@ Polymer({
   /** @private */
   onNavigatedtoResultRowRoute_() {
     // Settings has navigated to another page; close search results dropdown.
-    this.$.searchResults.close();
+    this.shouldShowDropdown_ = false;
 
     // Blur search input to prevent blinking caret.
     this.$.search.blur();
@@ -245,18 +259,17 @@ Polymer({
   onBlur_(e) {
     e.stopPropagation();
 
-    // The user has clicked a region outside the search box or the input has
-    // been blurred; close the dropdown regardless if there are searchResults_.
-    this.$.searchResults.close();
+    // Close the dropdown because  a region outside the search box was clicked.
+    this.shouldShowDropdown_ = false;
   },
 
   /** @private */
   onSearchInputFocused_() {
     this.lastFocused_ = null;
 
-    if (this.shouldShowDropdown_) {
+    if (this.searchResultsExist_) {
       // Restore previous results instead of re-fetching.
-      this.$.searchResults.open();
+      this.shouldShowDropdown_ = true;
       return;
     }
 
@@ -287,11 +300,16 @@ Polymer({
   },
 
   /** @private */
-  selectFirstRow_() {
-    if (!this.shouldShowDropdown_) {
+  onSearchResultsChanged_() {
+    // Only show dropdown if focus is on search field with a non empty query.
+    this.shouldShowDropdown_ =
+        this.$.search.isSearchFocused() && !!this.getCurrentQuery_();
+
+    if (!this.searchResultsExist_) {
       return;
     }
 
+    // Select the first search result.
     this.selectedItem_ = this.searchResults_[0];
   },
 
@@ -348,7 +366,7 @@ Polymer({
    * @private
    */
   onKeyDown_(e) {
-    if (!this.shouldShowDropdown_) {
+    if (!this.searchResultsExist_) {
       // No action should be taken if there are no search results.
       return;
     }

chrome/test/data/webui/settings/chromeos/os_settings_search_box_test.js

@@ -26,6 +26,9 @@ suite('OSSettingsSearchBox', () => {
   /** @type {?chromeos.settings.mojom.UserActionRecorderInterface} */
   let userActionRecorder;
 
+  /** @type {?HTMLElement} */
+  let noResultsSection;
+
   /** @param {string} term */
   async function simulateSearch(term) {
     field.$.searchInput.value = term;
@@ -68,6 +71,8 @@ suite('OSSettingsSearchBox', () => {
     assertTrue(!!dropDown);
     resultList = searchBox.$$('iron-list');
     assertTrue(!!resultList);
+    noResultsSection = searchBox.$$('#noSearchResultsContainer');
+    assertTrue(!!noResultsSection);
 
     settingsSearchHandler = new settings.FakeSettingsSearchHandler();
     settings.setSearchHandlerForTesting(settingsSearchHandler);
@@ -93,17 +98,21 @@ suite('OSSettingsSearchBox', () => {
   });
 
   test('Dropdown opens correctly when results are fetched', async () => {
-    // Closed dropdown if no results are returned.
+    // Show no results in dropdown if no results are returned.
     settingsSearchHandler.setFakeResults([]);
     assertFalse(dropDown.opened);
     await simulateSearch('query 1');
-    assertFalse(dropDown.opened);
+    assertTrue(dropDown.opened);
+    assertEquals(searchBox.searchResults_.length, 0);
+    assertFalse(noResultsSection.hidden);
+
     assertEquals(userActionRecorder.searchCount, 1);
 
-    // Open dropdown if results are returned.
+    // Show result list if results are returned, and hide no results div.
     settingsSearchHandler.setFakeResults([fakeResult('result')]);
     await simulateSearch('query 2');
-    assertTrue(dropDown.opened);
+    assertNotEquals(searchBox.searchResults_.length, 0);
+    assertTrue(noResultsSection.hidden);
   });
 
   test('Restore previous existing search results', async () => {