Multiple small NTP improvements (#1758)

* feat: Add getLocalizedNumberFormatter

* docs: Improve docs for NTP url params

* style: Switch Privacy Protections icon

* chore: Use getLocalizedNumberFormatter in privacy stats

* fix: Icon size and snapshots

* chore: cleanup

* chore: Switch to env value for locale instead of reading from document

Author: vkraucunas

special-pages/pages/new-tab/app/index.js

@@ -109,6 +109,7 @@ export async function init(root, messaging, telemetry, baseEnvironment) {
             injectName={environment.injectName}
             willThrow={environment.willThrow}
             env={environment.env}
+            locale={environment.locale}
         >
             <InlineErrorBoundary
                 context={'App entry point'}
@@ -201,7 +202,12 @@ async function resolveEntryPoints(widgets, didCatch) {
 function renderComponents(root, environment, settings, strings) {
     // eslint-disable-next-line no-labels,no-unused-labels
     $INTEGRATION: render(
-        <EnvironmentProvider debugState={environment.debugState} injectName={environment.injectName} willThrow={environment.willThrow}>
+        <EnvironmentProvider
+            debugState={environment.debugState}
+            injectName={environment.injectName}
+            willThrow={environment.willThrow}
+            locale={environment.locale}
+        >
             <SettingsProvider settings={settings}>
                 <TranslationProvider translationObject={strings} fallback={enStrings} textLength={environment.textLength}>
                     <Components />

special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.js

@@ -8,6 +8,8 @@ import { displayNameForCompany, sortStatsForDisplay } from '../privacy-stats.uti
 import { CompanyIcon } from '../../components/CompanyIcon.js';
 import { useBodyExpansion, useBodyExpansionApi } from './BodyExpansionProvider.js';
 import { ProtectionsEmpty } from '../../protections/components/Protections.js';
+import { getLocalizedNumberFormatter } from '../../../../../shared/utils.js';
+import { useLocale } from '../../../../../shared/components/EnvironmentProvider';
 
 /**
  * @import enStrings from "../strings.json"
@@ -23,7 +25,8 @@ import { ProtectionsEmpty } from '../../protections/components/Protections.js';
  * @param {Expansion} [props.expansion]
  */
 export function PrivacyStats({ trackerCompanies, expansion = 'expanded' }) {
-    const [formatter] = useState(() => new Intl.NumberFormat());
+    const locale = useLocale();
+    const [formatter] = useState(() => getLocalizedNumberFormatter(locale));
     const sorted = sortStatsForDisplay(trackerCompanies);
     const largestTrackerCount = sorted[0]?.count ?? 0;
 
@@ -207,7 +210,8 @@ function PillShowMoreLess({ expansion }) {
  */
 export function OtherText({ count }) {
     const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
-    const [formatter] = useState(() => new Intl.NumberFormat());
+    const locale = useLocale();
+    const [formatter] = useState(() => getLocalizedNumberFormatter(locale));
     const formattedCount = formatter.format(count);
 
     const otherText = t('stats_otherCount', { count: String(formattedCount) });

special-pages/pages/new-tab/app/privacy-stats/components/PrivacyStats.module.css

@@ -1,5 +1,3 @@
-.heading {}
-
 .control {
     display: flex;
     align-items: center;
@@ -17,6 +15,11 @@
     align-items: center;
     justify-content: center;
     padding-top: 0.5px;
+
+    img {
+        max-width: 1rem;
+        max-height: 1rem;
+    }
 }
 
 .caption {
@@ -163,6 +166,3 @@
         background: var(--color-white-at-9);
     }
 }
-
-.listExpander {
-}

special-pages/pages/new-tab/app/protections/components/ProtectionsHeading.js

@@ -6,6 +6,8 @@ import cn from 'classnames';
 import { h } from 'preact';
 import { useAdBlocking } from '../../settings.provider.js';
 import { Trans } from '../../../../../shared/components/TranslationsProvider.js';
+import { getLocalizedNumberFormatter } from '../../../../../shared/utils.js';
+import { useLocale } from '../../../../../shared/components/EnvironmentProvider.js';
 
 /**
  * @import enStrings from "../strings.json"
@@ -21,7 +23,8 @@ import { Trans } from '../../../../../shared/components/TranslationsProvider.js'
  */
 export function ProtectionsHeading({ expansion, canExpand, blockedCountSignal, onToggle, buttonAttrs = {} }) {
     const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
-    const [formatter] = useState(() => new Intl.NumberFormat());
+    const locale = useLocale();
+    const [formatter] = useState(() => getLocalizedNumberFormatter(locale));
     const adBlocking = useAdBlocking();
     const blockedCount = blockedCountSignal.value;
     const none = blockedCount === 0;
@@ -41,7 +44,7 @@ export function ProtectionsHeading({ expansion, canExpand, blockedCountSignal, o
         <div class={styles.heading} data-testid="ProtectionsHeading">
             <div class={styles.control}>
                 <span class={styles.headingIcon}>
-                    <img src={'./icons/shield-green.svg'} alt="Privacy Shield" />
+                    <img src={'./icons/Shield-Check-Color-16.svg'} alt="Privacy Shield" />
                 </span>
                 <h2 class={styles.caption}>{t('protections_menuTitle')}</h2>
                 {canExpand && (