From 04c07f3e103b3091a85884483f2f4ebdd040fd9b Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Wed, 22 Apr 2020 16:30:23 -0400
Subject: [PATCH] Use large units for large values in Settings pane

Shorten "Storage used" values using large
units, i.e. shorten rendered values using
KB, MB, and GB for large figures.
---
 src/_locales/en/messages.json | 18 +++++++++++++++++-
 src/js/settings.js            | 28 +++++++++++++++++++++++-----
 src/settings.html             |  2 +-
 3 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index 7f29a81f7..21a1638f4 100644
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -361,7 +361,7 @@
   },
   "settingsStorageUsed":{
     "message":"Storage used: {{value}} bytes",
-    "description":"English: Storage used: {{}} bytes"
+    "description":"Deprecated, will be removed"
   },
   "settingsLastRestorePrompt":{
     "message":"Last restore:",
@@ -1007,6 +1007,22 @@
     "message":"Relax blocking mode",
     "description":"Label for keyboard shortcut used to relax blocking mode (meant to replace 'Toggle blocking profile')"
   },
+  "storageUsed":{
+    "message":"Storage used: {{value}} {{unit}}",
+    "description":" In Setting pane, renders as (example): Storage used: 13.2 MB"
+  },
+  "KB":{
+    "message":"KB",
+    "description":"short for 'kilobytes'"
+  },
+  "MB":{
+    "message":"MB",
+    "description":"short for 'megabytes'"
+  },
+  "GB":{
+    "message":"GB",
+    "description":"short for 'gigabytes'"
+  },
   "dummy":{
     "message":"This entry must be the last one",
     "description":"so we dont need to deal with comma for last entry"
diff --git a/src/js/settings.js b/src/js/settings.js
index 086c46413..153ad52c9 100644
--- a/src/js/settings.js
+++ b/src/js/settings.js
@@ -117,11 +117,29 @@ const exportToFile = async function() {
 /******************************************************************************/
 
 const onLocalDataReceived = function(details) {
-    uDom.nodeFromId('storageUsed').textContent =
-        vAPI.i18n('settingsStorageUsed').replace(
-            '{{value}}',
-            typeof details.storageUsed === 'number' ? details.storageUsed.toLocaleString() : '?'
-        );
+    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]);
+    } else {
+        storageUsed = '?';
+    }
+    uDom.nodeFromId('storageUsed').textContent = storageUsed;
 
     const timeOptions = {
         weekday: 'long',
diff --git a/src/settings.html b/src/settings.html
index 27dad990b..587900ef8 100644
--- a/src/settings.html
+++ b/src/settings.html
@@ -41,7 +41,7 @@
 <hr>
 <div id="localData" class="fieldset">
     <div>
-        <div id="storageUsed" class="li"></div>
+        <div id="storageUsed"></div>
         <div class="li" id="settingsLastBackupPrompt" style="display:none;"></div>
         <div class="li" id="settingsLastRestorePrompt" style="display:none;"></div>
     </div>