Skip to content

GitLab

T
tangled
Commit 7a89431c authored by Regan Hsu's avatar Regan Hsu Committed by Commit Bot
Browse files
Options

[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: default avatarKyle Horimoto <khorimoto@chromium.org>
Cr-Commit-Position: refs/heads/master@{#756068}
parent 8820ded0
Show whitespace changes
Inline Side-by-side
Showing with 138 additions and 41 deletions
chrome/browser/resources/settings/chromeos/BUILD.gn
View file @ 7a89431c
......@@ -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
View file @ 7a89431c
......@@ -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
View file @ 7a89431c
......@@ -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
View file @ 7a89431c
<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,36 +12,57 @@
<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">
<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>
<script src="os_search_result_row.js"></script>
......
chrome/browser/resources/settings/chromeos/os_settings_search_box/os_search_result_row.js
View file @ 7a89431c
......@@ -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
View file @ 7a89431c
......@@ -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
View file @ 7a89431c
......@@ -139,13 +139,16 @@ Polymer({
* @private
*/
listBlurred_: Boolean,
},
/**
* Mojo OS Settings Search handler used to fetch search results.
* @private {?mojom.SearchHandlerInterface}
* TODO(crbug/1056909): Remove once Settings Search UI matches mocks.
* @private {Boolean}
*/
searchHandler_: null,
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 0 → 100644
View file @ 7a89431c
<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 0 → 100644
View file @ 7a89431c
// 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
View file @ 7a89431c
......@@ -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
View file @ 7a89431c
......@@ -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 () => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment