Expose tracking protection toggle

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/index.html

@@ -59,6 +59,17 @@
                         <div class="stat third-party-sites large-header"></div>
                     </section>
                 </div>
+                <div class="tracking-section">
+                    <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,27 @@ 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) {
+        elmClicked.checked = true;
+        toggleBtnOnEffect(toggleBtn);
+        global.self.port.emit("browserPrefChanged", {
+          "trackingProtection": true
+        });
+      } 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");
@@ -420,6 +441,19 @@ function updateUIFromMetadata(event) {
   document.querySelector('#version-number').textContent = event.version;
 }
 
+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) {
   if ("defaultVisualization" in event) {
     global.currentVisualization = visualizations[event.defaultVisualization];
@@ -442,5 +476,6 @@ function updateUIFromPrefs(event) {
 
 // Exports
 global.updateUIFromMetadata = updateUIFromMetadata;
+global.updateUIFromBrowserPrefs = updateUIFromBrowserPrefs;
 global.updateUIFromPrefs = updateUIFromPrefs;
 })(this);

lib/ui.js

@@ -16,6 +16,8 @@ const {
 const ss = require('sdk/simple-storage');
 const prefs = require("sdk/simple-prefs").prefs;
 
+const prefService = require("sdk/preferences/service");
+
 const persist = require("./persist");
 const {
   Connection, getAllConnections
@@ -141,6 +143,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) {
@@ -170,6 +179,9 @@ function attachToLightbeamPage(worker) {
 
   function onUIReady() {
     worker.port.emit("updateUIFromMetadata", { version: self.version });
+    worker.port.emit("updateUIFromBrowserPrefs", {
+      "trackingProtection": prefService.get("privacy.trackingprotection.enabled")
+    });
     worker.port.emit("updateUIFromPrefs", prefs);
     worker.port.emit("passStoredConnections", getAllConnections());
   }
@@ -180,6 +192,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 +202,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');