Bug 1333994 - The network tab should flag resources on the tracking protection list; r=ochameau

Differential Revision: https://phabricator.services.mozilla.com/D3862

--HG--
extra : moz-landing-system : lando

devtools/client/jar.mn

@@ -303,6 +303,7 @@ devtools.jar:
     content/netmonitor/src/assets/styles/Toolbar.css (netmonitor/src/assets/styles/Toolbar.css)
     content/netmonitor/src/assets/styles/variables.css (netmonitor/src/assets/styles/variables.css)
     content/netmonitor/src/assets/icons/play.svg (netmonitor/src/assets/icons/play.svg)
+    content/netmonitor/src/assets/icons/shield.svg (netmonitor/src/assets/icons/shield.svg)
     content/netmonitor/index.html (netmonitor/index.html)
 
     # Application panel

devtools/client/locales/en-US/netmonitor.properties

@@ -868,6 +868,10 @@ netmonitor.security.connection=Connection:
 # in the security tab describing the server certificate section.
 netmonitor.security.certificate=Certificate:
 
+# LOCALIZATION NOTE (netmonitor.trackingResource.tooltip): This is the label used
+# in the Network monitor panel as a tooltip for tracking resource icon.
+netmonitor.trackingResource.tooltip=This URL matches a known tracker and it would be blocked with Content Blocking enabled.
+
 # LOCALIZATION NOTE (netmonitor.context.copy): This is the label displayed
 # for the copy sub-menu in the context menu for a request
 netmonitor.context.copy=Copy

devtools/client/netmonitor/src/assets/icons/shield.svg

@@ -0,0 +1,7 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <defs><style>.cls-1{fill:#737373;}</style></defs>
+  <path class="cls-1" d="M12.08,7.21a7.27,7.27,0,0,1-1.39,4.18A4.42,4.42,0,0,1,8,13.07a4.48,4.48,0,0,1-2.29-1.21l-.65.65A5.17,5.17,0,0,0,7.94,14h.11a5.22,5.22,0,0,0,3.38-2.05A8.16,8.16,0,0,0,13,7.29c.05-.61.07-1.85.07-2.79l-.93.93C12.13,6.11,12.12,6.81,12.08,7.21Z"/><path class="cls-1" d="M8,11.84V9.57L6.65,10.92A2.87,2.87,0,0,0,8,11.84Zm5.86-9.7a.46.46,0,0,0-.65,0l-.73.72A1.3,1.3,0,0,0,12,2.69L8,2,4,2.69a1.24,1.24,0,0,0-1,1.23c0,.93,0,2.62.07,3.37a8.69,8.69,0,0,0,1.11,4l-2,2a.46.46,0,1,0,.65.66h0L13.86,2.79A.46.46,0,0,0,13.86,2.14ZM5.23,4.67c0,1,0,1.83.07,2.21a9.66,9.66,0,0,0,.52,2.65l-1,1a8.12,8.12,0,0,1-.87-3.35c-.07-.74-.07-2.55-.07-3.29A.32.32,0,0,1,4.1,3.6L8,2.93l3.77.65L8,7.35V4.19Z"/>
+</svg>

devtools/client/netmonitor/src/assets/styles/RequestList.css

@@ -386,6 +386,16 @@
   background-image: url(chrome://devtools/skin/images/globe.svg);
 }
 
+.tracking-resource {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  margin: 0 3px 0 -3px;
+  vertical-align: text-bottom;
+  background-image: url(chrome://devtools/content/netmonitor/src/assets/icons/shield.svg);
+  background-repeat: no-repeat;
+}
+
 /* RemoteIP column */
 
 .requests-list-remoteip {

devtools/client/netmonitor/src/components/RequestListColumnDomain.js

@@ -55,6 +55,10 @@ class RequestListColumnDomain extends Component {
           onMouseDown: onSecurityIconMouseDown,
           title: iconTitle,
         }),
+        item.isTrackingResource && div({
+          className: "tracking-resource",
+          title: L10N.getStr("netmonitor.trackingResource.tooltip"),
+        }),
         host,
       )
     );

devtools/client/netmonitor/src/connector/firefox-data-provider.js

@@ -71,6 +71,7 @@ class FirefoxDataProvider {
       startedDateTime,
       fromCache,
       fromServiceWorker,
+      isTrackingResource,
     } = data;
 
     if (this.actionsEnabled && this.actions.addRequest) {
@@ -89,6 +90,7 @@ class FirefoxDataProvider {
 
         fromCache,
         fromServiceWorker,
+        isTrackingResource,
       }, true);
     }
 
@@ -323,6 +325,7 @@ class FirefoxDataProvider {
         url,
       },
       startedDateTime,
+      isTrackingResource,
     } = networkInfo;
 
     await this.addRequest(actor, {
@@ -333,6 +336,7 @@ class FirefoxDataProvider {
       method,
       startedDateTime,
       url,
+      isTrackingResource,
     });
 
     this.emit(EVENTS.NETWORK_EVENT, actor);
@@ -351,7 +355,9 @@ class FirefoxDataProvider {
 
     switch (updateType) {
       case "securityInfo":
-        this.pushRequestToQueue(actor, { securityState: networkInfo.securityState });
+        this.pushRequestToQueue(actor, {
+          securityState: networkInfo.securityState
+        });
         break;
       case "responseStart":
         this.pushRequestToQueue(actor, {

devtools/client/netmonitor/src/constants.js

@@ -146,6 +146,7 @@ const UPDATE_PROPS = [
   "responseCacheAvailable",
   "formDataSections",
   "stacktrace",
+  "isTrackingResource",
 ];
 
 const PANELS = {

devtools/client/netmonitor/test/browser.ini

@@ -37,6 +37,7 @@ support-files =
   html_sorting-test-page.html
   html_statistics-test-page.html
   html_status-codes-test-page.html
+  html_tracking-protection.html
   html_api-calls-test-page.html
   html_copy-as-curl.html
   html_curl-utils.html
@@ -194,6 +195,7 @@ skip-if = true # Bug 1373558
 [browser_net_timeline_ticks.js]
 skip-if = true # TODO: fix the test
 [browser_net_timing-division.js]
+[browser_net_tracking-resources.js]
 [browser_net_truncate.js]
 [browser_net_view-source-debugger.js]
 [browser_net_waterfall-click.js]

devtools/client/netmonitor/test/browser_net_tracking-resources.js

@@ -0,0 +1,39 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const { UrlClassifierTestUtils } =
+  ChromeUtils.import("resource://testing-common/UrlClassifierTestUtils.jsm", {});
+
+const TEST_URI = "http://tracking.example.org/browser/devtools/client/" +
+                 "netmonitor/test/html_tracking-protection.html";
+
+registerCleanupFunction(function() {
+  UrlClassifierTestUtils.cleanupTestTrackers();
+});
+
+/**
+ * Test that tracking resources are properly marked in the Network panel.
+ */
+add_task(async function() {
+  await UrlClassifierTestUtils.addTestTrackers();
+
+  const { tab, monitor } = await initNetMonitor(TEST_URI);
+  info("Starting  test...");
+
+  const { document, store, windowRequire } = monitor.panelWin;
+  const Actions = windowRequire("devtools/client/netmonitor/src/actions/index");
+
+  store.dispatch(Actions.batchEnable(false));
+
+  // Reload the page
+  const wait = waitForAllRequestsFinished(monitor);
+  tab.linkedBrowser.reload();
+  await wait;
+
+  const requests = document.querySelectorAll(".request-list-item .tracking-resource");
+  is(requests.length, 1, "There should be one tracking request");
+
+  await teardown(monitor);
+});

devtools/client/netmonitor/test/html_tracking-protection.html

@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<html dir="ltr" xml:lang="en-US" lang="en-US">
+  <head>
+    <meta charset="utf8">
+  </head>
+  <body>
+    <iframe src="http://tracking.example.com/"></iframe>
+  </body>
+</html>

devtools/client/webconsole/test/fixtures/stubs/networkEvent.js

@@ -266,6 +266,7 @@ stubPackets.set(`GET request`, {
   "timings": {},
   "updates": [],
   "private": false,
+  "isTrackingResource": false,
   "from": "server1.conn0.child1/consoleActor2"
 });
 
@@ -317,6 +318,7 @@ stubPackets.set(`XHR GET request`, {
   "timings": {},
   "updates": [],
   "private": false,
+  "isTrackingResource": false,
   "from": "server1.conn1.child1/consoleActor2"
 });
 
@@ -368,6 +370,7 @@ stubPackets.set(`XHR POST request`, {
   "timings": {},
   "updates": [],
   "private": false,
+  "isTrackingResource": false,
   "from": "server1.conn2.child1/consoleActor2"
 });
 

devtools/server/actors/network-event.js

@@ -65,6 +65,7 @@ const NetworkEventActor = protocol.ActorClassWithSpec(networkEventSpec, {
       fromCache: this._fromCache,
       fromServiceWorker: this._fromServiceWorker,
       private: this._private,
+      isTrackingResource: this._isTrackingResource,
     };
   },
 
@@ -103,6 +104,7 @@ const NetworkEventActor = protocol.ActorClassWithSpec(networkEventSpec, {
     this._cause = networkEvent.cause;
     this._fromCache = networkEvent.fromCache;
     this._fromServiceWorker = networkEvent.fromServiceWorker;
+    this._isTrackingResource = networkEvent.isTrackingResource;
     this._channelId = networkEvent.channelId;
 
     // Stack trace info isn't sent automatically. The client

devtools/server/actors/network-monitor/network-observer.js

@@ -313,7 +313,7 @@ NetworkObserver.prototype = {
     this.openResponses.set(channel, response);
 
     if (topic === "http-on-examine-cached-response") {
-      // Service worker requests emits cached-reponse notification on non-e10s,
+      // Service worker requests emits cached-response notification on non-e10s,
       // and we fake one on e10s.
       const fromServiceWorker = this.interceptedChannels.has(channel);
       this.interceptedChannels.delete(channel);
@@ -491,6 +491,7 @@ NetworkObserver.prototype = {
       .toISOString();
     event.fromCache = fromCache;
     event.fromServiceWorker = fromServiceWorker;
+    event.isTrackingResource = channel.isTrackingResource;
     httpActivity.fromServiceWorker = fromServiceWorker;
 
     if (extraStringData) {

devtools/shared/webconsole/client.js

@@ -110,7 +110,8 @@ WebConsoleClient.prototype = {
         updates: [],
         private: actor.private,
         fromCache: actor.fromCache,
-        fromServiceWorker: actor.fromServiceWorker
+        fromServiceWorker: actor.fromServiceWorker,
+        isTrackingResource: actor.isTrackingResource,
       };
       this._networkRequests.set(actor.actor, networkInfo);