Changeset 121666 in webkit
- Timestamp:
- Jul 2, 2012 2:50:36 AM (12 years ago)
- Location:
- trunk/Source/WebCore
- Files:
-
- 5 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/Source/WebCore/ChangeLog
r121663 r121666 1 2012-07-02 Nikita Vasilyev <me@elv1s.ru> 2 3 Web Inspector: Design WebSockets panel 4 https://bugs.webkit.org/show_bug.cgi?id=89461 5 6 Use DataGrid to display the data. 7 Put "Data" column first. Make it wider. 8 Remove "Mask" column since it appears to be always true for outgoing frames, 9 and false for incoming. 10 11 Reviewed by Pavel Feldman. 12 13 * English.lproj/localizedStrings.js: 14 * inspector/front-end/NetworkItemView.js: 15 (WebInspector.NetworkItemView): Don't show Preview, Response, Cookies 16 and Timing tabs for succefuly established WebSocket connection. 17 18 * inspector/front-end/ResourceWebSocketFrameView.js: 19 (WebInspector.ResourceWebSocketFrameView): 20 * inspector/front-end/networkPanel.css: 21 (.resource-websocket): 22 (.resource-websocket, .resource-websocket .data-grid): 23 (.resource-websocket .data-grid .data): 24 (.resource-websocket td): 25 (.resource-websocket .data-column div): 26 (.resource-websocket-row-outcoming): 27 (.resource-websocket-row-outcoming:not(.selected) td): 28 (.resource-websocket-row-outcoming:not(.selected) td, .resource-websocket-row-outcoming:not(.selected) + tr td): 29 (.resource-websocket-row-opcode): 30 (.resource-websocket-row-opcode td): 31 (.resource-websocket-row-opcode td, .resource-websocket-row-opcode + tr td): 32 (.resource-websocket-row-error): 33 1 34 2012-07-02 Vineet Chaudhary <rgf748@motorola.com> 2 35 -
trunk/Source/WebCore/English.lproj/localizedStrings.js
r121592 r121666 677 677 localizedStrings["Frame"] = "Frame"; 678 678 localizedStrings["FPS"] = "FPS"; 679 localizedStrings["WebSocket Frames"] = "WebSocket Frames"; 679 localizedStrings["Continuation Frame"] = "Continuation Frame"; 680 localizedStrings["Binary Frame"] = "Binary Frame"; 681 localizedStrings["Connection Close Frame"] = "Connection Close Frame"; 682 localizedStrings["Ping Frame"] = "Ping Frame"; 683 localizedStrings["Pong Frame"] = "Pong Frame"; 680 684 localizedStrings["Time"] = "Time"; 681 localizedStrings["OpCode"] = "OpCode";682 localizedStrings["Mask"] = "Mask";683 685 localizedStrings["Length"] = "Length"; 684 686 localizedStrings["Data"] = "Data"; 687 localizedStrings["%s (Opcode %d%s)"] = "%s (Opcode %d%s)"; 685 688 localizedStrings["<Left>"] = "<Left>"; 686 689 localizedStrings["<Right>"] = "<Right>"; -
trunk/Source/WebCore/inspector/front-end/NetworkItemView.js
r115427 r121666 42 42 this.appendTab("headers", WebInspector.UIString("Headers"), headersView); 43 43 44 this.addEventListener(WebInspector.TabbedPane.EventTypes.TabSelected, this._tabSelected, this); 45 46 if (request.frames().length > 0) { 47 var frameView = new WebInspector.ResourceWebSocketFrameView(request); 48 this.appendTab("webSocketFrames", WebInspector.UIString("Frames"), frameView); 49 return; 50 } 51 44 52 var responseView = new WebInspector.RequestResponseView(request); 45 53 var previewView = new WebInspector.RequestPreviewView(request, responseView); 46 47 54 this.appendTab("preview", WebInspector.UIString("Preview"), previewView); 48 55 this.appendTab("response", WebInspector.UIString("Response"), responseView); … … 58 65 } 59 66 60 if (request.frames().length > 0) {61 var frameView = new WebInspector.ResourceWebSocketFrameView(request);62 this.appendTab("webSocketFrames", WebInspector.UIString("WebSocket Frames"), frameView);63 }64 65 this.addEventListener(WebInspector.TabbedPane.EventTypes.TabSelected, this._tabSelected, this);66 67 } 67 68 -
trunk/Source/WebCore/inspector/front-end/ResourceWebSocketFrameView.js
r120710 r121666 24 24 { 25 25 WebInspector.View.call(this); 26 this.element.addStyleClass("resource-websocket -frame-view");26 this.element.addStyleClass("resource-websocket"); 27 27 this.resource = resource; 28 28 this.element.removeChildren(); 29 var table = document.createElement("table");30 var header = document.createElement("thead");31 29 32 var headerRow = document.createElement("tr"); 33 headerRow.createChild("td"); 34 35 var timeHeader = document.createElement("td"); 36 timeHeader.innerText = WebInspector.UIString("Time"); 37 headerRow.appendChild(timeHeader); 38 39 var opCodeHeader = document.createElement("td"); 40 opCodeHeader.innerText = WebInspector.UIString("OpCode"); 41 headerRow.appendChild(opCodeHeader); 42 43 var maskHeader = document.createElement("td"); 44 maskHeader.innerText = WebInspector.UIString("Mask"); 45 headerRow.appendChild(maskHeader); 46 47 var lengthHeader = document.createElement("td"); 48 lengthHeader.innerText = WebInspector.UIString("Length"); 49 headerRow.appendChild(lengthHeader); 50 51 var dataHeader = document.createElement("td"); 52 dataHeader.innerText = WebInspector.UIString("Data"); 53 headerRow.appendChild(dataHeader); 54 table.appendChild(headerRow); 30 var dataGrid = new WebInspector.DataGrid({ 31 data: {title: WebInspector.UIString("Data"), sortable: false}, 32 length: {title: WebInspector.UIString("Length"), sortable: false, aligned: "right", width: "50px"}, 33 time: {title: WebInspector.UIString("Time"), width: "70px"} 34 }); 55 35 56 36 var frames = this.resource.frames(); … … 58 38 var payload = frames[i]; 59 39 60 var row = document.createElement("tr"); 40 var date = new Date(payload.time * 1000); 41 var row = { 42 data: "", 43 length: payload.payloadData.length.toString(), 44 time: date.toLocaleTimeString() 45 }; 61 46 62 var count = document.createElement("td"); 63 count.innerText = i + 1; 64 row.appendChild(count); 47 var rowClass = ""; 48 if (payload.errorMessage) { 49 rowClass = "error"; 50 row.data = payload.errorMessage; 51 } else if (payload.opcode == WebInspector.ResourceWebSocketFrameView.OpCodes.TextFrame) { 52 if (payload.sent) 53 rowClass = "outcoming"; 65 54 66 var dateCell = document.createElement("td"); 67 var date = new Date(); 68 date.setTime(payload.time * 1000); 69 dateCell.innerText = String.sprintf("%s %s", (payload.sent ? "\u2192" : (payload.errorMessage ? "" : "\u2190")), date.toISOString()); 70 row.appendChild(dateCell); 55 row.data = payload.payloadData; 56 } else { 57 rowClass = "opcode"; 58 var opcodeMeaning = ""; 59 switch (payload.opcode) { 60 case WebInspector.ResourceWebSocketFrameView.OpCodes.ContinuationFrame: 61 opcodeMeaning = WebInspector.UIString("Continuation Frame"); 62 break; 63 case WebInspector.ResourceWebSocketFrameView.OpCodes.BinaryFrame: 64 opcodeMeaning = WebInspector.UIString("Binary Frame"); 65 break; 66 case WebInspector.ResourceWebSocketFrameView.OpCodes.ConnectionCloseFrame: 67 opcodeMeaning = WebInspector.UIString("Connection Close Frame"); 68 break; 69 case WebInspector.ResourceWebSocketFrameView.OpCodes.PingFrame: 70 opcodeMeaning = WebInspector.UIString("Ping Frame"); 71 break; 72 case WebInspector.ResourceWebSocketFrameView.OpCodes.PongFrame: 73 opcodeMeaning = WebInspector.UIString("Pong Frame"); 74 break; 75 } 76 row.data = WebInspector.UIString("%s (Opcode %d%s)", opcodeMeaning, payload.opcode, (payload.mask ? ", mask" : "")); 77 } 71 78 72 if (payload.errorMessage) { 73 var spanCell = document.createElement("td"); 74 spanCell.setAttribute("colspan", 4); 75 spanCell.innerText = payload.errorMessage; 76 row.appendChild(spanCell); 77 } else { 78 var opcode = document.createElement("td"); 79 opcode.innerText = payload.opcode; 80 row.appendChild(opcode); 79 var node = new WebInspector.DataGridNode(row, false); 80 dataGrid.rootNode().appendChild(node); 81 81 82 var mask = document.createElement("td"); 83 mask.innerText = payload.mask; 84 row.appendChild(mask); 82 if (rowClass) 83 node.element.classList.add("resource-websocket-row-" + rowClass); 85 84 86 var length = document.createElement("td");87 length.innerText = payload.payloadData.length;88 row.appendChild(length);89 90 var data = document.createElement("td");91 data.textContent = payload.payloadData;92 row.appendChild(data);93 }94 table.appendChild(row);95 85 } 96 this.element.appendChild(table);86 dataGrid.show(this.element); 97 87 } 98 88 89 WebInspector.ResourceWebSocketFrameView.OpCodes = { 90 ContinuationFrame: 0, 91 TextFrame: 1, 92 BinaryFrame: 2, 93 ConnectionCloseFrame: 8, 94 PingFrame: 9, 95 PongFrame: 10 96 }; 97 99 98 WebInspector.ResourceWebSocketFrameView.prototype.__proto__ = WebInspector.View.prototype; -
trunk/Source/WebCore/inspector/front-end/networkPanel.css
r120710 r121666 281 281 } 282 282 283 .resource-websocket -frame-view{283 .resource-websocket { 284 284 -webkit-user-select: text; 285 285 } 286 287 .resource-websocket, .resource-websocket .data-grid { 288 position: absolute; 289 top: 0; 290 left: 0; 291 right: 0; 292 bottom: 0; 293 border: none; 294 } 295 296 .resource-websocket .data-grid .data { 297 background-image: none; 298 font-size: 11px; 299 } 300 301 .resource-websocket td { 302 padding-top: 3px; 303 padding-bottom: 3px; 304 border-top: 1px solid rgb(240, 240, 240); 305 } 306 307 .resource-websocket .data-column div { 308 word-break: break-all; 309 white-space: pre-wrap; 310 } 311 312 .resource-websocket-row-outcoming { 313 background-color: rgb(226, 247, 218); 314 } 315 316 .resource-websocket-row-outcoming:not(.selected) td { 317 border-right-color: rgb(177, 209, 165); 318 } 319 320 .resource-websocket-row-outcoming:not(.selected) td, .resource-websocket-row-outcoming:not(.selected) + tr td { 321 border-top-color: rgb(199, 236, 185); 322 } 323 324 .resource-websocket-row-opcode { 325 background-color: rgb(255, 255, 232); 326 color: rgb(170, 111, 71); 327 } 328 329 .resource-websocket-row-opcode td { 330 border-color: rgb(211, 187, 171); 331 } 332 333 .resource-websocket-row-opcode td, .resource-websocket-row-opcode + tr td { 334 border-top-color: rgb(248, 240, 210); 335 } 336 337 .resource-websocket-row-error { 338 background-color: rgb(255, 237, 237); 339 color: rgb(182, 0, 0); 340 }
Note: See TracChangeset
for help on using the changeset viewer.