WebKit Bugzilla
New
Browse
Search+
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
[patch]
Patch
168948.diff (text/plain), 21.01 KB, created by
Devin Rousso
on 2017-03-24 09:37:02 PDT
(
hide
)
Description:
Patch
Filename:
MIME Type:
Creator:
Devin Rousso
Created:
2017-03-24 09:37:02 PDT
Size:
21.01 KB
patch
obsolete
>diff --git a/Source/WebInspectorUI/ChangeLog b/Source/WebInspectorUI/ChangeLog >index bf513a8..0b138e3f 100644 >--- a/Source/WebInspectorUI/ChangeLog >+++ b/Source/WebInspectorUI/ChangeLog >@@ -1,3 +1,69 @@ >+2017-03-24 Devin Rousso <webkit@devinrousso.com> >+ >+ Web Inspector: Indicate whether a WebSocket connection is open or close >+ https://bugs.webkit.org/show_bug.cgi?id=168948 >+ >+ Reviewed by Joseph Pecoraro. >+ >+ * Localizations/en.lproj/localizedStrings.js: >+ * UserInterface/Main.html: >+ Added WebSocketResourceTreeElement.js and SpanningDataGridNode.js. >+ >+ * UserInterface/Views/WebSocketContentView.js: >+ (WebInspector.WebSocketContentView): >+ (WebInspector.WebSocketContentView.prototype.shown): >+ (WebInspector.WebSocketContentView.prototype.hidden): >+ (WebInspector.WebSocketContentView.prototype._updateState): >+ Listen to changes in the readyState and add a SpanningDataGridNode when the current state >+ becomes Closed. >+ >+ * UserInterface/Views/WebSocketResourceTreeElement.js: Added. >+ (WebInspector.WebSocketResourceTreeElement.prototype.onattach): >+ (WebInspector.WebSocketResourceTreeElement.prototype.ondetach): >+ (WebInspector.WebSocketResourceTreeElement.prototype._updateConnectionStatus): >+ Listen to changes in the readyState and add/remove the status element depending on the >+ current state: >+ - Closed: show no status indicator >+ - Connecting: show a small circle with a yellow color >+ - Open: show a small circle with a green color >+ >+ * UserInterface/Views/ResourceTreeElement.css: >+ (.item.resource.resource-type-websocket .status > div): >+ (.item.resource.resource-type-websocket:not(.selected) .status .open): >+ (.tree-outline:not(:focus, .force-focus) .item.resource.resource-type-websocket.selected .status .open): >+ (body:matches(.window-inactive, .window-docked-inactive) .item.resource.resource-type-websocket.selected .status .open): >+ (.item.resource.resource-type-websocket:not(.selected) .status .connecting): >+ (.tree-outline:not(:focus, .force-focus) .item.resource.resource-type-websocket.selected .status .connecting): >+ (body:matches(.window-inactive, .window-docked-inactive) .item.resource.resource-type-websocket.selected .status .connecting): >+ >+ * UserInterface/Views/FrameTreeElement.js: >+ (WebInspector.FrameTreeElement): >+ Use WebSocketResourceTreeElement as the constructor for WebSocket resources. >+ >+ * UserInterface/Views/SpanningDataGridNode.js: Added. >+ (WebInspector.SpanningDataGridNode.prototype.createCells): >+ Creates a single cell that spans all the columns (via CSS colspan) of the parent DataGrid. >+ >+ * UserInterface/Views/DataGrid.css: >+ (.data-grid td.spanning): >+ Center content of spanning nodes and prevent user interaction. >+ >+ * UserInterface/Views/DataGridNode.js: >+ (WebInspector.DataGridNode.prototype.createCell): >+ Add additional checks so that a DataGridNode can be created with a column identifier that is >+ not in the DataGrid. This is used by SpanningGridDataNode, as it shouldn't match one single >+ column in the DataGrid since it spans them all. >+ >+ * UserInterface/Views/GeneralTreeElement.js: >+ (WebInspector.GeneralTreeElement.prototype.ondetach): >+ * UserInterface/Views/BreakpointTreeElement.js: >+ (WebInspector.BreakpointTreeElement.prototype.ondetach): >+ * UserInterface/Views/DOMBreakpointTreeElement.js: >+ (WebInspector.DOMBreakpointTreeElement.prototype.ondetach): >+ * UserInterface/Views/XHRBreakpointTreeElement.js: >+ (WebInspector.XHRBreakpointTreeElement.prototype.ondetach): >+ Add ondetach function (with super calls) for future use. >+ > 2017-03-23 Joseph Pecoraro <pecoraro@apple.com> > > Web Inspector: Cache type is not styled correctly in Timelines tab >diff --git a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js >index 8b71e30..285f840 100644 >--- a/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js >+++ b/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js >@@ -194,8 +194,10 @@ localizedStrings["Compressed"] = "Compressed"; > localizedStrings["Compression"] = "Compression"; > localizedStrings["Condition"] = "Condition"; > localizedStrings["Conditional expression"] = "Conditional expression"; >+localizedStrings["Connecting"] = "Connecting"; > localizedStrings["Connection"] = "Connection"; > localizedStrings["Connection Close Frame"] = "Connection Close Frame"; >+localizedStrings["Connection Closed"] = "Connection Closed"; > localizedStrings["Console"] = "Console"; > localizedStrings["Console Evaluation"] = "Console Evaluation"; > localizedStrings["Console Evaluation %d"] = "Console Evaluation %d"; >diff --git a/Source/WebInspectorUI/UserInterface/Main.html b/Source/WebInspectorUI/UserInterface/Main.html >index 2186db1..1c77d6e 100644 >--- a/Source/WebInspectorUI/UserInterface/Main.html >+++ b/Source/WebInspectorUI/UserInterface/Main.html >@@ -656,6 +656,7 @@ > <script src="Views/SourceCodeTimelineTimelineDataGridNode.js"></script> > <script src="Views/SourceCodeTimelineTreeElement.js"></script> > <script src="Views/SourceMapResourceTreeElement.js"></script> >+ <script src="Views/SpanningDataGridNode.js"></script> > <script src="Views/SpringEditor.js"></script> > <script src="Views/SVGImageResourceClusterContentView.js"></script> > <script src="Views/StackTraceView.js"></script> >@@ -683,6 +684,7 @@ > <script src="Views/TypeTreeView.js"></script> > <script src="Views/WebSocketContentView.js"></script> > <script src="Views/WebSocketDataGridNode.js"></script> >+ <script src="Views/WebSocketResourceTreeElement.js"></script> > <script src="Views/WorkerTreeElement.js"></script> > <script src="Views/XHRBreakpointTreeElement.js"></script> > >diff --git a/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js >index 52864ab..0c88112 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js >+++ b/Source/WebInspectorUI/UserInterface/Views/BreakpointTreeElement.js >@@ -114,6 +114,8 @@ WebInspector.BreakpointTreeElement = class BreakpointTreeElement extends WebInsp > > ondetach() > { >+ super.ondetach(); >+ > this._listenerSet.uninstall(); > > if (this._probeSet) >diff --git a/Source/WebInspectorUI/UserInterface/Views/DOMBreakpointTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/DOMBreakpointTreeElement.js >index 07fa593..a28dc76 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/DOMBreakpointTreeElement.js >+++ b/Source/WebInspectorUI/UserInterface/Views/DOMBreakpointTreeElement.js >@@ -80,6 +80,8 @@ WebInspector.DOMBreakpointTreeElement = class DOMBreakpointTreeElement extends W > > ondetach() > { >+ super.ondetach(); >+ > this._statusImageElement.removeEventListener("click", this._boundStatusImageElementClicked); > this._statusImageElement.removeEventListener("focus", this._boundStatusImageElementFocused); > this._statusImageElement.removeEventListener("mousedown", this._boundStatusImageElementMouseDown); >diff --git a/Source/WebInspectorUI/UserInterface/Views/DataGrid.css b/Source/WebInspectorUI/UserInterface/Views/DataGrid.css >index ebbc658..d9109c0 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/DataGrid.css >+++ b/Source/WebInspectorUI/UserInterface/Views/DataGrid.css >@@ -190,6 +190,13 @@ body[dir=rtl] .data-grid :matches(th, td):not(:last-child) { > font-variant-numeric: tabular-nums; > } > >+.data-grid td.spanning { >+ text-align: center; >+ color: hsl(0, 0%, 30%); >+ background-color: hsl(0, 0%, 95%); >+ pointer-events: none; >+} >+ > body[dir=ltr] .data-grid:matches(:focus, .force-focus) tr.selected td:not(:last-child) { > border-right-color: hsl(210, 100%, 40%); > } >diff --git a/Source/WebInspectorUI/UserInterface/Views/DataGridNode.js b/Source/WebInspectorUI/UserInterface/Views/DataGridNode.js >index 81b723d..ef11a21 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/DataGridNode.js >+++ b/Source/WebInspectorUI/UserInterface/Views/DataGridNode.js >@@ -349,22 +349,23 @@ WebInspector.DataGridNode = class DataGridNode extends WebInspector.Object > cellElement.className = columnIdentifier + "-column"; > cellElement.__columnIdentifier = columnIdentifier; > >- var column = this.dataGrid.columns.get(columnIdentifier); >- >- if (column["aligned"]) >- cellElement.classList.add(column["aligned"]); >- >- if (column["group"]) >- cellElement.classList.add("column-group-" + column["group"]); >- > var div = cellElement.createChild("div", "cell-content"); > var content = this.createCellContent(columnIdentifier, cellElement); > div.append(content); > >- if (column["icon"]) { >- let iconElement = document.createElement("div"); >- iconElement.classList.add("icon"); >- div.insertBefore(iconElement, div.firstChild); >+ let column = this.dataGrid.columns.get(columnIdentifier); >+ if (column) { >+ if (column["aligned"]) >+ cellElement.classList.add(column["aligned"]); >+ >+ if (column["group"]) >+ cellElement.classList.add("column-group-" + column["group"]); >+ >+ if (column["icon"]) { >+ let iconElement = document.createElement("div"); >+ iconElement.classList.add("icon"); >+ div.insertBefore(iconElement, div.firstChild); >+ } > } > > if (columnIdentifier === this.dataGrid.disclosureColumnIdentifier) { >diff --git a/Source/WebInspectorUI/UserInterface/Views/FrameTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/FrameTreeElement.js >index ceff846..ac33730 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/FrameTreeElement.js >+++ b/Source/WebInspectorUI/UserInterface/Views/FrameTreeElement.js >@@ -55,7 +55,12 @@ WebInspector.FrameTreeElement = class FrameTreeElement extends WebInspector.Reso > > for (let [key, value] of Object.entries(WebInspector.Resource.Type)) { > let folderName = WebInspector.Resource.displayNameForType(value, true); >- this.registerFolderizeSettings(key, folderName, this._frame.resourceCollectionForType(value), WebInspector.ResourceTreeElement); >+ >+ let treeElementConstructor = WebInspector.ResourceTreeElement; >+ if (value === WebInspector.Resource.Type.WebSocket) >+ treeElementConstructor = WebInspector.WebSocketResourceTreeElement; >+ >+ this.registerFolderizeSettings(key, folderName, this._frame.resourceCollectionForType(value), treeElementConstructor); > } > > this.updateParentStatus(); >diff --git a/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js >index dd65cbe..ee81a3f 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js >+++ b/Source/WebInspectorUI/UserInterface/Views/GeneralTreeElement.js >@@ -210,6 +210,11 @@ WebInspector.GeneralTreeElement = class GeneralTreeElement extends WebInspector. > this._listItemNode.appendChild(this._titlesElement); > } > >+ ondetach() >+ { >+ // Overriden by subclasses. >+ } >+ > onreveal() > { > if (this._listItemNode) >diff --git a/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.css b/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.css >index 90a5b3e..8fea3d6 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.css >+++ b/Source/WebInspectorUI/UserInterface/Views/ResourceTreeElement.css >@@ -31,3 +31,23 @@ > color: var(--error-text-color) !important; > opacity: 0.7; > } >+ >+.item.resource.resource-type-websocket .status > div { >+ width: 8px; >+ height: 8px; >+ margin-top: 4px; >+ background-color: white; >+ -webkit-clip-path: circle(50% at 50% 50%); >+} >+ >+.item.resource.resource-type-websocket:not(.selected) .status .open, >+.tree-outline:not(:focus, .force-focus) .item.resource.resource-type-websocket.selected .status .open, >+body:matches(.window-inactive, .window-docked-inactive) .item.resource.resource-type-websocket.selected .status .open { >+ background-color: limegreen; >+} >+ >+.item.resource.resource-type-websocket:not(.selected) .status .connecting, >+.tree-outline:not(:focus, .force-focus) .item.resource.resource-type-websocket.selected .status .connecting, >+body:matches(.window-inactive, .window-docked-inactive) .item.resource.resource-type-websocket.selected .status .connecting { >+ background-color: yellow; >+} >diff --git a/Source/WebInspectorUI/UserInterface/Views/SpanningDataGridNode.js b/Source/WebInspectorUI/UserInterface/Views/SpanningDataGridNode.js >new file mode 100644 >index 0000000..c281a36 >--- /dev/null >+++ b/Source/WebInspectorUI/UserInterface/Views/SpanningDataGridNode.js >@@ -0,0 +1,45 @@ >+/* >+ * Copyright (C) 2017 Devin Rousso <webkit@devinrousso.com>. 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.SpanningDataGridNode = class SpanningDataGridNode extends WebInspector.DataGridNode >+{ >+ constructor(text) >+ { >+ super({[WebInspector.SpanningDataGridNode.ColumnIdentifier]: text}); >+ } >+ >+ // Public >+ >+ createCells() >+ { >+ let cellElement = this.createCell(WebInspector.SpanningDataGridNode.ColumnIdentifier); >+ cellElement.classList.add("spanning"); >+ cellElement.setAttribute("colspan", this.dataGrid.columns.size); >+ >+ this.element.appendChild(cellElement); >+ } >+}; >+ >+WebInspector.SpanningDataGridNode.ColumnIdentifier = "spanning-text"; >diff --git a/Source/WebInspectorUI/UserInterface/Views/WebSocketContentView.js b/Source/WebInspectorUI/UserInterface/Views/WebSocketContentView.js >index 2383f64..b3b1b753 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/WebSocketContentView.js >+++ b/Source/WebInspectorUI/UserInterface/Views/WebSocketContentView.js >@@ -33,6 +33,7 @@ WebInspector.WebSocketContentView = class WebSocketContentView extends WebInspec > > this._resource = resource; > this._framesRendered = 0; >+ this._lastRenderedReadyState = null; > > // COMPATIBILITY (iOS 10.3): `walltime` did not exist in 10.3 and earlier. > this._showTimeColumn = NetworkAgent.hasEventParameter("webSocketWillSendHandshakeRequest", "walltime"); >@@ -81,12 +82,16 @@ WebInspector.WebSocketContentView = class WebSocketContentView extends WebInspec > shown() > { > this._updateFrames(); >+ this._updateState(); >+ > this._resource.addEventListener(WebInspector.WebSocketResource.Event.FrameAdded, this._updateFrames, this); >+ this._resource.addEventListener(WebInspector.WebSocketResource.Event.ReadyStateChanged, this._updateState, this); > } > > hidden() > { > this._resource.removeEventListener(WebInspector.WebSocketResource.Event.FrameAdded, this._updateFrames, this); >+ this._resource.removeEventListener(WebInspector.WebSocketResource.Event.ReadyStateChanged, this._updateState, this); > } > > addFrame(data, isOutgoing, opcode, time) >@@ -118,6 +123,17 @@ WebInspector.WebSocketContentView = class WebSocketContentView extends WebInspec > this._framesRendered = framesLength; > } > >+ _updateState(event) >+ { >+ if (this._lastRenderedReadyState === this._resource.readyState) >+ return; >+ >+ if (this._resource.readyState === WebInspector.WebSocketResource.ReadyState.Closed) >+ this._dataGrid.appendChild(new WebInspector.SpanningDataGridNode(WebInspector.UIString("Connection Closed"))); >+ >+ this._lastRenderedReadyState = this._resource.readyState; >+ } >+ > _addRow(data, time, classNames, isOutgoing) > { > let node; >diff --git a/Source/WebInspectorUI/UserInterface/Views/WebSocketResourceTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/WebSocketResourceTreeElement.js >new file mode 100644 >index 0000000..8964b75 >--- /dev/null >+++ b/Source/WebInspectorUI/UserInterface/Views/WebSocketResourceTreeElement.js >@@ -0,0 +1,72 @@ >+/* >+ * Copyright (C) 2017 Devin Rousso <webkit@devinrousso.com>. 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.WebSocketResourceTreeElement = class WebSocketResourceTreeElement extends WebInspector.ResourceTreeElement >+{ >+ // Overrides from TreeElement >+ >+ onattach() >+ { >+ super.onattach(); >+ >+ this._updateConnectionStatus(); >+ >+ this.resource.addEventListener(WebInspector.WebSocketResource.Event.ReadyStateChanged, this._updateConnectionStatus, this); >+ } >+ >+ ondetach() >+ { >+ super.ondetach(); >+ >+ this.resource.removeEventListener(WebInspector.WebSocketResource.Event.ReadyStateChanged, this._updateConnectionStatus, this); >+ } >+ >+ // Private >+ >+ _updateConnectionStatus() >+ { >+ switch (this.resource.readyState) { >+ case WebInspector.WebSocketResource.ReadyState.Closed: >+ this.status = ""; >+ break; >+ >+ case WebInspector.WebSocketResource.ReadyState.Connecting: >+ var connectionIndicatorElement = document.createElement("div"); >+ connectionIndicatorElement.classList.add("connecting"); >+ connectionIndicatorElement.title = WebInspector.UIString("Connecting"); >+ >+ this.status = connectionIndicatorElement; >+ break; >+ >+ case WebInspector.WebSocketResource.ReadyState.Open: >+ var connectionIndicatorElement = document.createElement("div"); >+ connectionIndicatorElement.classList.add("open"); >+ connectionIndicatorElement.title = WebInspector.UIString("Open"); >+ >+ this.status = connectionIndicatorElement; >+ break; >+ } >+ } >+}; >diff --git a/Source/WebInspectorUI/UserInterface/Views/XHRBreakpointTreeElement.js b/Source/WebInspectorUI/UserInterface/Views/XHRBreakpointTreeElement.js >index c7df165..fa31f21 100644 >--- a/Source/WebInspectorUI/UserInterface/Views/XHRBreakpointTreeElement.js >+++ b/Source/WebInspectorUI/UserInterface/Views/XHRBreakpointTreeElement.js >@@ -66,6 +66,8 @@ WebInspector.XHRBreakpointTreeElement = class XHRBreakpointTreeElement extends W > > ondetach() > { >+ super.ondetach(); >+ > this._statusImageElement.removeEventListener("click", this._boundStatusImageElementClicked); > this._statusImageElement.removeEventListener("focus", this._boundStatusImageElementFocused); > this._statusImageElement.removeEventListener("mousedown", this._boundStatusImageElementMouseDown);
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Formatted Diff
|
Diff
Attachments on
bug 168948
:
305070
|
305071
|
305261
|
305265
| 305289