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..af943a183e2665560279c44d1d57deff38fddfa7 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,32 @@ 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._clearFrames, this);
+    this._clearFrameOffset = 0;
+
+    this._filterTextInput = new UI.ToolbarInput(Common.UIString('Filter'), 0.4, undefined, true);
+    this._filterTextInput.addEventListener(UI.ToolbarInput.Event.TextChanged, this._updateFilterSetting, this);
+
+    this._filterTypeCombobox = new UI.ToolbarComboBox(this._updateFilterSetting.bind(this));
+    Network.ResourceWebSocketFrameView._filterTypes.forEach(v => {

[allada, 2017/05/04 01:41:30]

nit: rename "v" to "filterItem"

+      var option = this._filterTypeCombobox.createOption(v.label, v.label, v.name);
+      this._filterTypeCombobox.addOption(option);
+    });
+
+    var toolbarItems = [this._clearAllButton, this._filterTypeCombobox, this._filterTextInput];
+    this._mainToolbar = new UI.Toolbar('');
+    for (var item of toolbarItems)

[allada, 2017/05/04 01:41:30]

nit: lets do these as separate lines (since it's the same number of lines and
more clear on what it's doing)...

I think it might even be better to move "this._mainToolbar = ..." further up and
move these lines after the setup of each item retrospectively.

this._mainToolbar.appendToolbarItem(this._clearAllButton);
...
this._mainToolbar.appendToolbarItem(this._filterTypeCombobox);
...
this._mainToolbar.appendToolbarItem(this._filterTextInput);

+      this._mainToolbar.appendToolbarItem(item);
+
+    var mainContainer = new UI.VBox();
+    mainContainer.element.appendChild(this._mainToolbar.element);
+    this._dataGrid.asWidget().show(mainContainer.element);
+    this._splitWidget.setMainWidget(mainContainer);
+
+    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 +90,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._clearFrames.bind(this));
     }
   }
 
@@ -107,11 +132,36 @@ 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 {!Common.Event} event
+   * @param {!SDK.NetworkRequest.WebSocketFrame} frame
+   * @return {boolean}
+   */
+  _frameFilter(frame) {
+    var regex = this._filterRegex;
+    var type = this._filterType;
+    return (!regex || regex.test(frame.text)) && (!type || frame.type === type);

[allada, 2017/05/04 01:41:30]

nit: lets reverse the logic on this, since type checking is much cheaper than
regex checking we can hopefully save the need to do some of the regex code.

eg (you can try and squeeze it into one line if you want)...

if (this._filterType && frame.type !== this._filterType)
  return false;
return !this._filterRegex || this._filterRegex.test(frame.text);

+  }
+
+  _clearFrames() {
+    this._clearFrameOffset = this._request.frames().length;
+    this.refresh();
+  }
+
+  _updateFilterSetting() {
+    var text = this._filterTextInput.value();
+    var type = this._filterTypeCombobox.selectedOption().value;
+    this._filterRegex = text ? new RegExp(text.escapeForRegExp(), 'i') : null;
+    this._filterType = type === 'all' ? null : type;
+    this.refresh();
+  }
+
+  /**
+  * @param {!Common.Event} event
    */
   _onFrameSelected(event) {
     var selectedNode = /** @type {!Network.ResourceWebSocketFrameNode} */ (event.data);
@@ -148,13 +198,17 @@ 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]));
+    frames = frames.slice(this._clearFrameOffset);
+    frames = frames.filter(this._frameFilter.bind(this));
+    frames.forEach(frame => this._dataGrid.insertChild(new Network.ResourceWebSocketFrameNode(url, frame)));
   }
 
   _sortItems() {
@@ -185,6 +239,11 @@ Network.ResourceWebSocketFrameView.opCodeDescriptions = (function() {
   return map;
 })();
 
+Network.ResourceWebSocketFrameView._filterTypes = [

[allada, 2017/05/04 01:41:30]

nit: Please add this above this line:
/** @type {!Array<!UI.NamedBitSetFilterUI.Item>} */

+  {name: 'all', label: Common.UIString('All')},
+  {name: 'send', label: Common.UIString('Send')},
+  {name: 'receive', label: Common.UIString('Receive')},
+];
 
 /**
  * @unrestricted