DevTools: Prettify websocket frames preview on Network pane.

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 31 matching lines @@
     this._dataGrid.setCellClass("websocket-frame-view-td");
     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._dataGrid.setName("ResourceWebSocketFrameView");
     this._dataGrid.addEventListener(WebInspector.DataGrid.Events.SelectedNode, this._onFrameSelected, this);
     this._splitWidget.setMainWidget(this._dataGrid.asWidget());
 
-    this._messageView = new WebInspector.EmptyWidget("Select frame to browse its content.");
-    this._splitWidget.setSidebarWidget(this._messageView);
+    var view = new WebInspector.EmptyWidget("Select frame to browse its content.");
+    this._splitWidget.setSidebarWidget(view);
 }
 
 /** @enum {number} */
 WebInspector.ResourceWebSocketFrameView.OpCodes = {
     ContinuationFrame: 0,
     TextFrame: 1,
     BinaryFrame: 2,
     ConnectionCloseFrame: 8,
     PingFrame: 9,
     PongFrame: 10
@@ skipping 45 matching lines @@
         var frame = /** @type {!WebInspector.NetworkRequest.WebSocketFrame} */ (event.data);
         this._dataGrid.insertChild(new WebInspector.ResourceWebSocketFrameNode(frame));
     },
 
     /**
      * @param {!WebInspector.Event} event
      */
     _onFrameSelected: function(event)
     {
         var selectedNode = /** @type {!WebInspector.ResourceWebSocketFrameNode} */ (event.target.selectedNode);
-        if (this._messageView)
-            this._messageView.detach();
-        if (this._dataView)
-            this._dataView.detach();
-        this._dataView = new WebInspector.ResourceSourceFrame(selectedNode.contentProvider());
-        this._splitWidget.setSidebarWidget(this._dataView);
+        var contentProvider = selectedNode.contentProvider();
+        contentProvider.requestContent(content => {
+            var parsedJSON = content ? WebInspector.JSONView.parseJSON(content) : null;
+            var view = parsedJSON ? new WebInspector.JSONView(parsedJSON) : new WebInspector.ResourceSourceFrame(contentProvider);
+            this._splitWidget.setSidebarWidget(view);
+        });
     },
 
     refresh: function()
     {
         this._dataGrid.rootNode().removeChildren();
         var frames = this._request.frames();
         for (var i = 0; i < frames.length; ++i)
             this._dataGrid.insertChild(new WebInspector.ResourceWebSocketFrameNode(frames[i]));
     },
 
@@ skipping 80 matching lines @@
 
 /**
  * @param {!WebInspector.ResourceWebSocketFrameNode} a
  * @param {!WebInspector.ResourceWebSocketFrameNode} b
  * @return {number}
  */
 WebInspector.ResourceWebSocketFrameNodeTimeComparator = function(a, b)
 {
     return a._frame.time - b._frame.time;
 }