DevTools: WebSocketFrameView - Add frames display control toolbar

third_party/WebKit/Source/devtools/front_end/network/ResourceWebSocketFrameView.js

Index: third_party/WebKit/Source/devtools/front_end/network/ResourceWebSocketFrameView.js
diff --git a/third_party/WebKit/Source/devtools/front_end/network/ResourceWebSocketFrameView.js b/third_party/WebKit/Source/devtools/front_end/network/ResourceWebSocketFrameView.js
index acf15e9b77ae55d1a9aab2e8d607352b07eaefdc..1ef8e0ed7457d2895510beb5f6faf0dbe3943b88 100644
--- a/third_party/WebKit/Source/devtools/front_end/network/ResourceWebSocketFrameView.js
+++ b/third_party/WebKit/Source/devtools/front_end/network/ResourceWebSocketFrameView.js
@@ -44,7 +44,7 @@ Network.ResourceWebSocketFrameView = class extends UI.VBox {
     ]);
 
     this._dataGrid = new DataGrid.SortableDataGrid(columns);
-    this._dataGrid.setRowContextMenuCallback(onRowContextMenu);
+    this._dataGrid.setRowContextMenuCallback(onRowContextMenu.bind(this));
     this._dataGrid.setStickToBottom(true);
     this._dataGrid.setCellClass('websocket-frame-view-td');
     this._timeComparator =
@@ -57,10 +57,38 @@ Network.ResourceWebSocketFrameView = class extends UI.VBox {
     this._dataGrid.setName('ResourceWebSocketFrameView');
     this._dataGrid.addEventListener(DataGrid.DataGrid.Events.SelectedNode, this._onFrameSelected, this);
     this._dataGrid.addEventListener(DataGrid.DataGrid.Events.DeselectedNode, this._onFrameDeselected, this);
-    this._splitWidget.setMainWidget(this._dataGrid.asWidget());
 
-    var view = new UI.EmptyWidget('Select frame to browse its content.');
-    this._splitWidget.setSidebarWidget(view);
+    this._clearAllButton = new UI.ToolbarButton(Common.UIString('Clear All'), 'largeicon-clear');
+    this._clearAllButton.addEventListener(UI.ToolbarButton.Events.Click, this._onClearAllWidgetClicked, this);
+    this._clearFrameOffset = 0;
+
+    this._textFilterUI = new UI.TextFilterUI(true);
+    this._textFilterUI.addEventListener(UI.FilterUI.Events.FilterChanged, this._onFilterUIChanged, this);

[allada, 2017/04/17 21:11:19]

Lets inline "_onFilterUIChanged"

ie: this.refresh

+
+    var typeFilterItems = [

[allada, 2017/04/17 21:11:19]

Lets move this to near the bottom of the file.

Something like:

Network.ResourceWebSocketFrameView._filterTypes = [...

+      {name: 'send', label: Common.UIString('Send')},
+      {name: 'receive', label: Common.UIString('Receive')},
+    ];
+    this._typeFilterSetting = Common.settings.createSetting('resourceWebSocketFrameViewTypeFilters', {});

[allada, 2017/04/17 21:11:19]

lets make this a local variable since it's not needed outside the constructor.

+    this._typeFilterUI = new UI.NamedBitSetFilterUI(typeFilterItems, this._typeFilterSetting);
+    this._typeFilterUI.addEventListener(UI.FilterUI.Events.FilterChanged, this._onFilterUIChanged, this);

[allada, 2017/04/17 21:11:19]

Same here... inline "_onFilterUIChanged"

ie: this.refresh

+
+    this._filterBar = new UI.FilterBar('resourceWebSocketFrameView', true);

[allada, 2017/04/17 21:11:19]

lets rename this just "websocketFrameView". (resources and network should now be
fully separated)

+    this._filterBar.addFilter(this._textFilterUI);

[allada, 2017/04/17 21:11:19]

Did you mean to add this twice?

[muzuiget, 2017/04/20 09:40:01]

Sorry, I didn't get your point. One is "_textFilterUI" another is
"_typeFilterUI"

[allada, 2017/04/24 18:28:14]

I see.

+    this._filterBar.addFilter(this._typeFilterUI);
+
+    this._mainToolbar = new UI.Toolbar('');
+    this._mainToolbar.appendToolbarItem(this._clearAllButton);
+    this._mainToolbar.appendToolbarItem(this._filterBar.filterButton());
+
+    var mainContainer = new UI.VBox();
+    mainContainer.element.appendChild(this._mainToolbar.element);
+    this._filterBar.show(mainContainer.element);
+    this._dataGrid.asWidget().show(mainContainer.element);
+    this._splitWidget.setMainWidget(mainContainer);
+
+    this._frameEmptyWidget = new UI.EmptyWidget('Select frame to browse its content.');

[allada, 2017/04/17 21:11:19]

I know this was not how it was originally, but can you change this line to:
this._frameEmptyWidget = new UI.EmptyWidget(Common.UIString('Select frame to
browse its content.'));

+    this._splitWidget.setSidebarWidget(this._frameEmptyWidget);
 
     /** @type {?Network.ResourceWebSocketFrameNode} */
     this._selectedNode = null;
@@ -68,11 +96,14 @@ Network.ResourceWebSocketFrameView = class extends UI.VBox {
     /**
      * @param {!UI.ContextMenu} contextMenu
      * @param {!DataGrid.DataGridNode} node
+     * @this {Network.ResourceWebSocketFrameView}
      */
     function onRowContextMenu(contextMenu, node) {
       contextMenu.appendItem(
           Common.UIString.capitalize('Copy ^message'),
           InspectorFrontendHost.copyText.bind(InspectorFrontendHost, node.data.data));
+      contextMenu.appendSeparator();
+      contextMenu.appendItem(Common.UIString.capitalize('Clear ^all'), this._onClearAllWidgetClicked.bind(this));
     }
   }
 
@@ -107,10 +138,47 @@ Network.ResourceWebSocketFrameView = class extends UI.VBox {
    */
   _frameAdded(event) {
     var frame = /** @type {!SDK.NetworkRequest.WebSocketFrame} */ (event.data);
+    if (!this._frameFilter(frame))
+      return;
     this._dataGrid.insertChild(new Network.ResourceWebSocketFrameNode(this._request.url(), frame));
   }
 
   /**
+   * @param {!SDK.NetworkRequest.WebSocketFrame} frame
+   */
+  _frameFilter(frame) {
+    var regex = this._textFilterUI.regex();

[allada, 2017/04/17 21:11:19]

In this case regex should be the tester used for both when regex is checked and
not.

In other words this should be all you need:

return regex && regex.test(frame.text) && this._typeFilterUI.accept(frame.type);

+    if (regex) {
+      if (!regex.test(frame.text))
+        return false;
+    } else {
+      var text = this._textFilterUI.value();
+      if (!frame.text.includes(text))
+        return false;
+    }
+
+    if (!this._typeFilterUI.accept(frame.type))
+      return false;
+
+    return true;
+  }
+
+  /**
+   * @param {!Common.Event} event
+   */
+  _onClearAllWidgetClicked(event) {

[allada, 2017/04/17 21:11:19]

Lets rename this "_clearFrames" and remove the event argument, so it's easier to
reuse.

+    this._clearFrameOffset = this._request.frames().length;
+    this.refresh();
+  }
+
+  /**
+   * @param {!Common.Event} event
+   */
+  _onFilterUIChanged(event) {
+    this.refresh();
+  }
+
+  /**
    * @param {!Common.Event} event
    */
   _onFrameSelected(event) {
@@ -148,13 +216,20 @@ Network.ResourceWebSocketFrameView = class extends UI.VBox {
    */
   _onFrameDeselected(event) {
     this._currentSelectedNode = null;
+    this._splitWidget.setSidebarWidget(this._frameEmptyWidget);
   }
 
   refresh() {
     this._dataGrid.rootNode().removeChildren();
+
+    var url = this._request.url();
     var frames = this._request.frames();
-    for (var i = 0; i < frames.length; ++i)
-      this._dataGrid.insertChild(new Network.ResourceWebSocketFrameNode(this._request.url(), frames[i]));
+    var start = this._clearFrameOffset;
+    for (var i = start; i < frames.length; ++i) {

[allada, 2017/04/17 21:11:19]

Can we change this to:

frames =
frames.slice(this._clearFrameOffset).filter(this._frameFilter.bind(this));
frames.forEach(frame => this._dataGrid.insertChild(new
Network.ResourceWebSocketFrameNode(url, frame)));

+      var frame = frames[i];
+      if (this._frameFilter(frame))
+        this._dataGrid.insertChild(new Network.ResourceWebSocketFrameNode(url, frame));
+    }
   }
 
   _sortItems() {