Backed out changeset cbb9a325576e (bug 1557058) for browser-chrome fa…

…ilures at browser/components/protections/test/browser/browser_protections_ui.js
dothq · Jul 4, 2019 · 6fc7040 · 6fc7040
1 parent ecba58f
commit 6fc7040
Show file tree

Hide file tree

Showing 10 changed files with 56 additions and 284 deletions.
diff --git a/browser/components/about/AboutProtectionsHandler.jsm b/browser/components/about/AboutProtectionsHandler.jsm
@@ -5,28 +5,16 @@
 "use strict";
 
 var EXPORTED_SYMBOLS = ["AboutProtectionsHandler"];
-const {XPCOMUtils} = ChromeUtils.import("resource://gre/modules/XPCOMUtils.jsm");
-const {RemotePages} = ChromeUtils.import("resource://gre/modules/remotepagemanager/RemotePageManagerParent.jsm");
-XPCOMUtils.defineLazyServiceGetter(this, "TrackingDBService",
-                                   "@mozilla.org/tracking-db-service;1",
-                                   "nsITrackingDBService");
 
-let idToTextMap = new Map([
-  [Ci.nsITrackingDBService.TRACKERS_ID, "tracker"],
-  [Ci.nsITrackingDBService.TRACKING_COOKIES_ID, "cookie"],
-  [Ci.nsITrackingDBService.CRYPTOMINERS_ID, "cryptominer"],
-  [Ci.nsITrackingDBService.FINGERPRINTERS_ID, "fingerprinter"],
-]);
+const {RemotePages} = ChromeUtils.import("resource://gre/modules/remotepagemanager/RemotePageManagerParent.jsm");
 
 var AboutProtectionsHandler = {
   _inited: false,
   _topics: [
-    "OpenContentBlockingPreferences",
-    "FetchContentBlockingEvents",
+    "openContentBlockingPreferences",
   ],
 
   init() {
-    this.receiveMessage = this.receiveMessage.bind(this);
     this.pageListener = new RemotePages("about:protections");
     for (let topic of this._topics) {
       this.pageListener.addMessageListener(topic, this.receiveMessage);
@@ -47,30 +35,9 @@ var AboutProtectionsHandler = {
   receiveMessage(aMessage) {
     let win = aMessage.target.browser.ownerGlobal;
     switch (aMessage.name) {
-    case "OpenContentBlockingPreferences":
-      win.openPreferences("privacy-trackingprotection", {origin: "about-protections"});
-      break;
-    case "FetchContentBlockingEvents":
-      TrackingDBService.getEventsByDateRange(aMessage.data.from, aMessage.data.to).then((results) => {
-        let dataToSend = {};
-        let largest = 0;
-        for (let result of results) {
-          let count = result.getResultByName("count");
-          let type = result.getResultByName("type");
-          let timestamp = result.getResultByName("timestamp");
-          dataToSend[timestamp] = dataToSend[timestamp] || { total: 0 };
-          dataToSend[timestamp][idToTextMap.get(type)] = count;
-          dataToSend[timestamp].total += count;
-          // Record the largest amount of tracking events found per day,
-          // to create the tallest column on the graph and compare other days to.
-          if (largest < dataToSend[timestamp].total) {
-            largest = dataToSend[timestamp].total;
-          }
-        }
-        dataToSend.largest = largest;
-        this.pageListener.sendAsyncMessage("SendContentBlockingRecords", dataToSend);
-      });
-      break;
+      case "openContentBlockingPreferences":
+        win.openPreferences("privacy-trackingprotection", {origin: "about-protections"});
+        break;
     }
   },
 };
diff --git a/browser/components/protections/content/protections.css b/browser/components/protections/content/protections.css
@@ -11,8 +11,8 @@
   --card-padding: 22px;
   --social-color: #AB71FF;
   --social-color-darker: #7F27FF;
-  --cookie-color: #0090F4;
-  --cookie-color-darker: #0073C3;
+  --crossSite-color: #0090F4;
+  --crossSite-color-darker: #0073C3;
   --tracker-color: #2AC3A2;
   --tracker-color-darker: #229C82;
   --fingerprinter-color: #FFBD4F;
@@ -32,8 +32,8 @@ body[focuseddatatype=social] {
   --tab-highlight: var(--social-color);
 }
 
-body[focuseddatatype=cookie] {
-  --tab-highlight: var(--cookie-color);
+body[focuseddatatype=crossSite] {
+  --tab-highlight: var(--crossSite-color);
 }
 
 body[focuseddatatype=tracker] {
@@ -172,12 +172,12 @@ body[focuseddatatype=cryptominer] {
   background-color: var(--social-color-darker);
 }
 
-.cookie-bar {
-  background-color: var(--cookie-color);
+.crossSite-bar {
+  background-color: var(--crossSite-color);
 }
 
-.hover-cookie .cookie-bar {
-  background-color: var(--cookie-color-darker);
+.hover-crossSite .crossSite-bar {
+  background-color: var(--crossSite-color-darker);
 }
 
 .tracker-bar {
@@ -228,8 +228,8 @@ label[data-type="social"] {
   color: var(--social-color);
 }
 
-label[data-type="cookie"] {
-  color: var(--cookie-color);
+label[data-type="crossSite"] {
+  color: var(--crossSite-color);
 }
 
 label[data-type="tracker"] {
@@ -245,7 +245,7 @@ label[data-type="cryptominer"] {
 }
 
 .hover-social label[for="tab-social"],
-.hover-cookie label[for="tab-cookie"],
+.hover-crossSite label[for="tab-crossSite"],
 .hover-tracker label[for="tab-tracker"],
 .hover-fingerprinter label[for="tab-fingerprinter"],
 .hover-cryptominer label[for="tab-cryptominer"],
@@ -278,7 +278,7 @@ input:checked + label {
 }
 
 #tab-social:checked ~ #social,
-#tab-cookie:checked ~ #cookie,
+#tab-crossSite:checked ~ #crossSite,
 #tab-tracker:checked ~ #tracker,
 #tab-fingerprinter:checked ~ #fingerprinter,
 #tab-cryptominer:checked ~ #cryptominer {

diff --git a/browser/components/protections/content/protections.html b/browser/components/protections/content/protections.html
@@ -43,8 +43,8 @@ <h3 class="card-title">
                 <input id="tab-social" data-type="social" type="radio" name="tabs" checked>
                 <label for="tab-social" data-type="social">Social</label>
 
-                <input id="tab-cookie" data-type="cookie" type="radio" name="tabs">
-                <label for="tab-cookie" data-type="cookie">cross-site-tracker</label>
+                <input id="tab-crossSite" data-type="crossSite" type="radio" name="tabs">
+                <label for="tab-crossSite" data-type="crossSite">cross-site-tracker</label>
 
                 <input id="tab-tracker" data-type="tracker" type="radio" name="tabs">
                 <label for="tab-tracker" data-type="tracker">ad-tracker</label>
@@ -59,7 +59,7 @@ <h3 class="card-title">
                   <p class="content-title">Social Media Trackers</p>
                   <p>Social media like, post, and comment buttons on other websites can track you — even if you don’t use them. Logging in to sites using your Facebook or Twitter account is another way they can track what you do on those sites. We remove these trackers so Facebook and Twitter see less of what you do online.</p>
                 </div>
-                <div id="cookie" class="tab-content">
+                <div id="crossSite" class="tab-content">
                   <p class="content-title">Cross-Site Tracking Cookies</p>
                   <p>Cross-site tracking cookies follow you from site to site to collect data about your browsing habits. Advertisers and analytics companies gather this data to create a profile of your interests across many sites. Blocking them reduces the number of personalized ads that follow you around.</p>
                 </div>

diff --git a/browser/components/protections/content/protections.js b/browser/components/protections/content/protections.js
@@ -5,65 +5,59 @@
 /* eslint-env mozilla/frame-script */
 
 document.addEventListener("DOMContentLoaded", (e) => {
-  let todayInMs = Date.now();
-  let weekAgoInMs = todayInMs - (7 * 24 * 60 * 60 * 1000);
-  RPMSendAsyncMessage("FetchContentBlockingEvents", {from: weekAgoInMs, to: todayInMs});
-
-  let dataTypes = ["cryptominer", "fingerprinter", "tracker", "cookie", "social"];
+  let dataTypes = ["cryptominer", "fingerprinter", "tracker", "crossSite", "social"];
   let weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+  let today = new Date().getDay();
 
   let protectionDetails = document.getElementById("protection-details");
   protectionDetails.addEventListener("click", () => {
-    RPMSendAsyncMessage("OpenContentBlockingPreferences");
+    RPMSendAsyncMessage("openContentBlockingPreferences");
   });
 
-  let createGraph = (data) => {
-    // Set a default top size for the height of the graph bars so that small
-    // numbers don't fill the whole graph.
-    let largest = 100;
-    if (largest < data.largest) {
-      largest = data.largest;
+  let data = [
+    {total: 41, cryptominer: 1, fingerprinter: 10, tracker: 15, crossSite: 12, social: 3},
+    {total: 246, cryptominer: 5, fingerprinter: 8, tracker: 110, crossSite: 103, social: 20},
+    {total: 59, cryptominer: 0, fingerprinter: 1, tracker: 25, crossSite: 25, social: 8},
+    {total: 177, cryptominer: 0, fingerprinter: 4, tracker: 24, crossSite: 136, social: 13},
+    {total: 16, cryptominer: 1, fingerprinter: 3, tracker: 0, crossSite: 7, social: 5},
+    {total: 232, cryptominer: 0, fingerprinter: 30, tracker: 84, crossSite: 86, social: 32},
+    {total: 153, cryptominer: 0, fingerprinter: 10, tracker: 35, crossSite: 95, social: 13},
+  ];
+
+  // Use this to populate the graph with real data in the future.
+  let createGraph = () => {
+    let largest = 10;
+    for (let day of data) {
+      if (largest < day.total) {
+        largest = day.total;
+      }
     }
 
     let graph = document.getElementById("graph");
-    for (let i = weekdays.length - 1; i >= 0; i--) {
-      // Start 7 days ago and count down to today.
-      let date = new Date();
-      date.setDate(date.getDate() - i);
-      let dateString = date.toISOString().split("T")[0];
+    for (let i = 0; i < weekdays.length; i++) {
       let bar = document.createElement("div");
       bar.className = "graph-bar";
-      if (data[dateString]) {
-        let content = data[dateString];
-        let barHeight = (content.total / largest) * 100;
-        bar.style.height = `${barHeight}%`;
-        for (let type of dataTypes) {
-          if (content[type]) {
-            let dataHeight = (content[type] / content.total) * 100;
-            let div = document.createElement("div");
-            div.className = `${type}-bar`;
-            div.setAttribute("data-type", type);
-            div.style.height = `${dataHeight}%`;
-            bar.appendChild(div);
-          }
-        }
-      } else {
-        // There were no content blocking events on this day.
-        bar.style.height = `0`;
+      let barHeight = (data[i].total / largest) * 100;
+      bar.style.height =  `${barHeight}%`;
+      for (let type of dataTypes) {
+        let dataHeight = (data[i][type] / data[i].total) * 100;
+        let div = document.createElement("div");
+        div.className = `${type}-bar`;
+        div.setAttribute("data-type", type);
+        div.style.height = `${dataHeight}%`;
+        bar.appendChild(div);
       }
       graph.appendChild(bar);
 
       let label = document.createElement("span");
       label.className = "column-label";
       if (i == 6) {
-        label.textContent = "Today";
+        label.innerText = "Today";
       } else {
-        label.textContent = weekdays[(i + 1 + new Date().getDay()) % 7];
+        label.innerText = weekdays[(i + today) % 7];
       }
-      graph.prepend(label);
+      graph.appendChild(label);
     }
-
-    addListeners();
   };
 
   let addListeners = () => {
@@ -81,7 +75,7 @@ document.addEventListener("DOMContentLoaded", (e) => {
     });
 
     wrapper.addEventListener("click", (ev) => {
-      if (ev.originalTarget.dataset.type) {
+      if (ev.originalTarget.dataset) {
         document.getElementById(`tab-${ev.target.dataset.type}`).click();
       }
     });
@@ -94,8 +88,6 @@ document.addEventListener("DOMContentLoaded", (e) => {
       });
     }
   };
-
-  RPMAddMessageListener("SendContentBlockingRecords", (message) => {
-    createGraph(message.data);
-  });
+  createGraph();
+  addListeners();
 });
diff --git a/browser/components/protections/moz.build b/browser/components/protections/moz.build
@@ -4,8 +4,6 @@
 # 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/.
 
-BROWSER_CHROME_MANIFESTS += ['test/browser/browser.ini']
-
 JAR_MANIFESTS += ['jar.mn']
 
 with Files('**'):

diff --git a/browser/components/protections/test/browser/browser.ini b/browser/components/protections/test/browser/browser.ini