[DevTools] Merge filter bar with the main toolbar

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

Index: third_party/WebKit/Source/devtools/front_end/resources/StorageItemsView.js
diff --git a/third_party/WebKit/Source/devtools/front_end/resources/StorageItemsView.js b/third_party/WebKit/Source/devtools/front_end/resources/StorageItemsView.js
index a404165c4502fad3ab69bf81fc3cd935afa9321a..56b795da02c94976a79c39b4b22f05083a9698f7 100644
--- a/third_party/WebKit/Source/devtools/front_end/resources/StorageItemsView.js
+++ b/third_party/WebKit/Source/devtools/front_end/resources/StorageItemsView.js
@@ -12,30 +12,21 @@ Resources.StorageItemsView = class extends UI.VBox {
     /** @type {?RegExp} */
     this._filterRegex = null;
 
-    this._filterBar = new UI.FilterBar(filterName, true);
-    this._textFilterUI = new UI.TextFilterUI(false);
-    this._textFilterUI.addEventListener(UI.FilterUI.Events.FilterChanged, this._filterChanged, this);
-    this._filterBar.addFilter(this._textFilterUI);
-
     this._deleteAllButton = this._addButton(Common.UIString('Clear All'), 'largeicon-clear', this.deleteAllItems);
     this._deleteSelectedButton =
         this._addButton(Common.UIString('Delete Selected'), 'largeicon-delete', this.deleteSelectedItem);
     this._refreshButton = this._addButton(Common.UIString('Refresh'), 'largeicon-refresh', this.refreshItems);
-    this._filterButton = this._filterBar.filterButton();
 
     this._mainToolbar = new UI.Toolbar('top-resources-toolbar', this.element);
 
-    var toolbarItems = [
-      this._refreshButton, this._deleteAllButton, this._deleteSelectedButton, new UI.ToolbarSeparator(),
-      this._filterButton
-    ];
-
-    this.element.addEventListener('contextmenu', this._showContextMenu.bind(this), true);
-
+    this._filterItem = new UI.ToolbarInput(Common.UIString('Filter'), 0.4, undefined, true);
+    this._filterItem.addEventListener(UI.ToolbarInput.Event.TextChanged, this._filterChanged, this);
+    this._filterItem.addEventListener(UI.ToolbarInput.Event.KeyDown, event => this._onFilterKeyDown(event));
+    var toolbarItems = [this._refreshButton, this._deleteAllButton, this._deleteSelectedButton, this._filterItem];
     for (var item of toolbarItems)
       this._mainToolbar.appendToolbarItem(item);
 
-    this._filterBar.show(this.element);
+    this.element.addEventListener('contextmenu', this._showContextMenu.bind(this), true);
   }
 
   /**
@@ -59,12 +50,21 @@ Resources.StorageItemsView = class extends UI.VBox {
     contextMenu.show();
   }
 
+  /**
+   * @param {!Common.Event} event
+   */
+  _onFilterKeyDown(event) {

[pfeldman, 2017/02/06 19:37:42]

Drop this, can be added later.

[eostroukhov, 2017/02/07 00:24:18]

Why? I added it because as a user, I tried this and it didn't work.

+    if (event.data.code !== 'ArrowDown')
+      return;
+    event.data.consume(true);
+    this.focusGrid();
+  }
 
   /**
    * @param {!Common.Event} event
    */
   _filterChanged(event) {
-    var text = this._textFilterUI.value();
+    var text = event.data;

[pfeldman, 2017/02/06 19:37:42]

Cast to string.

[eostroukhov, 2017/02/07 00:24:18]

Done.

     this._filterRegex = text ? new RegExp(text.escapeForRegExp(), 'i') : null;
     this.refreshItems();
   }
@@ -89,13 +89,6 @@ Resources.StorageItemsView = class extends UI.VBox {
   }
 
   /**
-   * @override
-   */
-  willHide() {
-    this.setCanDeleteSelected(false);
-  }
-
-  /**
    * @param {boolean} enabled
    * @protected
    */
@@ -124,7 +117,7 @@ Resources.StorageItemsView = class extends UI.VBox {
    * @protected
    */
   setCanFilter(enabled) {
-    this._filterButton.setEnabled(enabled);
+    this._filterItem.setEnabled(enabled);
   }
 
   deleteAllItems() {
@@ -135,4 +128,7 @@ Resources.StorageItemsView = class extends UI.VBox {
 
   refreshItems() {
   }
+
+  focusGrid() {
+  }
 };