Add search bar back to Kaleidoscope

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

chrome/browser/resources/kaleidoscope/toolbar.html

@@ -8,4 +8,4 @@
     z-index: 99;
   }
 </style>
-<cr-toolbar id="toolbar" show-menu show-search="[[showSearch]]" menu-label="[[menuLabel]]" page-name="[[pageName]]"></cr-toolbar>
+<cr-toolbar id="toolbar" show-menu on-search-changed="onSearchChanged_" menu-label="[[menuLabel]]" page-name="[[pageName]]"></cr-toolbar>

chrome/browser/resources/kaleidoscope/toolbar.js

@@ -17,9 +17,6 @@ class KaleidoscopeToolbarElement extends PolymerElement {
 
   static get properties() {
     return {
-      // Controls whether the search field is shown.
-      showSearch: {type: Boolean, value: false},
-
       // Sets the tooltip text displayed on the menu button.
       menuLabel: {type: String, value: ''},
 
@@ -27,6 +24,27 @@ class KaleidoscopeToolbarElement extends PolymerElement {
       pageName: {type: String, value: ''},
     };
   }
+
+  constructor() {
+    super();
+
+    this.timeoutInterval_ = null;
+  }
+
+  /**
+   * @param {!CustomEvent<string>} e
+   * @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});
+      this.dispatchEvent(event);
+    }, 300);
+  }
 }
 
 customElements.define(