src/third_party/WebKit/Source/devtools/front_end/network/ResourceWebSocketFrameView.js

   1 /*
   2  * Copyright (C) 2012 Research In Motion Limited. All rights reserved.
   3  *
   4  * This library is free software; you can redistribute it and/or
   5  * modify it under the terms of the GNU Lesser General Public
   6  * License as published by the Free Software Foundation; either
   7  * version 2 of the License, or (at your option) any later version.
   8  *
   9  * This library is distributed in the hope that it will be useful,
  10  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  11  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
  12  * Lesser General Public License for more details.
  13  *
  14  * You should have received a copy of the GNU Lesser General Public
  15  * License along with this library; if not, write to the Free Software
  16  * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA
  17  */
  18
  19 /**
  20  * @constructor
  21  * @extends {WebInspector.SplitView}
  22  * @param {!WebInspector.NetworkRequest} request
  23  */
  24 WebInspector.ResourceWebSocketFrameView = function(request)
  25 {
  26     WebInspector.SplitView.call(this, false, true, "resourceWebSocketFrameViewSplitViewState");
  27     this.registerRequiredCSS("network/webSocketFrameView.css");
  28     this.element.classList.add("websocket-frame-view");
  29     this._request = request;
  30
  31     var columns = [
  32         {id: "data", title: WebInspector.UIString("Data"), sortable: false, weight: 88},
  33         {id: "length", title: WebInspector.UIString("Length"), sortable: false, align: WebInspector.DataGrid.Align.Right, weight: 5},
  34         {id: "time", title: WebInspector.UIString("Time"), sortable: true, weight: 7}
  35     ]
  36
  37     this._dataGrid = new WebInspector.SortableDataGrid(columns, undefined, undefined, undefined, this._onContextMenu.bind(this));
  38     this._dataGrid.setStickToBottom(true);
  39     this._dataGrid.setCellClass("websocket-frame-view-td");
  40     this._timeComparator = /** @type {!WebInspector.SortableDataGrid.NodeComparator} */ (WebInspector.ResourceWebSocketFrameNodeTimeComparator);
  41     this._dataGrid.sortNodes(this._timeComparator, false);
  42     this._dataGrid.markColumnAsSortedBy("time", WebInspector.DataGrid.Order.Ascending);
  43     this._dataGrid.addEventListener(WebInspector.DataGrid.Events.SortingChanged, this._sortItems, this);
  44
  45     this._dataGrid.setName("ResourceWebSocketFrameView");
  46     this._dataGrid.addEventListener(WebInspector.DataGrid.Events.SelectedNode, this._onFrameSelected, this);
  47     this._dataGrid.show(this.mainElement());
  48
  49     this._messageView = new WebInspector.EmptyView("Select frame to browse its content.");
  50     this._messageView.show(this.sidebarElement());
  51 }
  52
  53 /** @enum {number} */
  54 WebInspector.ResourceWebSocketFrameView.OpCodes = {
  55     ContinuationFrame: 0,
  56     TextFrame: 1,
  57     BinaryFrame: 2,
  58     ConnectionCloseFrame: 8,
  59     PingFrame: 9,
  60     PongFrame: 10
  61 };
  62
  63 /** @type {!Array.<string> } */
  64 WebInspector.ResourceWebSocketFrameView.opCodeDescriptions = (function()
  65 {
  66     var opCodes = WebInspector.ResourceWebSocketFrameView.OpCodes;
  67     var map = [];
  68     map[opCodes.ContinuationFrame] = "Continuation Frame";
  69     map[opCodes.TextFrame] = "Text Frame";
  70     map[opCodes.BinaryFrame] = "Binary Frame";
  71     map[opCodes.ContinuationFrame] = "Connection Close Frame";
  72     map[opCodes.PingFrame] = "Ping Frame";
  73     map[opCodes.PongFrame] = "Pong Frame";
  74     return map;
  75 })();
  76
  77 /**
  78  * @param {number} opCode
  79  * @param {boolean} mask
  80  * @return {string}
  81  */
  82 WebInspector.ResourceWebSocketFrameView.opCodeDescription = function(opCode, mask)
  83 {
  84     var rawDescription = WebInspector.ResourceWebSocketFrameView.opCodeDescriptions[opCode] || "";
  85     var localizedDescription = WebInspector.UIString(rawDescription);
  86     return WebInspector.UIString("%s (Opcode %d%s)", localizedDescription, opCode, (mask ? ", mask" : ""));
  87 }
  88
  89 WebInspector.ResourceWebSocketFrameView.prototype = {
  90     wasShown: function()
  91     {
  92         this.refresh();
  93         this._request.addEventListener(WebInspector.NetworkRequest.Events.WebsocketFrameAdded, this._frameAdded, this);
  94     },
  95
  96     willHide: function()
  97     {
  98         this._request.removeEventListener(WebInspector.NetworkRequest.Events.WebsocketFrameAdded, this._frameAdded, this);
  99     },
 100
 101     /**
 102      * @param {!WebInspector.Event} event
 103      */
 104     _frameAdded: function(event)
 105     {
 106         var frame = /** @type {!WebInspector.NetworkRequest.WebSocketFrame} */ (event.data);
 107         this._dataGrid.insertChild(new WebInspector.ResourceWebSocketFrameNode(frame));
 108     },
 109
 110     /**
 111      * @param {!WebInspector.Event} event
 112      */
 113     _onFrameSelected: function(event)
 114     {
 115         var selectedNode = /** @type {!WebInspector.ResourceWebSocketFrameNode} */ (event.target.selectedNode);
 116         if (this._messageView)
 117             this._messageView.detach();
 118         if (this._dataView)
 119             this._dataView.detach();
 120         this._dataView = new WebInspector.ResourceSourceFrame(selectedNode.contentProvider());
 121         this._dataView.show(this.sidebarElement());
 122     },
 123
 124     refresh: function()
 125     {
 126         this._dataGrid.rootNode().removeChildren();
 127         var frames = this._request.frames();
 128         for (var i = 0; i < frames.length; ++i)
 129             this._dataGrid.insertChild(new WebInspector.ResourceWebSocketFrameNode(frames[i]));
 130     },
 131
 132     /**
 133      * @param {!WebInspector.ContextMenu} contextMenu
 134      * @param {!WebInspector.DataGridNode} node
 135      */
 136     _onContextMenu: function(contextMenu, node)
 137     {
 138         contextMenu.appendItem(WebInspector.UIString(WebInspector.useLowerCaseMenuTitles() ? "Copy message" : "Copy Message"), this._copyMessage.bind(this, node.data));
 139     },
 140
 141     /**
 142      * @param {!Object} row
 143      */
 144     _copyMessage: function(row)
 145     {
 146         InspectorFrontendHost.copyText(row.data);
 147     },
 148
 149     _sortItems: function()
 150     {
 151         this._dataGrid.sortNodes(this._timeComparator, !this._dataGrid.isSortOrderAscending());
 152     },
 153
 154     __proto__: WebInspector.SplitView.prototype
 155 }
 156
 157 /**
 158  * @constructor
 159  * @extends {WebInspector.SortableDataGridNode}
 160  * @param {!WebInspector.NetworkRequest.WebSocketFrame} frame
 161  */
 162 WebInspector.ResourceWebSocketFrameNode = function(frame)
 163 {
 164     this._frame = frame;
 165     this._dataText = frame.text;
 166     this._length = frame.text.length;
 167     this._timeText = (new Date(frame.time * 1000)).toLocaleTimeString();
 168
 169     this._isTextFrame = frame.opCode === WebInspector.ResourceWebSocketFrameView.OpCodes.TextFrame;
 170     if (!this._isTextFrame)
 171         this._dataText = WebInspector.ResourceWebSocketFrameView.opCodeDescription(frame.opCode, frame.mask);
 172
 173     WebInspector.SortableDataGridNode.call(this, {data: this._dataText, length: this._length, time: this._timeText});
 174 }
 175
 176 WebInspector.ResourceWebSocketFrameNode.prototype = {
 177     /** override */
 178     createCells: function()
 179     {
 180         var element = this._element;
 181         element.classList.toggle("websocket-frame-view-row-error", this._frame.type === WebInspector.NetworkRequest.WebSocketFrameType.Error);
 182         element.classList.toggle("websocket-frame-view-row-outcoming", this._frame.type === WebInspector.NetworkRequest.WebSocketFrameType.Send);
 183         element.classList.toggle("websocket-frame-view-row-opcode", !this._isTextFrame);
 184         WebInspector.SortableDataGridNode.prototype.createCells.call(this);
 185     },
 186
 187     /**
 188      * @override
 189      * @return {number}
 190      */
 191     nodeSelfHeight: function()
 192     {
 193         return 17;
 194     },
 195
 196     /**
 197      * @return {!WebInspector.ContentProvider}
 198      */
 199     contentProvider: function()
 200     {
 201         return new WebInspector.StaticContentProvider(WebInspector.resourceTypes.WebSocket, this._dataText);
 202     },
 203
 204     __proto__: WebInspector.SortableDataGridNode.prototype
 205 }
 206
 207 /**
 208  * @param {!WebInspector.ResourceWebSocketFrameNode} a
 209  * @param {!WebInspector.ResourceWebSocketFrameNode} b
 210  * @return {number}
 211  */
 212 WebInspector.ResourceWebSocketFrameNodeTimeComparator = function(a, b)
 213 {
 214     return a._frame.time - b._frame.time;
 215 }