[OsSettingsSearch] Create SearchHandler wrapper and add icons to rows.

* Created SearchHandler wrapper.
* Copied an ethernet svg from Polymer's iron-icons into os_icons.html.
* Copied a settings svg from Polymer's iron-icons into os_icons.html
  for general use.
* Add icons support for the 3 available mojo result icon types.
* Add arrow forward icon on the RHS.
* CSS alignments.

Screenshots:
https://screenshot.googleplex.com/7dMbgYnp6vA (real results)
https://screenshot.googleplex.com/aQH3hpPVXqj (fake)
https://screenshot.googleplex.com/Bu8xZnk7bN6 (focus on entire row)
https://screenshot.googleplex.com/sQzcVgZLHqd (narrow mode)

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

chrome/browser/resources/settings/chromeos/BUILD.gn

@@ -87,6 +87,7 @@ group("closure_compile") {
     ":os_route",
     ":os_settings_routes",
     ":route_origin_behavior",
+    ":search_handler",
     "ambient_mode_page:closure_compile",
     "bluetooth_page:closure_compile",
     "crostini_page:closure_compile",
@@ -153,3 +154,10 @@ js_library("metrics_recorder") {
     "//ui/webui/resources/js:cr",
   ]
 }
+
+js_library("search_handler") {
+  deps = [
+    "//chrome/browser/ui/webui/settings/chromeos/search:mojo_bindings_js_library_for_compile",
+    "//ui/webui/resources/js:cr",
+  ]
+}

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

@@ -59,6 +59,8 @@ These icons may appear blurry.
       <g id="laptop-chromebook" viewBox="0 0 24 24"><path d="M22 18V3H2v15H0v2h24v-2h-2zm-8 0h-4v-1h4v1zm6-3H4V5h16v10z"></path></g>
       <g id="mouse" viewBox="0 0 24 24"><path d="M13 1.07V9h7c0-4.08-3.05-7.44-7-7.93zM4 15c0 4.42 3.58 8 8 8s8-3.58 8-8v-4H4v4zm7-13.93C7.05 1.56 4 4.92 4 9h7V1.07z"></path></g>
       <g id="network-wifi" viewBox="0 0 24 24"><path fill-opacity=".3" d="M12.01 21.49L23.64 7c-.45-.34-4.93-4-11.64-4C5.28 3 .81 6.66.36 7l11.63 14.49.01.01.01-.01z"></path><path d="M3.53 10.95l8.46 10.54.01.01.01-.01 8.46-10.54C20.04 10.62 16.81 8 12 8c-4.81 0-8.04 2.62-8.47 2.95z"></path></g>
+      <g id="settings-ethernet" viewBox="0 0 24 24"><path d="M7.77 6.76L6.23 5.48.82 12l5.41 6.52 1.54-1.28L3.42 12l4.35-5.24zM7 13h2v-2H7v2zm10-2h-2v2h2v-2zm-6 2h2v-2h-2v2zm6.77-7.52l-1.54 1.28L20.58 12l-4.35 5.24 1.54 1.28L23.18 12l-5.41-6.52z"></path></g>
+      <g id="settings-general" viewBox="0 0 24 24"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"></path></g>
       <g id="signal-cellular-0-bar" viewBox="0 0 24 24"><path fill-opacity=".3" d="M2 22h20V2z"></path></g>
       <g id="signal-cellular-1-bar" viewBox="0 0 24 24"><path fill-opacity=".3" d="M2 22h20V2z"></path><path d="M12 12L2 22h10z"></path></g>
       <g id="signal-cellular-2-bar" viewBox="0 0 24 24"><path fill-opacity=".3" d="M2 22h20V2z"></path><path d="M14 10L2 22h12z"></path></g>

chrome/browser/resources/settings/chromeos/os_settings_search_box/BUILD.gn

@@ -15,7 +15,7 @@ js_library("os_settings_search_box") {
   deps = [
     ":os_search_result_row",
     "..:metrics_recorder",
-    "//chrome/browser/ui/webui/settings/chromeos/search:mojo_bindings_js_library_for_compile",
+    "..:search_handler",
     "//third_party/polymer/v1_0/components-chromium/iron-dropdown:iron-dropdown-extracted",
     "//third_party/polymer/v1_0/components-chromium/iron-list:iron-list-extracted",
     "//ui/webui/resources/cr_elements/cr_toolbar:cr_toolbar_search_field",
@@ -26,7 +26,9 @@ js_library("os_settings_search_box") {
 js_library("os_search_result_row") {
   deps = [
     "..:os_route",
+    "..:search_handler",
     "../..:router",
+    "//ui/webui/resources/js:assert",
     "//ui/webui/resources/js/cr/ui:focus_row_behavior",
   ]
 }

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

 <link rel="import" href="chrome://resources/html/polymer.html">
 
+<link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_row_behavior.html">
+<link rel="import" href="../os_icons.html">
 <link rel="import" href="../os_route.html">
+<link rel="import" href="../search_handler.html">
 <link rel="import" href="../../router.html">
 <link rel="import" href="../../settings_shared_css.html">
 
@@ -9,35 +12,56 @@
   <template>
     <style include="settings-shared">
       :host {
-        display: flex;
-        flex-basis: 100%;
-        height: 40px;
+        width: 100%;
       }
 
-      :host([selected]) #searchResultContainer {
+      :host([selected]) [focus-row-container] {
         background-color: var(--cros-menu-button-bg-color-active);
       }
 
-      :host(:not([selected])) #searchResultContainer:hover {
+      :host(:not([selected])) [focus-row-container]:hover {
         background-color: var(--cros-menu-button-bg-color-hover);
       }
 
+      [focus-row-container] {
+        width: inherit;
+      }
+
       #searchResultContainer {
+        align-items: center;
         display: flex;
-        flex-basis: 100%;
+        height: 40px;
+        justify-content: center;
       }
 
       #resultText {
-        flex-basis: 100%;
+        flex-grow: 1;
+      }
+
+      #resultIcon {
+        margin-inline-end: 20px;
+        margin-inline-start: 16px;
+      }
+
+      #actionTypeIcon {
+        margin-inline-end: 16px;
+        margin-inline-start: 20px;
       }
     </style>
-    <div id="searchResultContainer" on-click="navigateToSearchResultRoute"
-        focus-row-container>
-      <!-- TODO(crbug/1056909): Focus right hand icon instead; move
-           focus-row-control to that icon when available-->
-      <div id="resultText" focus-row-control selectable
-          on-keypress="onKeyPress_" focus-type="rowWrapper">
-        [[getResultText_(searchResult)]]
+    <div focus-row-container>
+      <div focus-row-control
+          focus-type="rowWrapper"
+          id="searchResultContainer"
+          on-click="navigateToSearchResultRoute"
+          on-keypress="onKeyPress_"
+          selectable>
+        <iron-icon id="resultIcon" icon="[[getResultIcon_(searchResult)]]">
+        </iron-icon>
+        <div id="resultText">
+          [[getResultText_(searchResult)]]
+        </div>
+        <iron-icon id="actionTypeIcon" icon="cr:arrow-forward">
+        </iron-icon>
       </div>
     </div>
   </template>

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

@@ -65,4 +65,23 @@ Polymer({
     settings.Router.getInstance().navigateTo(route, params);
     this.fire('navigated-to-result-route');
   },
+
+  /**
+   * @return {string} The name of the icon to use.
+   * @private
+   */
+  getResultIcon_() {
+    const Icon = chromeos.settings.mojom.SearchResultIcon;
+    switch (this.searchResult.icon) {
+      case Icon.kCellular:
+        return 'os-settings:multidevice-better-together-suite';
+      case Icon.kEthernet:
+        return 'os-settings:settings-ethernet';
+      case Icon.kWifi:
+        return 'os-settings:network-wifi';
+      default:
+        // TODO(crbug/1056909): assertNotReached() when all icons are added.
+        return 'os-settings:settings-general';
+    }
+  },
 });

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

@@ -8,7 +8,7 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
 <link rel="import" href="os_search_result_row.html">
 <link rel="import" href="../metrics_recorder.html">
-<link rel="import" href="../os_route.html">
+<link rel="import" href="../search_handler.html">
 <link rel="import" href="../../settings_shared_css.html">
 <link rel="import" href="../../router.html">
 
@@ -78,7 +78,5 @@
       </iron-list>
     </iron-dropdown>
   </template>
-  <script src="chrome://os-settings/search/search_result_icon.mojom-lite.js"></script>
-  <script src="chrome://os-settings/search/search.mojom-lite.js"></script>
   <script src="os_settings_search_box.js"></script>
 </dom-module>

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

@@ -139,13 +139,16 @@ Polymer({
      * @private
      */
     listBlurred_: Boolean,
-  },
 
-  /**
-   * Mojo OS Settings Search handler used to fetch search results.
-   * @private {?mojom.SearchHandlerInterface}
-   */
-  searchHandler_: null,
+    /**
+     * TODO(crbug/1056909): Remove once Settings Search UI matches mocks.
+     * @private {Boolean}
+     */
+    useFakeSearch_: {
+      type: Boolean,
+      value: false,
+    },
+  },
 
   listeners: {
     'blur': 'onBlur_',
@@ -153,11 +156,6 @@ Polymer({
     'search-changed': 'fetchSearchResults_',
   },
 
-  /* override */
-  created() {
-    this.searchHandler_ = mojom.SearchHandler.getRemote();
-  },
-
   /** @private */
   attached() {
     const toolbarSearchField = this.$.search;
@@ -166,13 +164,6 @@ Polymer({
         'focus', this.onSearchInputFocused_.bind(this));
   },
 
-  /**
-   * @param {?mojom.SearchHandlerInterface} searchHandler
-   */
-  setSearchHandlerForTesting(searchHandler) {
-    this.searchHandler_ = searchHandler;
-  },
-
   /**
    * @return {!OsSearchResultRowElement} The <os-search-result-row> that is
    *     associated with the selectedItem.
@@ -202,7 +193,7 @@ Polymer({
 
     this.spinnerActive = true;
 
-    if (!this.searchHandler_) {
+    if (this.useFakeSearch_) {
       // TODO(crbug/1056909): Remove once Settings Search is complete.
       fakeSettingsSearchHandlerSearch(query).then(results => {
         this.onSearchResultsReceived_(query, results);
@@ -214,7 +205,7 @@ Polymer({
     // strings support either 8 or 16 bit characters, and must be converted to
     // an array of 16 bit character codes that match base::string16.
     const queryMojoString16 = {data: Array.from(query, c => c.charCodeAt())};
-    this.searchHandler_.search(queryMojoString16).then(response => {
+    settings.getSearchHandler().search(queryMojoString16).then(response => {
       this.onSearchResultsReceived_(query, response.results);
     });
   },

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

+<link rel="import" href="chrome://resources/html/cr.html">
+<link rel="import" href="chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.html">
+
+<script src="chrome://os-settings/search/search_result_icon.mojom-lite.js"></script>
+<script src="chrome://os-settings/search/search.mojom-lite.js"></script>
+<script src="search_handler.js"></script>

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

+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview
+ * Provides functions used for OS settings search.
+ * Also provides a way to inject a test implementation for verifying
+ * OS settings search.
+ */
+cr.define('settings', function() {
+  /** @type {?chromeos.settings.mojom.SearchHandlerInterface} */
+  let settingsSearchHandler = null;
+
+  /**
+   * @param {!chromeos.settings.mojom.SearchHandlerInterface}
+   *     testSearchHandler A test search handler.
+   */
+  function setSearchHandlerForTesting(testSearchHandler) {
+    settingsSearchHandler = testSearchHandler;
+  }
+
+  /**
+   * @return {!chromeos.settings.mojom.SearchHandlerInterface} Search handler.
+   */
+  function getSearchHandler() {
+    if (settingsSearchHandler) {
+      return settingsSearchHandler;
+    }
+
+    settingsSearchHandler = chromeos.settings.mojom.SearchHandler.getRemote();
+    return settingsSearchHandler;
+  }
+
+  return {
+    setSearchHandlerForTesting,
+    getSearchHandler,
+  };
+});

chrome/browser/resources/settings/os_settings_resources.grd

@@ -1323,6 +1323,12 @@
       <structure name="IDR_OS_SETTINGS_METRICS_RECORDER_JS"
                  file="chromeos/metrics_recorder.js"
                  type="chrome_html" />
+      <structure name="IDR_OS_SETTINGS_SEARCH_HANDLER_HTML"
+                 file="chromeos/search_handler.html"
+                 type="chrome_html" />
+      <structure name="IDR_OS_SETTINGS_SEARCH_HANDLER_JS"
+                 file="chromeos/search_handler.js"
+                 type="chrome_html" />
     </structures>
   </release>
 </grit>

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

@@ -38,14 +38,16 @@ suite('OSSettingsSearchBox', () => {
   /**
    * @param {string} resultText Exact string of the result to be displayed.
    * @param {string} path Url path with optional params.
+   * @param {?chromeos.settings.mojom.SearchResultIcon} icon Result icon enum.
    * @return {!chromeos.settings.mojom.SearchResult} A search result.
    */
-  function fakeResult(resultText, urlPathWithParameters) {
+  function fakeResult(resultText, urlPathWithParameters, icon) {
     return /** @type {!mojom.SearchResult} */ ({
       resultText: {
         data: Array.from(resultText, c => c.charCodeAt()),
       },
       urlPathWithParameters: urlPathWithParameters,
+      icon: icon ? icon : chromeos.settings.mojom.SearchResultIcon.MIN_VALUE,
     });
   }
 
@@ -62,7 +64,7 @@ suite('OSSettingsSearchBox', () => {
     assertTrue(!!resultList);
 
     settingsSearchHandler = new settings.FakeSettingsSearchHandler();
-    searchBox.setSearchHandlerForTesting(settingsSearchHandler);
+    settings.setSearchHandlerForTesting(settingsSearchHandler);
 
     userActionRecorder = new settings.FakeUserActionRecorder();
     settings.setUserActionRecorderForTesting(userActionRecorder);
@@ -73,7 +75,7 @@ suite('OSSettingsSearchBox', () => {
     // Clear search field for next test.
     await simulateSearch('');
     settings.setUserActionRecorderForTesting(null);
-    searchBox.setSearchHandlerForTesting(undefined);
+    settings.setSearchHandlerForTesting(null);
   });
 
   test('User action search event', async () => {