[DevTools] Add filtering to DOM storages

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

Index: third_party/WebKit/Source/devtools/front_end/resources/ItemsView.js
diff --git a/third_party/WebKit/Source/devtools/front_end/resources/ItemsView.js b/third_party/WebKit/Source/devtools/front_end/resources/ItemsView.js
new file mode 100644
index 0000000000000000000000000000000000000000..ad238fd137ff8ab1fa4a522aef04fd206a65110e
--- /dev/null
+++ b/third_party/WebKit/Source/devtools/front_end/resources/ItemsView.js
@@ -0,0 +1,91 @@
+// Copyright 2016 The Chromium Authors. All rights reserved.

[dgozman, 2017/01/26 22:21:09]

2017

[eostroukhov, 2017/01/26 23:35:46]

Done.

+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+/**
+ * @unrestricted
+ */
+Resources.ItemsView = class extends UI.VBox {
+  constructor(title, filterName) {
+    super(false);
+    /** @type {?RegExp} */
+    this._filterRegex = null;
+
+    /**
+     * @protected

[dgozman, 2017/01/26 22:21:09]

We usually do protected getters in this case.

[eostroukhov, 2017/01/26 23:35:46]

There does not seem to be a need for accessing the buttons other then to toggle
enablement - I added protected setCan{DeleteSelected,DeleteAll,Refresh,Filter}

[dgozman, 2017/01/27 22:48:45]

Sounds like extra indirection.

[eostroukhov, 2017/01/28 00:03:29]

It was either a getter or this indirection. I actually prefer this - as it
abstracts the subclasses from the implemention (e.g. in the CL I'm working on
"setCanFilter" will gray out the text field as there will no longer be a toolbar
button)

[dgozman, 2017/01/30 21:53:48]

Sounds good.

+     */
+    this.clearAllButton = this._addButton(Common.UIString('Clear All'), 'largeicon-clear', this.onClearAll);
+    /**
+     * @protected
+     */
+    this.deleteButton = this._addButton(Common.UIString('Delete Selected'), 'largeicon-delete', this.onDelete);
+    /**
+     * @protected
+     */
+    this.refreshButton = this._addButton(Common.UIString('Refresh'), 'largeicon-refresh', this.onRefresh);
+
+    this._filterBar = new UI.FilterBar(filterName, true);
+    this._textFilterUI = new UI.TextFilterUI(true);
+    this._textFilterUI.addEventListener(UI.FilterUI.Events.FilterChanged, this._filterChanged, this);
+    this._filterBar.addFilter(this._textFilterUI);
+
+    /**
+     * @protected
+     */
+    this.filterButton = this._filterBar.filterButton();
+
+    this._mainToolbar = new UI.Toolbar('top-resources-toolbar', this.element);
+
+    var toolbarItems =
+        [this.refreshButton, this.clearAllButton, this.deleteButton, new UI.ToolbarSeparator(), this.filterButton];
+
+    for (var item of toolbarItems)
+      this._mainToolbar.appendToolbarItem(item);
+  }
+
+  /**
+   * @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 {!Common.Event} event
+   */
+  _filterChanged(event) {
+    var text = this._textFilterUI.value();
+    this._filterRegex = text ? new RegExp(text.escapeForRegExp(), 'i') : null;
+    this.onRefresh();
+  }
+
+  /**
+   * @protected
+   */
+  showFilterBar() {

[dgozman, 2017/01/26 22:21:09]

Pass boolean |supportsFiltering| in constructor instead?

[eostroukhov, 2017/01/26 23:35:46]

For now, this can be unconditional

+    this._filterBar.show(this.element);
+  }
+
+  /**
+   * @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)));
+  }
+
+  onClearAll() {

[dgozman, 2017/01/26 22:21:09]

@protected ?

[eostroukhov, 2017/01/26 23:35:46]

ResourcesPanel calls "deleteAll" - so I'd like to keep all of them public.

+  }
+  onDelete() {

[dgozman, 2017/01/26 22:21:09]

style: empty line between functions

[eostroukhov, 2017/01/26 23:35:46]

Done.

+  }
+  onRefresh() {

[dgozman, 2017/01/26 22:21:09]

deleteAllItems, deleteSelectedItem, refreshItem

[eostroukhov, 2017/01/26 23:35:46]

I'm suggesting dropping the "item" - deleteAll/deleteSelected/refresh. 

[dgozman, 2017/01/27 22:48:45]

I'm suggesting to leave the "item" -
deleteAllItems/deleteSelectedItem/refreshItem.

[eostroukhov, 2017/01/28 00:03:29]

Done.

+  }
+};