[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..3ae4f2bf2e4d49fa211b47f6e1327c8c6c32c10b 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 Resources.FilterToolbarItem();
+    this._filterItem.addEventListener(Resources.FilterToolbarItem.Event.TextChanged, this._filterChanged, this);
+    this._filterItem.addEventListener(Resources.FilterToolbarItem.Event.FocusOnResultsRequested, this.focusGrid, this);
+    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);
   }
 
   /**
@@ -64,7 +55,7 @@ Resources.StorageItemsView = class extends UI.VBox {
    * @param {!Common.Event} event
    */
   _filterChanged(event) {
-    var text = this._textFilterUI.value();
+    var text = event.data;
     this._filterRegex = text ? new RegExp(text.escapeForRegExp(), 'i') : null;
     this.refreshItems();
   }
@@ -89,13 +80,6 @@ Resources.StorageItemsView = class extends UI.VBox {
   }
 
   /**
-   * @override
-   */
-  willHide() {
-    this.setCanDeleteSelected(false);
-  }
-
-  /**
    * @param {boolean} enabled
    * @protected
    */
@@ -124,7 +108,7 @@ Resources.StorageItemsView = class extends UI.VBox {
    * @protected
    */
   setCanFilter(enabled) {
-    this._filterButton.setEnabled(enabled);
+    this._filterItem.setEnabled(enabled);
   }
 
   deleteAllItems() {
@@ -135,4 +119,7 @@ Resources.StorageItemsView = class extends UI.VBox {
 
   refreshItems() {
   }
+
+  focusGrid() {

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

Why not just focus?

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

I feel like "focus" would be ambiguous as the pane at least has a toolbar.

+  }
 };