Settings: Use default search box and move sort box.

Currently a custom search box is used, however the ctrl+F is not
working, updated to use the default search box (with UI permission) and
move the sort box.

BUG=931969,835712

Change-Id: Ibabc3a3dbfa67f6d38b481126f0983a20dd3aa9d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1491156
Commit-Queue: Maggie Cai <mxcai@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Patti <patricialor@chromium.org>
Cr-Commit-Position: refs/heads/master@{#637616}

chrome/browser/resources/settings/privacy_page/privacy_page.html

@@ -207,8 +207,10 @@
       </template>
 
       <template is="dom-if" route-path="/content/all" no-search>
-        <settings-subpage page-title="$i18n{siteSettingsAllSites}">
-          <all-sites></all-sites>
+        <settings-subpage page-title="$i18n{siteSettingsAllSites}"
+            search-label="$i18n{siteSettingsAllSitesSearch}"
+            search-term="{{searchFilter_}}">
+          <all-sites filter="[[searchFilter_]]"></all-sites>
         </settings-subpage>
       </template>
       <template is="dom-if" route-path="/content/automaticDownloads" no-search>

chrome/browser/resources/settings/site_settings/all_sites.html

@@ -13,11 +13,9 @@
 <dom-module id="all-sites">
   <template>
     <style include="settings-shared md-select">
-      /* Align the search box search icon with the site-entry icons. */
-      #searchAndSort {
+      #sort {
         align-items: center;
         display: flex;
-        justify-content: space-between;
         margin: 0 var(--cr-icon-button-margin-start);
         margin-bottom: 50px;
         padding: 0 var(--settings-box-row-padding);
@@ -33,28 +31,20 @@
         padding-inline-start: var(--settings-box-row-padding);
       }
     </style>
-    <div id="searchAndSort">
-      <div>
-        <cr-search-field label="$i18n{siteSettingsAllSitesSearch}"
-            on-search-changed="onSearchChanged_">
-        </cr-search-field>
-      </div>
-
-      <div>
-        <label id="sortLabel">$i18n{siteSettingsAllSitesSort}</label>
-        <select id="sortMethod" class="md-select" aria-labelledby="sortLabel"
-          on-change="onSortMethodChanged_">
-          <option value="[[sortMethods_.MOST_VISITED]]">
-            $i18n{siteSettingsAllSitesSortMethodMostVisited}
-          </option>
-          <option value="[[sortMethods_.STORAGE]]">
-            $i18n{siteSettingsAllSitesSortMethodStorage}
-          </option>
-          <option value="[[sortMethods_.NAME]]">
-            $i18n{siteSettingsAllSitesSortMethodName}
-          </option>
-        </select>
-      </div>
+    <div id="sort">
+      <label id="sortLabel">$i18n{siteSettingsAllSitesSort}</label>
+      <select id="sortMethod" class="md-select" aria-labelledby="sortLabel"
+        on-change="onSortMethodChanged_">
+        <option value="[[sortMethods_.MOST_VISITED]]">
+          $i18n{siteSettingsAllSitesSortMethodMostVisited}
+        </option>
+        <option value="[[sortMethods_.STORAGE]]">
+          $i18n{siteSettingsAllSitesSortMethodStorage}
+        </option>
+        <option value="[[sortMethods_.NAME]]">
+          $i18n{siteSettingsAllSitesSortMethodName}
+        </option>
+      </select>
     </div>
     <div class="list-frame" hidden$="[[!siteGroupMapEmpty_(siteGroupMap)]]">
       <div class="list-item secondary">$i18n{emptyAllSitesPage}</div>

chrome/browser/resources/settings/site_settings/all_sites.js

@@ -54,7 +54,7 @@ Polymer({
      * filter the All Sites list.
      * @private
      */
-    searchQuery_: {
+    filter: {
       type: String,
       value: '',
       observer: 'forceListUpdate_',
@@ -300,15 +300,6 @@ Polymer({
     return siteGroup1.etldPlus1.localeCompare(siteGroup2.etldPlus1);
   },
 
-  /**
-   * Called when the input text in the search textbox is updated.
-   * @private
-   */
-  onSearchChanged_: function() {
-    const searchElement = this.$$('cr-search-field');
-    this.searchQuery_ = searchElement.getSearchInput().value.toLowerCase();
-  },
-
   /**
    * Called when the user chooses a different sort method to the default.
    * @private
@@ -328,7 +319,7 @@ Polymer({
    */
   forceListUpdate_: function() {
     this.filteredList_ =
-        this.filterPopulatedList_(this.siteGroupMap, this.searchQuery_);
+        this.filterPopulatedList_(this.siteGroupMap, this.filter);
     this.$.allSitesList.fire('iron-resize');
   },
 

chrome/test/data/webui/settings/all_sites_tests.js

@@ -149,7 +149,7 @@ suite('AllSites', function() {
               testElement.$.listContainer.querySelectorAll('site-entry');
           assertEquals(3, siteEntries.length);
 
-          testElement.searchQuery_ = SEARCH_QUERY;
+          testElement.filter = SEARCH_QUERY;
         })
         .then(() => {
           Polymer.dom.flush();