More fine tuning of new UI as per feedback

Position the backup/restore/reset buttons at the
bottom in Settings pane. Related feedback:

https://github.com/gorhill/uBlock/commit/5bee33253f45#commitcomment-39221329

Use a fixed with for the fireall pane. Related
feedback:

https://github.com/uBlockOrigin/uBlock-issues/issues/1027#issuecomment-629668065

Fall back to a polyfill compact notation when
rednering large numbers in popup panel when the
required Intl.NumberFormat API is not fully
supported, at the expense of not being i18n-
compliant. Related discussion:

https://github.com/uBlockOrigin/uBlock-issues/issues/1027#issuecomment-629696676

src/css/popup-fenix.css

@@ -522,9 +522,9 @@ body:not([data-more~="e"]) [data-more="e"] {
     }
 :root.desktop #firewall {
     max-height: 600px;
-    min-width: 360px;
+    max-width: 460px;
     overflow-y: auto;
-    width: min-content;
+    width: 32em;
     }
 :root:not(.mobile) .tool:hover {
     background-color: var(--default-surface-hover);

src/css/settings.css

@@ -7,28 +7,27 @@
 body.advancedUser [href="advanced-settings.html"] {
     display: inline-flex;
     }
-#localData {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    white-space: nowrap;
-    }
 #localData > div {
-    flex-grow: 1;
-    margin-bottom: 1em;
+    margin-bottom: var(--default-gap-small);
     }
 #localData > div:last-of-type {
+    align-items: flex-start;
     display: flex;
     flex-direction: column;
-    flex-grow: 0;
-    flex-shrink: 0;
     }
 #localData > div:last-of-type > button {
-    margin-bottom: 0.5em;
+    margin-bottom: var(--default-gap-small);
+    min-width: 280px;
     }
 
-/* small-screen devices */
+/* Mobile devices */
+
 :root.mobile #localData {
-    flex-direction: column;
-    white-space: unset;
+    max-width: 100vw;
+    }
+:root.mobile #localData > div:last-of-type {
+    align-items: stretch;
+    }
+:root.mobile #localData > div:last-of-type > button {
+    min-width: unset;
     }

src/js/popup-fenix.js

@@ -152,11 +152,41 @@ const hashFromPopupData = function(reset) {
 const formatNumber = function(count) {
     if ( typeof count !== 'number' ) { return ''; }
     if ( count < 1e6 ) { return count.toLocaleString(); }
-    return count.toLocaleString(undefined, {
+
+    if (
+        intlNumberFormat === undefined &&
+        Intl.NumberFormat instanceof Function
+    ) {
+        const intl = new Intl.NumberFormat(undefined, {
             notation: 'compact',
-        maximumSignificantDigits: 4,
+            maximumSignificantDigits: 4
         });
-};
+        if (
+            intl.resolvedOptions instanceof Function &&
+            intl.resolvedOptions().hasOwnProperty('notation')
+        ) {
+            intlNumberFormat = intl;
+        }
+    }
+
+    if ( intlNumberFormat ) {
+        return intlNumberFormat.format(count);
+    }
+
+    // https://github.com/uBlockOrigin/uBlock-issues/issues/1027#issuecomment-629696676
+    //   For platforms which do not support proper number formatting, use
+    //   a poor's man compact form, which unfortunately is not i18n-friendly.
+    count /= 1000000;
+    if ( count >= 100 ) {
+      count = Math.floor(count * 10) / 10;
+    } else if ( count > 10 ) {
+      count = Math.floor(count * 100) / 100;
+    } else {
+      count = Math.floor(count * 1000) / 1000;
+    }
+    return (count).toLocaleString(undefined) + '\u2009M';};
+
+let intlNumberFormat;
 
 /******************************************************************************/
 

src/settings.html

@@ -41,7 +41,7 @@
 <hr>
 <div id="localData" class="fieldset">
     <div>
-        <div id="storageUsed"></div>
+        <div class="li" id="storageUsed"></div>
         <div class="li" id="settingsLastBackupPrompt" style="display:none;"></div>
         <div class="li" id="settingsLastRestorePrompt" style="display:none;"></div>
     </div>