2017-03-09  Nikita Vasilyev  <nvasilyev@apple.com>

        Web Inspector: Show individual messages in the content pane for a WebSocket

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

        Reviewed by Joseph Pecoraro.

        Add walltime parameter and correct the description of Timestamp type.

        * inspector/protocol/Network.json:

            "description": "Elapsed seconds since frontend connected."

        },

        {

            "id": "Walltime",

            "type": "number",

2017-03-09  Nikita Vasilyev  <nvasilyev@apple.com>

        Web Inspector: Show individual messages in the content pane for a WebSocket

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

        Reviewed by Joseph Pecoraro.

        Add walltime parameter.

        No new tests. Tests will be added in a follow up patch.

        * inspector/InspectorNetworkAgent.cpp:

        (WebCore::InspectorNetworkAgent::willSendWebSocketHandshakeRequest):

2017-03-09  Nikita Vasilyev  <nvasilyev@apple.com>

        Web Inspector: Show individual messages in the content pane for a WebSocket

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

        Reviewed by Joseph Pecoraro.

        When selecting a Web Socket in Network panel or Resources, display a table

        of all messages that have been sent and received.

        * Localizations/en.lproj/localizedStrings.js:

        * UserInterface/Controllers/FrameResourceManager.js:

        (WebInspector.FrameResourceManager.prototype.webSocketWillSendHandshakeRequest):

        Add a walltime parameter.

        (WebInspector.FrameResourceManager.prototype._webSocketFrameReceivedOrSent):

        Fix a bug: masked messages are outgoing, not incoming.

        * UserInterface/Images/ArrowUp.svg: Added.

        * UserInterface/Images/gtk/ArrowUp.svg: Added.

        Add an icon for outgoing messages.

        * UserInterface/Main.html:

        * UserInterface/Models/WebSocketResource.js:

        (WebInspector.WebSocketResource):

        (WebInspector.WebSocketResource.prototype.get walltime):

        (WebInspector.WebSocketResource.prototype.addFrame):

        (WebInspector.WebSocketResource.prototype._walltimeForWebSocketTimestamp):

        * UserInterface/Protocol/NetworkObserver.js:

        (WebInspector.NetworkObserver.prototype.webSocketWillSendHandshakeRequest):

        (WebInspector.NetworkObserver.prototype.webSocketFrameSent):

        (WebInspector.NetworkObserver.prototype.webSocketFrameError):

        (WebInspector.NetworkObserver):

        * UserInterface/Views/NetworkSidebarPanel.js:

        (WebInspector.NetworkSidebarPanel.prototype.treeElementAddedOrChanged):

        * UserInterface/Views/ResourceClusterContentView.js:

        (WebInspector.ResourceClusterContentView.prototype.get responseContentView):

        * UserInterface/Views/WebSocketContentView.css: Added.

        (.web-socket.content-view > .data-grid):

        (.web-socket.content-view > .data-grid table.data):

        (.web-socket.content-view > .data-grid td.data-column,):

        (body[dir=ltr] .web-socket.content-view > .data-grid .data-column > div):

        (body[dir=rtl] .web-socket.content-view > .data-grid .data-column > div):

        (.web-socket.content-view .icon):

        (body[dir=ltr] .web-socket.content-view .icon):

        (body[dir=rtl] .web-socket.content-view .icon):

        (.web-socket.content-view .outgoing .icon):

        (.web-socket.content-view .data-grid.variable-height-rows table.data tr:nth-child(odd)):

        (.web-socket.content-view .data-grid table.data tr.revealed):

        (.web-socket.content-view .data-grid.variable-height-rows table.data tr.outgoing):

        (.web-socket.content-view .data-grid.variable-height-rows table.data tr.non-text-frame):

        * UserInterface/Views/WebSocketContentView.js: Added.

        (WebInspector.WebSocketContentView):

        Only show Time column when walltime is available.

        (WebInspector.WebSocketContentView.textForOpcode):

        (WebInspector.WebSocketContentView.prototype.shown):

        (WebInspector.WebSocketContentView.prototype.hidden):

        (WebInspector.WebSocketContentView.prototype.addFrame):

        (WebInspector.WebSocketContentView.prototype._updateFrames):

        Only render frames that haven't been rendered yet.

        (WebInspector.WebSocketContentView.prototype._addRow):

        (WebInspector.WebSocketContentView.prototype._timeStringFromTimestamp):

localizedStrings["Binary Frame"] = "Binary Frame";

localizedStrings["Connection Close Frame"] = "Connection Close Frame";

localizedStrings["Continuation Frame"] = "Continuation Frame";

localizedStrings["Ping Frame"] = "Ping Frame";

localizedStrings["Pong Frame"] = "Pong Frame";

localizedStrings["Text Frame"] = "Text Frame";

localizedStrings["WebSocket Connection Established"] = "WebSocket Connection Established";

        // COMPATIBILITY(iOS 10.3): `walltime` did not exist in 10.3 and earlier.

        if (!NetworkAgent.hasEventParameter("webSocketWillSendHandshakeRequest", "walltime")) {

            request = arguments[2];

            walltime = NaN;

        }

<?xml version="1.0"?>

<!-- Copyright © 2017 Apple Inc. All rights reserved. -->

<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" width="16" height="16" viewBox="0 0 16 16">

    <path fill="none" stroke="currentColor" stroke-width="1" d="M 8 2 L 2 11 H 6 v 4 h 4 V 11 h 4 Z"/>

</svg>

<?xml version="1.0"?>

<!-- Licensed under the Creative Commons Attribution-Share Alike 3.0 United States License (http://creativecommons.org/licenses/by-sa/3.0/) -->

<svg xmlns="http://www.w3.org/2000/svg" id="root" version="1.1" width="16" height="16" viewBox="0 0 16 16">

    <path fill="currentColor" stroke-width="0" d="M 8 2 L 2 11 H 6 v 4 h 4 V 11 h 4 Z"/>

</svg>

    <link rel="stylesheet" href="Views/WebSocketContentView.css">

    <script src="Views/WebSocketContentView.js"></script>

        this._timestamp = timestamp;

        this._walltime = walltime;

    get walltime() { return this._walltime; }

        this.increaseSize(data.length, elapsedTime);

    // Private

    _walltimeForWebSocketTimestamp(timestamp)

    {

        return this._walltime + (timestamp - this._timestamp);

    }

WebInspector.WebSocketResource.OpCodes = {

    ContinuationFrame: 0,

    TextFrame: 1,

    BinaryFrame: 2,

    ConnectionCloseFrame: 8,

    PingFrame: 9,

    PongFrame: 10,

};

/*

 * Copyright (C) 2017 Apple Inc. All rights reserved.

 *

 * Redistribution and use in source and binary forms, with or without

 * modification, are permitted provided that the following conditions

 * are met:

 * 1. Redistributions of source code must retain the above copyright

 *    notice, this list of conditions and the following disclaimer.

 * 2. Redistributions in binary form must reproduce the above copyright

 *    notice, this list of conditions and the following disclaimer in the

 *    documentation and/or other materials provided with the distribution.

 *

 * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''

 * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,

 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR

 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS

 * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR

 * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF

 * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS

 * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN

 * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)

 * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF

 * THE POSSIBILITY OF SUCH DAMAGE.

 */

.web-socket.content-view > .data-grid {

    height: 100%;

}

.web-socket.content-view > .data-grid table.data {

    height: auto;

    background-image: none;

}

.web-socket.content-view > .data-grid td.data-column,

.web-socket.content-view .data-grid td.data-column > div {

    height: auto;

    white-space: pre-wrap;

}

body[dir=ltr] .web-socket.content-view > .data-grid .data-column > div {

    padding-left: 18px;

}

body[dir=rtl] .web-socket.content-view > .data-grid .data-column > div {

    padding-right: 18px;

}

.web-socket.content-view .icon {

    position: absolute;

    margin-top: -1px;

}

body[dir=ltr] .web-socket.content-view .icon {

    left: 4px;

    margin-right: 2px;

}

body[dir=rtl] .web-socket.content-view .icon {

    right: 4px;

    margin-left: 2px;

}

.web-socket.content-view .outgoing .icon {

    background-image: url("../Images/ArrowUp.svg");

}

.web-socket.content-view .data-grid.variable-height-rows table.data tr:nth-child(odd) {

    background-color: unset;

}

.web-socket.content-view .data-grid table.data tr.revealed {

    border-bottom: 0.5px solid hsla(0, 0%, 0%, 0.1);

}

.web-socket.content-view .data-grid.variable-height-rows table.data tr.outgoing {

    background-color: hsl(80, 85%, 92%);

    color: hsl(120, 100%, 16%);

}

.web-socket.content-view .data-grid.variable-height-rows table.data tr.non-text-frame {

    background-color: hsl(50, 100%, 90%);

    color: hsl(3, 96%, 27%);

}

/*

 * Copyright (C) 2017 Apple Inc. All rights reserved.

 *

 * Redistribution and use in source and binary forms, with or without

 * modification, are permitted provided that the following conditions

 * are met:

 * 1. Redistributions of source code must retain the above copyright

 *    notice, this list of conditions and the following disclaimer.

 * 2. Redistributions in binary form must reproduce the above copyright

 *    notice, this list of conditions and the following disclaimer in the

 *    documentation and/or other materials provided with the distribution.

 *

 * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''

 * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,

 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR

 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS

 * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR

 * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF

 * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS

 * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN

 * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)

 * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF

 * THE POSSIBILITY OF SUCH DAMAGE.

 */

WebInspector.WebSocketContentView = class WebSocketContentView extends WebInspector.ContentView

{

    constructor(resource)

    {

        console.assert(resource instanceof WebInspector.WebSocketResource, resource);

        super(resource);

        this._resource = resource;

        this._framesRendered = 0;

        // COMPATIBILITY (iOS 10.3): `walltime` did not exist in 10.3 and earlier.

        this._showTimeColumn = NetworkAgent.hasEventParameter("webSocketWillSendHandshakeRequest", "walltime");

        this.element.classList.add("web-socket", "resource");

        let columns = {data: {}};

        columns.data.title = WebInspector.UIString("Data");

        columns.data.sortable = false;

        columns.data.icon = true;

        columns.data.width = "85%";

        if (this._showTimeColumn)

            columns.time = {title: WebInspector.UIString("Time"), sortable: true};

        this._dataGrid = new WebInspector.DataGrid(columns);

        this._dataGrid.variableHeightRows = true;

        this.addSubview(this._dataGrid);

        this._addRow(WebInspector.UIString("WebSocket Connection Established"), this._resource.walltime, ["non-text-frame"]);

        this._dataGrid.updateLayout();

    }

    // Static

    static textForOpcode(opcode)

    {

        switch (opcode) {

        case WebInspector.WebSocketResource.OpCodes.ContinuationFrame:

            return WebInspector.UIString("Continuation Frame");

        case WebInspector.WebSocketResource.OpCodes.TextFrame:

            return WebInspector.UIString("Text Frame");

        case WebInspector.WebSocketResource.OpCodes.BinaryFrame:

            return WebInspector.UIString("Binary Frame");

        case WebInspector.WebSocketResource.OpCodes.ConnectionCloseFrame:

            return WebInspector.UIString("Connection Close Frame");

        case WebInspector.WebSocketResource.OpCodes.PingFrame:

            return WebInspector.UIString("Ping Frame");

        case WebInspector.WebSocketResource.OpCodes.PongFrame:

            return WebInspector.UIString("Pong Frame");

        }

    }

    // Public

    shown()

    {

        this._updateFrames();

        this._resource.addEventListener(WebInspector.WebSocketResource.Event.FrameAdded, this._updateFrames, this);

    }

    hidden()

    {

        this._resource.removeEventListener(WebInspector.WebSocketResource.Event.FrameAdded, this._updateFrames, this);

    }

    addFrame(data, isOutgoing, opcode, time)

    {

        let nodeText;

        if (opcode === WebInspector.WebSocketResource.OpCodes.TextFrame)

            nodeText = data;

        else

            nodeText = WebInspector.WebSocketContentView.textForOpcode(opcode);

        let classNames = [

            isOutgoing ? "outgoing" : "incoming",

            opcode === WebInspector.WebSocketResource.OpCodes.TextFrame ? "text-frame" : "non-text-frame"

        ];

        this._addRow(nodeText, time, classNames);

    }

    // Private

    _updateFrames()

    {

        let framesLength = this._resource.frames.length;

        for (let index = this._framesRendered; index < framesLength; index++) {

            let frame = this._resource.frames[index];

            let {data, isOutgoing, opcode, walltime} = frame;

            this.addFrame(data, isOutgoing, opcode, walltime);

        }

        this._framesRendered = framesLength;

    }

    _addRow(data, time, classNames)

    {

        let node;

        if (this._showTimeColumn)

            node = new WebInspector.DataGridNode({data, time: this._timeStringFromTimestamp(time)});

        else

            node = new WebInspector.DataGridNode({data});

        this._dataGrid.appendChild(node);

        node.element.classList.add(...classNames);

    }

    _timeStringFromTimestamp(timestamp)

    {

        return new Date(timestamp * 1000).toLocaleTimeString();

    }

};