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.

src/_locales/en/messages.json

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

src/css/popup-fenix.css

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

src/css/themes/default.css

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

src/js/popup-fenix.js

@@ -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,
+    let blocked = popupData.pageBlockedRequestCount;
-        total = popupData.pageAllowedRequestCount + blocked,
+    let total = popupData.pageAllowedRequestCount + blocked;
-        text;
+    let text;
     if ( total === 0 ) {
         text = formatNumber(0);
     } else {

src/js/settings.js

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