Web Inspector: Design WebSockets panel

https://bugs.webkit.org/show_bug.cgi?id=89461

Use DataGrid to display the data.
Put "Data" column first. Make it wider.
Remove "Mask" column since it appears to be always true for outgoing frames,
and false for incoming.

Patch by Nikita Vasilyev <me@elv1s.ru> on 2012-07-02
Reviewed by Pavel Feldman.

* English.lproj/localizedStrings.js:
* inspector/front-end/NetworkItemView.js:
(WebInspector.NetworkItemView): Don't show Preview, Response, Cookies
and Timing tabs for succefuly established WebSocket connection.

* inspector/front-end/ResourceWebSocketFrameView.js:
(WebInspector.ResourceWebSocketFrameView):
* inspector/front-end/networkPanel.css:
(.resource-websocket):
(.resource-websocket, .resource-websocket .data-grid):
(.resource-websocket .data-grid .data):
(.resource-websocket td):
(.resource-websocket .data-column div):
(.resource-websocket-row-outcoming):
(.resource-websocket-row-outcoming:not(.selected) td):
(.resource-websocket-row-outcoming:not(.selected) td, .resource-websocket-row-outcoming:not(.selected) + tr td):
(.resource-websocket-row-opcode):
(.resource-websocket-row-opcode td):
(.resource-websocket-row-opcode td, .resource-websocket-row-opcode + tr td):
(.resource-websocket-row-error):

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@121666 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index 91219b6..0f0360c 100644 (file)
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,36 @@
+2012-07-02  Nikita Vasilyev  <me@elv1s.ru>
+
+        Web Inspector: Design WebSockets panel
+        https://bugs.webkit.org/show_bug.cgi?id=89461
+
+        Use DataGrid to display the data.
+        Put "Data" column first. Make it wider.
+        Remove "Mask" column since it appears to be always true for outgoing frames,
+        and false for incoming.
+
+        Reviewed by Pavel Feldman.
+
+        * English.lproj/localizedStrings.js:
+        * inspector/front-end/NetworkItemView.js:
+        (WebInspector.NetworkItemView): Don't show Preview, Response, Cookies
+        and Timing tabs for succefuly established WebSocket connection.
+
+        * inspector/front-end/ResourceWebSocketFrameView.js:
+        (WebInspector.ResourceWebSocketFrameView):
+        * inspector/front-end/networkPanel.css:
+        (.resource-websocket):
+        (.resource-websocket, .resource-websocket .data-grid):
+        (.resource-websocket .data-grid .data):
+        (.resource-websocket td):
+        (.resource-websocket .data-column div):
+        (.resource-websocket-row-outcoming):
+        (.resource-websocket-row-outcoming:not(.selected) td):
+        (.resource-websocket-row-outcoming:not(.selected) td, .resource-websocket-row-outcoming:not(.selected) + tr td):
+        (.resource-websocket-row-opcode):
+        (.resource-websocket-row-opcode td):
+        (.resource-websocket-row-opcode td, .resource-websocket-row-opcode + tr td):
+        (.resource-websocket-row-error):
+
 2012-07-02  Vineet Chaudhary  <rgf748@motorola.com>
 
         [V8Binding] Merging v8NumberArray()/v8NumberArrayToVector() to v8Array()/toNativeArray() respectively.

diff --git a/Source/WebCore/English.lproj/localizedStrings.js b/Source/WebCore/English.lproj/localizedStrings.js
index 8f0f289..d2889d6 100644 (file)
--- a/Source/WebCore/English.lproj/localizedStrings.js
+++ b/Source/WebCore/English.lproj/localizedStrings.js
@@ -676,12 +676,15 @@ localizedStrings["Create snippet"] = "Create snippet";
 localizedStrings["Create Snippet"] = "Create Snippet";
 localizedStrings["Frame"] = "Frame";
 localizedStrings["FPS"] = "FPS";
-localizedStrings["WebSocket Frames"] = "WebSocket Frames";
+localizedStrings["Continuation Frame"] = "Continuation Frame";
+localizedStrings["Binary Frame"] = "Binary Frame";
+localizedStrings["Connection Close Frame"] = "Connection Close Frame";
+localizedStrings["Ping Frame"] = "Ping Frame";
+localizedStrings["Pong Frame"] = "Pong Frame";
 localizedStrings["Time"] = "Time";
-localizedStrings["OpCode"] = "OpCode";
-localizedStrings["Mask"] = "Mask";
 localizedStrings["Length"] = "Length";
 localizedStrings["Data"] = "Data";
+localizedStrings["%s (Opcode %d%s)"] = "%s (Opcode %d%s)";
 localizedStrings["<Left>"] = "<Left>";
 localizedStrings["<Right>"] = "<Right>";
 localizedStrings["<Up>"] = "<Up>";

diff --git a/Source/WebCore/inspector/front-end/NetworkItemView.js b/Source/WebCore/inspector/front-end/NetworkItemView.js
index 6c0c647..1fe9024 100644 (file)
--- a/Source/WebCore/inspector/front-end/NetworkItemView.js
+++ b/Source/WebCore/inspector/front-end/NetworkItemView.js
@@ -41,9 +41,16 @@ WebInspector.NetworkItemView = function(request)
     var headersView = new WebInspector.RequestHeadersView(request);
     this.appendTab("headers", WebInspector.UIString("Headers"), headersView);
 
+    this.addEventListener(WebInspector.TabbedPane.EventTypes.TabSelected, this._tabSelected, this);
+
+    if (request.frames().length > 0) {
+        var frameView = new WebInspector.ResourceWebSocketFrameView(request);
+        this.appendTab("webSocketFrames", WebInspector.UIString("Frames"), frameView);
+        return;
+    }
+
     var responseView = new WebInspector.RequestResponseView(request);
     var previewView = new WebInspector.RequestPreviewView(request, responseView);
-
     this.appendTab("preview", WebInspector.UIString("Preview"), previewView);
     this.appendTab("response", WebInspector.UIString("Response"), responseView);
 
@@ -57,12 +64,6 @@ WebInspector.NetworkItemView = function(request)
         this.appendTab("timing", WebInspector.UIString("Timing"), timingView);
     }
 
-    if (request.frames().length > 0) {
-        var frameView = new WebInspector.ResourceWebSocketFrameView(request);
-        this.appendTab("webSocketFrames", WebInspector.UIString("WebSocket Frames"), frameView);
-    }
-
-    this.addEventListener(WebInspector.TabbedPane.EventTypes.TabSelected, this._tabSelected, this);
 }
 
 WebInspector.NetworkItemView.prototype = {

diff --git a/Source/WebCore/inspector/front-end/ResourceWebSocketFrameView.js b/Source/WebCore/inspector/front-end/ResourceWebSocketFrameView.js
index de277b0..59acd65 100644 (file)
--- a/Source/WebCore/inspector/front-end/ResourceWebSocketFrameView.js
+++ b/Source/WebCore/inspector/front-end/ResourceWebSocketFrameView.js
@@ -23,77 +23,76 @@
 WebInspector.ResourceWebSocketFrameView = function(resource)
 {
     WebInspector.View.call(this);
-    this.element.addStyleClass("resource-websocket-frame-view");
+    this.element.addStyleClass("resource-websocket");
     this.resource = resource;
     this.element.removeChildren();
-    var table = document.createElement("table");
-    var header = document.createElement("thead");
 
-    var headerRow = document.createElement("tr");
-    headerRow.createChild("td");
-
-    var timeHeader = document.createElement("td");
-    timeHeader.innerText = WebInspector.UIString("Time");
-    headerRow.appendChild(timeHeader);
-
-    var opCodeHeader = document.createElement("td");
-    opCodeHeader.innerText = WebInspector.UIString("OpCode");
-    headerRow.appendChild(opCodeHeader);
-
-    var maskHeader = document.createElement("td");
-    maskHeader.innerText = WebInspector.UIString("Mask");
-    headerRow.appendChild(maskHeader);
-
-    var lengthHeader = document.createElement("td");
-    lengthHeader.innerText = WebInspector.UIString("Length");
-    headerRow.appendChild(lengthHeader);
-
-    var dataHeader = document.createElement("td");
-    dataHeader.innerText = WebInspector.UIString("Data");
-    headerRow.appendChild(dataHeader);
-    table.appendChild(headerRow);
+    var dataGrid = new WebInspector.DataGrid({
+        data: {title: WebInspector.UIString("Data"), sortable: false},
+        length: {title: WebInspector.UIString("Length"), sortable: false, aligned: "right", width: "50px"},
+        time: {title: WebInspector.UIString("Time"), width: "70px"}
+    });
 
     var frames = this.resource.frames();
     for (var i = 0; i < frames.length; i++) {
         var payload = frames[i];
 
-        var row = document.createElement("tr");
-
-        var count = document.createElement("td");
-        count.innerText = i + 1;
-        row.appendChild(count);
-
-        var dateCell = document.createElement("td");
-        var date = new Date();
-        date.setTime(payload.time * 1000);
-        dateCell.innerText = String.sprintf("%s %s", (payload.sent ? "\u2192" : (payload.errorMessage ? "" : "\u2190")), date.toISOString());
-        row.appendChild(dateCell);
+        var date = new Date(payload.time * 1000);
+        var row = {
+            data: "",
+            length: payload.payloadData.length.toString(),
+            time: date.toLocaleTimeString()
+        };
 
+        var rowClass = "";
         if (payload.errorMessage) {
-            var spanCell = document.createElement("td");
-            spanCell.setAttribute("colspan", 4);
-            spanCell.innerText = payload.errorMessage;
-            row.appendChild(spanCell);
+            rowClass = "error";
+            row.data = payload.errorMessage;
+        } else if (payload.opcode == WebInspector.ResourceWebSocketFrameView.OpCodes.TextFrame) {
+            if (payload.sent)
+                rowClass = "outcoming";
+
+            row.data = payload.payloadData;
         } else {
-            var opcode = document.createElement("td");
-            opcode.innerText = payload.opcode;
-            row.appendChild(opcode);
+            rowClass = "opcode";
+            var opcodeMeaning = "";
+            switch (payload.opcode) {
+            case WebInspector.ResourceWebSocketFrameView.OpCodes.ContinuationFrame:
+                opcodeMeaning = WebInspector.UIString("Continuation Frame");
+                break;
+            case WebInspector.ResourceWebSocketFrameView.OpCodes.BinaryFrame:
+                opcodeMeaning = WebInspector.UIString("Binary Frame");
+                break;
+            case WebInspector.ResourceWebSocketFrameView.OpCodes.ConnectionCloseFrame:
+                opcodeMeaning = WebInspector.UIString("Connection Close Frame");
+                break;
+            case WebInspector.ResourceWebSocketFrameView.OpCodes.PingFrame:
+                opcodeMeaning = WebInspector.UIString("Ping Frame");
+                break;
+            case WebInspector.ResourceWebSocketFrameView.OpCodes.PongFrame:
+                opcodeMeaning = WebInspector.UIString("Pong Frame");
+                break;
+            }
+            row.data = WebInspector.UIString("%s (Opcode %d%s)", opcodeMeaning, payload.opcode, (payload.mask ? ", mask" : ""));
+        }
 
-            var mask = document.createElement("td");
-            mask.innerText = payload.mask;
-            row.appendChild(mask);
+        var node = new WebInspector.DataGridNode(row, false);
+        dataGrid.rootNode().appendChild(node);
 
-            var length = document.createElement("td");
-            length.innerText = payload.payloadData.length;
-            row.appendChild(length);
+        if (rowClass)
+            node.element.classList.add("resource-websocket-row-" + rowClass);
 
-            var data = document.createElement("td");
-            data.textContent = payload.payloadData;
-            row.appendChild(data);
-        }
-        table.appendChild(row);
     }
-    this.element.appendChild(table);
+    dataGrid.show(this.element);
 }
 
+WebInspector.ResourceWebSocketFrameView.OpCodes = {
+    ContinuationFrame: 0,
+    TextFrame: 1,
+    BinaryFrame: 2,
+    ConnectionCloseFrame: 8,
+    PingFrame: 9,
+    PongFrame: 10
+};
+
 WebInspector.ResourceWebSocketFrameView.prototype.__proto__ = WebInspector.View.prototype;

diff --git a/Source/WebCore/inspector/front-end/networkPanel.css b/Source/WebCore/inspector/front-end/networkPanel.css
index f9c01b4..a80c61d 100644 (file)
--- a/Source/WebCore/inspector/front-end/networkPanel.css
+++ b/Source/WebCore/inspector/front-end/networkPanel.css
@@ -280,6 +280,61 @@
     display: block;
 }
 
-.resource-websocket-frame-view {
+.resource-websocket {
     -webkit-user-select: text;
 }
+
+.resource-websocket, .resource-websocket .data-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: none;
+}
+
+.resource-websocket .data-grid .data {
+    background-image: none;
+    font-size: 11px;
+}
+
+.resource-websocket td {
+    padding-top: 3px;
+    padding-bottom: 3px;
+    border-top: 1px solid rgb(240, 240, 240);
+}
+
+.resource-websocket .data-column div {
+    word-break: break-all;
+    white-space: pre-wrap;
+}
+
+.resource-websocket-row-outcoming {
+    background-color: rgb(226, 247, 218);
+}
+
+.resource-websocket-row-outcoming:not(.selected) td {
+    border-right-color: rgb(177, 209, 165);
+}
+
+.resource-websocket-row-outcoming:not(.selected) td, .resource-websocket-row-outcoming:not(.selected) + tr td {
+    border-top-color: rgb(199, 236, 185);
+}
+
+.resource-websocket-row-opcode {
+    background-color: rgb(255, 255, 232);
+    color: rgb(170, 111, 71);
+}
+
+.resource-websocket-row-opcode td {
+    border-color: rgb(211, 187, 171);
+}
+
+.resource-websocket-row-opcode td, .resource-websocket-row-opcode + tr td {
+    border-top-color: rgb(248, 240, 210);
+}
+
+.resource-websocket-row-error {
+    background-color: rgb(255, 237, 237);
+    color: rgb(182, 0, 0);
+}