[DevTools] Merge filter bar with the main toolbar

third_party/WebKit/Source/devtools/front_end/resources/FilterToolbarItem.js

Index: third_party/WebKit/Source/devtools/front_end/resources/FilterToolbarItem.js
diff --git a/third_party/WebKit/Source/devtools/front_end/resources/FilterToolbarItem.js b/third_party/WebKit/Source/devtools/front_end/resources/FilterToolbarItem.js
new file mode 100644
index 0000000000000000000000000000000000000000..eab702d3d240aac6fbdcc5a7f38a88d8a82f1511
--- /dev/null
+++ b/third_party/WebKit/Source/devtools/front_end/resources/FilterToolbarItem.js
@@ -0,0 +1,57 @@
+// Copyright 2017 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.
+
+Resources.FilterToolbarItem = class extends UI.ToolbarItem {

[dgozman, 2017/02/01 00:28:35]

- Should inherit from UI controls - only compose them.
- Why not just use ToolbarInput?
- I'd just inline it into StorageItemsView.

[eostroukhov, 2017/02/03 01:17:40]

Not relevant any more - I removed this class.

+  constructor() {
+    super(createElement('div'));
+
+    var shadowRoot = UI.createShadowRootWithCoreStyles(this.element, 'resources/filterToolbarItem.css');
+    var filterElement = shadowRoot.createChild('div', 'filter-input-body');
+    this._filterInput = filterElement.createChild('input', 'filter-input-field');
+    this._filterInput.placeholder = Common.UIString('Filter');
+    var clearButton = filterElement.createChild('div', 'filter-clear-button');
+    clearButton.appendChild(UI.Icon.create('smallicon-clear-input', 'search-cancel-button'));
+    clearButton.addEventListener('click', () => this._clear());
+
+    this._filterInput.addEventListener('input', () => this._onChangeCallback(), false);
+    this._filterInput.addEventListener('focus', () => this._filterInput.select(), false);
+    this._filterInput.addEventListener('keydown', event => this._onInputKeyDown(event), false);
+  }
+
+  /**
+   * @return {string}
+   */
+  value() {
+    return this._filterInput.value;
+  }
+
+  _clear() {
+    this._filterInput.value = '';
+    this._onChangeCallback();
+  }
+
+  _onChangeCallback() {
+    this.dispatchEventToListeners(Resources.FilterToolbarItem.Event.TextChanged, this._filterInput.value);
+  }
+
+  /**
+   * @param {!Event} event
+   */
+  _onInputKeyDown(event) {
+    if (event.key === 'Escape' && this._filterInput.value) {
+      this._clear();
+      event.consume(true);
+    }
+    if (event.key === 'ArrowDown')
+      this.dispatchEventToListeners(Resources.FilterToolbarItem.Event.FocusOnResultsRequested, this);
+  }
+};
+
+/**
+ * @enum {symbol}
+ */
+Resources.FilterToolbarItem.Event = {
+  TextChanged: Symbol('TextChanged'),
+  FocusOnResultsRequested: Symbol('FocusOnResultsRequested')
+};