[DevTools] Add filtering to DOM storages

third_party/WebKit/Source/devtools/front_end/resources/ItemsView.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.ItemsView = class extends UI.VBox {

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

nit: empty line before this?

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

Done.

+  constructor(title, filterName) {

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

JSDoc please

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

Done.

+    super(false);
+    /** @type {?RegExp} */
+    this._filterRegex = null;
+
+
+    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);
+
+    this._deleteAllButton = this._addButton(Common.UIString('Clear All'), 'largeicon-clear', this.deleteAll);
+    this._deleteSelectedButton =
+        this._addButton(Common.UIString('Delete Selected'), 'largeicon-delete', this.deleteSelected);
+    this._refreshButton = this._addButton(Common.UIString('Refresh'), 'largeicon-refresh', this.refresh);
+    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
+    ];
+
+    for (var item of toolbarItems)
+      this._mainToolbar.appendToolbarItem(item);
+
+    this._filterBar.show(this.element);
+  }
+
+  /**
+   * @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.refresh();
+  }
+
+  /**
+   * @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.refresh();
+  }
+
+  /**
+   * @override
+   */
+  willHide() {
+    this.setCanDeleteSelected(false);

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

Why this?

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

That's how it worked in those panels, I pushed up code that was duplicated in
both subclasses.

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

Let's either understand why it's here (using blame) or remove it.

[eostroukhov, 2017/01/31 01:17:34]

Looks like "it had always been this way" - I traced it back to
https://bugs.webkit.org/show_bug.cgi?id=49864

Should I remove it?

[dgozman, 2017/01/31 03:51:17]

Yes, please.

[eostroukhov, 2017/01/31 18:39:10]

Done.

+  }
+
+  /**
+   * @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);
+  }
+
+  deleteAll() {
+  }
+
+  deleteSelected() {
+  }
+
+  refresh() {
+  }
+};