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

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

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',

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>