[DevTools] Add request filter options for service workers

Bug: 780163, 853068
Change-Id: I5cb0001fbbfc800d5c99ac761fa58f353a698823
Reviewed-on: https://chromium-review.googlesource.com/c/1471217Reviewed-by: Erik Luo <luoe@chromium.org>
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Cr-Commit-Position: refs/heads/master@{#636292}

third_party/blink/renderer/devtools/front_end/network/NetworkLogView.js

@@ -254,6 +254,22 @@ Network.NetworkLogView = class extends UI.VBox {
     return request.cached();
   }
 
+  /**
+   * @param {!SDK.NetworkRequest} request
+   * @return {boolean}
+   */
+  static _interceptedByServiceWorkerFilter(request) {
+    return request.fetchedViaServiceWorker;
+  }
+
+  /**
+   * @param {!SDK.NetworkRequest} request
+   * @return {boolean}
+   */
+  static _initiatedByServiceWorkerFilter(request) {
+    return request.initiatedByServiceWorker();
+  }
+
   /**
    * @param {string} value
    * @param {!SDK.NetworkRequest} request
@@ -574,6 +590,10 @@ Network.NetworkLogView = class extends UI.VBox {
     this._suggestionBuilder.addItem(Network.NetworkLogView.FilterType.Is, Network.NetworkLogView.IsFilterType.Running);
     this._suggestionBuilder.addItem(
         Network.NetworkLogView.FilterType.Is, Network.NetworkLogView.IsFilterType.FromCache);
+    this._suggestionBuilder.addItem(
+        Network.NetworkLogView.FilterType.Is, Network.NetworkLogView.IsFilterType.ServiceWorkerIntercepted);
+    this._suggestionBuilder.addItem(
+        Network.NetworkLogView.FilterType.Is, Network.NetworkLogView.IsFilterType.ServiceWorkerInitiated);
     this._suggestionBuilder.addItem(Network.NetworkLogView.FilterType.LargerThan, '100');
     this._suggestionBuilder.addItem(Network.NetworkLogView.FilterType.LargerThan, '10k');
     this._suggestionBuilder.addItem(Network.NetworkLogView.FilterType.LargerThan, '1M');
@@ -1408,6 +1428,10 @@ Network.NetworkLogView = class extends UI.VBox {
           return Network.NetworkLogView._runningRequestFilter;
         if (value.toLowerCase() === Network.NetworkLogView.IsFilterType.FromCache)
           return Network.NetworkLogView._fromCacheRequestFilter;
+        if (value.toLowerCase() === Network.NetworkLogView.IsFilterType.ServiceWorkerIntercepted)
+          return Network.NetworkLogView._interceptedByServiceWorkerFilter;
+        if (value.toLowerCase() === Network.NetworkLogView.IsFilterType.ServiceWorkerInitiated)
+          return Network.NetworkLogView._initiatedByServiceWorkerFilter;
         break;
 
       case Network.NetworkLogView.FilterType.LargerThan:
@@ -1863,7 +1887,9 @@ Network.NetworkLogView.MixedContentFilterValues = {
 /** @enum {string} */
 Network.NetworkLogView.IsFilterType = {
   Running: 'running',
-  FromCache: 'from-cache'
+  FromCache: 'from-cache',
+  ServiceWorkerIntercepted: 'service-worker-intercepted',
+  ServiceWorkerInitiated: 'service-worker-initiated'
 };
 
 /** @type {!Array<string>} */

third_party/blink/renderer/devtools/front_end/sdk/NetworkRequest.js

@@ -469,10 +469,12 @@ SDK.NetworkRequest = class extends Common.Object {
   }
 
   /**
+   * Returns true if the request was intercepted by a service worker and it
+   * provided its own response.
    * @return {boolean}
    */
   get fetchedViaServiceWorker() {
-    return this._fetchedViaServiceWorker;
+    return !!this._fetchedViaServiceWorker;
   }
 
   /**
@@ -482,6 +484,18 @@ SDK.NetworkRequest = class extends Common.Object {
     this._fetchedViaServiceWorker = x;
   }
 
+  /**
+   * Returns true if the request was sent by a service worker.
+   * @return {boolean}
+   */
+  initiatedByServiceWorker() {
+    const networkManager = SDK.NetworkManager.forRequest(this);
+    if (!networkManager)
+      return false;
+    return networkManager.target().type() === SDK.Target.Type.Worker && !!networkManager.target().parentTarget() &&
+        networkManager.target().parentTarget().type() === SDK.Target.Type.ServiceWorker;
+  }
+
   /**
    * @return {!Protocol.Network.ResourceTiming|undefined}
    */

third_party/blink/web_tests/http/tests/devtools/network/network-filter-service-worker-expected.txt

+Tests service worker filters in network log.
+Page reloaded.
+
+filter text: ''
+url: http://127.0.0.1:8000/devtools/network/resources/service-worker-flagged-requests.html
+  fetchedViaServiceWorker: true
+  initiatedByServiceWorker: false
+url: http://127.0.0.1:8000/devtools/network/resources/service-worker-flagged-requests.html
+  fetchedViaServiceWorker: false
+  initiatedByServiceWorker: true
+url: http://127.0.0.1:8000/devtools/network/resources/abe.png
+  fetchedViaServiceWorker: true
+  initiatedByServiceWorker: false
+url: http://127.0.0.1:8000/devtools/network/resources/abe.png
+  fetchedViaServiceWorker: false
+  initiatedByServiceWorker: true
+url: http://127.0.0.1:8000/devtools/network/resources/sw-cached-resource.txt
+  fetchedViaServiceWorker: true
+  initiatedByServiceWorker: false
+url: http://127.0.0.1:8000/devtools/network/resources/sw-dropped-resource.txt
+  fetchedViaServiceWorker: false
+  initiatedByServiceWorker: false
+
+filter text: 'is:service-worker-intercepted'
+url: http://127.0.0.1:8000/devtools/network/resources/service-worker-flagged-requests.html
+  fetchedViaServiceWorker: true
+  initiatedByServiceWorker: false
+url: http://127.0.0.1:8000/devtools/network/resources/abe.png
+  fetchedViaServiceWorker: true
+  initiatedByServiceWorker: false
+url: http://127.0.0.1:8000/devtools/network/resources/sw-cached-resource.txt
+  fetchedViaServiceWorker: true
+  initiatedByServiceWorker: false
+
+filter text: '-is:service-worker-intercepted'
+url: http://127.0.0.1:8000/devtools/network/resources/service-worker-flagged-requests.html
+  fetchedViaServiceWorker: false
+  initiatedByServiceWorker: true
+url: http://127.0.0.1:8000/devtools/network/resources/abe.png
+  fetchedViaServiceWorker: false
+  initiatedByServiceWorker: true
+url: http://127.0.0.1:8000/devtools/network/resources/sw-dropped-resource.txt
+  fetchedViaServiceWorker: false
+  initiatedByServiceWorker: false
+
+filter text: 'is:service-worker-initiated'
+url: http://127.0.0.1:8000/devtools/network/resources/service-worker-flagged-requests.html
+  fetchedViaServiceWorker: false
+  initiatedByServiceWorker: true
+url: http://127.0.0.1:8000/devtools/network/resources/abe.png
+  fetchedViaServiceWorker: false
+  initiatedByServiceWorker: true
+
+filter text: '-is:service-worker-initiated'
+url: http://127.0.0.1:8000/devtools/network/resources/service-worker-flagged-requests.html
+  fetchedViaServiceWorker: true
+  initiatedByServiceWorker: false
+url: http://127.0.0.1:8000/devtools/network/resources/abe.png
+  fetchedViaServiceWorker: true
+  initiatedByServiceWorker: false
+url: http://127.0.0.1:8000/devtools/network/resources/sw-cached-resource.txt
+  fetchedViaServiceWorker: true
+  initiatedByServiceWorker: false
+url: http://127.0.0.1:8000/devtools/network/resources/sw-dropped-resource.txt
+  fetchedViaServiceWorker: false
+  initiatedByServiceWorker: false
+
+

third_party/blink/web_tests/http/tests/devtools/network/network-filter-service-worker.js

+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+(async function() {
+  TestRunner.addResult('Tests service worker filters in network log.');
+  await TestRunner.loadModule('application_test_runner');
+  await TestRunner.loadModule('network_test_runner');
+  await ApplicationTestRunner.resetState();
+  await TestRunner.showPanel('network');
+
+  const swActivatedPromise = new Promise(resolve => {
+    TestRunner.mainTarget.registerServiceWorkerDispatcher({
+      workerRegistrationUpdated: function(registrations) {},
+      workerErrorReported: function(errorMessage) {},
+      /**
+       * @param {!Array<!Protocol.ServiceWorker.ServiceWorkerVersion>} versions
+       */
+      workerVersionUpdated: function(versions) {
+        if (versions.length && versions[0].status === 'activated')
+          resolve();
+      }
+    });
+  });
+
+  await TestRunner.navigatePromise(
+      'resources/service-worker-flagged-requests.html');
+  await swActivatedPromise;
+  await TestRunner.reloadPagePromise();
+  TestRunner.addResult('');
+
+  await TestRunner.evaluateInPageAsync(
+      `fetch('/devtools/network/resources/abe.png')`);
+  await TestRunner.evaluateInPageAsync(
+      `fetch('/devtools/network/resources/sw-cached-resource.txt')`);
+  await TestRunner.evaluateInPageAsync(
+      `fetch('/devtools/network/resources/sw-dropped-resource.txt')`);
+
+  const filterChecks = [
+    '',
+    'is:service-worker-intercepted',
+    '-is:service-worker-intercepted',
+    'is:service-worker-initiated',
+    '-is:service-worker-initiated',
+  ];
+
+  for (const filterText of filterChecks) {
+    TestRunner.addResult(`filter text: '${filterText}'`);
+    UI.panels.network._networkLogView._textFilterUI.setValue(filterText);
+    UI.panels.network._networkLogView._filterChanged(/* event */ null);
+
+    for (const node of UI.panels.network._networkLogView.flatNodesList()) {
+      if (node[Network.NetworkLogView._isFilteredOutSymbol])
+        continue;
+
+      const request = node.requestOrFirstKnownChildRequest();
+      if (request.url().includes('service-worker-flagged-requests.js')) {
+        // Skip requests to update the service worker that show up sometimes
+        continue;
+      }
+
+      TestRunner.addResult('url: ' + request.url());
+      TestRunner.addResult(
+          '  fetchedViaServiceWorker: ' + request.fetchedViaServiceWorker);
+      TestRunner.addResult(
+          '  initiatedByServiceWorker: ' + request.initiatedByServiceWorker());
+    }
+    TestRunner.addResult('');
+  }
+
+  TestRunner.completeTest();
+})();

third_party/blink/web_tests/http/tests/devtools/network/resources/service-worker-flagged-requests.html

+<!DOCTYPE html>
+<html>
+  <head>
+<script>
+function installSW() {
+  navigator.serviceWorker.register('service-worker-flagged-requests.js');
+}
+</script>
+  </head>
+  <body onload="installSW()"></body>
+</html>

third_party/blink/web_tests/http/tests/devtools/network/resources/service-worker-flagged-requests.js

+this.addEventListener('fetch', fetchEvent => {
+  if (fetchEvent.request.url.includes('sw-dropped-resource.txt'))
+    return;
+
+  fetchEvent.respondWith(caches.match(fetchEvent.request).then(response => {
+    return response || fetch(fetchEvent.request);
+  }));
+});
+
+this.addEventListener('install', installEvent => {
+  installEvent.waitUntil(caches.open('test-cache-name').then(function(cache) {
+    return cache.addAll(['/devtools/network/resources/sw-cached-resource.txt']);
+  }));
+});

third_party/blink/web_tests/http/tests/devtools/network/resources/sw-cached-resource.txt

+this resource should be cached by a service worker

third_party/blink/web_tests/http/tests/devtools/network/resources/sw-dropped-resource.txt

+this resource should not be intercepted by a service worker