Commit 13e13d16 authored by Becca Hughes's avatar Becca Hughes Committed by Chromium LUCI CQ

Public side of search CL

Change-Id: I33bbb1cca27e8973414a6520b7c76cf1135949b2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2575038Reviewed-by: default avatarTommy Steimel <steimel@chromium.org>
Commit-Queue: Becca Hughes <beccahughes@chromium.org>
Cr-Commit-Position: refs/heads/master@{#833838}
parent e29f7492
......@@ -31,5 +31,6 @@ js_library("side_nav_container") {
js_library("toolbar") {
deps = [
"//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
"//ui/webui/resources/cr_elements/cr_toolbar:cr_toolbar.m",
]
}
......@@ -12,6 +12,7 @@
show-menu
on-search-changed="onSearchChanged_"
menu-label="[[menuLabel]]"
page-name="[[pageName]]">
page-name="[[pageName]]"
search-prompt="[[searchPrompt]]">
<slot></slot>
</cr-toolbar>
......@@ -22,13 +22,36 @@ class KaleidoscopeToolbarElement extends PolymerElement {
// Sets the text displayed beside the menu button.
pageName: {type: String, value: ''},
// Sets the text displayed in the search box.
searchPrompt: {type: String, value: ''},
};
}
constructor() {
super();
connectedCallback() {
super.connectedCallback();
this.hideSearch();
const toolbar = /** @type {CrToolbarElement} */ (this.$.toolbar);
const input = toolbar.getSearchField().getSearchInput();
input.addEventListener('keyup', (e) => {
if (e.keyCode == 13) {
const event =
new CustomEvent('ks-search-updated', {detail: input.value});
this.dispatchEvent(event);
}
});
}
hideSearch() {
const toolbar = /** @type {CrToolbarElement} */ (this.$.toolbar);
toolbar.getSearchField().style.display = 'none';
}
this.timeoutInterval_ = null;
showSearch() {
const toolbar = /** @type {CrToolbarElement} */ (this.$.toolbar);
toolbar.getSearchField().style.display = '';
toolbar.getSearchField().getSearchInput().focus();
}
/**
......@@ -36,14 +59,10 @@ class KaleidoscopeToolbarElement extends PolymerElement {
* @private
*/
onSearchChanged_(e) {
clearInterval(this.timeoutInterval_);
// Add a 300ms debounce so we don't fire for every character but should not
// be noticeable to the user.
this.timeoutInterval_ = setTimeout(() => {
const event = new CustomEvent('ks-search-updated', {detail: e.detail});
if (e.detail.length == 0) {
const event = new CustomEvent('ks-search-cleared');
this.dispatchEvent(event);
}, 300);
}
}
}
......
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