Changeset 121666 in webkit


Ignore:
Timestamp:
Jul 2, 2012 2:50:36 AM (12 years ago)
Author:
commit-queue@webkit.org
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 <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):

Location:
trunk/Source/WebCore
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/Source/WebCore/ChangeLog

    r121663 r121666  
     12012-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
    1342012-07-02  Vineet Chaudhary  <rgf748@motorola.com>
    235
  • trunk/Source/WebCore/English.lproj/localizedStrings.js

    r121592 r121666  
    677677localizedStrings["Frame"] = "Frame";
    678678localizedStrings["FPS"] = "FPS";
    679 localizedStrings["WebSocket Frames"] = "WebSocket Frames";
     679localizedStrings["Continuation Frame"] = "Continuation Frame";
     680localizedStrings["Binary Frame"] = "Binary Frame";
     681localizedStrings["Connection Close Frame"] = "Connection Close Frame";
     682localizedStrings["Ping Frame"] = "Ping Frame";
     683localizedStrings["Pong Frame"] = "Pong Frame";
    680684localizedStrings["Time"] = "Time";
    681 localizedStrings["OpCode"] = "OpCode";
    682 localizedStrings["Mask"] = "Mask";
    683685localizedStrings["Length"] = "Length";
    684686localizedStrings["Data"] = "Data";
     687localizedStrings["%s (Opcode %d%s)"] = "%s (Opcode %d%s)";
    685688localizedStrings["<Left>"] = "<Left>";
    686689localizedStrings["<Right>"] = "<Right>";
  • trunk/Source/WebCore/inspector/front-end/NetworkItemView.js

    r115427 r121666  
    4242    this.appendTab("headers", WebInspector.UIString("Headers"), headersView);
    4343
     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
    4452    var responseView = new WebInspector.RequestResponseView(request);
    4553    var previewView = new WebInspector.RequestPreviewView(request, responseView);
    46 
    4754    this.appendTab("preview", WebInspector.UIString("Preview"), previewView);
    4855    this.appendTab("response", WebInspector.UIString("Response"), responseView);
     
    5865    }
    5966
    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);
    6667}
    6768
  • trunk/Source/WebCore/inspector/front-end/ResourceWebSocketFrameView.js

    r120710 r121666  
    2424{
    2525    WebInspector.View.call(this);
    26     this.element.addStyleClass("resource-websocket-frame-view");
     26    this.element.addStyleClass("resource-websocket");
    2727    this.resource = resource;
    2828    this.element.removeChildren();
    29     var table = document.createElement("table");
    30     var header = document.createElement("thead");
    3129
    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    });
    5535
    5636    var frames = this.resource.frames();
     
    5838        var payload = frames[i];
    5939
    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        };
    6146
    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";
    6554
    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        }
    7178
    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);
    8181
    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);
    8584
    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);
    9585    }
    96     this.element.appendChild(table);
     86    dataGrid.show(this.element);
    9787}
    9888
     89WebInspector.ResourceWebSocketFrameView.OpCodes = {
     90    ContinuationFrame: 0,
     91    TextFrame: 1,
     92    BinaryFrame: 2,
     93    ConnectionCloseFrame: 8,
     94    PingFrame: 9,
     95    PongFrame: 10
     96};
     97
    9998WebInspector.ResourceWebSocketFrameView.prototype.__proto__ = WebInspector.View.prototype;
  • trunk/Source/WebCore/inspector/front-end/networkPanel.css

    r120710 r121666  
    281281}
    282282
    283 .resource-websocket-frame-view {
     283.resource-websocket {
    284284    -webkit-user-select: text;
    285285}
     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.