DevTools: NetworkPanel: make websocket frames table "live".

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 13 matching lines @@
 WebInspector.ResourceWebSocketFrameView = function(request)
 {
     WebInspector.VBox.call(this);
     this.registerRequiredCSS("webSocketFrameView.css");
     this.element.classList.add("websocket-frame-view");
     this._request = request;
 
     var columns = [
         {id: "data", title: WebInspector.UIString("Data"), sortable: false, weight: 88, longText: true},
         {id: "length", title: WebInspector.UIString("Length"), sortable: false, align: WebInspector.DataGrid.Align.Right, weight: 5},
-        {id: "time", title: WebInspector.UIString("Time"), weight: 7}
+        {id: "time", title: WebInspector.UIString("Time"), sortable: true, weight: 7}
     ]
 
     this._dataGrid = new WebInspector.SortableDataGrid(columns, undefined, undefined, undefined, this._onContextMenu.bind(this));
+    this._dataGrid.setStickToBottom(true);
     this._dataGrid.setCellClass("websocket-frame-view-td");
-    var comparator = /** @type {!WebInspector.SortableDataGrid.NodeComparator} */ (WebInspector.ResourceWebSocketFrameNodeTimeComparator);
-    this._dataGrid.sortNodes(comparator, true);
+    this._timeComparator = /** @type {!WebInspector.SortableDataGrid.NodeComparator} */ (WebInspector.ResourceWebSocketFrameNodeTimeComparator);
+    this._dataGrid.sortNodes(this._timeComparator, false);
+    this._dataGrid.markColumnAsSortedBy("time", WebInspector.DataGrid.Order.Ascending);
+    this._dataGrid.addEventListener(WebInspector.DataGrid.Events.SortingChanged, this._sortItems, this);
 
-    this.refresh();
     this._dataGrid.setName("ResourceWebSocketFrameView");
     this._dataGrid.show(this.element);
 }
 
 /** @enum {number} */
 WebInspector.ResourceWebSocketFrameView.OpCodes = {
     ContinuationFrame: 0,
     TextFrame: 1,
     BinaryFrame: 2,
     ConnectionCloseFrame: 8,
@@ skipping 21 matching lines @@
  * @return {string}
  */
 WebInspector.ResourceWebSocketFrameView.opCodeDescription = function(opCode, mask)
 {
     var rawDescription = WebInspector.ResourceWebSocketFrameView.opCodeDescriptions[opCode] || "";
     var localizedDescription = WebInspector.UIString(rawDescription);
     return WebInspector.UIString("%s (Opcode %d%s)", localizedDescription, opCode, (mask ? ", mask" : ""));
 }
 
 WebInspector.ResourceWebSocketFrameView.prototype = {
+    wasShown: function()
+    {
+        this.refresh();
+        this._request.addEventListener(WebInspector.NetworkRequest.Events.WebsocketFrameAdded, this._frameAdded, this);
+    },
+
+    willHide: function()
+    {
+        this._request.removeEventListener(WebInspector.NetworkRequest.Events.WebsocketFrameAdded, this._frameAdded, this);
+    },
+
+    /**
+     * @param {!WebInspector.Event} event
+     */
+    _frameAdded: function(event)
+    {
+        var frame = /** @type {!WebInspector.NetworkRequest.WebSocketFrame} */ (event.data);
+        this._dataGrid.insertChild(new WebInspector.ResourceWebSocketFrameNode(frame));
+    },
+
     refresh: function()
     {
         this._dataGrid.rootNode().removeChildren();
         var frames = this._request.frames();
-        for (var i = frames.length - 1; i >= 0; --i)
+        for (var i = 0; i < frames.length; ++i)
             this._dataGrid.insertChild(new WebInspector.ResourceWebSocketFrameNode(frames[i]));
     },
 
-    show: function(parentElement, insertBefore)
-    {
-        this.refresh();
-        WebInspector.View.prototype.show.call(this, parentElement, insertBefore);
-    },
-
     /**
      * @param {!WebInspector.ContextMenu} contextMenu
      * @param {!WebInspector.DataGridNode} node
      */
     _onContextMenu: function(contextMenu, node)
     {
         contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Copy message" : "Copy Message"), this._copyMessage.bind(this, node.data));
     },
 
     /**
      * @param {!Object} row
      */
     _copyMessage: function(row)
     {
         InspectorFrontendHost.copyText(row.data);
     },
 
+    _sortItems: function()
+    {
+        this._dataGrid.sortNodes(this._timeComparator, !this._dataGrid.isSortOrderAscending());
+    },
+
     __proto__: WebInspector.VBox.prototype
 }
 
 /**
  * @constructor
  * @extends {WebInspector.SortableDataGridNode}
  * @param {!WebInspector.NetworkRequest.WebSocketFrame} frame
  */
 WebInspector.ResourceWebSocketFrameNode = function(frame)
 {
@@ skipping 13 matching lines @@
     /** override */
     createCells: function()
     {
         var element = this._element;
         element.classList.toggle("websocket-frame-view-row-error", this._frame.type === WebInspector.NetworkRequest.WebSocketFrameType.Error);
         element.classList.toggle("websocket-frame-view-row-outcoming", this._frame.type === WebInspector.NetworkRequest.WebSocketFrameType.Send);
         element.classList.toggle("websocket-frame-view-row-opcode", !this._isTextFrame);
         WebInspector.SortableDataGridNode.prototype.createCells.call(this);
     },
 
+    /**
+     * @override
+     * @return {number}
+     */
+    nodeSelfHeight: function() {

[vsevik, 2014/10/16 08:03:32]

{ on the next line

[eustas, 2014/10/16 08:32:05]

Done.

+        return 17;
+    },
+
     __proto__: WebInspector.SortableDataGridNode.prototype
 }
 
 /**
  * @param {!WebInspector.ResourceWebSocketFrameNode} a
  * @param {!WebInspector.ResourceWebSocketFrameNode} b
  * @return {number}
  */
 WebInspector.ResourceWebSocketFrameNodeTimeComparator = function(a, b)
 {
     return a._frame.time - b._frame.time;
 }