[DevTools] Add filtering to DOM storages

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

 /*
  * Copyright (C) 2008 Nokia Inc.  All rights reserved.
  * Copyright (C) 2013 Samsung Electronics. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  * 1. Redistributions of source code must retain the above copyright
  *    notice, this list of conditions and the following disclaimer.
  * 2. Redistributions in binary form must reproduce the above copyright
  *    notice, this list of conditions and the following disclaimer in the
  *    documentation and/or other materials provided with the distribution.
  *
  * THIS SOFTWARE IS PROVIDED ``AS IS'' AND ANY
  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
  * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
  * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
  * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
  * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
  * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
  * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
  * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 /**
  * @unrestricted
  */
-Resources.DOMStorageItemsView = class extends UI.SimpleView {
+Resources.DOMStorageItemsView = class extends Resources.ItemsView {
   constructor(domStorage) {
-    super(Common.UIString('DOM Storage'));
+    super(Common.UIString('DOM Storage'), 'domStoragePanel');
 
     this.domStorage = domStorage;

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

While you are here, mind renaming to _domStorage?

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

Done.

 
     this.element.classList.add('storage-view', 'table');
 
-    this._deleteButton = new UI.ToolbarButton(Common.UIString('Delete'), 'largeicon-delete');
-    this._deleteButton.setEnabled(false);
-    this._deleteButton.addEventListener(UI.ToolbarButton.Events.Click, this._deleteButtonClicked, this);
+    var columns = /** @type {!Array<!DataGrid.DataGrid.ColumnDescriptor>} */ ([
+      {id: 'key', title: Common.UIString('Key'), sortable: false, editable: true, weight: 50},
+      {id: 'value', title: Common.UIString('Value'), sortable: false, editable: true, weight: 50}
+    ]);
+    var dataGrid = new DataGrid.DataGrid(columns, this._editingCallback.bind(this), this._deleteCallback.bind(this));

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

this._dataGrid

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

Done.

+    dataGrid.setName('DOMStorageItemsView');
 
-    this._clearButton = new UI.ToolbarButton(Common.UIString('Clear All'), 'largeicon-clear');
-    this._clearButton.addEventListener(UI.ToolbarButton.Events.Click, () => this.domStorage.clear(), this);
-
-    this._refreshButton = new UI.ToolbarButton(Common.UIString('Refresh'), 'largeicon-refresh');
-    this._refreshButton.addEventListener(UI.ToolbarButton.Events.Click, this._refreshButtonClicked, this);
+    this._dataGrid = dataGrid;
+    this.showFilterBar();

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

Why show filter by default?

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

I will rename to "showFilterUI" - what it does is adding a filter button and
another toolbar, that is hidden by default. It needs to be called here so the
filter toolbar appears above the grid when shown.

+    this._dataGrid.asWidget().show(this.element);
 
     this.domStorage.addEventListener(
         Resources.DOMStorage.Events.DOMStorageItemsCleared, this._domStorageItemsCleared, this);
     this.domStorage.addEventListener(
         Resources.DOMStorage.Events.DOMStorageItemRemoved, this._domStorageItemRemoved, this);
     this.domStorage.addEventListener(Resources.DOMStorage.Events.DOMStorageItemAdded, this._domStorageItemAdded, this);
     this.domStorage.addEventListener(
         Resources.DOMStorage.Events.DOMStorageItemUpdated, this._domStorageItemUpdated, this);
   }
 
   /**
    * @override
-   * @return {!Array.<!UI.ToolbarItem>}
-   */
-  syncToolbarItems() {
-    return [this._refreshButton, this._clearButton, this._deleteButton];
-  }
-
-  /**
-   * @override
    */
   wasShown() {
-    this._update();
+    this.onRefresh();
   }
 
   /**
    * @override
    */
   willHide() {
-    this._deleteButton.setEnabled(false);
+    this._setDeleteEnabled(false);
   }
 
   /**
    * @param {!Common.Event} event
    */
   _domStorageItemsCleared(event) {
     if (!this.isShowing() || !this._dataGrid)
       return;
 
     this._dataGrid.rootNode().removeChildren();
     this._dataGrid.addCreationNode(false);
-    this._deleteButton.setEnabled(false);
+    this._setDeleteEnabled(false);
   }
 
   /**
    * @param {!Common.Event} event
    */
   _domStorageItemRemoved(event) {
     if (!this.isShowing() || !this._dataGrid)
       return;
 
     var storageData = event.data;
     var rootNode = this._dataGrid.rootNode();
     var children = rootNode.children;
 
     for (var i = 0; i < children.length; ++i) {
       var childNode = children[i];
       if (childNode.data.key === storageData.key) {
         rootNode.removeChild(childNode);
-        this._deleteButton.setEnabled(children.length > 1);
+        this._setDeleteEnabled(children.length > 1);
         return;
       }
     }
   }
 
   /**
    * @param {!Common.Event} event
    */
   _domStorageItemAdded(event) {
     if (!this.isShowing() || !this._dataGrid)
       return;
 
     var storageData = event.data;
     var rootNode = this._dataGrid.rootNode();
     var children = rootNode.children;
 
-    this._deleteButton.setEnabled(true);
+    this._setDeleteEnabled(true);
 
     for (var i = 0; i < children.length; ++i) {
       if (children[i].data.key === storageData.key)
         return;
     }
 
     var childNode = new DataGrid.DataGridNode({key: storageData.key, value: storageData.value}, false);
     rootNode.insertChild(childNode, children.length - 1);
   }
 
@@ skipping 16 matching lines @@
           rootNode.removeChild(childNode);
           return;
         }
         keyFound = true;
         if (childNode.data.value !== storageData.value) {
           childNode.data.value = storageData.value;
           childNode.refresh();
           childNode.select();
           childNode.reveal();
         }
-        this._deleteButton.setEnabled(true);
+        this._setDeleteEnabled(true);
       }
     }
   }
 
-  _update() {
-    this.detachChildWidgets();
-    this.domStorage.getItems(this._showDOMStorageItems.bind(this));
-  }
-
+  /**
+   * @param {?Object} error
+   * @param {!Array<!Array<string>>} items
+   */
   _showDOMStorageItems(error, items) {
     if (error)
       return;
-
-    this._dataGrid = this._dataGridForDOMStorageItems(items);
-    this._dataGrid.asWidget().show(this.element);
-    this._deleteButton.setEnabled(this._dataGrid.rootNode().children.length > 1);
+    var rootNode = this._dataGrid.rootNode();
+    var selectedKey = null;
+    for (var node of rootNode.children) {
+      if (!node.selected)
+        continue;
+      selectedKey = node.data.key;
+      break;
+    }
+    rootNode.removeChildren();
+    var selectedNode = null;
+    for (var item of this.filter(items, item => `${item[0]} ${item[1]}`)) {

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

Mind extracting |filteredItems| variable?

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

Done.

+      var key = item[0];
+      var value = item[1];
+      var node = new DataGrid.DataGridNode({key, value}, false);

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

Don't use new language features without discussion with a team first.

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

Assumed it was ok to use ES6 - I removed this feature.

+      node.selectable = true;
+      rootNode.appendChild(node);
+      if (!selectedNode || key === selectedKey) {

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

if (key === selectedKey)
  selectedNode = node;


....

selectedNode = selectedNode || rootNode.children[0];
if (selectedNode)
  selectedNode.selected = true;

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

Done. Note that I kept "!selectedNode" to select the top node if there's no node
with the selectedKey

+        if (selectedNode)
+          selectedNode.selected = false;
+        selectedNode = node;
+        node.selected = true;
+      }
+    }
+    this._dataGrid.addCreationNode(false);
+    this._setDeleteEnabled(!!selectedNode);
   }
 
-  _dataGridForDOMStorageItems(items) {
-    var columns = /** @type {!Array<!DataGrid.DataGrid.ColumnDescriptor>} */ ([
-      {id: 'key', title: Common.UIString('Key'), sortable: false, editable: true, weight: 50},
-      {id: 'value', title: Common.UIString('Value'), sortable: false, editable: true, weight: 50}
-    ]);
-
-    var nodes = [];
-
-    var keys = [];
-    var length = items.length;
-    for (var i = 0; i < items.length; i++) {
-      var key = items[i][0];
-      var value = items[i][1];
-      var node = new DataGrid.DataGridNode({key: key, value: value}, false);
-      node.selectable = true;
-      nodes.push(node);
-      keys.push(key);
-    }
-
-    var dataGrid = new DataGrid.DataGrid(columns, this._editingCallback.bind(this), this._deleteCallback.bind(this));
-    dataGrid.setName('DOMStorageItemsView');
-    length = nodes.length;
-    for (var i = 0; i < length; ++i)
-      dataGrid.rootNode().appendChild(nodes[i]);
-    dataGrid.addCreationNode(false);
-    if (length > 0)
-      nodes[0].selected = true;
-    return dataGrid;
+  _setDeleteEnabled(enabled) {
+    this.deleteButton.setEnabled(enabled);

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

Inline this.

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

Done.

   }
 
   /**
-   * @param {!Common.Event} event
+   * @override
    */
-  _deleteButtonClicked(event) {
+  onDelete() {
     if (!this._dataGrid || !this._dataGrid.selectedNode)
       return;
 
     this._deleteCallback(this._dataGrid.selectedNode);
   }
 
   /**
-   * @param {!Common.Event} event
+   * @override
    */
-  _refreshButtonClicked(event) {
-    this._update();
+  onRefresh() {
+    this.domStorage.getItems((error, items) => this._showDOMStorageItems(error, items));
+  }
+
+  /**
+   * @override
+   */
+  onClearAll() {
+    this.domStorage.clear();
   }
 
   _editingCallback(editingNode, columnIdentifier, oldText, newText) {
     var domStorage = this.domStorage;
     if (columnIdentifier === 'key') {
       if (typeof oldText === 'string')
         domStorage.removeItem(oldText);
       domStorage.setItem(newText, editingNode.data.value || '');
       this._removeDupes(editingNode);
     } else {
@@ skipping 15 matching lines @@
   }
 
   _deleteCallback(node) {
     if (!node || node.isCreationNode)
       return;
 
     if (this.domStorage)
       this.domStorage.removeItem(node.data.key);
   }
 };