From c6c5926e6ecb5a0241a5ad144c10470ac99a40d0 Mon Sep 17 00:00:00 2001 From: gorhill Date: Tue, 24 Jun 2014 01:20:59 -0400 Subject: [PATCH] fine tuning visuals --- js/popup.js | 47 +++++++++++++++++++++++++++++++++++------------ popup.html | 19 +++++++++++++++---- 2 files changed, 50 insertions(+), 16 deletions(-) diff --git a/js/popup.js b/js/popup.js index 1e104208c..eb3c3a1e3 100644 --- a/js/popup.js +++ b/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 re = new RegExp('(^| )' + className + '( |$)', 'g'); return re.test(elem.className); @@ -71,12 +98,10 @@ var renderStats = function() { elem.innerHTML = '0'; } else { elem.innerHTML = [ - blocked, - ' / ', - total, - ' \u21D2 ', + formatNumber(blocked), + ' or ', (blocked * 100 / total).toFixed(0), - '%' + '%' ].join(''); } @@ -87,12 +112,10 @@ var renderStats = function() { elem.innerHTML = '0'; } else { elem.innerHTML = [ - blocked, - ' / ', - total, - ' \u21D2 ', + formatNumber(blocked), + ' or ', (blocked * 100 / total).toFixed(0), - '%' + '%' ].join(''); } @@ -143,8 +166,8 @@ var handleNetFilteringSwitch = function() { /******************************************************************************/ var renderHeader = function() { - var hdr = document.querySelector('h1,h2,h3,h4'); - hdr.innerHTML = hdr.innerHTML + ' v' + chrome.runtime.getManifest().version; + var hdr = document.getElementById('version'); + hdr.innerHTML = hdr.innerHTML + 'v' + chrome.runtime.getManifest().version; }; diff --git a/popup.html b/popup.html index 62b1ba7a6..66f013698 100644 --- a/popup.html +++ b/popup.html @@ -20,8 +20,20 @@ h1,h2,h3,h4 { background-color: #444; text-align: center; } +a { + color: inherit; + text-decoration: none; + } +*:focus { + outline: 0; + } +#version { + margin-left: 1em; + font-weight: normal; + font-size: 11px; + } body > div { - padding: 4px 8px 0 8px; + padding: 4px 12px 0 12px; } p { margin: 16px 0; @@ -53,7 +65,7 @@ p { font-size: 12px; } .dim { - color: #aaa; + color: #888; text-decoration: none; } @@ -61,7 +73,7 @@ p { -

µBlock

+

µBlock

@@ -69,7 +81,6 @@ p {

?

?

-

Options