copy

special-pages/pages/new-tab/app/activity/components/Activity.js

@@ -8,7 +8,7 @@ import { useVisibility } from '../../widget-list/widget-config.provider.js';
 import { useDocumentVisibility } from '../../utils.js';
 import { useCustomizer } from '../../customizer/components/CustomizerMenu.js';
 import { usePlatformName } from '../../settings.provider.js';
-import { Heading } from '../../privacy-stats/components/PrivacyStats.js';
+import { ActivityHeading } from '../../privacy-stats/components/PrivacyStats.js';
 import { ChevronSmall } from '../../components/Icons.js';
 import { CompanyIcon } from '../../components/CompanyIcon.js';
 import { Trans } from '../../../../../shared/components/TranslationsProvider.js';
@@ -44,8 +44,8 @@ function ActivityConfigured({ expansion, toggle }) {
             return acc + item.totalCount;
         }, 0);
     });
-    const canExpand = useComputed(() => {
-        return Object.keys(activity.value.items).length > 0;
+    const itemCount = useComputed(() => {
+        return Object.keys(activity.value.items).length;
     });
 
     // see: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/
@@ -55,17 +55,18 @@ function ActivityConfigured({ expansion, toggle }) {
 
     return (
         <div class={styles.root}>
-            <Heading
-                recent={count.value}
+            <ActivityHeading
+                trackerCount={count.value}
+                itemCount={itemCount.value}
                 onToggle={toggle}
                 expansion={expansion}
-                canExpand={canExpand.value}
+                canExpand={itemCount.value > 0}
                 buttonAttrs={{
                     'aria-controls': WIDGET_ID,
                     id: TOGGLE_ID,
                 }}
             />
-            {canExpand && expanded && <ActivityBody canBurn={canBurn} />}
+            {itemCount.value > 0 && expanded && <ActivityBody canBurn={canBurn} />}
         </div>
     );
 }

special-pages/pages/new-tab/app/activity/integration-tests/activity.page.js

@@ -291,4 +291,23 @@ export class ActivityPage {
                   - text: 2 hrs ago
         `);
     }
+
+    async hasEmptyTitle() {
+        const { page } = this;
+        await expect(page.getByTestId('ActivityHeading')).toMatchAriaSnapshot(`
+            - img "Privacy Shield"
+            - heading "No recent browsing activity" [level=2]
+            - paragraph: Recently visited sites will appear here. Keep browsing to see how many trackers we block.
+        `);
+    }
+    async hasPopuplatedTitle() {
+        const { page } = this;
+        await expect(page.getByTestId('ActivityHeading')).toMatchAriaSnapshot(`
+            - img "Privacy Shield"
+            - heading "0 tracking attempts blocked" [level=2]
+            - button "Hide recent activity" [expanded] [pressed]:
+              - img
+            - paragraph: Past 7 days
+        `);
+    }
 }

special-pages/pages/new-tab/app/activity/integration-tests/activity.spec.js

@@ -42,6 +42,15 @@ test.describe('activity widget', () => {
         await ntp.openPage({ additional: { feed: 'activity', activity: 'onlyTopLevel' } });
         await ap.cannotExpandListWhenEmpty();
     });
+    test('titles', async ({ page }, workerInfo) => {
+        const ntp = NewtabPage.create(page, workerInfo);
+        const ap = new ActivityPage(page, ntp);
+        await ntp.reducedMotion();
+        await ntp.openPage({ additional: { feed: 'activity', activity: 'empty' } });
+        await ap.hasEmptyTitle();
+        await ntp.openPage({ additional: { feed: 'activity', activity: 'onlyTopLevel' } });
+        await ap.hasPopuplatedTitle();
+    });
     test('favorite item', async ({ page }, workerInfo) => {
         const ntp = NewtabPage.create(page, workerInfo);
         const ap = new ActivityPage(page, ntp);

special-pages/pages/new-tab/app/activity/strings.json

@@ -1,4 +1,12 @@
 {
+  "activity_noRecent_title": {
+    "title": "No recent browsing activity",
+    "note": "Placeholder to indicate that no browsing activity was seen in the last 7 days"
+  },
+  "activity_noRecent_subtitle": {
+    "title": "Recently visited sites will appear here. Keep browsing to see how many trackers we block.",
+    "note": "Shown in the place a list of browsing history entries will be displayed."
+  },
   "activity_no_trackers": {
     "title": "No trackers found",
     "note": "Placeholder message indicating that no trackers are detected"

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

@@ -15,6 +15,8 @@ import { CompanyIcon } from '../../components/CompanyIcon.js';
 
 /**
  * @import enStrings from "../strings.json"
+ * @import activityStrings from "../../activity/strings.json"
+ * @typedef {enStrings & activityStrings} Strings
  * @typedef {import('../../../types/new-tab').TrackerCompany} TrackerCompany
  * @typedef {import('../../../types/new-tab').Expansion} Expansion
  * @typedef {import('../../../types/new-tab').Animation} Animation
@@ -104,7 +106,7 @@ function PrivacyStatsConfigured({ parentRef, expansion, data, toggle }) {
  * @param {import("preact").ComponentProps<'button'>} [props.buttonAttrs]
  */
 export function Heading({ expansion, canExpand, recent, onToggle, buttonAttrs = {} }) {
-    const { t } = useTypedTranslationWith(/** @type {enStrings} */ ({}));
+    const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
     const [formatter] = useState(() => new Intl.NumberFormat());
 
     const none = recent === 0;
@@ -139,14 +141,60 @@ export function Heading({ expansion, canExpand, recent, onToggle, buttonAttrs =
     );
 }
 
+/**
+ * @param {object} props
+ * @param {Expansion} props.expansion
+ * @param {number} props.trackerCount
+ * @param {number} props.itemCount
+ * @param {boolean} props.canExpand
+ * @param {() => void} props.onToggle
+ * @param {import("preact").ComponentProps<'button'>} [props.buttonAttrs]
+ */
+export function ActivityHeading({ expansion, canExpand, itemCount, trackerCount, onToggle, buttonAttrs = {} }) {
+    const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
+    const [formatter] = useState(() => new Intl.NumberFormat());
+
+    const none = itemCount === 0;
+    const someItems = itemCount > 0;
+    const trackerCountFormatted = formatter.format(trackerCount);
+    const allTimeString =
+        trackerCount === 1 ? t('stats_countBlockedSingular') : t('stats_countBlockedPlural', { count: trackerCountFormatted });
+
+    return (
+        <div className={styles.heading} data-testid={'ActivityHeading'}>
+            <span className={styles.headingIcon}>
+                <img src="./icons/shield.svg" alt="Privacy Shield" />
+            </span>
+            {none && <h2 className={styles.title}>{t('activity_noRecent_title')}</h2>}
+            {someItems && <h2 className={styles.title}>{allTimeString}</h2>}
+            {canExpand && (
+                <span className={styles.widgetExpander}>
+                    <ShowHideButton
+                        buttonAttrs={{
+                            ...buttonAttrs,
+                            'aria-expanded': expansion === 'expanded',
+                            'aria-pressed': expansion === 'expanded',
+                        }}
+                        onClick={onToggle}
+                        text={expansion === 'expanded' ? t('stats_hideLabel') : t('stats_toggleLabel')}
+                        shape="round"
+                    />
+                </span>
+            )}
+            {itemCount === 0 && <p className={styles.subtitle}>{t('activity_noRecent_subtitle')}</p>}
+            {itemCount > 0 && <p className={cn(styles.subtitle, styles.uppercase)}>{t('stats_feedCountBlockedPeriod')}</p>}
+        </div>
+    );
+}
+
 /**
  * @param {object} props
  * @param {import("preact").ComponentProps<'ul'>} [props.listAttrs]
  * @param {TrackerCompany[]} props.trackerCompanies
  */
 
 export function PrivacyStatsBody({ trackerCompanies, listAttrs = {} }) {
-    const { t } = useTypedTranslationWith(/** @type {enStrings} */ ({}));
+    const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
     const messaging = useMessaging();
     const [formatter] = useState(() => new Intl.NumberFormat());
     const defaultRowMax = 5;
@@ -221,7 +269,7 @@ export function PrivacyStatsBody({ trackerCompanies, listAttrs = {} }) {
  * whether to incur the side effects (data fetching).
  */
 export function PrivacyStatsCustomized() {
-    const { t } = useTypedTranslationWith(/** @type {enStrings} */ ({}));
+    const { t } = useTypedTranslationWith(/** @type {Strings} */ ({}));
     const drawer = useCustomizerDrawerSettings();
 
     /**

special-pages/pages/new-tab/public/locales/en/new-tab.json

@@ -273,6 +273,14 @@
     "title": "Delete image {number}",
     "note": "Label text on a button that deletes an image. {number} will be replaced with a numeric reference of 1-8, eg: 'Delete image 1'"
   },
+  "activity_noRecent_title": {
+    "title": "No recent browsing activity",
+    "note": "Placeholder to indicate that no browsing activity was seen in the last 7 days"
+  },
+  "activity_noRecent_subtitle": {
+    "title": "Recently visited sites will appear here. Keep browsing to see how many trackers we block.",
+    "note": "Shown in the place a list of browsing history entries will be displayed."
+  },
   "activity_no_trackers": {
     "title": "No trackers found",
     "note": "Placeholder message indicating that no trackers are detected"