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
2024-12-02 01:48:05 +00:00 · 2018-08-22 17:03:30 +00:00 · 2018-08-22 17:03:30 +00:00 · dfb39f81d3
commit dfb39f81d3
parent f566163698
13 changed files with 93 additions and 3 deletions
--- a/devtools/client/jar.mn
+++ b/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
--- a/devtools/client/locales/en-US/netmonitor.properties
+++ b/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
--- a/devtools/client/netmonitor/src/assets/icons/shield.svg
+++ b/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>
--- a/devtools/client/netmonitor/src/assets/styles/RequestList.css
+++ b/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 {
--- a/devtools/client/netmonitor/src/components/RequestListColumnDomain.js
+++ b/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,
      )
    );
--- a/devtools/client/netmonitor/src/connector/firefox-data-provider.js
+++ b/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, {
--- a/devtools/client/netmonitor/src/constants.js
+++ b/devtools/client/netmonitor/src/constants.js
@ -146,6 +146,7 @@ const UPDATE_PROPS = [
  "responseCacheAvailable",
  "formDataSections",
  "stacktrace",
+  "isTrackingResource",
 ];

 const PANELS = {
--- a/devtools/client/netmonitor/test/browser.ini
+++ b/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]
--- a/devtools/client/netmonitor/test/browser_net_tracking-resources.js
+++ b/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);
+});
--- a/devtools/client/netmonitor/test/html_tracking-protection.html
+++ b/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>
--- a/devtools/server/actors/network-event.js
+++ b/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
--- a/devtools/server/actors/network-monitor/network-observer.js
+++ b/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) {
--- a/devtools/shared/webconsole/client.js
+++ b/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);