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
  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
  * Lesser General Public License for more details.
  *
  * You should have received a copy of the GNU Lesser General Public
  * License along with this library; if not, write to the Free Software
  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
  */
 
 /**
  * @unrestricted
  */
 Network.ResourceWebSocketFrameView = class extends UI.VBox {
   /**
    * @param {!SDK.NetworkRequest} request
    */
   constructor(request) {

[dgozman, 2017/05/04 17:55:32]

When I switch to another request, and then back to this WebSocket, the "cleared"
state will be lost. Let's either put it on request using symbol or actually
remove frames from request.

     super();
     this.registerRequiredCSS('network/webSocketFrameView.css');
     this.element.classList.add('websocket-frame-view');
     this._request = request;
 
     this._splitWidget = new UI.SplitWidget(false, true, 'resourceWebSocketFrameSplitViewState');
     this._splitWidget.show(this.element);
 
     var columns = /** @type {!Array<!DataGrid.DataGrid.ColumnDescriptor>} */ ([
       {id: 'data', title: Common.UIString('Data'), sortable: false, weight: 88}, {
         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._clearFrameOffset = 0;
+
+    this._filterTypeCombobox = new UI.ToolbarComboBox(this._updateFilterSetting.bind(this));
+    Network.ResourceWebSocketFrameView._filterTypes.forEach(filterItem => {

[dgozman, 2017/05/04 17:55:32]

nit:

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._filterTextInput = new UI.ToolbarInput(Common.UIString('Filter'), 0.4, undefined, true);

[dgozman, 2017/05/04 17:55:32]

Let's have a placeholder mentioning it's a regex.

+    this._filterTextInput.addEventListener(UI.ToolbarInput.Event.TextChanged, this._updateFilterSetting, this);
+    this._mainToolbar.appendToolbarItem(this._filterTextInput);
+
+    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._clearFrameOffset = this._request.frames().length;

[dgozman, 2017/05/04 17:55:32]

// TODO(allada): actually remove frames from request instance.

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

What about this one?

+    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._clearFrameOffset);
+    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());
   }
 };
 
 /** @enum {number} */
 Network.ResourceWebSocketFrameView.OpCodes = {
   ContinuationFrame: 0,
@@ skipping 10 matching lines @@
   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;
 };