Bug 1485416 - Highlight tracker in the Headers side panel. r=Honza
authortanhengyeow <E0032242@u.nus.edu>
Tue, 26 Feb 2019 14:57:11 +0000
changeset 519045 c68cc2526fbde767f1277da772664a485c45c4e9
parent 519044 a02ee3c332505e03c6e33e1ea30f07091064450d
child 519046 43848f381d6cbe6a5835583b97b0d18ea4a0bedd
push id10862
push userffxbld-merge
push dateMon, 11 Mar 2019 13:01:11 +0000
treeherdermozilla-beta@a2e7f5c935da [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1485416
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1485416 - Highlight tracker in the Headers side panel. r=Honza Include highlight tracker in the Headers side panel Differential Revision: https://phabricator.services.mozilla.com/D20991
devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
devtools/client/netmonitor/src/assets/styles/RequestList.css
devtools/client/netmonitor/src/components/HeadersPanel.js
devtools/client/netmonitor/src/utils/mdn-utils.js
--- a/devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
+++ b/devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
@@ -203,16 +203,31 @@
   color: inherit;
   padding-inline-start: 3px;
 }
 
 .theme-dark .network-monitor .tabpanel-summary-value {
   color: var(--theme-selection-color);
 }
 
+.network-monitor .tracking-protection {
+  background-color: var(--toolbarbutton-background);
+  color: inherit;
+  margin-top: 2px;
+  margin-bottom: 2px;
+}
+
+.theme-dark .network-monitor .tracking-protection .tracking-resource {
+  filter: brightness(500%);
+}
+
+.theme-light .network-monitor .tracking-protection .tracking-resource {
+  filter: brightness(0);
+}
+
 .theme-dark .network-monitor .edit-and-resend-button  {
   background-color: var(--toolbarbutton-background);
   color: var(--theme-selection-color);
 }
 
 .summary-edit-and-resend {
   display: flex;
   align-items: center;
--- a/devtools/client/netmonitor/src/assets/styles/RequestList.css
+++ b/devtools/client/netmonitor/src/assets/styles/RequestList.css
@@ -379,17 +379,17 @@
   background-image: url(chrome://devtools/skin/images/globe-small.svg);
 }
 
 .tracking-resource {
   display: inline-block;
   width: 16px;
   height: 16px;
   margin: 0 3px 0 -3px;
-  vertical-align: text-bottom;
+  vertical-align: middle;
   background-image: url(chrome://devtools/content/netmonitor/src/assets/icons/shield.svg);
   background-repeat: no-repeat;
 }
 
 .selected .tracking-resource {
   filter: brightness(500%);
 }
 
--- a/devtools/client/netmonitor/src/components/HeadersPanel.js
+++ b/devtools/client/netmonitor/src/components/HeadersPanel.js
@@ -10,16 +10,17 @@ const dom = require("devtools/client/sha
 const {
   getFormattedIPAndPort,
   getFormattedSize,
 } = require("../utils/format-utils");
 const { L10N } = require("../utils/l10n");
 const {
   getHeadersURL,
   getHTTPStatusCodeURL,
+  getTrackingProtectionURL,
 } = require("../utils/mdn-utils");
 const {
   fetchNetworkUpdatePacket,
   writeHeaderText,
 } = require("../utils/request-utils");
 const {
   HeadersProvider,
   HeaderList,
@@ -353,16 +354,17 @@ class HeadersPanel extends Component {
         remotePort,
         requestHeaders,
         requestHeadersFromUploadStream: uploadHeaders,
         responseHeaders,
         status,
         statusText,
         urlDetails,
         referrerPolicy,
+        isThirdPartyTrackingResource,
       },
     } = this.props;
     const item = { fromCache, fromServiceWorker, status, statusText };
 
     if ((!requestHeaders || !requestHeaders.headers.length) &&
         (!uploadHeaders || !uploadHeaders.headers.length) &&
         (!responseHeaders || !responseHeaders.headers.length)) {
       return div({ className: "empty-notice" },
@@ -411,16 +413,37 @@ class HeadersPanel extends Component {
             title: SUMMARY_STATUS_LEARN_MORE,
           }) : span({
             className: "headers-summary learn-more-link",
           }),
         )
       );
     }
 
+    let trackingProtectionStatus;
+
+    if (isThirdPartyTrackingResource) {
+      const trackingProtectionDocURL = getTrackingProtectionURL();
+
+      trackingProtectionStatus = (
+        div({ className: "tabpanel-summary-container tracking-protection" },
+          div({
+            className: "tracking-resource",
+          }),
+          L10N.getStr("netmonitor.trackingResource.tooltip"),
+          trackingProtectionDocURL ? MDNLink({
+            url: trackingProtectionDocURL,
+            title: SUMMARY_STATUS_LEARN_MORE,
+          }) : span({
+            className: "headers-summary learn-more-link",
+          }),
+        )
+      );
+    }
+
     const summaryVersion = httpVersion ?
       this.renderSummary(SUMMARY_VERSION, httpVersion) : null;
 
     const summaryReferrerPolicy = referrerPolicy ?
       this.renderSummary(SUMMARY_REFERRER_POLICY, referrerPolicy) : null;
 
     const summaryEditAndResendBtn = (
       div({
@@ -432,16 +455,17 @@ class HeadersPanel extends Component {
         }, EDIT_AND_RESEND)
       )
     );
 
     return (
       div({ className: "panel-container" },
         div({ className: "headers-overview" },
           summaryUrl,
+          trackingProtectionStatus,
           summaryMethod,
           summaryAddress,
           summaryStatus,
           summaryVersion,
           summaryEditAndResendBtn,
         ),
         PropertiesView({
           object,
--- a/devtools/client/netmonitor/src/utils/mdn-utils.js
+++ b/devtools/client/netmonitor/src/utils/mdn-utils.js
@@ -209,15 +209,25 @@ function getPerformanceAnalysisURL() {
  *
  * @return {string} The MDN URL for the documentation of Filter box.
  */
 function getFilterBoxURL() {
   return `${MDN_URL}Tools/Network_Monitor/request_list${getGAParams()}` +
     `#Filtering_by_properties`;
 }
 
+/**
+ * Get the MDN URL for Tracking Protection
+ *
+ * @return {string} The MDN URL for the documentation of Tracking Protection.
+ */
+function getTrackingProtectionURL() {
+  return `${MDN_URL}Mozilla/Firefox/Privacy/Tracking_Protection${getGAParams()}`;
+}
+
 module.exports = {
   getHeadersURL,
   getHTTPStatusCodeURL,
   getNetMonitorTimingsURL,
   getPerformanceAnalysisURL,
   getFilterBoxURL,
+  getTrackingProtectionURL,
 };