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._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;
 
     /**
      * @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) {
+    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);
     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;
 })();
 
+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
  */
 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;
 };