mirror of
https://github.com/gorhill/uBlock.git
synced 2024-10-06 01:27:12 +02:00
fine tuning visuals
This commit is contained in:
parent
2be9275524
commit
c6c5926e6e
47
js/popup.js
47
js/popup.js
@ -38,6 +38,33 @@ messaging.start('popup.js');
|
|||||||
|
|
||||||
/******************************************************************************/
|
/******************************************************************************/
|
||||||
|
|
||||||
|
formatNumber = function(count) {
|
||||||
|
if ( typeof count !== 'number' ) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
var s = count.toFixed(0);
|
||||||
|
if ( count >= 1000 ) {
|
||||||
|
if ( count < 10000 ) {
|
||||||
|
s = s.slice(0,1) + '.' + s.slice(1,3) + 'K';
|
||||||
|
} else if ( count < 100000 ) {
|
||||||
|
s = s.slice(0,2) + '.' + s.slice(2,3) + 'K';
|
||||||
|
} else if ( count < 1000000 ) {
|
||||||
|
s = s.slice(0,3) + 'K';
|
||||||
|
} else if ( count < 10000000 ) {
|
||||||
|
s = s.slice(0,1) + '.' + s.slice(1,3) + 'M';
|
||||||
|
} else if ( count < 100000000 ) {
|
||||||
|
s = s.slice(0,2) + '.' + s.slice(2,3) + 'M';
|
||||||
|
} else if ( count < 1000000000 ) {
|
||||||
|
s = s.slice(0,3) + 'M';
|
||||||
|
} else {
|
||||||
|
s = s.slice(0,-9) + 'G';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return s;
|
||||||
|
};
|
||||||
|
|
||||||
|
/******************************************************************************/
|
||||||
|
|
||||||
var hasClassName = function(elem, className) {
|
var hasClassName = function(elem, className) {
|
||||||
var re = new RegExp('(^| )' + className + '( |$)', 'g');
|
var re = new RegExp('(^| )' + className + '( |$)', 'g');
|
||||||
return re.test(elem.className);
|
return re.test(elem.className);
|
||||||
@ -71,12 +98,10 @@ var renderStats = function() {
|
|||||||
elem.innerHTML = '0';
|
elem.innerHTML = '0';
|
||||||
} else {
|
} else {
|
||||||
elem.innerHTML = [
|
elem.innerHTML = [
|
||||||
blocked,
|
formatNumber(blocked),
|
||||||
'<span class="dim"> / ',
|
'<span class="dim"> or ',
|
||||||
total,
|
|
||||||
' \u21D2 </span>',
|
|
||||||
(blocked * 100 / total).toFixed(0),
|
(blocked * 100 / total).toFixed(0),
|
||||||
'%'
|
'%</span>'
|
||||||
].join('');
|
].join('');
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -87,12 +112,10 @@ var renderStats = function() {
|
|||||||
elem.innerHTML = '0';
|
elem.innerHTML = '0';
|
||||||
} else {
|
} else {
|
||||||
elem.innerHTML = [
|
elem.innerHTML = [
|
||||||
blocked,
|
formatNumber(blocked),
|
||||||
'<span class="dim"> / ',
|
'<span class="dim"> or ',
|
||||||
total,
|
|
||||||
' \u21D2 </span>',
|
|
||||||
(blocked * 100 / total).toFixed(0),
|
(blocked * 100 / total).toFixed(0),
|
||||||
'%'
|
'%</span>'
|
||||||
].join('');
|
].join('');
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -143,8 +166,8 @@ var handleNetFilteringSwitch = function() {
|
|||||||
/******************************************************************************/
|
/******************************************************************************/
|
||||||
|
|
||||||
var renderHeader = function() {
|
var renderHeader = function() {
|
||||||
var hdr = document.querySelector('h1,h2,h3,h4');
|
var hdr = document.getElementById('version');
|
||||||
hdr.innerHTML = hdr.innerHTML + ' v' + chrome.runtime.getManifest().version;
|
hdr.innerHTML = hdr.innerHTML + 'v' + chrome.runtime.getManifest().version;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
19
popup.html
19
popup.html
@ -20,8 +20,20 @@ h1,h2,h3,h4 {
|
|||||||
background-color: #444;
|
background-color: #444;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
*:focus {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
#version {
|
||||||
|
margin-left: 1em;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
body > div {
|
body > div {
|
||||||
padding: 4px 8px 0 8px;
|
padding: 4px 12px 0 12px;
|
||||||
}
|
}
|
||||||
p {
|
p {
|
||||||
margin: 16px 0;
|
margin: 16px 0;
|
||||||
@ -53,7 +65,7 @@ p {
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
.dim {
|
.dim {
|
||||||
color: #aaa;
|
color: #888;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -61,7 +73,7 @@ p {
|
|||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h4>µBlock</h4>
|
<h4><a href="dashboard.html" target="_blank" title="Click to open the dashboard">µBlock<span id="version"></span></a></h4>
|
||||||
<div>
|
<div>
|
||||||
<p id="switch"><span class="fa"></span></p>
|
<p id="switch"><span class="fa"></span></p>
|
||||||
<p style="font-size: 16px;" data-i18n="popupBlockedRequestPrompt"></p>
|
<p style="font-size: 16px;" data-i18n="popupBlockedRequestPrompt"></p>
|
||||||
@ -69,7 +81,6 @@ p {
|
|||||||
<p id="page-blocked">?</p>
|
<p id="page-blocked">?</p>
|
||||||
<p id="stats" data-i18n="popupBlockedSinceInstallPrompt"></p>
|
<p id="stats" data-i18n="popupBlockedSinceInstallPrompt"></p>
|
||||||
<p id="total-blocked">?</p>
|
<p id="total-blocked">?</p>
|
||||||
<p id="options"><a class="dim" href="dashboard.html" target="_blank">Options</a></p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="js/i18n.js"></script>
|
<script src="js/i18n.js"></script>
|
||||||
|
Loading…
Reference in New Issue
Block a user