Web Inspector: group media network entries by the node that triggered the request
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 8 Oct 2018 18:25:52 +0000 (18:25 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 8 Oct 2018 18:25:52 +0000 (18:25 +0000)
commit1996e60889bdbf8b2cd92a96b0559e9ffb2bb705
tree2f4e75d9d6fc613b47602e6386f16f173a6a33f8
parent7b3c15ec97d5e87f71f68ae8ff8b484b8765e9b4
Web Inspector: group media network entries by the node that triggered the request
https://bugs.webkit.org/show_bug.cgi?id=189606
<rdar://problem/44438527>

Reviewed by Brian Burg.

Source/JavaScriptCore:

* inspector/protocol/Network.json:
Add an optional `nodeId` field to the `Initiator` object that is set it is possible to
determine which ancestor node triggered the load. It may not correspond directly to the node
with the href/src, as that url may only be used by an ancestor for loading.

Source/WebCore:

Test: http/tests/inspector/network/resource-initiatorNode.html

Add extra arguments to functions that create `ResourceRequest` objects for media resources so
that `initiatorNodeIdentifier` can be set for WebInspector frontend to use for grouping.

* html/HTMLMediaElement.cpp:
(WebCore::HTMLMediaElement::loadResource):
* html/HTMLVideoElement.cpp:
(WebCore::HTMLVideoElement::setDisplayMode):
* loader/FrameLoader.h:
* loader/FrameLoader.cpp:
(WebCore::FrameLoader::willLoadMediaElementURL):
Handles initial (e.g. DNT) resource requests.

* loader/ImageLoader.cpp:
(ImageLoader::updateFromElement):
Handles "poster" requests.

* loader/MediaResourceLoader.cpp:
(MediaResourceLoader::requestResource):
Handles byte-range requests.

* html/track/LoadableTextTrack.cpp:
(WebCore::LoadableTextTrack::loadTimerFired):
* loader/TextTrackLoader.h:
* loader/TextTrackLoader.cpp:
(WebCore::TextTrackLoader::load):
* html/HTMLTrackElement.h:
Handles <track> (e.g. subtitle) requests.

* inspector/agents/InspectorDOMAgent.cpp:
(WebCore::InspectorDOMAgent::identifierForNode):
* inspector/InspectorInstrumentation.h:
(WebCore::InspectorInstrumentation::identifierForNode):
* inspector/InspectorInstrumentation.cpp:
(WebCore::InspectorInstrumentation::identifierForNodeImpl):
Allows callers to get a `DOM.nodeId` for the given `Node`, which is (in this patch) attached
to the `ResourceRequest` and later used by `InspectorNetworkAgent`.

* inspector/agents/InspectorNetworkAgent.h:
* inspector/agents/InspectorNetworkAgent.cpp:
(WebCore::InspectorNetworkAgent::willSendRequest):
(WebCore::InspectorNetworkAgent::didLoadResourceFromMemoryCache):
(WebCore::InspectorNetworkAgent::buildInitiatorObject):

* platform/network/ResourceRequestBase.h:
(WebCore::ResourceRequestBase::initiatorNodeIdentifier const):
(WebCore::ResourceRequestBase::setInitiatorNodeIdentifier):
* platform/network/ResourceRequestBase.cpp:
(WebCore::ResourceRequestBase::setAsIsolatedCopy):
* platform/network/cf/ResourceRequestCFNet.cpp:
(WebCore::ResourceRequest::updateFromDelegatePreservingOldProperties):
* loader/cache/CachedResourceLoader.cpp:
(WebCore::CachedResourceLoader::shouldContinueAfterNotifyingLoadedFromMemoryCache):

* inspector/InspectorCanvas.h:
* inspector/InspectorCanvas.cpp:
(WebCore::InspectorCanvas::buildObjectForCanvas):
* inspector/agents/InspectorCanvasAgent.cpp:
(WebCore::InspectorCanvasAgent::enable):
(WebCore::InspectorCanvasAgent::didCreateCanvasRenderingContext):
Don't try to push the canvas' node to the frontend, as this will create a dangling node in
`InspectorDOMAgent` if the canvas' node is detached from the DOM.

Source/WebInspectorUI:

Introduces a `WI.NavigationItem` for changing whether network entries are grouped by the
node that initiated the load (if applicable). When grouped by node, a tree-like layout of
the table cells (including expand/collapse) is used for resources that share the same
initiator node. The values for the node's cell are based on it's initated resources.

* Localizations/en.lproj/localizedStrings.js:
* UserInterface/Base/Setting.js:

* UserInterface/Controllers/DOMManager.js:
(WI.DOMManager):
(WI.DOMManager.prototype._mainResourceDidChange): Added.
Whenever the frame navigates, re-request the document so that `NetworkAgent` is able to send
valid `nodeId` for each request's `initiatorNode`. This means that the document should
always be available.

* UserInterface/Views/NetworkTableContentView.js:
(WI.NetworkTableContentView):
(WI.NetworkTableContentView.prototype.get filterNavigationItems):
(WI.NetworkTableContentView.prototype.closed):
(WI.NetworkTableContentView.prototype.reset):
(WI.NetworkTableContentView.prototype.tableSortChanged):
(WI.NetworkTableContentView.prototype.tableSelectedRowChanged):
(WI.NetworkTableContentView.prototype.tablePopulateCell):
(WI.NetworkTableContentView.prototype._populateNameCell.createIconElement): Added.
(WI.NetworkTableContentView.prototype._populateNameCell):
(WI.NetworkTableContentView.prototype._populateDomainCell.createIconAndText): Added.
(WI.NetworkTableContentView.prototype._populateDomainCell):
(WI.NetworkTableContentView.prototype._populateInitiatorCell):
(WI.NetworkTableContentView.prototype._populateTransferSizeCell):
(WI.NetworkTableContentView.prototype._generateSortComparator):
(WI.NetworkTableContentView.prototype._processPendingEntries):
(WI.NetworkTableContentView.prototype._updateEntryForResource.updateExistingEntry): Added.
(WI.NetworkTableContentView.prototype._updateEntryForResource):
(WI.NetworkTableContentView.prototype._insertResourceAndReloadTable):
(WI.NetworkTableContentView.prototype._entryForDOMNode): Added.
(WI.NetworkTableContentView.prototype._tryLinkResourceToDOMNode): Added.
(WI.NetworkTableContentView.prototype._uniqueValuesForDOMNodeEntry): Added.
(WI.NetworkTableContentView.prototype._updateFilteredEntries):
(WI.NetworkTableContentView.prototype._handleGroupByDOMNodeCheckedDidChange): Added.
* UserInterface/Views/NetworkTableContentView.css:
(.network-table .cell.dom-node.name .icon): Added.
(.network-table .cell.dom-node.name .disclosure): Added.
(body[dir=rtl] .network-table .cell.dom-node.name .disclosure): Added.
(.network-table:focus li.selected .cell.dom-node.name .disclosure): Added.
(.network-table .cell.dom-node.name .disclosure.expanded): Added.
(.network-table:focus li.selected .cell.node.name .disclosure.expanded): Added.
(.network-table .cell.grouped-by-node.name): Added.
(body[dir=ltr] .network-table .cell.grouped-by-node.name): Added.
(body[dir=rtl] .network-table .cell.grouped-by-node.name): Added.
(.network-table li:not(.selected) .cell:matches(.cache-type, .multiple)): Added.
(.network-table li.selected .cell.domain > .lock): Added.
(.network-table .cache-type): Deleted.
When two resources are added that share the same `initiatorNode`, insert a node entry into
the `WI.Table` before the first resource entry for that node (based on the current sort).
This node entry is added after the resource entries are filtered, so they won't appear in
the default entries list.

* UserInterface/Models/Resource.js:
(WI.Resource):
(WI.Resource.prototype.initiatorNode): Added.
(WI.Resource.prototype.requestedByteRange): Added.
* UserInterface/Controllers/NetworkManager.js:
(WI.NetworkManager.prototype.resourceRequestWillBeSent):
(WI.NetworkManager.prototype.resourceRequestWasServedFromMemoryCache):
(WI.NetworkManager.prototype._initiatorNodeFromPayload): Added.

* UserInterface/Images/Range.svg: Added.
* UserInterface/Views/ResourceIcons.css:
(.resource-icon.resource-type-range .icon): Added.

LayoutTests:

* http/tests/inspector/network/resource-initiatorNode-expected.txt: Added.
* http/tests/inspector/network/resource-initiatorNode.html: Added.

* inspector/canvas/requestNode.html:
Test case no longer needed since the document is always requested once it's available.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@236927 268f45cc-cd09-0410-ab3c-d52691b4dbfc
44 files changed:
LayoutTests/ChangeLog
LayoutTests/http/tests/inspector/network/resource-initiatorNode-expected.txt [new file with mode: 0644]
LayoutTests/http/tests/inspector/network/resource-initiatorNode.html [new file with mode: 0644]
LayoutTests/http/tests/inspector/network/resources/white.mp4 [new file with mode: 0644]
LayoutTests/http/tests/inspector/network/resources/white.png [new file with mode: 0644]
LayoutTests/http/tests/inspector/network/resources/white.vtt [new file with mode: 0644]
LayoutTests/inspector/canvas/requestNode-expected.txt
LayoutTests/inspector/canvas/requestNode.html
Source/JavaScriptCore/ChangeLog
Source/JavaScriptCore/inspector/protocol/Network.json
Source/WebCore/ChangeLog
Source/WebCore/html/HTMLMediaElement.cpp
Source/WebCore/html/HTMLTrackElement.h
Source/WebCore/html/HTMLVideoElement.cpp
Source/WebCore/html/track/LoadableTextTrack.cpp
Source/WebCore/inspector/InspectorCanvas.cpp
Source/WebCore/inspector/InspectorCanvas.h
Source/WebCore/inspector/InspectorInstrumentation.cpp
Source/WebCore/inspector/InspectorInstrumentation.h
Source/WebCore/inspector/agents/InspectorCanvasAgent.cpp
Source/WebCore/inspector/agents/InspectorDOMAgent.cpp
Source/WebCore/inspector/agents/InspectorDOMAgent.h
Source/WebCore/inspector/agents/InspectorNetworkAgent.cpp
Source/WebCore/inspector/agents/InspectorNetworkAgent.h
Source/WebCore/loader/FrameLoader.cpp
Source/WebCore/loader/FrameLoader.h
Source/WebCore/loader/ImageLoader.cpp
Source/WebCore/loader/MediaResourceLoader.cpp
Source/WebCore/loader/TextTrackLoader.cpp
Source/WebCore/loader/TextTrackLoader.h
Source/WebCore/loader/cache/CachedResourceLoader.cpp
Source/WebCore/platform/network/ResourceRequestBase.cpp
Source/WebCore/platform/network/ResourceRequestBase.h
Source/WebCore/platform/network/cf/ResourceRequestCFNet.cpp
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
Source/WebInspectorUI/UserInterface/Base/Setting.js
Source/WebInspectorUI/UserInterface/Controllers/DOMManager.js
Source/WebInspectorUI/UserInterface/Controllers/NetworkManager.js
Source/WebInspectorUI/UserInterface/Images/Range.svg [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Models/Resource.js
Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.css
Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js
Source/WebInspectorUI/UserInterface/Views/ResourceIcons.css