- Revision
- 121666
- Author
- [email protected]
- Date
- 2012-07-02 02:50:36 -0700 (Mon, 02 Jul 2012)
Log Message
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 <[email protected]> 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):
Modified Paths
Diff
Modified: trunk/Source/WebCore/ChangeLog (121665 => 121666)
--- trunk/Source/WebCore/ChangeLog 2012-07-02 09:31:11 UTC (rev 121665)
+++ trunk/Source/WebCore/ChangeLog 2012-07-02 09:50:36 UTC (rev 121666)
@@ -1,3 +1,36 @@
+2012-07-02 Nikita Vasilyev <[email protected]>
+
+ 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 <[email protected]>
[V8Binding] Merging v8NumberArray()/v8NumberArrayToVector() to v8Array()/toNativeArray() respectively.
Modified: trunk/Source/WebCore/English.lproj/localizedStrings.js (121665 => 121666)
--- trunk/Source/WebCore/English.lproj/localizedStrings.js 2012-07-02 09:31:11 UTC (rev 121665)
+++ trunk/Source/WebCore/English.lproj/localizedStrings.js 2012-07-02 09:50:36 UTC (rev 121666)
@@ -676,12 +676,15 @@
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>";
Modified: trunk/Source/WebCore/inspector/front-end/NetworkItemView.js (121665 => 121666)
--- trunk/Source/WebCore/inspector/front-end/NetworkItemView.js 2012-07-02 09:31:11 UTC (rev 121665)
+++ trunk/Source/WebCore/inspector/front-end/NetworkItemView.js 2012-07-02 09:50:36 UTC (rev 121666)
@@ -41,9 +41,16 @@
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 @@
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 = {
Modified: trunk/Source/WebCore/inspector/front-end/ResourceWebSocketFrameView.js (121665 => 121666)
--- trunk/Source/WebCore/inspector/front-end/ResourceWebSocketFrameView.js 2012-07-02 09:31:11 UTC (rev 121665)
+++ trunk/Source/WebCore/inspector/front-end/ResourceWebSocketFrameView.js 2012-07-02 09:50:36 UTC (rev 121666)
@@ -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 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 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 frames = this.resource.frames();
for (var i = 0; i < frames.length; i++) {
var payload = frames[i];
- var row = document.createElement("tr");
+ var date = new Date(payload.time * 1000);
+ var row = {
+ data: "",
+ length: payload.payloadData.length.toString(),
+ time: date.toLocaleTimeString()
+ };
- 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 rowClass = "";
if (payload.errorMessage) {
- var spanCell = document.createElement("td");
- spanCell.setAttribute("colspan", 4);
- spanCell.innerText = payload.errorMessage;
- row.appendChild(spanCell);
+ rowClass = "error";
+ row.data = ""
+ } else if (payload.opcode == WebInspector.ResourceWebSocketFrameView.OpCodes.TextFrame) {
+ if (payload.sent)
+ rowClass = "outcoming";
+
+ row.data = ""
} 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 = "" (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 = ""
- 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;
Modified: trunk/Source/WebCore/inspector/front-end/networkPanel.css (121665 => 121666)
--- trunk/Source/WebCore/inspector/front-end/networkPanel.css 2012-07-02 09:31:11 UTC (rev 121665)
+++ trunk/Source/WebCore/inspector/front-end/networkPanel.css 2012-07-02 09:50:36 UTC (rev 121666)
@@ -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);
+}
