More fine tuning of user interface

The rendering of the total number of blocked
requests will now be abbreviated using `M` and
`G` when the block count is respectively above
1 million and 1 billion.

The storage used figure in the Settings pane
will be rendered using KB, MB or GB.
This commit is contained in:
Raymond Hill 2020-04-23 08:45:43 -04:00
parent 04c07f3e10
commit 0afe7c2231
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
5 changed files with 43 additions and 22 deletions

View File

@ -1011,6 +1011,14 @@
"message":"Storage used: {{value}} {{unit}}",
"description":" In Setting pane, renders as (example): Storage used: 13.2 MB"
},
"M":{
"message":"M",
"description":"abbreviation for 'millions': metric system's 'mega'"
},
"G":{
"message":"G",
"description":"abbreviation for 'billions': metric system's 'giga'"
},
"KB":{
"message":"KB",
"description":"short for 'kilobytes'"

View File

@ -466,6 +466,8 @@ body.advancedUser #firewall > div > span.noopRule.ownRule,
/* mouse-driven devices */
:root.desktop body {
overflow: auto;
transition-duration: 0.2s;
transition-property: opacity;
}
:root.desktop body.loading {
opacity: 0;

View File

@ -120,7 +120,7 @@
@media (max-resolution: 150dpi) {
:root {
--default-ink: var(--ink-90);
--button-ink: var(--ink-50);
--button-ink: var(--ink-90);
--fieldset-header-ink: var(--ink-50);
--link-ink: var(--violet-80);
}

View File

@ -152,7 +152,18 @@ const hashFromPopupData = function(reset) {
/******************************************************************************/
const formatNumber = function(count) {
return typeof count === 'number' ? count.toLocaleString() : '';
if ( typeof count !== 'number' ) { return ''; }
if ( count < 1e6 ) { return count.toLocaleString(); }
let unit;
if ( count < 1e9 ) {
count /= 1e6;
unit = 'M';
} else {
count /= 1e9;
unit = 'G';
}
return count.toLocaleString(undefined, { maximumSignificantDigits: 4 }) +
`\u2009${vAPI.i18n(unit)}`;
};
/******************************************************************************/
@ -423,9 +434,9 @@ const renderPopup = function() {
uDom.nodeFromId('gotoPick').classList.toggle('enabled', canElementPicker);
uDom.nodeFromId('gotoZap').classList.toggle('enabled', canElementPicker);
let blocked = popupData.pageBlockedRequestCount,
total = popupData.pageAllowedRequestCount + blocked,
text;
let blocked = popupData.pageBlockedRequestCount;
let total = popupData.pageAllowedRequestCount + blocked;
let text;
if ( total === 0 ) {
text = formatNumber(0);
} else {

View File

@ -119,23 +119,23 @@ const exportToFile = async function() {
const onLocalDataReceived = function(details) {
let storageUsed;
if ( typeof details.storageUsed === 'number' ) {
const units = [
vAPI.i18n('genericBytes'),
vAPI.i18n('KB'),
vAPI.i18n('MB'),
vAPI.i18n('GB'),
];
const s = details.storageUsed.toLocaleString(undefined, {
maximumSignificantDigits: 3,
notation: 'engineering',
});
const pos = s.lastIndexOf('E');
const vu = parseInt(s.slice(pos + 1), 10) / 3;
const vm = parseFloat(s.slice(0, pos));
storageUsed =
vAPI.i18n('storageUsed')
.replace('{{value}}', vm.toLocaleString())
.replace('{{unit}}', units[vu]);
let v = details.storageUsed;
let unit;
if ( v < 1e3 ) {
unit = 'genericBytes';
} else if ( v < 1e6 ) {
v /= 1e3;
unit = 'KB';
} else if ( v < 1e9 ) {
v /= 1e6;
unit = 'MB';
} else {
v /= 1e9;
unit = 'GB';
}
storageUsed = vAPI.i18n('storageUsed')
.replace('{{value}}', v.toLocaleString(undefined, { maximumSignificantDigits: 3 }))
.replace('{{unit}}', vAPI.i18n(unit));
} else {
storageUsed = '?';
}