DevTools: Better view of web sockets binary frames' data

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 d7cf56ffc14e0aabd53fec33b84486b0ba1ca7e6..488c57430388289d168c5832e370a282a61169d4 100644
--- a/third_party/WebKit/Source/devtools/front_end/network/ResourceWebSocketFrameView.js
+++ b/third_party/WebKit/Source/devtools/front_end/network/ResourceWebSocketFrameView.js
@@ -209,13 +209,30 @@ WebInspector.ResourceWebSocketFrameNode = function(url, frame)
     timeNode.title = time.toLocaleString();
 
     this._isTextFrame = frame.opCode === WebInspector.ResourceWebSocketFrameView.OpCodes.TextFrame;
-    if (!this._isTextFrame)
+    if (!this._isTextFrame) {
         this._dataText = WebInspector.ResourceWebSocketFrameView.opCodeDescription(frame.opCode, frame.mask);

[allada, 2016/10/20 00:06:48]

Since we are not using this._dataText as our source for the
_escapeBinaryFrameData function, I think we should do this as an else of the
binary's if statement, so we don't need to call/set it for no reason.

+        if (frame.opCode === WebInspector.ResourceWebSocketFrameView.OpCodes.BinaryFrame)
+            this._escapeBinaryFrameData(frame);
+    }
 
     WebInspector.SortableDataGridNode.call(this, {data: this._dataText, length: length, time: timeNode});
 }
 
 WebInspector.ResourceWebSocketFrameNode.prototype = {
+
+    _escapeBinaryFrameData: function(frame) {

[allada, 2016/10/20 00:06:48]

On second thought, lets inline this function. It's only used in this one case
and not large enough to merit it's own function.

[allada, 2016/10/20 00:06:48]

I'm sorry I should have clarified a little more... We do add JSDoc, but we don't
usually ad comments/notes.

In this case it should look like this:
/**
 * @param {!WebInspector.NetworkRequest.WebSocketFrame} frame
 */

+        if (frame.text.length > 5000) {

[allada, 2016/10/20 00:06:48]

Single line if statements we do not add curly brackets around it.

ie: 
if (frame.text.length > 5000)
    return;

+            return;
+        }
+
+        function escapeChar(match) {

[allada, 2016/10/20 00:06:48]

We need to add docs:
/**
 * @param {string} match
 * @return {string}
 */

+            var charCode = match.charCodeAt(0);
+            return "\\x" + (charCode <= 0xF ? "0" : "") + charCode.toString(16);
+        }
+
+        this._dataText = frame.text.replace(/[^\x20-\x7E\n\r]/g, escapeChar);

[allada, 2016/10/20 00:06:48]

Can we put this above the above function? We often take advantage of class
hoisting. (and it puts all the actual function code together)

+    },
+
     /**
      * @override
      */