[DevTools] Merge filter bar with the main toolbar

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

 // 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.StorageItemsView = class extends UI.VBox {
   /**
    * @param {string} title
    * @param {string} filterName
    */
   constructor(title, filterName) {
     super(false);
     /** @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);
   }
 
   /**
    * @param {string} label
    * @param {string} glyph
    * @param {!Function} callback
    * @return {!UI.ToolbarButton}
    */
   _addButton(label, glyph, callback) {
     var button = new UI.ToolbarButton(label, glyph);
     button.addEventListener(UI.ToolbarButton.Events.Click, callback, this);
     return button;
   }
 
   /**
    * @param {!Event} event
    */
   _showContextMenu(event) {
     var contextMenu = new UI.ContextMenu(event);
     contextMenu.appendItem(Common.UIString('Refresh'), this.refreshItems.bind(this));
     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();
   }
 
   /**
    * @param {!Array<?Object>} items
    * @param {function(?Object): string} keyFunction
    * @return {!Array<?Object>}
    * @protected
    */
   filter(items, keyFunction) {
     if (!this._filterRegex)
       return items;
     return items.filter(item => this._filterRegex.test(keyFunction(item)));
   }
 
   /**
    * @override
    */
   wasShown() {
     this.refreshItems();
   }
 
   /**
-   * @override
-   */
-  willHide() {
-    this.setCanDeleteSelected(false);
-  }
-
-  /**
    * @param {boolean} enabled
    * @protected
    */
   setCanDeleteAll(enabled) {
     this._deleteAllButton.setEnabled(enabled);
   }
 
   /**
    * @param {boolean} enabled
    * @protected
    */
   setCanDeleteSelected(enabled) {
     this._deleteSelectedButton.setEnabled(enabled);
   }
 
   /**
    * @param {boolean} enabled
    * @protected
    */
   setCanRefresh(enabled) {
     this._refreshButton.setEnabled(enabled);
   }
 
   /**
    * @param {boolean} enabled
    * @protected
    */
   setCanFilter(enabled) {
-    this._filterButton.setEnabled(enabled);
+    this._filterItem.setEnabled(enabled);
   }
 
   deleteAllItems() {
   }
 
   deleteSelectedItem() {
   }
 
   refreshItems() {
   }
+
+  focusGrid() {
+  }
 };