Public side of search CL

Change-Id: I33bbb1cca27e8973414a6520b7c76cf1135949b2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2575038Reviewed-by: Tommy Steimel <steimel@chromium.org>
Commit-Queue: Becca Hughes <beccahughes@chromium.org>
Cr-Commit-Position: refs/heads/master@{#833838}

chrome/browser/resources/kaleidoscope/BUILD.gn

@@ -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",
   ]
 }

chrome/browser/resources/kaleidoscope/toolbar.html

@@ -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>

chrome/browser/resources/kaleidoscope/toolbar.js

@@ -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);
+    }
   }
 }