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 39 matching lines @@
     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._deleteAllButton = new UI.ToolbarButton(Common.UIString('Clear All'), 'largeicon-clear');
+    this._deleteAllButton.addEventListener(UI.ToolbarButton.Events.Click, this._onDeleteAllButtonClick, this);
+    this._filterTextInput = new UI.ToolbarInput(Common.UIString('Filter'), 0, 0, true);

[allada, 2017/04/10 19:39:15]

Lets use UI.FilterBar instead, it will handle much of the regular expression
stuff.
Example:
https://cs.chromium.org/chromium/src/third_party/WebKit/Source/devtools/front...

+    this._filterTextInput.addEventListener(UI.ToolbarInput.Event.TextChanged, this._onFilterTextInputChanged, this);
+
+    var combobox = new UI.ToolbarComboBox(this._onFilterTypeComboboxChanged.bind(this));
+    combobox.addOption(combobox.createOption(Common.UIString('All'), '', ''));

[allada, 2017/04/10 19:39:15]

Lets instead use FilterBar's ability to show UI.NamedBitSetFilterUI, this works
like the "All, XHR, Other" stuff in the network panel's filterbar.

Example:
https://cs.chromium.org/webrtc/src/third_party/WebKit/Source/devtools/front_e...

+    combobox.addOption(combobox.createOption(Common.UIString('Send'), '', 'send'));
+    combobox.addOption(combobox.createOption(Common.UIString('Receive'), '', 'receive'));
+    this._filterTypeCombobox = combobox;
+
+    var toolbarItems = [this._deleteAllButton, this._filterTextInput, this._filterTypeCombobox];

[allada, 2017/04/10 19:39:15]

I am thinking maybe have the delete/clear button as a context menu item? In a
followup I'll bring in our UI/UX lead to see what he says. (for now lets leave
it as a button just in case)

+    this._mainToolbar = new UI.Toolbar('');
+    for (var item of toolbarItems)
+      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('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
      */
     function onRowContextMenu(contextMenu, node) {
       contextMenu.appendItem(
@@ skipping 26 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 {!SDK.NetworkRequest.WebSocketFrame} frame
+   */
+  _frameFilter(frame) {
+    var matchText = true;
+    if (this._filterRegex)
+      matchText = this._filterRegex.test(frame.text);
+    var matchType = true;
+    if (this._filterType)
+      matchType = this._filterType === frame.type;
+    return matchText && matchType;
+  }
+
+  /**
+   * @param {!Common.Event} event
+   */
+  _onDeleteAllButtonClick(event) {
+    this._request.clearFrames();
+    this.refresh();
+  }
+
+  /**
+   * @param {!Common.Event} event
+   */
+  _onFilterTextInputChanged(event) {
+    var text = /** @type {?string} */ (event.data);
+    this._filterRegex = text ? new RegExp(text.escapeForRegExp(), 'i') : null;
+    this.refresh();
+  }
+
+  _onFilterTypeComboboxChanged() {
+    this._filterType = this._filterTypeCombobox.selectedOption().value;
+    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
@@ skipping 17 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 frames = this._request.frames();
+    var frames = this._request.frames().filter(this._frameFilter.bind(this));
     for (var i = 0; i < frames.length; ++i)
       this._dataGrid.insertChild(new Network.ResourceWebSocketFrameNode(this._request.url(), frames[i]));
   }
 
   _sortItems() {
     this._dataGrid.sortNodes(this._timeComparator, !this._dataGrid.isSortOrderAscending());
   }
 };
 
 /** @enum {number} */
@@ skipping 80 matching lines @@
 };
 
 /**
  * @param {!Network.ResourceWebSocketFrameNode} a
  * @param {!Network.ResourceWebSocketFrameNode} b
  * @return {number}
  */
 Network.ResourceWebSocketFrameNodeTimeComparator = function(a, b) {
   return a._frame.time - b._frame.time;
 };