From 0afe7c2231f9bbafe30c71eb8a7cabdc8e61b111 Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Thu, 23 Apr 2020 08:45:43 -0400
Subject: [PATCH] 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 |  8 ++++++++
 src/css/popup-fenix.css       |  2 ++
 src/css/themes/default.css    |  2 +-
 src/js/popup-fenix.js         | 19 +++++++++++++++----
 src/js/settings.js            | 34 +++++++++++++++++-----------------
 5 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index 21a1638f4..2564b8fac 100644
--- a/src/_locales/en/messages.json
+++ b/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'"
diff --git a/src/css/popup-fenix.css b/src/css/popup-fenix.css
index b761e9117..ce01217b2 100644
--- a/src/css/popup-fenix.css
+++ b/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;
diff --git a/src/css/themes/default.css b/src/css/themes/default.css
index 97262f627..ff47f4f57 100644
--- a/src/css/themes/default.css
+++ b/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);
     }
diff --git a/src/js/popup-fenix.js b/src/js/popup-fenix.js
index b576844df..1ca256c8a 100644
--- a/src/js/popup-fenix.js
+++ b/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,
-        total = popupData.pageAllowedRequestCount + blocked,
-        text;
+    let blocked = popupData.pageBlockedRequestCount;
+    let total = popupData.pageAllowedRequestCount + blocked;
+    let text;
     if ( total === 0 ) {
         text = formatNumber(0);
     } else {
diff --git a/src/js/settings.js b/src/js/settings.js
index 153ad52c9..b5a0cc085 100644
--- a/src/js/settings.js
+++ b/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 = [
-            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 = '?';
     }