Merge pull request #631 from fmarier/tracking-protection

Tracking protection

data/aggregate.js

@@ -147,6 +147,11 @@ function updateUIFromMetadata(metadata) {
   global.updateUIFromMetadata(metadata);
 }
 
+function updateUIFromBrowserPrefs(browserPrefs) {
+  console.debug("in aggregate browser prefs");
+  global.updateUIFromBrowserPrefs(browserPrefs);
+}
+
 function updateUIFromPrefs(prefs) {
   console.debug("in aggregate prefs");
   global.updateUIFromPrefs(prefs);
@@ -154,6 +159,7 @@ function updateUIFromPrefs(prefs) {
 
 aggregate.on('load', onLoad);
 aggregate.on("updateUIFromMetadata", updateUIFromMetadata);
+aggregate.on("updateUIFromBrowserPrefs", updateUIFromBrowserPrefs);
 aggregate.on("updateUIFromPrefs", updateUIFromPrefs);
 
 // Constants for indexes of properties in array format

data/content-script.js

@@ -35,6 +35,11 @@ self.port.on("updateUIFromMetadata", function (metadata) {
   global.aggregate.emit("updateUIFromMetadata", metadata);
 });
 
+self.port.on("updateUIFromBrowserPrefs", function (browserPrefs) {
+  console.debug("Got set browser prefs", browserPrefs);
+  global.aggregate.emit("updateUIFromBrowserPrefs", browserPrefs);
+});
+
 self.port.on("updateUIFromPrefs", function (prefs) {
   console.debug("Got set prefs", prefs);
   global.aggregate.emit("updateUIFromPrefs", prefs);

data/dialog.js

@@ -11,16 +11,10 @@ const dialogNames = {
   "startUploadData": "startUploadData",
   "stopUploadData": "stopUploadData",
   "privateBrowsing": "privateBrowsing",
+  "trackingProtection": "trackingProtection",
   "saveOldData": "saveOldData"
 };
 
-const allDialogs = {
-  'Reset Data Confirmation': confirmResetDataDialog,
-  'Block Sites Confirmation': confirmBlockSitesDialog,
-  'Hide Sites Confirmation': confirmHideSitesDialog,
-  'Private Browsing Notification': informUserOfUnsafeWindowsDialog,
-};
-
 // options: name, title, message, type, dnsPrompt(Do Not Show), imageUrl
 function dialog(options, callback) {
   createDialog(options, callback);
@@ -220,3 +214,16 @@ function confirmResetDataDialog(callback) {
     "imageUrl": "image/lightbeam_popup_warningreset.png"
   }, callback);
 }
+
+function confirmTrackingProtectionDialog(callback) {
+  dialog({
+    "name": dialogNames.trackingProtection,
+    "title": "Tracking Protection",
+    "message": "<p><b>Warning:</b></p>" +
+      "<p>Enabling this experimental feature will block elements that track your online behavior.</p>" +
+      "<p>This can prevent some sites from working and degrade your internet experience. Please use this feature carefully.</p>" +
+      "<p>Please report any problems you find.</p>" +
+      '<p><a href="https://support.mozilla.org/kb/tracking-protection-firefox#w_how-to-use-tracking-protection">Learn more...</a></p>',
+      "imageUrl": "image/lightbeam_popup_blocked.png"
+  }, callback);
+}

data/index.html

@@ -59,6 +59,17 @@
                         <div class="stat third-party-sites large-header"></div>
                     </section>
                 </div>
+                <div class="tracking-section hidden">
+                    <div class="label all-cap-header">TRACKING PROTECTION</div>
+                    <div class="toggle-btn tracking-btn">
+                        <label><input type="checkbox" name="" id="" />
+                            <div class="toggle-btn-innner">
+                                <div class="switch"></div>
+                                <div class="on-off-text">OFF</div>
+                            </div>
+                        </label>
+                    </div>
+                </div>
             </div>
         <div id="content">
             <aside class="info">

data/style.css

@@ -378,6 +378,25 @@ a:hover{
     margin-right: 20px;
 }
 
+.tracking-section{
+    float: right;
+    text-align: center;
+}
+
+.tracking-btn label{
+    position: relative;
+    top: 10px;
+}
+
+.tracking-section .label{
+    color: #3E454D;
+    margin-right: 5px;
+}
+
+.tracking-section div{
+    display: inline-block;
+}
+
 .info{
     width: 8px;
     height: 100%;

data/ui.js

@@ -72,6 +72,33 @@ btnGroupArray.forEach(function (btnGroup) {
   });
 });
 
+document.querySelector(".toggle-btn.tracking-btn").addEventListener("click",
+  function (event) {
+    var elmClicked = event.target;
+    if (elmClicked.mozMatchesSelector("input")) {
+      var toggleBtn = document.querySelector(".tracking-btn");
+      if (elmClicked.checked) {
+        confirmTrackingProtectionDialog(function (confirmed) {
+          if (confirmed) {
+            elmClicked.checked = true;
+            toggleBtnOnEffect(toggleBtn);
+            global.self.port.emit("browserPrefChanged", {
+              "trackingProtection": true
+            });
+          } else {
+            elmClicked.checked = false;
+          }
+        });
+      } else {
+        elmClicked.checked = false;
+        toggleBtnOffEffect(toggleBtn);
+        global.self.port.emit("browserPrefChanged", {
+          "trackingProtection": false
+        });
+      }
+    }
+  });
+
 function toggleBtnOnEffect(toggleBtn) {
   toggleBtn.querySelector(".toggle-btn-innner").classList.add("checked");
   toggleBtn.querySelector(".switch").classList.add("checked");
@@ -417,7 +444,34 @@ global.singularOrPluralNoun = function singularOrPluralNoun(num, str) {
 };
 
 function updateUIFromMetadata(event) {
-  document.querySelector('#version-number').textContent = event.version;
+  if ("version" in event) {
+    document.querySelector('#version-number').textContent = event.version;
+  }
+
+  if ("browserVersion" in event) {
+    const firefoxVersionRe = /^([0-9]+)(\.([0-9]+))?/;
+    var majorVersion = Number(firefoxVersionRe.exec(event.browserVersion)[1]);
+
+    var section = document.querySelector('.tracking-section');
+    if (majorVersion >= 35) {
+      section.classList.remove("hidden");
+    } else {
+      section.classList.add("hidden");
+    }
+  }
+}
+
+function updateUIFromBrowserPrefs(event) {
+  if ("trackingProtection" in event) {
+    var toggleBtn = document.querySelector(".tracking-btn");
+    if (event.trackingProtection) {
+      toggleBtn.querySelector("input").checked = true;
+      toggleBtnOnEffect(toggleBtn);
+    } else {
+      toggleBtn.querySelector("input").checked = false;
+      toggleBtnOffEffect(toggleBtn);
+    }
+  }
 }
 
 function updateUIFromPrefs(event) {
@@ -442,5 +496,6 @@ function updateUIFromPrefs(event) {
 
 // Exports
 global.updateUIFromMetadata = updateUIFromMetadata;
+global.updateUIFromBrowserPrefs = updateUIFromBrowserPrefs;
 global.updateUIFromPrefs = updateUIFromPrefs;
 })(this);

lib/ui.js

@@ -16,6 +16,9 @@ const {
 const ss = require('sdk/simple-storage');
 const prefs = require("sdk/simple-prefs").prefs;
 
+const prefService = require("sdk/preferences/service");
+const system = require("sdk/system");
+
 const persist = require("./persist");
 const {
   Connection, getAllConnections
@@ -141,6 +144,13 @@ function attachToLightbeamPage(worker) {
     });
   }
 
+  function onBrowserPrefChanged(event) {
+    console.debug("Received updated browser prefs", JSON.stringify(event));
+    if ("trackingProtection" in event) {
+      prefService.set("privacy.trackingprotection.enabled", event.trackingProtection);
+    }
+  }
+
   function onPrefChanged(event) {
     console.debug("Received updated prefs", JSON.stringify(event));
     if ("defaultVisualization" in event) {
@@ -169,7 +179,13 @@ function attachToLightbeamPage(worker) {
   }
 
   function onUIReady() {
-    worker.port.emit("updateUIFromMetadata", { version: self.version });
+    worker.port.emit("updateUIFromMetadata", {
+      version: self.version,
+      browserVersion: system.version
+    });
+    worker.port.emit("updateUIFromBrowserPrefs", {
+      "trackingProtection": prefService.get("privacy.trackingprotection.enabled")
+    });
     worker.port.emit("updateUIFromPrefs", prefs);
     worker.port.emit("passStoredConnections", getAllConnections());
   }
@@ -180,6 +196,7 @@ function attachToLightbeamPage(worker) {
     this.port.removeListener('reset', onWorkerReset);
     this.port.removeListener('uiready', onUIReady);
     this.port.removeListener('updateBlocklist', onWorkerUpdateBlocklist);
+    this.port.removeListener("browserPrefChanged", onBrowserPrefChanged);
     this.port.removeListener("prefChanged", onPrefChanged);
     uiworker = null;
     this.destroy();
@@ -189,6 +206,7 @@ function attachToLightbeamPage(worker) {
   worker.port.on("reset", onWorkerReset);
   worker.port.on('uiready', onUIReady);
   worker.port.on('updateBlocklist', onWorkerUpdateBlocklist);
+  worker.port.on("browserPrefChanged", onBrowserPrefChanged);
   worker.port.on("prefChanged", onPrefChanged);
   worker.port.emit('init');