[DevTools] Add filtering to DOM storages

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

Index: third_party/WebKit/Source/devtools/front_end/resources/CookieItemsView.js
diff --git a/third_party/WebKit/Source/devtools/front_end/resources/CookieItemsView.js b/third_party/WebKit/Source/devtools/front_end/resources/CookieItemsView.js
index 93237c0c6ccdb8c4a0d0dc8d1aff146d6ee93203..20f9536ba68398829f7de4aeecf2912c86b0370e 100644
--- a/third_party/WebKit/Source/devtools/front_end/resources/CookieItemsView.js
+++ b/third_party/WebKit/Source/devtools/front_end/resources/CookieItemsView.js
@@ -30,29 +30,12 @@
 /**
  * @unrestricted
  */
-Resources.CookieItemsView = class extends UI.SimpleView {
+Resources.CookieItemsView = class extends Resources.ItemsView {
   constructor(treeElement, target, cookieDomain) {
-    super(Common.UIString('Cookies'));
+    super(Common.UIString('Cookies'), 'cookiesPanel');
 
     this.element.classList.add('storage-view');
 
-    this._deleteButton = new UI.ToolbarButton(Common.UIString('Delete Selected'), 'largeicon-delete');
-    this._deleteButton.addEventListener(UI.ToolbarButton.Events.Click, this._deleteButtonClicked, this);
-
-    this._clearButton = new UI.ToolbarButton(Common.UIString('Clear All'), 'largeicon-clear');
-    this._clearButton.addEventListener(UI.ToolbarButton.Events.Click, this._clearButtonClicked, this);
-
-    this._refreshButton = new UI.ToolbarButton(Common.UIString('Refresh'), 'largeicon-refresh');
-    this._refreshButton.addEventListener(UI.ToolbarButton.Events.Click, this._refreshButtonClicked, this);
-
-    this._filterBar = new UI.FilterBar('cookiesPanel', true);
-    this._textFilterUI = new UI.TextFilterUI(true);
-    this._textFilterUI.addEventListener(UI.FilterUI.Events.FilterChanged, this._filterChanged, this);
-    this._filterBar.addFilter(this._textFilterUI);
-
-    this._filterSeparator = new UI.ToolbarSeparator();
-    this._filterButton = this._filterBar.filterButton();
-
     this._target = target;
     this._treeElement = treeElement;
     this._cookieDomain = cookieDomain;
@@ -69,14 +52,6 @@ Resources.CookieItemsView = class extends UI.SimpleView {
 
   /**
    * @override
-   * @return {!Array.<!UI.ToolbarItem>}
-   */
-  syncToolbarItems() {
-    return [this._refreshButton, this._clearButton, this._deleteButton, this._filterSeparator, this._filterButton];
-  }
-
-  /**
-   * @override
    */
   wasShown() {
     this._update();
@@ -86,16 +61,7 @@ Resources.CookieItemsView = class extends UI.SimpleView {
    * @override
    */
   willHide() {
-    this._deleteButton.setEnabled(false);
-  }
-
-  /**
-   * @param {!Common.Event} event
-   */
-  _filterChanged(event) {
-    var text = this._textFilterUI.value();
-    this._filterRegex = text && new RegExp(text.escapeForRegExp(), 'i');
-    this._update();
+    this.deleteButton.setEnabled(false);
   }
 
   _update() {

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

Merge this with refresh?

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

Done.

@@ -124,9 +90,11 @@ Resources.CookieItemsView = class extends UI.SimpleView {
     if (!this._cookies.length) {
       // Nothing to show.
       this._emptyWidget.show(this.element);
-      this._filterButton.setEnabled(false);
-      this._clearButton.setEnabled(false);
-      this._deleteButton.setEnabled(false);
+
+      this.filterButton.setEnabled(false);
+      this.clearAllButton.setEnabled(false);
+      this.deleteButton.setEnabled(false);
+
       if (this._cookiesTable)
         this._cookiesTable.detach();
       return;
@@ -134,32 +102,19 @@ Resources.CookieItemsView = class extends UI.SimpleView {
 
     if (!this._cookiesTable) {
       this._cookiesTable =
-          new CookieTable.CookiesTable(false, this._update.bind(this), this._enableDeleteButton.bind(this));
+          new CookieTable.CookiesTable(false, this._update.bind(this), () => this.deleteButton.setEnabled(true));
     }
 
-    var shownCookies = this._filterCookies(this._cookies);
+    var shownCookies = this.filter(allCookies, cookie => `${cookie.name()} ${cookie.value()} ${cookie.domain()}`);
     this._cookiesTable.setCookies(shownCookies);
     this._emptyWidget.detach();
-    this._filterBar.show(this.element);
+    this.showFilterBar();
     this._cookiesTable.show(this.element);
     this._treeElement.subtitle =
         String.sprintf(Common.UIString('%d cookies (%s)'), this._cookies.length, Number.bytesToString(this._totalSize));
-    this._filterButton.setEnabled(true);
-    this._clearButton.setEnabled(true);
-    this._deleteButton.setEnabled(!!this._cookiesTable.selectedCookie());
-  }
-
-  /**
-   * @param {!Array.<!SDK.Cookie>} cookies
-   */
-  _filterCookies(cookies) {
-    if (!this._filterRegex)
-      return cookies;
-
-    return cookies.filter(cookie => {
-      const candidate = `${cookie.name()} ${cookie.value()} ${cookie.domain()}`;
-      return this._filterRegex.test(candidate);
-    });
+    this.filterButton.setEnabled(true);
+    this.clearAllButton.setEnabled(true);
+    this.deleteButton.setEnabled(!!this._cookiesTable.selectedCookie());
   }
 
   clear() {
@@ -168,20 +123,16 @@ Resources.CookieItemsView = class extends UI.SimpleView {
   }
 
   /**
-   * @param {!Common.Event} event
+   * @override
    */
-  _clearButtonClicked(event) {
+  onClearAll() {
     this.clear();
   }
 
-  _enableDeleteButton() {
-    this._deleteButton.setEnabled(true);
-  }
-
   /**
-   * @param {!Common.Event} event
+   * @override
    */
-  _deleteButtonClicked(event) {
+  onDelete() {
     var selectedCookie = this._cookiesTable.selectedCookie();
     if (selectedCookie) {
       selectedCookie.remove();
@@ -190,9 +141,9 @@ Resources.CookieItemsView = class extends UI.SimpleView {
   }
 
   /**
-   * @param {!Common.Event} event
+   * @override
    */
-  _refreshButtonClicked(event) {
+  onRefresh() {
     this._update();
   }