Initial setup, adjust styles and prep for new data

Author: jsoningram

special-pages/pages/new-tab/app/components/Icons.js

@@ -601,3 +601,36 @@ export function CloseSmallIcon(props) {
         </svg>
     );
 }
+
+/**
+ * @param {import('preact').JSX.SVGAttributes<SVGSVGElement>} props
+ */
+export function NewBadgeIcon(props) {
+  return (
+      <svg xmlns="http://www.w3.org/2000/svg" width="42" height="16" viewBox="0 0 42 16" fill="none" {...props}>
+          <path d="M0 3.99792C0 1.78879 1.79086 -0.0020752 4 -0.0020752H38C40.2091 -0.0020752 42 1.78879 42 3.99792V11.9979C42 14.2071 40.2091 15.9979 38 15.9979H4C1.79086 15.9979 0 14.2071 0 11.9979V3.99792Z" fill="#F9BE1A"/>
+          <path d="M13.0913 9.1073H13.1812V3.94617H14.8032V12.0497H13.3999L9.64893 6.86707H9.55908V12.0497H7.93604V3.94617H9.35107L13.0913 9.1073Z" fill="black" fill-opacity="0.96"/>
+          <path d="M22.144 5.3446H18.4722V7.29871H21.936V8.60144H18.4722V10.6512H22.144V12.0497H16.7759V3.94617H22.144V5.3446Z" fill="black" fill-opacity="0.96"/>
+          <path d="M26.4663 9.73621H26.5562L28.0337 3.94617H29.4653L30.9702 9.73621H31.0601L32.312 3.94617H34.064L31.9136 12.0497H30.3247L28.7915 6.59167H28.7017L27.1851 12.0497H25.5854L23.4399 3.94617H25.2036L26.4663 9.73621Z" fill="black" fill-opacity="0.96"/>
+      </svg>
+  );
+}
+
+/**
+ * @param {import('preact').JSX.SVGAttributes<SVGSVGElement>} props
+ */
+export function InfoIcon(props) {
+  return (
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
+          <path d="M8.48319 3.64453C7.73951 3.64453 7.28748 4.24239 7.28748 4.7965C7.28748 5.46726 7.79784 5.68599 8.24988 5.68599C9.08104 5.68599 9.43101 5.05897 9.43101 4.54861C9.43101 3.907 8.92064 3.64453 8.48319 3.64453Z" fill="black" fill-opacity="0.36"/>
+          <path d="M8.91304 6.54504L7.08645 6.84036C7.03054 7.28244 6.95011 7.72956 6.86842 8.18373C6.71074 9.06033 6.54834 9.96319 6.54834 10.9066C6.54834 11.8434 7.10858 12.3547 7.99455 12.3547C9.00639 12.3547 9.17956 11.7196 9.21882 11.1442C8.37999 11.2659 8.19573 10.8873 8.33282 9.99619C8.46991 9.10509 8.91304 6.54504 8.91304 6.54504Z" fill="black" fill-opacity="0.36"/>
+          <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0ZM1.25 8C1.25 4.27208 4.27208 1.25 8 1.25C11.7279 1.25 14.75 4.27208 14.75 8C14.75 11.7279 11.7279 14.75 8 14.75C4.27208 14.75 1.25 11.7279 1.25 8Z"
+              fill="black"
+              fill-opacity="0.36"
+          />
+      </svg>
+  );
+}

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

@@ -2,9 +2,13 @@
     display: flex;
     align-items: center;
     height: 24px;
-    margin-bottom: 16px;
+    margin-bottom: 36px;
     position: relative;
-    gap: 8px;
+    gap: 2px;
+
+  &.noTrackers {
+    margin-bottom: 12px;
+  }
 }
 
 .headingIcon {
@@ -13,7 +17,7 @@
     position: relative;
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: left;
     padding-top: 0.5px;
 
     img {
@@ -26,13 +30,18 @@
     font-size: var(--title-3-em-font-size);
     font-weight: var(--title-3-em-font-weight);
     line-height: var(--title-3-em-line-height);
-    flex: 1;
+    flex: 0 0 auto;
+    margin-right: 6px;
 }
 
 .widgetExpander {
     position: relative;
+    flex: 1;
 
     & [aria-controls] {
+        background-color: var(--ntp-widget-expander-bg);
+        width: 24px;
+        height: 24px;
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
@@ -46,17 +55,31 @@
     }
 }
 
+.counterContainer {
+  display: flex;
+  gap: 24px;
+}
+
 .counter {
     display: flex;
     flex-direction: column;
     gap: 4px;
+    padding-right: 38px;
 }
 
 .title {
+    color: var(--ntp-text-muted);
     grid-area: title;
-    font-size: var(--title-2-font-size);
-    font-weight: var(--title-2-font-weight);
-    line-height: var(--title-2-line-height);
+    font-size: var(--title-3-em-font-size);
+    font-weight: 400;
+    line-height: 28px;
+
+  & span {
+    color: var(--ntp-text-primary);
+    display: block;
+    font-size: 40px;
+    padding-bottom: 6px;
+  }
 }
 
 .subtitle {

special-pages/pages/new-tab/app/privacy-stats/strings.json

@@ -16,11 +16,11 @@
     "note": "Placeholder to indicate that no tracking activity was blocked in the last 7 days"
   },
   "stats_countBlockedSingular": {
-    "title": "1 tracking attempt blocked",
+    "title": "Tracking attempt blocked",
     "note": "The main headline indicating that a single tracker was blocked"
   },
   "stats_countBlockedPlural": {
-    "title": "{count} tracking attempts blocked",
+    "title": "Tracking attempts blocked",
     "note": "The main headline indicating that more than 1 attempt has been blocked. Eg: '2 tracking attempts blocked'"
   },
   "stats_noActivityAdsAndTrackers": {
@@ -32,13 +32,21 @@
     "note": "Placeholder to indicate that no ads or tracking activity was blocked in the last 7 days"
   },
   "stats_countBlockedAdsAndTrackersSingular": {
-    "title": "<b>1</b> advertising & tracking attempt blocked",
+    "title": "advertising & tracking attempt blocked",
     "note": "The main headline indicating that a single ad or tracking attempt was blocked"
   },
   "stats_countBlockedAdsAndTrackersPlural": {
-    "title": "<b>{count}</b> advertising & tracking attempts blocked",
+    "title": "advertising & tracking attempts blocked",
     "note": "The main headline indicating that more than 1 ad or tracking attempt has been blocked. Eg: '2 advertising & tracking attempts blocked"
   },
+  "stats_totalCookiePopUpsBlockedSingular": {
+    "title": "Cookie pop-up blocked",
+    "note": "The heading indicating that a single cookie pop-up was handled by the CPM"
+  },
+  "stats_totalCookiePopUpsBlockedPlural": {
+    "title": "Cookie pop-ups blocked",
+    "note": "The heading indicating multiple cookie pop-ups were handled by the CPM"
+  },
   "stats_feedCountBlockedSingular": {
     "title": "1 attempt blocked by DuckDuckGo in the last 7 days",
     "note": "A summary description of how many tracking attempts where blocked, when only one exists."

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

@@ -22,8 +22,9 @@ import { useTypedTranslationWith } from '../../types.js';
  * @param {(feed: ProtectionsConfig['feed']) => void} props.setFeed
  * @param {import("preact").ComponentChild} [props.children]
  * @param {()=>void} props.toggle
+ * @param {import("@preact/signals").Signal<number>} props.totalCookiePopUpsBlockedSignal
  */
-export function Protections({ expansion = 'expanded', children, blockedCountSignal, feed, toggle, setFeed }) {
+export function Protections({ expansion = 'expanded', children, blockedCountSignal, feed, toggle, setFeed, totalCookiePopUpsBlockedSignal }) {
     const WIDGET_ID = useId();
     const TOGGLE_ID = useId();
 
@@ -42,6 +43,7 @@ export function Protections({ expansion = 'expanded', children, blockedCountSign
                 expansion={expansion}
                 canExpand={true}
                 buttonAttrs={attrs}
+                totalCookiePopUpsBlockedSignal={totalCookiePopUpsBlockedSignal}
             />
             <ProtectionsBody feed={feed} setFeed={setFeed} id={WIDGET_ID} expansion={expansion}>
                 {children}

special-pages/pages/new-tab/app/protections/components/Protections.module.css

@@ -44,7 +44,7 @@
 }
 
 .block {
-    margin-top: 24px;
+    margin-top: 32px;
 }
 .empty {
     color: var(--ntp-text-muted);

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

@@ -1,5 +1,5 @@
 import { useContext } from 'preact/hooks';
-import { ProtectionsContext, useBlockedCount } from './ProtectionsProvider.js';
+import { ProtectionsContext, useBlockedCount, useCookiePopUpsBlockedCount } from './ProtectionsProvider.js';
 import { h } from 'preact';
 import { Protections } from './Protections.js';
 import { ActivityProvider } from '../../activity/ActivityProvider.js';
@@ -40,13 +40,18 @@ export function ProtectionsConsumer() {
 function ProtectionsReadyState({ data, config }) {
     const { toggle, setFeed } = useContext(ProtectionsContext);
     const blockedCountSignal = useBlockedCount(data.totalCount);
+    const totalCookiePopUpsBlockedSignal = useCookiePopUpsBlockedCount(
+      data.totalCookiePopUpsBlocked
+    );
+
     return (
         <Protections
             blockedCountSignal={blockedCountSignal}
             expansion={config.expansion}
             toggle={toggle}
             feed={config.feed}
             setFeed={setFeed}
+            totalCookiePopUpsBlockedSignal={totalCookiePopUpsBlockedSignal}
         >
             {config.feed === 'activity' && (
                 <ActivityProvider>

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

@@ -1,13 +1,9 @@
 import { useTypedTranslationWith } from '../../types.js';
-import { useState } from 'preact/hooks';
 import styles from '../../privacy-stats/components/PrivacyStats.module.css';
 import { ShowHideButtonCircle } from '../../components/ShowHideButton.jsx';
 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 { InfoIcon, NewBadgeIcon } from '../../components/Icons.js';
 
 /**
  * @import enStrings from "../strings.json"
@@ -20,33 +16,33 @@ import { useLocale } from '../../../../../shared/components/EnvironmentProvider.
  * @param {boolean} props.canExpand
  * @param {() => void} props.onToggle
  * @param {import('preact').ComponentProps<'button'>} [props.buttonAttrs]
+ * @param {import("@preact/signals").Signal<number>} props.totalCookiePopUpsBlockedSignal
  */
-export function ProtectionsHeading({ expansion, canExpand, blockedCountSignal, onToggle, buttonAttrs = {} }) {
+export function ProtectionsHeading({ expansion, canExpand, blockedCountSignal, onToggle, buttonAttrs = {}, totalCookiePopUpsBlockedSignal }) {
     const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
-    const locale = useLocale();
-    const [formatter] = useState(() => getLocalizedNumberFormatter(locale));
-    const adBlocking = useAdBlocking();
-    const blockedCount = blockedCountSignal.value;
-    const none = blockedCount === 0;
-    const some = blockedCount > 0;
-    const alltime = formatter.format(blockedCount);
+    const totalTrackersBlocked = blockedCountSignal.value;
+    const totalCookiePopUpsBlocked = totalCookiePopUpsBlockedSignal.value;
 
-    let alltimeTitle;
-    if (blockedCount === 1) {
-        alltimeTitle = adBlocking ? t('stats_countBlockedAdsAndTrackersSingular') : t('stats_countBlockedSingular');
-    } else {
-        alltimeTitle = adBlocking
-            ? t('stats_countBlockedAdsAndTrackersPlural', { count: alltime })
-            : t('stats_countBlockedPlural', { count: alltime });
-    }
+    // @todo jingram get these values from native
+    const isCpmEnabled = true; // Is Cookie pop-up protection in app
+    const shouldShowCookiePopUpsBlocked = true; // from ProtectionsConfig
+
+    const trackersBlockedHeading = totalTrackersBlocked === 1
+        ? t('stats_countBlockedSingular')
+        : t('stats_countBlockedPlural')
+
+    const cookiePopUpsBlockedHeading = totalCookiePopUpsBlocked === 1
+        ? t('stats_totalCookiePopUpsBlockedSingular')
+        : t('stats_totalCookiePopUpsBlockedPlural')
 
     return (
         <div class={styles.heading} data-testid="ProtectionsHeading">
-            <div class={styles.control}>
+            <div class={cn(styles.control, totalTrackersBlocked === 0 && styles.noTrackers)}>
                 <span class={styles.headingIcon}>
                     <img src={'./icons/Shield-Check-Color-16.svg'} alt="Privacy Shield" />
                 </span>
                 <h2 class={styles.caption}>{t('protections_menuTitle')}</h2>
+                <InfoIcon class={styles.infoIcon}/>
                 {canExpand && (
                     <span class={styles.widgetExpander}>
                         <ShowHideButtonCircle
@@ -61,15 +57,33 @@ export function ProtectionsHeading({ expansion, canExpand, blockedCountSignal, o
                     </span>
                 )}
             </div>
-            <div class={styles.counter}>
-                {none && <h3 class={styles.title}>{t('protections_noRecent')}</h3>}
-                {some && (
+            <div class={styles.counterContainer}>
+                {/* Total Trackers Blocked  */}
+                <div class={styles.counter}>
+                  {totalTrackersBlocked === 0 && (
+                    <h3 class={styles.title}>{t('protections_noRecent')}</h3>
+                  )}
+                  {totalTrackersBlocked > 0 && (
                     <h3 class={styles.title}>
-                        {' '}
-                        <Trans str={alltimeTitle} values={{ count: alltime }} />
+                      <span>{totalTrackersBlocked}</span>
+                      {trackersBlockedHeading}
                     </h3>
+                  )}
+                </div>
+
+                {/* Total Cookie Pop-Ups Blocked */}
+                {/* Rules: Display CPM stats when Cookie Pop-Up Protection is
+                enabled AND both `totalTrackersBlocked` and
+                `totalCookiePopUpsBlocked` are at least 1 */}
+                {(shouldShowCookiePopUpsBlocked && isCpmEnabled && totalTrackersBlocked > 0 && totalCookiePopUpsBlocked > 0) && (
+                  <div class={styles.counter}>
+                      <h3 class={styles.title}>
+                        <span>{totalCookiePopUpsBlocked}</span>
+                        {cookiePopUpsBlockedHeading}
+                      </h3>
+                      <NewBadgeIcon />
+                  </div>
                 )}
-                <p class={cn(styles.subtitle, styles.indented)}>{t('stats_feedCountBlockedPeriod')}</p>
             </div>
         </div>
     );

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

@@ -104,3 +104,20 @@ export function useBlockedCount(initial) {
     });
     return signal;
 }
+
+/**
+ * @param {number} initial
+ * @return {import("@preact/signals").Signal<number>}
+ */
+export function useCookiePopUpsBlockedCount(initial) {
+    const service = useService();
+    const signal = useSignal(initial);
+
+    useSignalEffect(() => {
+        return service.current?.onData((evt) => {
+            signal.value = evt.data.totalCookiePopUpsBlocked;
+        });
+    });
+
+    return signal;
+}

special-pages/pages/new-tab/app/protections/mocks/protections.mocks.js

@@ -5,11 +5,14 @@
 export const protectionsMocks = {
     empty: {
         totalCount: 0,
+        totalCookiePopUpsBlocked: 0,
     },
     few: {
         totalCount: 86,
+        totalCookiePopUpsBlocked: 23,
     },
     many: {
         totalCount: 1_000_020,
+        totalCookiePopUpsBlocked: 5_432,
     },
 };

special-pages/pages/new-tab/app/protections/protections.md

@@ -29,7 +29,8 @@ title: Protections Report
 - returns {@link "NewTab Messages".ProtectionsData}
 ```json
 {
-   "totalCount": 84
+   "totalCount": 84,
+   "totalCookiePopUpsBlocked": 23
 }
 ```