Add interface features

+ statistics for totally blocked elements
+ statistics for percentage of total traffic
This commit is contained in:
Kevin Röbert 2017-08-23 02:24:16 +02:00
parent 89086d38dd
commit 050c97a615
5 changed files with 154 additions and 1 deletions

View File

@ -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.
*/

BIN
img-noise-361x370.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB

View File

@ -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>

View File

@ -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);
});

View File

@ -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";
@ -74,4 +75,71 @@ img {
float: left;
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;
}