More fine tuning as per feedback

Better constrast for warning color. Related feedback:
- 5bee33253f (commitcomment-38700085)

Revisit how large numbers are rendered in a
compact form in the new popup panel. Feedback
from https://crowdin.com/project/ublock pointed
out that the string to translate was flawed for
Chinese locale (and possibly in some other
locales as well).

src/_locales/en/messages.json

@@ -1011,14 +1011,6 @@
     "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/3p-filters.css

@@ -146,12 +146,12 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
     display: inline-flex;
     }
 .listEntry .obsolete {
-    color: var(--fg-icon-info-lvl-2-dimmed);
-    fill: var(--fg-icon-info-lvl-2-dimmed);
+    color: var(--info-lvl-2-ink);
+    fill: var(--info-lvl-2-ink);
     }
 .listEntry .obsolete:hover {
-    color: var(--fg-icon-info-lvl-2);
-    fill: var(--fg-icon-info-lvl-2);
+    color: var(--info-lvl-2-ink-hover);
+    fill: var(--info-lvl-2-ink-hover);
     }
 body:not(.updating) .listEntry.checked.obsolete .obsolete {
     display: inline-flex;

src/css/popup-fenix.css

@@ -12,8 +12,13 @@
 :root.mobile body {
     font-size: 14px;
     line-height: 20px;
+    transition-duration: 0.2s;
+    transition-property: opacity;
     width: 100%;
     }
+:root body.loading {
+    opacity: 0;
+    }
 a {
     color: inherit;
     text-decoration: none;
@@ -466,11 +471,6 @@ 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;
     }
 :root.desktop #panes {
     flex-direction: row-reverse;

src/css/themes/default.css

@@ -22,6 +22,8 @@
     --light-gray-40: #cfcfd8;
     --violet-70: #592acb;
     --violet-80: #45278d;
+    --yellow-50: #ffa436;
+    --yellow-60: #e27f2e;
     --black: #000;
     --white: #fff;
 }
@@ -84,8 +86,8 @@
     --fg-icon-info-lvl-0: inherit;
     --fg-icon-info-lvl-1-dimmed: hsla(240, 100%, 40%, 0.5);
     --fg-icon-info-lvl-1: hsla(240, 100%, 40%, 1);
-    --fg-icon-info-lvl-2-dimmed: hsla(36, 100%, 40%, 0.5);
-    --fg-icon-info-lvl-2: hsla(36, 100%, 40%, 1);
+    --info-lvl-2-ink: var(--yellow-50);
+    --info-lvl-2-ink-hover: var(--yellow-60);
     --fg-icon-info-lvl-3-dimmed: hsla(16, 100%, 50%, 0.5);
     --fg-icon-info-lvl-3: hsla(16, 100%, 50%, 1);
     --fg-icon-info-lvl-4-dimmed: hsla(0, 100%, 35%, 0.5);

src/js/popup-fenix.js

@@ -154,20 +154,10 @@ const hashFromPopupData = function(reset) {
 const formatNumber = function(count) {
     if ( typeof count !== 'number' ) { return ''; }
     if ( count < 1e6 ) { return count.toLocaleString(); }
-    const mln = vAPI.i18n('M');
-    if ( count < 1e7 && mln.length > 2 ) { // Maybe not worth abbreviating
-        return count.toLocaleString();
-    }
-    let unit;
-    if ( count < 1e9 ) {
-        count /= 1e6;
-        unit = mln;
-    } else {
-        count /= 1e9;
-        unit = vAPI.i18n('G');
-    }
-    return count.toLocaleString(undefined, { maximumSignificantDigits: 4 }) +
-           `\u2009${unit}`;
+    return count.toLocaleString(undefined, {
+        notation: 'compact',
+        maximumSignificantDigits: 4,
+    });
 };
 
 /******************************************************************************/