Bug 179642 – ServiceWorker Inspector: Frontend changes to support Network tab and sub resources

• Component: Web Inspector
• Status: RESOLVED FIXED

[Joseph Pecoraro]

ServiceWorker Inspector: Frontend changes to support Network tab and sub resources

Network Tab:
- Should show requests made by the ServiceWorker

Resource Tab: (UI like a Dedicated Worker)
- Should show sub-resources loaded by the ServiceWorker
- Should categorize the sub-resources underneath the ServiceWorker component

[Radar WebKit Bug Importer]

<rdar://problem/35517704>

[Joseph Pecoraro]

Created attachment 327258 [details]
[PATCH] Proposed Fix

There are a few things I want to address in follow-ups:

1. Image resources added via CacheStorage.prototype.add / fetch() don't show up properly
  - this is essentially pre-existing bad behavior for fetching any binary content

2. Metrics data is not included
  - this requires enabling ResourceTiming in ServiceWorkers, which I'll be looking into

[Joseph Pecoraro]

Created attachment 327259 [details]
[IMAGE] Resources Tab

[Joseph Pecoraro]

Created attachment 327260 [details]
[IMAGE] Network Tab - Table

[Joseph Pecoraro]

Created attachment 327261 [details]
[IMAGE] Network Tab - Detail

[Joseph Pecoraro]

Note that the ResponseSource is an emdash right now, that is related to the other metrics that will be enabled with ResourceTiming.

[EWS Watchlist]

Comment on attachment 327258 [details]
[PATCH] Proposed Fix

Attachment 327258 [details] did not pass mac-ews (mac):
Output: http://webkit-queues.webkit.org/results/5282736

New failing tests:
http/tests/inspector/network/resource-metrics.html
http/tests/inspector/network/fetch-response-body.html
http/tests/inspector/network/set-resource-caching-disabled-disk-cache.html
http/tests/inspector/network/resource-timing.html
http/tests/inspector/network/resource-response-source-network.html
http/tests/inspector/network/fetch-network-data.html
inspector/worker/resources-in-worker.html
inspector/network/xhr-json-blob-has-content.html
http/tests/inspector/network/resource-response-source-memory-cache.html
http/tests/inspector/network/xhr-request-data-encoded-correctly.html
inspector/dom-debugger/xhr-breakpoints.html
http/tests/inspector/network/set-resource-caching-disabled-memory-cache.html
http/tests/inspector/network/copy-as-curl.html
inspector/debugger/breakpoints/resolved-dump-all-pause-locations.html
http/tests/inspector/network/xhr-response-body.html
inspector/unit-tests/target-manager.html
http/tests/inspector/network/resource-response-source-memory-cache-revalidate-expired-only.html
http/tests/inspector/network/resource-mime-type.html
inspector/model/script-resource-relationship.html

[EWS Watchlist]

Created attachment 327274 [details]
Archive of layout-test-results from ews100 for mac-elcapitan

The attached test failures were seen while running run-webkit-tests on the mac-ews.
Bot: ews100  Port: mac-elcapitan  Platform: Mac OS X 10.11.6

[EWS Watchlist]

Comment on attachment 327258 [details]
[PATCH] Proposed Fix

Attachment 327258 [details] did not pass mac-debug-ews (mac):
Output: http://webkit-queues.webkit.org/results/5283058

New failing tests:
http/tests/inspector/network/resource-metrics.html
inspector/unit-tests/target-manager.html
http/tests/inspector/network/fetch-response-body.html
http/tests/inspector/network/set-resource-caching-disabled-disk-cache.html
http/tests/inspector/network/resource-timing.html
http/tests/inspector/network/resource-response-source-network.html
http/tests/inspector/network/fetch-network-data.html
http/tests/inspector/network/set-resource-caching-disabled-memory-cache.html
inspector/model/script-resource-relationship.html
http/tests/inspector/network/xhr-request-data-encoded-correctly.html
http/tests/inspector/network/copy-as-curl.html
inspector/network/xhr-json-blob-has-content.html
http/tests/inspector/network/resource-mime-type.html
http/tests/inspector/network/xhr-response-body.html
http/tests/inspector/network/resource-response-source-memory-cache.html
http/tests/inspector/network/resource-response-source-memory-cache-revalidate-expired-only.html
inspector/dom-debugger/xhr-breakpoints.html

[EWS Watchlist]

Created attachment 327282 [details]
Archive of layout-test-results from ews114 for mac-elcapitan

The attached test failures were seen while running run-webkit-tests on the mac-debug-ews.
Bot: ews114  Port: mac-elcapitan  Platform: Mac OS X 10.11.6

[EWS Watchlist]

Comment on attachment 327258 [details]
[PATCH] Proposed Fix

Attachment 327258 [details] did not pass mac-wk2-ews (mac-wk2):
Output: http://webkit-queues.webkit.org/results/5283949

New failing tests:
http/tests/inspector/network/resource-metrics.html
http/tests/inspector/network/resource-response-service-worker.html
http/tests/inspector/network/fetch-response-body.html
http/tests/inspector/network/set-resource-caching-disabled-disk-cache.html
http/tests/inspector/network/set-resource-caching-disabled-memory-cache.html
inspector/unit-tests/target-manager.html
http/tests/inspector/network/resource-mime-type.html
http/tests/inspector/network/resource-sizes-disk-cache.html
http/tests/inspector/network/resource-timing.html
http/tests/inspector/network/resource-response-source-memory-cache.html
http/tests/inspector/network/copy-as-curl.html
http/tests/inspector/network/xhr-response-body.html
http/tests/inspector/network/resource-response-source-network.html
inspector/worker/resources-in-worker.html
inspector/network/xhr-json-blob-has-content.html
inspector/model/script-resource-relationship.html
http/tests/inspector/network/xhr-request-data-encoded-correctly.html
inspector/debugger/breakpoints/resolved-dump-all-pause-locations.html
http/tests/inspector/network/resource-response-source-memory-cache-revalidate-expired-only.html
http/tests/inspector/network/fetch-network-data.html
http/tests/inspector/network/resource-response-source-disk-cache.html
http/tests/inspector/network/resource-sizes-network.html
inspector/dom-debugger/xhr-breakpoints.html

[EWS Watchlist]

Created attachment 327287 [details]
Archive of layout-test-results from ews107 for mac-elcapitan-wk2

The attached test failures were seen while running run-webkit-tests on the mac-wk2-ews.
Bot: ews107  Port: mac-elcapitan-wk2  Platform: Mac OS X 10.11.6

[Joseph Pecoraro]

Created attachment 327713 [details]
[PATCH] Proposed Fix

I was missing `WI.pageTarget` in Test.js

[Blaze Burg]

Comment on attachment 327713 [details]
[PATCH] Proposed Fix

View in context: https://bugs.webkit.org/attachment.cgi?id=327713&action=review

r=me

> Source/WebInspectorUI/UserInterface/Controllers/FrameResourceManager.js:522
> +            if (type === "Document" && frame.mainResource.url === url && frame.loaderIdentifier === loaderIdentifier)

I'd prefer we move the enum somewhere else, rather than rely on bare string literals. Could it go on NetworkAgent? This can be a followup if it gets messy.

> Source/WebInspectorUI/UserInterface/Controllers/FrameResourceManager.js:524
> +            else if (type === "Document" && frame.provisionalMainResource && frame.provisionalMainResource.url === url && frame.provisionalLoaderIdentifier === loaderIdentifier)

Ditto.

> Source/WebInspectorUI/UserInterface/Controllers/FrameResourceManager.js:710
> +            if (resourcePayload.type === "Document" && resourcePayload.url === payload.frame.url)

Ditto.

> Source/WebInspectorUI/UserInterface/Models/Resource.js:98
> +    static preferredType(type, mimeType)

This name is somewhat vague.

> Source/WebInspectorUI/UserInterface/Protocol/Connection.js:275
> +InspectorBackend.MainConnection = class InspectorBackendMainConnection extends InspectorBackend.Connection

OK

> Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js:876
> +        let populateTargetResources = (target) => {

Nit: I would use Cocoa style naming, populateResourcesForFrame() populateResourcesForTarget()

[Joseph Pecoraro]

Comment on attachment 327713 [details]
[PATCH] Proposed Fix

View in context: https://bugs.webkit.org/attachment.cgi?id=327713&action=review

>> Source/WebInspectorUI/UserInterface/Controllers/FrameResourceManager.js:522
>> +            if (type === "Document" && frame.mainResource.url === url && frame.loaderIdentifier === loaderIdentifier)
> 
> I'd prefer we move the enum somewhere else, rather than rely on bare string literals. Could it go on NetworkAgent? This can be a followup if it gets messy.

Yeah, we will want to move this to Network eventually. At this point Network should be considered the base and Page / ServiceWorker are disjoint and both would have a Network component.

>> Source/WebInspectorUI/UserInterface/Models/Resource.js:98
>> +    static preferredType(type, mimeType)
> 
> This name is somewhat vague.

Hmm, would bestType() or mostSpecificType() be better? This is something I'm going to be circling back to as I try to make an XHR/Fetch of an Image resource show properly.

>> Source/WebInspectorUI/UserInterface/Views/NetworkTableContentView.js:876
>> +        let populateTargetResources = (target) => {
> 
> Nit: I would use Cocoa style naming, populateResourcesForFrame() populateResourcesForTarget()

I like that suggestion.

[Joseph Pecoraro]

<https://trac.webkit.org/r225244>