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..e1756ca2860810f37289968f08340c10b478fc2b 100644
--- a/third_party/WebKit/Source/devtools/front_end/network/ResourceWebSocketFrameView.js
+++ b/third_party/WebKit/Source/devtools/front_end/network/ResourceWebSocketFrameView.js
@@ -57,10 +57,30 @@ 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._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;
@@ -107,10 +127,47 @@ 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 {!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) {
@@ -148,11 +205,12 @@ Network.ResourceWebSocketFrameView = class extends UI.VBox {
    */
   _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]));
   }