ntp: activity translations (RC1) (#1459)

shakyShane · web-flow · commit 2e884024bc00 · 2025-02-04T08:54:13.000Z
* ntp: activity translations

* ntp: small style fixes for locales

* fix middle click

* linting

* more translations

* fixed overflow
diff --git a/special-pages/pages/new-tab/app/activity/components/Activity.examples.js b/special-pages/pages/new-tab/app/activity/components/Activity.examples.js
@@ -10,28 +10,12 @@ import { normalizeData, NormalizedDataContext } from '../NormalizeDataProvider.j
 export const activityExamples = {
     'activity.empty': {
         factory: () => {
-            return (
-                <Activity
-                    expansion={'expanded'}
-                    itemCount={0}
-                    trackerCount={0}
-                    toggle={noop('toggle')}
-                    didClick={noop('did click')}
-                    batched={false}
-                />
-            );
+            return <Activity expansion={'expanded'} itemCount={0} trackerCount={0} toggle={noop('toggle')} batched={false} />;
         },
     },
     'activity.few': {
         factory: () => (
-            <Activity
-                expansion={'expanded'}
-                itemCount={10}
-                trackerCount={20}
-                toggle={noop('toggle')}
-                didClick={noop('did click')}
-                batched={false}
-            >
+            <Activity expansion={'expanded'} itemCount={10} trackerCount={20} toggle={noop('toggle')} batched={false}>
                 <Mock size={3}>
                     <ActivityBody canBurn={false} visibility={'visible'} />
                 </Mock>
@@ -40,14 +24,7 @@ export const activityExamples = {
     },
     'activity.noTrackers': {
         factory: () => (
-            <Activity
-                expansion={'expanded'}
-                itemCount={20}
-                trackerCount={0}
-                toggle={noop('toggle')}
-                didClick={noop('did click')}
-                batched={false}
-            >
+            <Activity expansion={'expanded'} itemCount={20} trackerCount={0} toggle={noop('toggle')} batched={false}>
                 <Mock size={1}>
                     <ActivityBody canBurn={false} visibility={'visible'} />
                 </Mock>
diff --git a/special-pages/pages/new-tab/app/activity/components/Activity.js b/special-pages/pages/new-tab/app/activity/components/Activity.js
@@ -30,22 +30,26 @@ import { ActivityInteractionsContext } from '../../burning/ActivityInteractionsC
  * Renders the Activity component with associated heading and body, managing interactivity and state.
  *
  * @param {Object} props - Object containing all properties required by the Activity component.
- * @param {(evt: MouseEvent) => void} props.didClick - Callback function triggered when the root element is clicked.
  * @param {Expansion} props.expansion - String indicating the expansion state of the activity, such as 'expanded' or 'collapsed'.
  * @param {() => void} props.toggle - Callback function to handle the expansion/collapse action.
  * @param {number} props.trackerCount - Object representing the tracker count for the activity.
  * @param {number} props.itemCount - Object representing the count of items in the activity.
  * @param {boolean} props.batched - Boolean indicating whether the activity uses batched loading.
  * @param {import("preact").ComponentChild} [props.children]
  */
-export function Activity({ didClick, expansion, toggle, trackerCount, itemCount, batched, children }) {
+export function Activity({ expansion, toggle, trackerCount, itemCount, batched, children }) {
     // see: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/
     const expanded = expansion === 'expanded';
     const WIDGET_ID = useId();
     const TOGGLE_ID = useId();
+    const { didClick } = useContext(ActivityInteractionsContext);
+
+    const ref = useRef(null);
+    useOnMiddleClick(ref, didClick);
+
     return (
         <Fragment>
-            <div class={styles.root} onClick={didClick}>
+            <div class={styles.root} onClick={didClick} ref={ref}>
                 <ActivityHeading
                     trackerCount={trackerCount}
                     itemCount={itemCount}
@@ -240,10 +244,6 @@ export function ActivityConfigured({ expansion, toggle, children }) {
     const batched = useBatchedActivityApi();
 
     const { activity } = useContext(NormalizedDataContext);
-    const { didClick } = useContext(ActivityInteractionsContext);
-
-    const ref = useRef(/** @type {HTMLUListElement|null} */ (null));
-    useOnMiddleClick(ref, didClick);
 
     const count = useComputed(() => {
         return activity.value.totalTrackers;
@@ -254,14 +254,7 @@ export function ActivityConfigured({ expansion, toggle, children }) {
     });
 
     return (
-        <Activity
-            batched={batched}
-            itemCount={itemCount.value}
-            trackerCount={count.value}
-            expansion={expansion}
-            toggle={toggle}
-            didClick={didClick}
-        >
+        <Activity batched={batched} itemCount={itemCount.value} trackerCount={count.value} expansion={expansion} toggle={toggle}>
             {children}
         </Activity>
     );
diff --git a/special-pages/pages/new-tab/app/activity/integration-tests/activity.page.js b/special-pages/pages/new-tab/app/activity/integration-tests/activity.page.js
@@ -193,6 +193,7 @@ export class ActivityPage {
         await page.getByText('example.com').click();
         await page.getByText('example.com').click({ modifiers: ['Meta'] });
         await page.getByText('example.com').click({ modifiers: ['Shift'] });
+        await page.getByText('example.com').click({ button: 'middle' });
         await this._opensMainLink();
     }
     async _opensMainLink() {
@@ -213,6 +214,11 @@ export class ActivityPage {
             url,
             target: 'new-window',
         });
+
+        expect(calls[3].payload.params).toStrictEqual({
+            url,
+            target: 'new-window',
+        });
     }
 
     async opensLinkFromHistory() {
diff --git a/special-pages/pages/new-tab/app/customizer/components/BrowserThemeSection.js b/special-pages/pages/new-tab/app/customizer/components/BrowserThemeSection.js
@@ -31,7 +31,7 @@ export function BrowserThemeSection(props) {
                 >
                     <span class="sr-only">{t('customizer_browser_theme_label', { type: 'light' })}</span>
                 </button>
-                {t('customizer_browser_theme_light')}
+                <span>{t('customizer_browser_theme_light')}</span>
             </li>
             <li class={styles.themeItem}>
                 <button
@@ -44,7 +44,7 @@ export function BrowserThemeSection(props) {
                 >
                     <span class="sr-only">{t('customizer_browser_theme_label', { type: 'dark' })}</span>
                 </button>
-                {t('customizer_browser_theme_dark')}
+                <span>{t('customizer_browser_theme_dark')}</span>
             </li>
             <li class={styles.themeItem}>
                 <button
@@ -57,7 +57,7 @@ export function BrowserThemeSection(props) {
                 >
                     <span class="sr-only">{t('customizer_browser_theme_label', { type: 'system' })}</span>
                 </button>
-                {t('customizer_browser_theme_system')}
+                <span>{t('customizer_browser_theme_system')}</span>
             </li>
         </ul>
     );
diff --git a/special-pages/pages/new-tab/app/customizer/components/BrowserThemeSection.module.css b/special-pages/pages/new-tab/app/customizer/components/BrowserThemeSection.module.css
@@ -5,9 +5,15 @@
     --chip-size-half: calc(var(--chip-size) / 2);
 }
 .themeItem {
-    display: grid;
-    justify-items: center;
-    grid-row-gap: 4px;
+    width: 42px;
+
+    span {
+        margin-top: 6px;
+        text-align: center;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: block;
+    }
 }
 .themeButton {
     display: block;
diff --git a/special-pages/pages/new-tab/app/customizer/components/CustomizerDrawerInner.module.css b/special-pages/pages/new-tab/app/customizer/components/CustomizerDrawerInner.module.css
@@ -18,6 +18,11 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: 6px;
+
+    > * {
+        overflow: hidden;
+    }
 }
 
 .internal {
@@ -30,6 +35,7 @@
     width: 24px;
     height: 24px;
     position: relative;
+    flex-shrink: 0;
 
     color: var(--color-black-at-84);
     background-color: var(--color-black-at-9);
@@ -91,7 +97,6 @@
 .bgListItem {
     display: grid;
     grid-row-gap: 4px;
-    white-space: nowrap;
     position: relative;
 
     &:hover {
diff --git a/special-pages/pages/new-tab/app/favorites/integration-tests/favorites.page.js b/special-pages/pages/new-tab/app/favorites/integration-tests/favorites.page.js
@@ -26,8 +26,10 @@ export class FavoritesPage {
 
     async opensInNewWindow() {
         await this.nthFavorite(0).click({ modifiers: ['Shift'] });
-        const calls = await this.ntp.mocks.waitForCallCount({ method: 'favorites_open', count: 1 });
+        await this.nthFavorite(0).click({ button: 'middle' });
+        const calls = await this.ntp.mocks.waitForCallCount({ method: 'favorites_open', count: 2 });
         expect(calls[0].payload.params).toStrictEqual({ id: 'id-many-1', url: 'https://example.com/?id=id-many-1', target: 'new-window' });
+        expect(calls[1].payload.params).toStrictEqual({ id: 'id-many-1', url: 'https://example.com/?id=id-many-1', target: 'new-window' });
     }
 
     async opensInSameTab() {
diff --git a/special-pages/pages/new-tab/public/locales/de/new-tab.json b/special-pages/pages/new-tab/public/locales/de/new-tab.json
@@ -271,5 +271,53 @@
   "customizer_image_delete" : {
     "title" : "Bild {number} löschen",
     "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" : "Keine kürzliche Browsing-Aktivität",
+    "note" : "Placeholder to indicate that no browsing activity was seen in the last 7 days"
+  },
+  "activity_noRecent_subtitle" : {
+    "title" : "Zuletzt besuchte Seiten werden hier angezeigt. Browse weiter, um zu sehen, wie viele Tracker wir blockieren.",
+    "note" : "Shown in the place a list of browsing history entries will be displayed."
+  },
+  "activity_no_trackers" : {
+    "title" : "Keine Tracker gefunden",
+    "note" : "Placeholder message indicating that no trackers are detected"
+  },
+  "activity_no_trackers_blocked" : {
+    "title" : "Keine Tracker blockiert",
+    "note" : "Placeholder message indicating that no trackers are blocked"
+  },
+  "activity_countBlockedPlural" : {
+    "title" : "<b>{count}</b> Tracking-Versuche blockiert",
+    "note" : "The main headline indicating that more than 1 attempt has been blocked. Eg: '2 tracking attempts blocked'"
+  },
+  "activity_favoriteAdd" : {
+    "title" : "{domain} zu Favoriten hinzufügen",
+    "note" : "Button label, allows the user to add the specified domain to their favorites"
+  },
+  "activity_favoriteRemove" : {
+    "title" : "{domain} aus Favoriten entfernen",
+    "note" : "Button label, allows the user to remove the specified domain from their favorites"
+  },
+  "activity_itemRemove" : {
+    "title" : "{domain} aus dem Verlauf entfernen",
+    "note" : "Button label for clearing browsing history for a given domain."
+  },
+  "activity_burn" : {
+    "title" : "Browserverlauf und Daten für {domain} löschen",
+    "note" : "Button label for clearing browsing history and data exclusively for the specified domain"
+  },
+  "activity_menuTitle" : {
+    "title" : "Aktuelle Aktivitäten",
+    "note" : "Used as a label in a customization menu"
+  },
+  "activity_show_more_history" : {
+    "title" : "{count} weitere anzeigen",
+    "note" : "Button label that expands the list of browsing history with the specified count of additional items. Example: 'Show 5 more'"
+  },
+  "activity_show_less_history" : {
+    "title" : "Zusätzliches ausblenden",
+    "note" : "Button label that hides the expanded browsing history items."
   }
 }
diff --git a/special-pages/pages/new-tab/public/locales/es/new-tab.json b/special-pages/pages/new-tab/public/locales/es/new-tab.json
@@ -271,5 +271,53 @@
   "customizer_image_delete" : {
     "title" : "Eliminar imagen {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 hay actividad de navegación reciente",
+    "note" : "Placeholder to indicate that no browsing activity was seen in the last 7 days"
+  },
+  "activity_noRecent_subtitle" : {
+    "title" : "Los sitios visitados recientemente aparecen aquí. Sigue navegando para ver cuántos rastreadores hemos bloqueado.",
+    "note" : "Shown in the place a list of browsing history entries will be displayed."
+  },
+  "activity_no_trackers" : {
+    "title" : "No se han encontrado rastreadores",
+    "note" : "Placeholder message indicating that no trackers are detected"
+  },
+  "activity_no_trackers_blocked" : {
+    "title" : "No se han bloqueado rastreadores",
+    "note" : "Placeholder message indicating that no trackers are blocked"
+  },
+  "activity_countBlockedPlural" : {
+    "title" : "<b>{count}</b> intentos de rastreo bloqueados",
+    "note" : "The main headline indicating that more than 1 attempt has been blocked. Eg: '2 tracking attempts blocked'"
+  },
+  "activity_favoriteAdd" : {
+    "title" : "Añadir {domain} a favoritos",
+    "note" : "Button label, allows the user to add the specified domain to their favorites"
+  },
+  "activity_favoriteRemove" : {
+    "title" : "Eliminar {domain} de favoritos",
+    "note" : "Button label, allows the user to remove the specified domain from their favorites"
+  },
+  "activity_itemRemove" : {
+    "title" : "Eliminar {domain} del historial",
+    "note" : "Button label for clearing browsing history for a given domain."
+  },
+  "activity_burn" : {
+    "title" : "Borra el historial de navegación y los datos de {domain}",
+    "note" : "Button label for clearing browsing history and data exclusively for the specified domain"
+  },
+  "activity_menuTitle" : {
+    "title" : "Actividad reciente",
+    "note" : "Used as a label in a customization menu"
+  },
+  "activity_show_more_history" : {
+    "title" : "Mostrar {count} más",
+    "note" : "Button label that expands the list of browsing history with the specified count of additional items. Example: 'Show 5 more'"
+  },
+  "activity_show_less_history" : {
+    "title" : "Ocultar adicional",
+    "note" : "Button label that hides the expanded browsing history items."
   }
 }
diff --git a/special-pages/pages/new-tab/public/locales/fr/new-tab.json b/special-pages/pages/new-tab/public/locales/fr/new-tab.json
@@ -271,5 +271,53 @@
   "customizer_image_delete" : {
     "title" : "Supprimer l'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" : "Aucune activité de navigation récente",
+    "note" : "Placeholder to indicate that no browsing activity was seen in the last 7 days"
+  },
+  "activity_noRecent_subtitle" : {
+    "title" : "Les sites récemment visités apparaîtront ici. Continuez à naviguer pour voir combien de traqueurs nous bloquons.",
+    "note" : "Shown in the place a list of browsing history entries will be displayed."
+  },
+  "activity_no_trackers" : {
+    "title" : "Aucun traqueur trouvé",
+    "note" : "Placeholder message indicating that no trackers are detected"
+  },
+  "activity_no_trackers_blocked" : {
+    "title" : "Aucun traqueur bloqué",
+    "note" : "Placeholder message indicating that no trackers are blocked"
+  },
+  "activity_countBlockedPlural" : {
+    "title" : "<b>{count}</b> tentative(s) de pistage bloquée(s)",
+    "note" : "The main headline indicating that more than 1 attempt has been blocked. Eg: '2 tracking attempts blocked'"
+  },
+  "activity_favoriteAdd" : {
+    "title" : "Ajouter {domain} aux favoris",
+    "note" : "Button label, allows the user to add the specified domain to their favorites"
+  },
+  "activity_favoriteRemove" : {
+    "title" : "Supprimer {domain} des favoris",
+    "note" : "Button label, allows the user to remove the specified domain from their favorites"
+  },
+  "activity_itemRemove" : {
+    "title" : "Supprimer {domain} de l’historique",
+    "note" : "Button label for clearing browsing history for a given domain."
+  },
+  "activity_burn" : {
+    "title" : "Effacer l'historique de navigation et les données pour {domain}",
+    "note" : "Button label for clearing browsing history and data exclusively for the specified domain"
+  },
+  "activity_menuTitle" : {
+    "title" : "Activité récente",
+    "note" : "Used as a label in a customization menu"
+  },
+  "activity_show_more_history" : {
+    "title" : "Afficher {count} de plus",
+    "note" : "Button label that expands the list of browsing history with the specified count of additional items. Example: 'Show 5 more'"
+  },
+  "activity_show_less_history" : {
+    "title" : "Masquer les éléments supplémentaires",
+    "note" : "Button label that hides the expanded browsing history items."
   }
 }
diff --git a/special-pages/pages/new-tab/public/locales/it/new-tab.json b/special-pages/pages/new-tab/public/locales/it/new-tab.json
diff --git a/special-pages/pages/new-tab/public/locales/nl/new-tab.json b/special-pages/pages/new-tab/public/locales/nl/new-tab.json
diff --git a/special-pages/pages/new-tab/public/locales/pl/new-tab.json b/special-pages/pages/new-tab/public/locales/pl/new-tab.json
diff --git a/special-pages/pages/new-tab/public/locales/pt/new-tab.json b/special-pages/pages/new-tab/public/locales/pt/new-tab.json
diff --git a/special-pages/pages/new-tab/public/locales/ru/new-tab.json b/special-pages/pages/new-tab/public/locales/ru/new-tab.json
