DevTools: WebSocketFrameView - Add frames display control toolbar

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

 /*
  * Copyright (C) 2012 Research In Motion Limited. All rights reserved.
  *
  * This library is free software; you can redistribute it and/or
  * modify it under the terms of the GNU Lesser General Public
  * License as published by the Free Software Foundation; either
  * version 2 of the License, or (at your option) any later version.
  *
  * This library is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 26 matching lines @@
         id: 'length',
         title: Common.UIString('Length'),
         sortable: false,
         align: DataGrid.DataGrid.Align.Right,
         weight: 5
       },
       {id: 'time', title: Common.UIString('Time'), sortable: true, weight: 7}
     ]);
 
     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 =
         /** @type {function(!Network.ResourceWebSocketFrameNode, !Network.ResourceWebSocketFrameNode):number} */ (
             Network.ResourceWebSocketFrameNodeTimeComparator);
     this._dataGrid.sortNodes(this._timeComparator, false);
     this._dataGrid.markColumnAsSortedBy('time', DataGrid.DataGrid.Order.Ascending);
     this._dataGrid.addEventListener(DataGrid.DataGrid.Events.SortingChanged, this._sortItems, this);
 
     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._mainToolbar = new UI.Toolbar('');
+
+    this._clearAllButton = new UI.ToolbarButton(Common.UIString('Clear All'), 'largeicon-clear');
+    this._clearAllButton.addEventListener(UI.ToolbarButton.Events.Click, this._clearFrames, this);
+    this._mainToolbar.appendToolbarItem(this._clearAllButton);
+
+    this._filterTypeCombobox = new UI.ToolbarComboBox(this._updateFilterSetting.bind(this));
+    for (var filterItem of Network.ResourceWebSocketFrameView._filterTypes) {
+      var option = this._filterTypeCombobox.createOption(filterItem.label, filterItem.label, filterItem.name);
+      this._filterTypeCombobox.addOption(option);
+    }
+    this._mainToolbar.appendToolbarItem(this._filterTypeCombobox);
+    this._filterType = null;
+
+    this._filterTextInput = new UI.ToolbarInput(Common.UIString('Filter'), 0.4, undefined, true);

[dgozman, 2017/05/05 19:04:45]

So, what about placeholder saying "Enter regex, for example: (web)?socket"

+    this._filterTextInput.addEventListener(UI.ToolbarInput.Event.TextChanged, this._updateFilterSetting, this);
+    this._mainToolbar.appendToolbarItem(this._filterTextInput);
+    this._filterRegex = null;
+
+    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;
 
     /**
      * @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));
     }
   }
 
   /**
    * @param {number} opCode
    * @param {boolean} mask
    * @return {string}
    */
   static opCodeDescription(opCode, mask) {
     var rawDescription = Network.ResourceWebSocketFrameView.opCodeDescriptions[opCode] || '';
@@ skipping 14 matching lines @@
    */
   willHide() {
     this._request.removeEventListener(SDK.NetworkRequest.Events.WebsocketFrameAdded, this._frameAdded, this);
   }
 
   /**
    * @param {!Common.Event} event
    */
   _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) {
+    if (this._filterType && frame.type !== this._filterType)
+      return false;
+    return !this._filterRegex || this._filterRegex.test(frame.text);
+  }
+
+  _clearFrames() {
+    this._request._clearFrameOffset = this._request.frames().length;

[dgozman, 2017/05/05 19:04:45]

I meant JavaScript symbol here:

this._request[Network.ResourceWebSocketFrameView._clearOffsetSymbol] = ...

Somewhere at the end:
Network.ResourceWebSocketFrameView._clearOffsetSymbol = Symbol('clearOffset');

[allada, 2017/05/05 19:05:46]

Please add this above this line:
// TODO(allada): actially remove frames from request.

[allada, 2017/05/05 19:05:46]

Example of the symbol stuff he was talking about:

this._request[Network.ResourceWebSocketFrameView._clearFrameOffsetSymbol] =
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);
     this._currentSelectedNode = selectedNode;
     var contentProvider = selectedNode.contentProvider();
     contentProvider.requestContent().then(contentHandler.bind(this));
 
     /**
      * @param {(string|null)} content
      * @this {Network.ResourceWebSocketFrameView}
@@ skipping 16 matching lines @@
       else
         this._splitWidget.setSidebarWidget(new SourceFrame.ResourceSourceFrame(contentProvider));
     }
   }
 
   /**
    * @param {!Common.Event} event
    */
   _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._request._clearFrameOffset || 0);

[allada, 2017/05/05 19:05:46]

And here would be:
var offset =
this._request[Network.ResourceWebSocketFrameView._clearFrameOffsetSymbol] || 0;
frames = frames.slice(offset);

+    frames = frames.filter(this._frameFilter.bind(this));
+    frames.forEach(frame => this._dataGrid.insertChild(new Network.ResourceWebSocketFrameNode(url, frame)));
   }
 
   _sortItems() {
     this._dataGrid.sortNodes(this._timeComparator, !this._dataGrid.isSortOrderAscending());
   }
 };
 

[allada, 2017/05/05 19:05:46]

Then add this here:

Network.ResourceWebSocketFrameView._clearFrameOffsetSymbol =
Symbol('ClearFrameOffset');

 /** @enum {number} */
 Network.ResourceWebSocketFrameView.OpCodes = {
   ContinuationFrame: 0,
   TextFrame: 1,
   BinaryFrame: 2,
   ConnectionCloseFrame: 8,
   PingFrame: 9,
   PongFrame: 10
 };
 
 /** @type {!Array.<string> } */
 Network.ResourceWebSocketFrameView.opCodeDescriptions = (function() {
   var opCodes = Network.ResourceWebSocketFrameView.OpCodes;
   var map = [];
   map[opCodes.ContinuationFrame] = 'Continuation Frame';
   map[opCodes.TextFrame] = 'Text Frame';
   map[opCodes.BinaryFrame] = 'Binary Frame';
   map[opCodes.ContinuationFrame] = 'Connection Close Frame';
   map[opCodes.PingFrame] = 'Ping Frame';
   map[opCodes.PongFrame] = 'Pong Frame';
   return map;
 })();
 
+/** @type {!Array<!UI.NamedBitSetFilterUI.Item>} */
+Network.ResourceWebSocketFrameView._filterTypes = [
+  {name: 'all', label: Common.UIString('All')},
+  {name: 'send', label: Common.UIString('Send')},
+  {name: 'receive', label: Common.UIString('Receive')},
+];
 
 /**
  * @unrestricted
  */
 Network.ResourceWebSocketFrameNode = class extends DataGrid.SortableDataGridNode {
   /**
    * @param {string} url
    * @param {!SDK.NetworkRequest.WebSocketFrame} frame
    */
   constructor(url, frame) {
@@ skipping 48 matching lines @@
 };
 
 /**
  * @param {!Network.ResourceWebSocketFrameNode} a
  * @param {!Network.ResourceWebSocketFrameNode} b
  * @return {number}
  */
 Network.ResourceWebSocketFrameNodeTimeComparator = function(a, b) {
   return a._frame.time - b._frame.time;
 };