<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>[213421] trunk</title>

</head>

<body>

<style type="text/css"><!--

#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }

#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }

#msg dt:after { content:':';}

#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }

#msg dl a { font-weight: bold}

#msg dl a:link    { color:#fc3; }

#msg dl a:active  { color:#ff0; }

#msg dl a:visited { color:#cc6; }

h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }

#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }

#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }

#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }

#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }

#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }

#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }

#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }

#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }

#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }

#logmsg pre { background: #eee; padding: 1em; }

#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}

#logmsg dl { margin: 0; }

#logmsg dt { font-weight: bold; }

#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }

#logmsg dd:before { content:'\00bb';}

#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }

#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }

#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }

#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }

#logmsg table th.Corner { text-align: left; }

#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }

#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }

#patch { width: 100%; }

#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}

#patch .propset h4, #patch .binary h4 {margin:0;}

#patch pre {padding:0;line-height:1.2em;margin:0;}

#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}

#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}

#patch span {display:block;padding:0 10px;}

#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}

#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}

#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}

#patch .lines, .info {color:#888;background:#fff;}

--></style>

<div id="msg">

<dl class="meta">

<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/213421">213421</a></dd>

<dt>Author</dt> <dd>nvasilyev@apple.com</dd>

<dt>Date</dt> <dd>2017-03-04 00:57:56 -0800 (Sat, 04 Mar 2017)</dd>

</dl>

<h3>Log Message</h3>

<pre>Web Inspector: Show Web Socket connections in Network tab

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

Reviewed by Joseph Pecoraro.

Source/WebInspectorUI:

Show Web Socket connections in Network and Resources tabs. Display HTTP headers

of Web Socket handshake request in the details sidebar.

* UserInterface/Controllers/FrameResourceManager.js:

(WebInspector.FrameResourceManager.prototype.initialize):

(WebInspector.FrameResourceManager.prototype.webSocketCreated):

(WebInspector.FrameResourceManager.prototype.webSocketWillSendHandshakeRequest):

webSocketWillSendHandshakeRequest doesn't receive a request URL as one of its parameters.

Store URLs received from webSocketCreated method in _webSocketIdentifierToURL map.

(WebInspector.FrameResourceManager.prototype.webSocketHandshakeResponseReceived):

(WebInspector.FrameResourceManager.prototype.webSocketFrameReceived):

(WebInspector.FrameResourceManager.prototype.webSocketFrameSent):

(WebInspector.FrameResourceManager.prototype.webSocketClosed):

Mark resource as finished when Web Socket handshake is complete or Web Socket is closed.

This may change in the future.

(WebInspector.FrameResourceManager.prototype._webSocketFrameReceivedOrSent):

* UserInterface/Main.html:

* UserInterface/Models/WebSocketResource.js: Added.

(WebInspector.WebSocketResource):

(WebInspector.WebSocketResource.prototype.set readyState):

(WebInspector.WebSocketResource.prototype.get readyState):

(WebInspector.WebSocketResource.prototype.get frames):

(WebInspector.WebSocketResource.prototype.addFrame):

Introduce WebSocketResource model to store WebSocket frames (incoming and outgoing messages)

and readyState.

* UserInterface/Protocol/NetworkObserver.js:

(WebInspector.NetworkObserver.prototype.webSocketCreated):

(WebInspector.NetworkObserver.prototype.webSocketWillSendHandshakeRequest):

(WebInspector.NetworkObserver.prototype.webSocketHandshakeResponseReceived):

(WebInspector.NetworkObserver.prototype.webSocketClosed):

(WebInspector.NetworkObserver.prototype.webSocketFrameReceived):

(WebInspector.NetworkObserver.prototype.webSocketFrameError):

(WebInspector.NetworkObserver.prototype.webSocketFrameSent):

(WebInspector.NetworkObserver):

Add corresponding methods for the newly added FrameResourceManager methods.

* UserInterface/Test.html:

* UserInterface/Views/NetworkSidebarPanel.js:

(WebInspector.NetworkSidebarPanel.prototype.treeElementAddedOrChanged):

Don't show the go to arrow for WebSocket items since WebSocketContentView isn't implemented

yet.

* UserInterface/Views/ResourceClusterContentView.js:

(WebInspector.ResourceClusterContentView.prototype.get responseContentView):

Don't show any content views for WebSocket items.

* UserInterface/Views/ResourceTreeElement.js:

(WebInspector.ResourceTreeElement.prototype.ondblclick):

Don't open WebSocket URL in a new browser tab.

LayoutTests:

* http/tests/websocket/tests/hybi/inspector/client-close-expected.txt: Added.

* http/tests/websocket/tests/hybi/inspector/client-close.html: Added.

* http/tests/websocket/tests/hybi/inspector/client-close_wsh.py: Added.

(web_socket_do_extra_handshake):

(web_socket_transfer_data):

* http/tests/websocket/tests/hybi/inspector/server-close-expected.txt: Added.

* http/tests/websocket/tests/hybi/inspector/server-close.html: Added.

* http/tests/websocket/tests/hybi/inspector/server-close_wsh.py: Added.

(web_socket_do_extra_handshake):

(web_socket_transfer_data):

* platform/ios-simulator/TestExpectations:</pre>

<h3>Modified Paths</h3>

<ul>

<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>

<li><a href="#trunkLayoutTestsplatformiossimulatorTestExpectations">trunk/LayoutTests/platform/ios-simulator/TestExpectations</a></li>

<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>

<li><a href="#trunkSourceWebInspectorUIUserInterfaceControllersFrameResourceManagerjs">trunk/Source/WebInspectorUI/UserInterface/Controllers/FrameResourceManager.js</a></li>

<li><a href="#trunkSourceWebInspectorUIUserInterfaceMainhtml">trunk/Source/WebInspectorUI/UserInterface/Main.html</a></li>

<li><a href="#trunkSourceWebInspectorUIUserInterfaceProtocolNetworkObserverjs">trunk/Source/WebInspectorUI/UserInterface/Protocol/NetworkObserver.js</a></li>

<li><a href="#trunkSourceWebInspectorUIUserInterfaceTesthtml">trunk/Source/WebInspectorUI/UserInterface/Test.html</a></li>

<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsNetworkSidebarPaneljs">trunk/Source/WebInspectorUI/UserInterface/Views/NetworkSidebarPanel.js</a></li>

<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsResourceClusterContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/ResourceClusterContentView.js</a></li>

<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsResourceTreeElementjs">trunk/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.js</a></li>

</ul>

<h3>Added Paths</h3>

<ul>

<li>trunk/LayoutTests/http/tests/websocket/tests/hybi/inspector/</li>

<li><a href="#trunkLayoutTestshttptestswebsockettestshybiinspectorclientcloseexpectedtxt">trunk/LayoutTests/http/tests/websocket/tests/hybi/inspector/client-close-expected.txt</a></li>

<li><a href="#trunkLayoutTestshttptestswebsockettestshybiinspectorclientclosehtml">trunk/LayoutTests/http/tests/websocket/tests/hybi/inspector/client-close.html</a></li>

<li><a href="#trunkLayoutTestshttptestswebsockettestshybiinspectorclientclose_wshpy">trunk/LayoutTests/http/tests/websocket/tests/hybi/inspector/client-close_wsh.py</a></li>

<li><a href="#trunkLayoutTestshttptestswebsockettestshybiinspectorservercloseexpectedtxt">trunk/LayoutTests/http/tests/websocket/tests/hybi/inspector/server-close-expected.txt</a></li>

<li><a href="#trunkLayoutTestshttptestswebsockettestshybiinspectorserverclosehtml">trunk/LayoutTests/http/tests/websocket/tests/hybi/inspector/server-close.html</a></li>

<li><a href="#trunkLayoutTestshttptestswebsockettestshybiinspectorserverclose_wshpy">trunk/LayoutTests/http/tests/websocket/tests/hybi/inspector/server-close_wsh.py</a></li>

<li><a href="#trunkSourceWebInspectorUIUserInterfaceModelsWebSocketResourcejs">trunk/Source/WebInspectorUI/UserInterface/Models/WebSocketResource.js</a></li>

</ul>

</div>

<div id="patch">

<h3>Diff</h3>

<a id="trunkLayoutTestsChangeLog"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (213420 => 213421)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/ChangeLog        2017-03-04 08:38:06 UTC (rev 213420)

+++ trunk/LayoutTests/ChangeLog        2017-03-04 08:57:56 UTC (rev 213421)

</span><span class="lines">@@ -1,3 +1,22 @@

</span><ins>+2017-03-04  Nikita Vasilyev  &lt;nvasilyev@apple.com&gt;

+

+        Web Inspector: Show Web Socket connections in Network tab

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

+

+        Reviewed by Joseph Pecoraro.

+

+        * http/tests/websocket/tests/hybi/inspector/client-close-expected.txt: Added.

+        * http/tests/websocket/tests/hybi/inspector/client-close.html: Added.

+        * http/tests/websocket/tests/hybi/inspector/client-close_wsh.py: Added.

+        (web_socket_do_extra_handshake):

+        (web_socket_transfer_data):

+        * http/tests/websocket/tests/hybi/inspector/server-close-expected.txt: Added.

+        * http/tests/websocket/tests/hybi/inspector/server-close.html: Added.

+        * http/tests/websocket/tests/hybi/inspector/server-close_wsh.py: Added.

+        (web_socket_do_extra_handshake):

+        (web_socket_transfer_data):

+        * platform/ios-simulator/TestExpectations:

+

</ins><span class="cx"> 2017-03-03  Commit Queue  &lt;commit-queue@webkit.org&gt;

</span><span class="cx"> 

<span class="cx">         Unreviewed, rolling out r213400.

</span></span></pre></div>

<a id="trunkLayoutTestshttptestswebsockettestshybiinspectorclientcloseexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/http/tests/websocket/tests/hybi/inspector/client-close-expected.txt (0 => 213421)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/http/tests/websocket/tests/hybi/inspector/client-close-expected.txt                                (rev 0)

+++ trunk/LayoutTests/http/tests/websocket/tests/hybi/inspector/client-close-expected.txt        2017-03-04 08:57:56 UTC (rev 213421)

</span><span class="lines">@@ -0,0 +1,15 @@

<ins>+Tests WebSockets connection closed by the client.

+

+

+== Running test suite: WebSocket.ClientClose

+-- Running test case: WebSocket.ClientClose

+PASS: WebSocketResource should be created.

+PASS: WebSocketResource should be a WebSocket type.

+PASS: WebSocketResource should be in a Connecting state.

+PASS: WebSocketResource previous state should be Connecting.

+PASS: WebSocketResource state should change to Open.

+PASS: WebSocketResource should be in a Open state.

+PASS: WebSocketResource previous state should be Open.

+PASS: WebSocketResource state should change to Closed.

+PASS: WebSocketResource should be in a Closed state.

+

</ins></span></pre></div>

<a id="trunkLayoutTestshttptestswebsockettestshybiinspectorclientclosehtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/http/tests/websocket/tests/hybi/inspector/client-close.html (0 => 213421)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/http/tests/websocket/tests/hybi/inspector/client-close.html                                (rev 0)

+++ trunk/LayoutTests/http/tests/websocket/tests/hybi/inspector/client-close.html        2017-03-04 08:57:56 UTC (rev 213421)

</span><span class="lines">@@ -0,0 +1,69 @@

</span><ins>+&lt;!doctype html&gt;

+&lt;html&gt;

+&lt;head&gt;

+&lt;script src=&quot;../../../../inspector/resources/inspector-test.js&quot;&gt;&lt;/script&gt;

+&lt;script&gt;

+function createWebSocketConnection()

+{

+    let webSocket = new WebSocket(&quot;ws://127.0.0.1:8880/websocket/tests/hybi/inspector/client-close&quot;);

+

+    webSocket.onopen = function()

+    {

+        webSocket.send(&quot;A message.&quot;);

+    };

+

+    webSocket.onmessage = function()

+    {

+        webSocket.close();

+    };

+}

+

+function test()

+{

+    let suite = InspectorTest.createAsyncSuite(&quot;WebSocket.ClientClose&quot;);

+

+    suite.addTestCase({

+        name: &quot;WebSocket.ClientClose&quot;,

+        description: &quot;WebInspector.WebSocketResource.Event.ReadyStateChanged events are fired in order when WebSocket connection is closed by the client.&quot;,

+        test(resolve, reject) {

+            WebInspector.Frame.singleFireEventListener(WebInspector.Frame.Event.ResourceWasAdded, function(event) {

+                let resource = event.data.resource;

+

+                InspectorTest.expectThat(resource instanceof WebInspector.WebSocketResource, &quot;WebSocketResource should be created.&quot;);

+                InspectorTest.expectEqual(resource.type, WebInspector.Resource.Type.WebSocket, &quot;WebSocketResource should be a WebSocket type.&quot;);

+                InspectorTest.expectEqual(resource.readyState, WebInspector.WebSocketResource.ReadyState.Connecting, &quot;WebSocketResource should be in a Connecting state.&quot;);

+

+                let runCount = 0;

+

+                resource.addEventListener(WebInspector.WebSocketResource.Event.ReadyStateChanged, function(event) {

+                    let data = event.data;

+                    runCount++;

+

+                    if (runCount === 1) {

+                        InspectorTest.expectEqual(data.previousState, WebInspector.WebSocketResource.ReadyState.Connecting, &quot;WebSocketResource previous state should be Connecting.&quot;);

+                        InspectorTest.expectEqual(data.state, WebInspector.WebSocketResource.ReadyState.Open, &quot;WebSocketResource state should change to Open.&quot;);

+                        InspectorTest.expectEqual(resource.readyState, WebInspector.WebSocketResource.ReadyState.Open, &quot;WebSocketResource should be in a Open state.&quot;);

+                        return;

+                    }

+

+                    if (runCount === 2) {

+                        InspectorTest.expectEqual(data.previousState, WebInspector.WebSocketResource.ReadyState.Open, &quot;WebSocketResource previous state should be Open.&quot;);

+                        InspectorTest.expectEqual(data.state, WebInspector.WebSocketResource.ReadyState.Closed, &quot;WebSocketResource state should change to Closed.&quot;);

+                        InspectorTest.expectEqual(resource.readyState, WebInspector.WebSocketResource.ReadyState.Closed, &quot;WebSocketResource should be in a Closed state.&quot;);

+                        resolve();

+                    }

+                });

+            });

+

+            InspectorTest.evaluateInPage(&quot;createWebSocketConnection()&quot;);

+        }

+    });

+

+    suite.runTestCasesAndFinish();

+}

+&lt;/script&gt;

+&lt;/head&gt;

+&lt;body onload=&quot;runTest()&quot;&gt;

+&lt;p&gt;Tests WebSockets connection closed by the client.&lt;/p&gt;

+&lt;/body&gt;

+&lt;/html&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestshttptestswebsockettestshybiinspectorclientclose_wshpy"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/http/tests/websocket/tests/hybi/inspector/client-close_wsh.py (0 => 213421)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/http/tests/websocket/tests/hybi/inspector/client-close_wsh.py                                (rev 0)

+++ trunk/LayoutTests/http/tests/websocket/tests/hybi/inspector/client-close_wsh.py        2017-03-04 08:57:56 UTC (rev 213421)

</span><span class="lines">@@ -0,0 +1,11 @@

</span><ins>+from mod_pywebsocket import msgutil

+

+

+def web_socket_do_extra_handshake(request):

+    pass # Always accept.

+

+

+def web_socket_transfer_data(request):

+    # Echo message back

+    message = msgutil.receive_message(request)

+    msgutil.send_message(request, message)

</ins></span></pre></div>

<a id="trunkLayoutTestshttptestswebsockettestshybiinspectorservercloseexpectedtxt"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/http/tests/websocket/tests/hybi/inspector/server-close-expected.txt (0 => 213421)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/http/tests/websocket/tests/hybi/inspector/server-close-expected.txt                                (rev 0)

+++ trunk/LayoutTests/http/tests/websocket/tests/hybi/inspector/server-close-expected.txt        2017-03-04 08:57:56 UTC (rev 213421)

</span><span class="lines">@@ -0,0 +1,15 @@

<ins>+Tests WebSockets connection closed by the server.

+

+

+== Running test suite: WebSocket.ServerClose

+-- Running test case: WebSocket.ServerClose

+PASS: WebSocketResource should be created.

+PASS: WebSocketResource should be a WebSocket type.

+PASS: WebSocketResource should be in a Connecting state.

+PASS: WebSocketResource previous state should be Connecting.

+PASS: WebSocketResource state should change to Open.

+PASS: WebSocketResource should be in a Open state.

+PASS: WebSocketResource previous state should be Open.

+PASS: WebSocketResource state should change to Closed.

+PASS: WebSocketResource should be in a Closed state.

+

</ins></span></pre></div>

<a id="trunkLayoutTestshttptestswebsockettestshybiinspectorserverclosehtml"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/http/tests/websocket/tests/hybi/inspector/server-close.html (0 => 213421)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/http/tests/websocket/tests/hybi/inspector/server-close.html                                (rev 0)

+++ trunk/LayoutTests/http/tests/websocket/tests/hybi/inspector/server-close.html        2017-03-04 08:57:56 UTC (rev 213421)

</span><span class="lines">@@ -0,0 +1,59 @@

</span><ins>+&lt;!doctype html&gt;

+&lt;html&gt;

+&lt;head&gt;

+&lt;script src=&quot;../../../../inspector/resources/inspector-test.js&quot;&gt;&lt;/script&gt;

+&lt;script&gt;

+function createWebSocketConnection()

+{

+    new WebSocket(&quot;ws://127.0.0.1:8880/websocket/tests/hybi/inspector/server-close&quot;);

+}

+

+function test()

+{

+    let suite = InspectorTest.createAsyncSuite(&quot;WebSocket.ServerClose&quot;);

+

+    suite.addTestCase({

+        name: &quot;WebSocket.ServerClose&quot;,

+        description: &quot;WebInspector.WebSocketResource.Event.ReadyStateChanged events are fired in order when WebSocket connection is closed by the server.&quot;,

+        test(resolve, reject) {

+            WebInspector.Frame.singleFireEventListener(WebInspector.Frame.Event.ResourceWasAdded, function(event) {

+                let resource = event.data.resource;

+

+                InspectorTest.expectThat(resource instanceof WebInspector.WebSocketResource, &quot;WebSocketResource should be created.&quot;);

+                InspectorTest.expectEqual(resource.type, WebInspector.Resource.Type.WebSocket, &quot;WebSocketResource should be a WebSocket type.&quot;);

+                InspectorTest.expectEqual(resource.readyState, WebInspector.WebSocketResource.ReadyState.Connecting, &quot;WebSocketResource should be in a Connecting state.&quot;);

+

+                let runCount = 0;

+

+                resource.addEventListener(WebInspector.WebSocketResource.Event.ReadyStateChanged, function(event) {

+                    let data = event.data;

+                    runCount++;

+

+                    if (runCount === 1) {

+                        InspectorTest.expectEqual(data.previousState, WebInspector.WebSocketResource.ReadyState.Connecting, &quot;WebSocketResource previous state should be Connecting.&quot;);

+                        InspectorTest.expectEqual(data.state, WebInspector.WebSocketResource.ReadyState.Open, &quot;WebSocketResource state should change to Open.&quot;);

+                        InspectorTest.expectEqual(resource.readyState, WebInspector.WebSocketResource.ReadyState.Open, &quot;WebSocketResource should be in a Open state.&quot;);

+                        return;

+                    }

+

+                    if (runCount === 2) {

+                        InspectorTest.expectEqual(data.previousState, WebInspector.WebSocketResource.ReadyState.Open, &quot;WebSocketResource previous state should be Open.&quot;);

+                        InspectorTest.expectEqual(data.state, WebInspector.WebSocketResource.ReadyState.Closed, &quot;WebSocketResource state should change to Closed.&quot;);

+                        InspectorTest.expectEqual(resource.readyState, WebInspector.WebSocketResource.ReadyState.Closed, &quot;WebSocketResource should be in a Closed state.&quot;);

+                        resolve();

+                    }

+                });

+            });

+

+            InspectorTest.evaluateInPage(&quot;createWebSocketConnection()&quot;);

+        }

+    });

+

+    suite.runTestCasesAndFinish();

+}

+&lt;/script&gt;

+&lt;/head&gt;

+&lt;body onload=&quot;runTest()&quot;&gt;

+&lt;p&gt;Tests WebSockets connection closed by the server.&lt;/p&gt;

+&lt;/body&gt;

+&lt;/html&gt;

</ins></span></pre></div>

<a id="trunkLayoutTestshttptestswebsockettestshybiinspectorserverclose_wshpy"></a>

<div class="addfile"><h4>Added: trunk/LayoutTests/http/tests/websocket/tests/hybi/inspector/server-close_wsh.py (0 => 213421)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/http/tests/websocket/tests/hybi/inspector/server-close_wsh.py                                (rev 0)

+++ trunk/LayoutTests/http/tests/websocket/tests/hybi/inspector/server-close_wsh.py        2017-03-04 08:57:56 UTC (rev 213421)

</span><span class="lines">@@ -0,0 +1,7 @@

</span><ins>+def web_socket_do_extra_handshake(request):

+    pass

+

+

+def web_socket_transfer_data(request):

+    # After this handler exits, pywebsocket initiates the closing handshake.

+    pass

</ins></span></pre></div>

<a id="trunkLayoutTestsplatformiossimulatorTestExpectations"></a>

<div class="modfile"><h4>Modified: trunk/LayoutTests/platform/ios-simulator/TestExpectations (213420 => 213421)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/LayoutTests/platform/ios-simulator/TestExpectations        2017-03-04 08:38:06 UTC (rev 213420)

+++ trunk/LayoutTests/platform/ios-simulator/TestExpectations        2017-03-04 08:57:56 UTC (rev 213421)

</span><span class="lines">@@ -212,6 +212,7 @@

</span><span class="cx"> # iOS doesn't have a local inspector

</span><span class="cx"> inspector/ [ Skip ]

</span><span class="cx"> http/tests/inspector/ [ Skip ]

</span><ins>+http/tests/websocket/tests/hybi/inspector/ [ Skip ]

</ins><span class="cx"> 

</span><span class="cx"> # Some CSS3 Text tests are not enabled on iOS

</span><span class="cx"> webkit.org/b/76173 fast/css3-text/css3-text-align-last

</span></span></pre></div>

<a id="trunkSourceWebInspectorUIChangeLog"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (213420 => 213421)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog        2017-03-04 08:38:06 UTC (rev 213420)

+++ trunk/Source/WebInspectorUI/ChangeLog        2017-03-04 08:57:56 UTC (rev 213421)

</span><span class="lines">@@ -1,3 +1,64 @@

</span><ins>+2017-03-04  Nikita Vasilyev  &lt;nvasilyev@apple.com&gt;

+

+        Web Inspector: Show Web Socket connections in Network tab

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

+

+        Reviewed by Joseph Pecoraro.

+

+        Show Web Socket connections in Network and Resources tabs. Display HTTP headers

+        of Web Socket handshake request in the details sidebar.

+

+        * UserInterface/Controllers/FrameResourceManager.js:

+        (WebInspector.FrameResourceManager.prototype.initialize):

+        (WebInspector.FrameResourceManager.prototype.webSocketCreated):

+        (WebInspector.FrameResourceManager.prototype.webSocketWillSendHandshakeRequest):

+        webSocketWillSendHandshakeRequest doesn't receive a request URL as one of its parameters.

+        Store URLs received from webSocketCreated method in _webSocketIdentifierToURL map.

+

+        (WebInspector.FrameResourceManager.prototype.webSocketHandshakeResponseReceived):

+        (WebInspector.FrameResourceManager.prototype.webSocketFrameReceived):

+        (WebInspector.FrameResourceManager.prototype.webSocketFrameSent):

+        (WebInspector.FrameResourceManager.prototype.webSocketClosed):

+        Mark resource as finished when Web Socket handshake is complete or Web Socket is closed.

+        This may change in the future.

+

+        (WebInspector.FrameResourceManager.prototype._webSocketFrameReceivedOrSent):

+        * UserInterface/Main.html:

+

+        * UserInterface/Models/WebSocketResource.js: Added.

+        (WebInspector.WebSocketResource):

+        (WebInspector.WebSocketResource.prototype.set readyState):

+        (WebInspector.WebSocketResource.prototype.get readyState):

+        (WebInspector.WebSocketResource.prototype.get frames):

+        (WebInspector.WebSocketResource.prototype.addFrame):

+        Introduce WebSocketResource model to store WebSocket frames (incoming and outgoing messages)

+        and readyState.

+

+        * UserInterface/Protocol/NetworkObserver.js:

+        (WebInspector.NetworkObserver.prototype.webSocketCreated):

+        (WebInspector.NetworkObserver.prototype.webSocketWillSendHandshakeRequest):

+        (WebInspector.NetworkObserver.prototype.webSocketHandshakeResponseReceived):

+        (WebInspector.NetworkObserver.prototype.webSocketClosed):

+        (WebInspector.NetworkObserver.prototype.webSocketFrameReceived):

+        (WebInspector.NetworkObserver.prototype.webSocketFrameError):

+        (WebInspector.NetworkObserver.prototype.webSocketFrameSent):

+        (WebInspector.NetworkObserver):

+        Add corresponding methods for the newly added FrameResourceManager methods.

+

+        * UserInterface/Test.html:

+        * UserInterface/Views/NetworkSidebarPanel.js:

+        (WebInspector.NetworkSidebarPanel.prototype.treeElementAddedOrChanged):

+        Don't show the go to arrow for WebSocket items since WebSocketContentView isn't implemented

+        yet.

+

+        * UserInterface/Views/ResourceClusterContentView.js:

+        (WebInspector.ResourceClusterContentView.prototype.get responseContentView):

+        Don't show any content views for WebSocket items.

+

+        * UserInterface/Views/ResourceTreeElement.js:

+        (WebInspector.ResourceTreeElement.prototype.ondblclick):

+        Don't open WebSocket URL in a new browser tab.

+

</ins><span class="cx"> 2017-03-02  Matt Baker  &lt;mattbaker@apple.com&gt;

</span><span class="cx"> 

</span><span class="cx">         Web Inspector: Should be able to push nodes in an iframe subtree to the frontend

</span></span></pre></div>

<a id="trunkSourceWebInspectorUIUserInterfaceControllersFrameResourceManagerjs"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/FrameResourceManager.js (213420 => 213421)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Controllers/FrameResourceManager.js        2017-03-04 08:38:06 UTC (rev 213420)

+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/FrameResourceManager.js        2017-03-04 08:57:56 UTC (rev 213421)

</span><span class="lines">@@ -49,6 +49,7 @@

</span><span class="cx">         this._mainFrame = null;

</span><span class="cx">         this._resourceRequestIdentifierMap = new Map;

</span><span class="cx">         this._orphanedResources = new Map;

</span><ins>+        this._webSocketIdentifierToURL = new Map;

</ins><span class="cx"> 

</span><span class="cx">         if (this._mainFrame !== oldMainFrame)

</span><span class="cx">             this._mainFrameDidChange(oldMainFrame);

</span><span class="lines">@@ -200,6 +201,94 @@

</span><span class="cx">         this._resourceRequestIdentifierMap.set(requestIdentifier, resource);

</span><span class="cx">     }

</span><span class="cx"> 

</span><ins>+    webSocketCreated(requestId, url)

+    {

+        this._webSocketIdentifierToURL.set(requestId, url);

+    }

+

+    webSocketWillSendHandshakeRequest(requestId, timestamp, request)

+    {

+        let url = this._webSocketIdentifierToURL.get(requestId);

+        console.assert(url);

+        if (!url)

+            return;

+

+        // FIXME: &lt;webkit.org/b/168475&gt; Web Inspector: Correctly display iframe's and worker's WebSockets

+        let frameIdentifier = WebInspector.frameResourceManager.mainFrame.id;

+        let loaderIdentifier = WebInspector.frameResourceManager.mainFrame.id;

+        let targetId;

+

+        let frame = this.frameForIdentifier(frameIdentifier);

+        let requestData = null;

+        let elapsedTime = WebInspector.timelineManager.computeElapsedTime(timestamp);

+        let initiatorSourceCodeLocation = null;

+

+        let resource = new WebInspector.WebSocketResource(url, loaderIdentifier, targetId, requestId, request.headers, requestData, elapsedTime, initiatorSourceCodeLocation);

+        frame.addResource(resource);

+

+        this._resourceRequestIdentifierMap.set(requestId, resource);

+    }

+

+    webSocketHandshakeResponseReceived(requestId, timestamp, response)

+    {

+        let resource = this._resourceRequestIdentifierMap.get(requestId);

+        console.assert(resource);

+        if (!resource)

+            return;

+

+        resource.readyState = WebInspector.WebSocketResource.ReadyState.Open;

+

+        let elapsedTime = WebInspector.timelineManager.computeElapsedTime(timestamp);

+        resource.markAsFinished(elapsedTime);

+

+        // FIXME: &lt;webkit.org/b/169166&gt; Web Inspector: WebSockets: Implement timing information

+        let responseTiming = response.timing || null;

+

+        resource.updateForResponse(resource.url, resource.mimeType, resource.type, response.headers, response.status, response.statusText, elapsedTime, responseTiming);

+    }

+

+    webSocketFrameReceived(requestId, timestamp, response)

+    {

+        this._webSocketFrameReceivedOrSent(requestId, timestamp, response);

+    }

+

+    webSocketFrameSent(requestId, timestamp, response)

+    {

+        this._webSocketFrameReceivedOrSent(requestId, timestamp, response);

+    }

+

+    webSocketClosed(requestId, timestamp)

+    {

+        let resource = this._resourceRequestIdentifierMap.get(requestId);

+        console.assert(resource);

+        if (!resource)

+            return;

+

+        resource.readyState = WebInspector.WebSocketResource.ReadyState.Closed;

+

+        let elapsedTime = WebInspector.timelineManager.computeElapsedTime(timestamp);

+        resource.markAsFinished(elapsedTime);

+

+        this._webSocketIdentifierToURL.delete(requestId);

+        this._resourceRequestIdentifierMap.delete(requestId);

+    }

+

+    _webSocketFrameReceivedOrSent(requestId, timestamp, response)

+    {

+        let resource = this._resourceRequestIdentifierMap.get(requestId);

+        console.assert(resource);

+        if (!resource)

+            return;

+

+        let isIncoming = !!response.mask;

+        let data = response.payloadData;

+        let opcode = response.opcode;

+

+        let elapsedTime = WebInspector.timelineManager.computeElapsedTime(timestamp);

+

+        resource.addFrame(data, isIncoming, opcode, timestamp, elapsedTime);

+    }

+

</ins><span class="cx">     markResourceRequestAsServedFromMemoryCache(requestIdentifier)

</span><span class="cx">     {

<span class="cx">         // Called from WebInspector.NetworkObserver.

</span></span></pre></div>

<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (213420 => 213421)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Main.html        2017-03-04 08:38:06 UTC (rev 213420)

+++ trunk/Source/WebInspectorUI/UserInterface/Main.html        2017-03-04 08:57:56 UTC (rev 213421)

</span><span class="lines">@@ -397,6 +397,7 @@

</span><span class="cx">     &lt;script src=&quot;Models/TimelineRecording.js&quot;&gt;&lt;/script&gt;

</span><span class="cx">     &lt;script src=&quot;Models/TypeDescription.js&quot;&gt;&lt;/script&gt;

</span><span class="cx">     &lt;script src=&quot;Models/TypeSet.js&quot;&gt;&lt;/script&gt;

</span><ins>+    &lt;script src=&quot;Models/WebSocketResource.js&quot;&gt;&lt;/script&gt;

</ins><span class="cx">     &lt;script src=&quot;Models/WrappedPromise.js&quot;&gt;&lt;/script&gt;

</span><span class="cx"> 

</span><span class="cx">     &lt;script src=&quot;Proxies/FormatterWorkerProxy.js&quot;&gt;&lt;/script&gt;

</span></span></pre></div>

<a id="trunkSourceWebInspectorUIUserInterfaceModelsWebSocketResourcejs"></a>

<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Models/WebSocketResource.js (0 => 213421)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Models/WebSocketResource.js                                (rev 0)

+++ trunk/Source/WebInspectorUI/UserInterface/Models/WebSocketResource.js        2017-03-04 08:57:56 UTC (rev 213421)

</span><span class="lines">@@ -0,0 +1,77 @@

</span><ins>+/*

+ * 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.WebSocketResource = class WebSocketResource extends WebInspector.Resource

+{

+    constructor(url, loaderIdentifier, targetId, requestIdentifier, requestHeaders, requestData, requestSentTimestamp, initiatorSourceCodeLocation)

+    {

+        const type = WebInspector.Resource.Type.WebSocket;

+        const mimeType = null;

+        const requestMethod = &quot;GET&quot;;

+        super(url, mimeType, type, loaderIdentifier, targetId, requestIdentifier, requestMethod, requestHeaders, requestData, requestSentTimestamp, initiatorSourceCodeLocation);

+

+        this._readyState = WebInspector.WebSocketResource.ReadyState.Connecting;

+        this._frames = [];

+    }

+

+    // Public

+

+    get frames() { return this._frames; }

+

+    get readyState()

+    {

+        return this._readyState;

+    }

+

+    set readyState(state)

+    {

+        if (state === this._readyState)

+            return;

+

+        let previousState = this._readyState;

+        this._readyState = state;

+

+        this.dispatchEventToListeners(WebInspector.WebSocketResource.Event.ReadyStateChanged, {previousState, state});

+    }

+

+    addFrame(data, isIncoming, opcode, timestamp, elapsedTime)

+    {

+        let frame = {data, isIncoming, opcode, timestamp, elapsedTime};

+        this._frames.push(frame);

+

+        this.dispatchEventToListeners(WebInspector.WebSocketResource.Event.FrameAdded, frame);

+    }

+};

+

+WebInspector.WebSocketResource.Event = {

+    FrameAdded: Symbol(&quot;web-socket-frame-added&quot;),

+    ReadyStateChanged: Symbol(&quot;web-socket-resource-ready-state-changed&quot;),

+};

+

+WebInspector.WebSocketResource.ReadyState = {

+    Closed: Symbol(&quot;web-socket-ready-state-closed&quot;),

+    Connecting: Symbol(&quot;web-socket-ready-state-connecting&quot;),

+    Open: Symbol(&quot;web-socket-ready-state-open&quot;),

+};

</ins></span></pre></div>

<a id="trunkSourceWebInspectorUIUserInterfaceProtocolNetworkObserverjs"></a>

<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Protocol/NetworkObserver.js (213420 => 213421)</h4>

<pre class="diff"><span>

<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Protocol/NetworkObserver.js        2017-03-04 08:38:06 UTC (rev 213420)

+++ trunk/Source/WebInspectorUI/UserInterface/Protocol/NetworkObserver.js        2017-03-04 08:57:56 UTC (rev 213421)

</span><span class="lines">@@ -62,29 +62,29 @@

</span><span class="cx">         WebInspector.frameResourceManager.resourceRequestWasServedFromMemoryCache(requestId, frameId, loaderId, resource, timestamp, initiator);

</span><span class="cx">     }

</span><span class="cx"> 

</span><del>-    webSocketWillSendHandshakeRequest(requestId, timestamp, request)

</del><ins>+    webSocketCreated(requestId, url)

</ins><span class="cx">     {