Add interface features

+ statistics for totally blocked elements
+ statistics for percentage of total traffic

clearurls.js

@@ -9,6 +9,8 @@ var prvKeys = [];
 var globalStatus;
 var badges = [];
 var tabid = 0;
+var globalCounter;
+var globalURLCounter;
 
 /**
  * Initialize the JSON provider object keys.
@@ -203,6 +205,7 @@ function removeFieldsFormURL(provider, request)
                 }
                 
                 browser.browserAction.setBadgeText({text: (++badges[tabid]).toString(), tabId: tabid});
+                browser.storage.local.set({"globalCounter": ++globalCounter});
                 changes = true;
             }
         }
@@ -228,6 +231,7 @@ function removeFieldsFormURL(provider, request)
  */
 function clearUrl(request)
 {
+    browser.storage.local.set({"globalURLCounter": ++globalURLCounter});
     browser.storage.local.get('globalStatus', clear);
 
     function clear(data){
@@ -280,6 +284,36 @@ function handleRemoved(tabId, removeInfo) {
     delete badges[tabId];
 }
 
+/**
+ * Get the globalCounter value from the browser storage
+ * @param  {(data){}    Return value form browser.storage.local.get
+ */
+function setGlobalCounter() {
+   browser.storage.local.get('globalCounter', function(data){
+        if(data.globalCounter){
+            globalCounter = data.globalCounter;
+        }
+        else {
+            globalCounter = 0;
+        }
+    });
+    browser.storage.local.get('globalURLCounter', function(data){
+        if(data.globalURLCounter){
+            globalURLCounter = data.globalURLCounter;
+        }
+        else {
+            globalURLCounter = 0;
+        }
+    }); 
+}
+
+setGlobalCounter();
+
+/**
+ * Call by each change in the browser storage.
+ */
+browser.storage.onChanged.addListener(setGlobalCounter);
+
 /**
  * Call by each tab is closed.
  */

popup.html

@@ -17,6 +17,16 @@
             Enable globally:<br>
             <button id="globalStatus" class="status statusEnabled"></button>
           </div>
+          <hr>
+          <div id="statistics">
+            Totally blocked elements:<br>
+            <span id="statistics_value" class="statistics_value"></span><br>
+            Percentage of total traffic:<br>
+            <span id="statistics_value_global_percentage" class="statistics_value"></span><br>
+            <div class="center">
+              <button class="reset_counter_btn">Reset counter</button>
+            </div>            
+          </div>
         </div>
       </div>
     </div>

popup.js

@@ -1,6 +1,7 @@
 function init()
 {
   setStatus();
+  changeStatistics();
 }
 
 function setStatus()
@@ -40,9 +41,49 @@ function changeStatus(){
   });          
 };
 
+/**
+ * Get the globalCounter value from the browser storage
+ * @param  {(data){}    Return value form browser.storage.local.get
+ */
+function changeStatistics(){
+  var element = $("#statistics_value");
+  var globalPercentage = $("#statistics_value_global_percentage");
+  var globalCounter;
+  var globalURLCounter;
+
+  browser.storage.local.get('globalCounter', function(data){   
+    if(data.globalCounter){
+      globalCounter = data.globalCounter;
+    }
+    else {
+      globalCounter = 0;
+    }
+
+    element.text(globalCounter.toLocaleString());
+  });
+
+  browser.storage.local.get('globalURLCounter', function(data){   
+    if(data.globalURLCounter){
+      globalURLCounter = data.globalURLCounter;
+    }
+    else {
+      globalURLCounter = 0;
+    }
+
+    globalPercentage.text((globalCounter/globalURLCounter).toFixed(3)+"%");
+  });
+};
+
+function resetGlobalCounter(){
+  browser.storage.local.set({"globalCounter": 0});
+  browser.storage.local.set({"globalURLCounter": 0});
+};
 
 $(document).ready(function(){
   init();
   //Hier neue ID des Mülleimers
   $("#globalStatus").on("click", changeStatus);
+  $('.reset_counter_btn').on("click", resetGlobalCounter);
+
+  browser.storage.onChanged.addListener(changeStatistics);
 });

popup_style.css

@@ -2,6 +2,7 @@ body {
   margin: 0;
   top: 0;
   background: #fff;
+  background: url("img-noise-361x370.png");
   min-width: 180px;
   max-width: 180px;
   font-family: "Arial";
@@ -75,3 +76,70 @@ img {
   background: none;
   border: none;
 }
+
+#statistics {
+  margin-top: 10px;
+  font-family: Verdana;
+  font-size: 0.65em;
+  float: left;
+  text-align: left;
+}
+
+.statistics_value {
+  text-align: right;
+  float: right;
+  font-family: Verdana;
+  color: orange;
+  font-weight: bold;
+}
+
+#default hr {
+  width: 1000%;
+  margin-left: -500%;
+  border: dotted 1px orange;
+}
+
+.center {
+  text-align: center;
+}
+
+.reset_counter_btn {
+  -moz-box-shadow:inset 0px 1px 0px 0px #cf866c;
+  -webkit-box-shadow:inset 0px 1px 0px 0px #cf866c;
+  box-shadow:inset 0px 1px 0px 0px #cf866c;
+  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #d0451b), color-stop(1, #bc3315));
+  background:-moz-linear-gradient(top, #d0451b 5%, #bc3315 100%);
+  background:-webkit-linear-gradient(top, #d0451b 5%, #bc3315 100%);
+  background:-o-linear-gradient(top, #d0451b 5%, #bc3315 100%);
+  background:-ms-linear-gradient(top, #d0451b 5%, #bc3315 100%);
+  background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
+  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0451b', endColorstr='#bc3315',GradientType=0);
+  background-color:#d0451b;
+  -moz-border-radius:3px;
+  -webkit-border-radius:3px;
+  border-radius:3px;
+  border:1px solid #942911;
+  display:inline-block;
+  cursor:pointer;
+  color:#ffffff;
+  font-family:Arial;
+  font-size:13px;
+  padding:6px 24px;
+  text-decoration:none;
+  text-shadow:0px 1px 0px #854629;
+  margin-top: 10px;
+}
+.reset_counter_btn:hover {
+  background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bc3315), color-stop(1, #d0451b));
+  background:-moz-linear-gradient(top, #bc3315 5%, #d0451b 100%);
+  background:-webkit-linear-gradient(top, #bc3315 5%, #d0451b 100%);
+  background:-o-linear-gradient(top, #bc3315 5%, #d0451b 100%);
+  background:-ms-linear-gradient(top, #bc3315 5%, #d0451b 100%);
+  background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
+  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bc3315', endColorstr='#d0451b',GradientType=0);
+  background-color:#bc3315;
+}
+.reset_counter_btn:active {
+  position:relative;
+  top:1px;
+}