WIP on activity details

@todo wire up real data

Author: jsoningram

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

@@ -6,7 +6,6 @@ import { ActivityContext, ActivityServiceContext } from '../ActivityProvider.js'
 import { useTypedTranslationWith } from '../../types.js';
 import { useOnMiddleClick } from '../../utils.js';
 import { useAdBlocking, useBatchedActivityApi, usePlatformName } from '../../settings.provider.js';
-import { CompanyIcon } from '../../components/CompanyIcon.js';
 import { Trans } from '../../../../../shared/components/TranslationsProvider.js';
 import { ActivityItem } from './ActivityItem.js';
 import { ActivityBurningSignalContext, BurnProvider } from '../../burning/BurnProvider.js';
@@ -18,6 +17,7 @@ import { HistoryItems } from './HistoryItems.js';
 import { NormalizedDataContext, SignalStateProvider } from '../NormalizeDataProvider.js';
 import { ActivityInteractionsContext } from '../../burning/ActivityInteractionsContext.js';
 import { ProtectionsEmpty } from '../../protections/components/Protections.js';
+import { TickPill } from '../../components/TickPill/TickPill';
 
 /**
  * @import enStrings from "../strings.json"
@@ -181,13 +181,12 @@ function TrackerStatus({ id, trackersFound }) {
     const { t } = useTypedTranslationWith(/** @type {enStrings} */ ({}));
     const { activity } = useContext(NormalizedDataContext);
     const status = useComputed(() => activity.value.trackingStatus[id]);
-    const other = status.value.trackerCompanies.slice(DDG_MAX_TRACKER_ICONS - 1);
-    const companyIconsMax = other.length === 0 ? DDG_MAX_TRACKER_ICONS : DDG_MAX_TRACKER_ICONS - 1;
+    // @todo jingram add `cookiePopUpBlocked`
+    const {totalCount, trackerCompanies} = status.value;
+    const cookiePopUpBlocked = true;
+    const other = trackerCompanies.slice(DDG_MAX_TRACKER_ICONS - 1);
     const adBlocking = useAdBlocking();
 
-    const icons = status.value.trackerCompanies.slice(0, companyIconsMax).map((item, _index) => {
-        return <CompanyIcon displayName={item.displayName} key={item} />;
-    });
 
     let otherIcon = null;
     if (other.length > 0) {
@@ -199,7 +198,7 @@ function TrackerStatus({ id, trackersFound }) {
         );
     }
 
-    if (status.value.totalCount === 0) {
+    if (totalCount === 0) {
         let text;
         if (trackersFound) {
             text = adBlocking ? t('activity_no_adsAndTrackers_blocked') : t('activity_no_trackers_blocked');
@@ -208,23 +207,26 @@ function TrackerStatus({ id, trackersFound }) {
         }
         return (
             <p class={styles.companiesIconRow} data-testid="TrackerStatus">
-                {text}
+                <TickPill text={text} displayTick={false}/>
             </p>
         );
     }
 
     return (
         <div class={styles.companiesIconRow} data-testid="TrackerStatus">
-            <div class={styles.companiesIcons}>
-                {icons}
-                {otherIcon}
-            </div>
             <div class={styles.companiesText}>
-                {adBlocking ? (
-                    <Trans str={t('activity_countBlockedAdsAndTrackersPlural', { count: String(status.value.totalCount) })} values={{}} />
-                ) : (
-                    <Trans str={t('activity_countBlockedPlural', { count: String(status.value.totalCount) })} values={{}} />
+                {totalCount > 0 && (
+                  <TickPill
+                      text={
+                        t(totalCount === 1
+                          ? 'activity_countBlockedSingular'
+                          : 'activity_countBlockedPlural',
+                          { count: String(totalCount) }
+                        )
+                      }
+                  />
                 )}
+                {cookiePopUpBlocked && <TickPill text={t('activity_cookiePopUpBlocked')} />}
             </div>
         </div>
     );

special-pages/pages/new-tab/app/activity/components/Activity.module.css

@@ -77,9 +77,7 @@
     background: var(--color-black-at-12);
     transition: transform .2s;
 
-    border: 0.5px solid rgba(0, 0, 0, 0.09);
     background: rgba(255, 255, 255, 0.30);
-    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.12), 0px 0px 1.5px 0px rgba(0, 0, 0, 0.16);
 
     [data-theme="dark"] & {
         border: 0.5px solid rgba(255, 255, 255, 0.09);
@@ -198,18 +196,14 @@
     padding-left: 1px; /* visual alignment */
 }
 
-.companiesIcons {
-    display: flex;
-    gap: 3px;
-    > * {
-        flex-shrink: 0;
-        min-width: 0;
-    }
+.companiesText {
+  & div:first-of-type {
+    margin-bottom: 6px;
+  }
 }
-.companiesText {}
 
 .history {
-    margin-top: 10px;
+    margin-top: 8px;
 }
 .historyItem {
     display: flex;
@@ -293,4 +287,4 @@
             transform: rotate(180deg)
         }
     }
-}
+}

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

@@ -16,8 +16,16 @@
     "note": "Placeholder message indicating that no trackers are blocked"
   },
   "activity_countBlockedPlural": {
-    "title": "<b>{count}</b> tracking attempts blocked",
-    "note": "The main headline indicating that more than 1 attempt has been blocked. Eg: '2 tracking attempts blocked'"
+    "title": "{count} Tracking attempts blocked",
+    "note": "Pill text indicating that more than 1 attempt has been blocked. Eg: '2 Tracking attempts blocked'"
+  },
+  "activity_countBlockedSingular": {
+    "title": "{count} Tracking attempt blocked",
+    "note": "Pill text indicating that 1 attempt has been blocked. Eg: '1 Tracking attempt blocked'"
+  },
+  "activity_cookiePopUpBlocked": {
+    "title": "Cookie pop-up blocked",
+    "note": "Pill text indicating that we have blocked cookie pop-ups"
   },
   "activity_noRecentAdsAndTrackers_subtitle": {
     "title": "Recently visited sites will appear here. Keep browsing to see how many ads and trackers we block.",

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

@@ -634,3 +634,20 @@ export function InfoIcon(props) {
       </svg>
   );
 }
+
+/**
+ * From https://dub.duckduckgo.com/duckduckgo/Icons/blob/Main/Glyphs/16px/Check-16.svg
+ * @param {import('preact').JSX.SVGAttributes<SVGSVGElement>} props
+ */
+export function Check(props) {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
+          <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M14.7573 2.12724C15.0304 2.35035 15.0807 2.73423 14.8576 3.00731L6.97593 13.4341C6.43147 14.1336 5.36195 14.1258 4.82836 13.4027L1.12448 9.00075C0.904738 8.7249 0.946807 8.33307 1.22265 8.11333C1.4985 7.89359 1.89033 7.93566 2.11007 8.2115L5.81395 12.6132C5.93397 12.7636 6.14954 12.7645 6.27138 12.6152L14.153 2.18824C14.3761 1.91517 14.76 1.86459 14.7573 2.12724Z"
+              fill="white"
+          />
+        </svg>
+    );
+}

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

@@ -0,0 +1,24 @@
+import { h } from 'preact';
+import { Check } from '../Icons.js';
+import cn from 'classnames';
+import styles from './TickPill.module.css';
+
+/**
+ * A pill-shaped component displaying a checkmark with text
+ * @param {Object} props
+ * @param {string} props.text - The text to display next to the checkmark
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {bool} [props.displayTick] - Display the tick or not
+ */
+export function TickPill({ text, className, displayTick = true }) {
+    return (
+        <div class={cn(styles.tickPill, className || '')}>
+            {displayTick && (
+                <span class={styles.iconWrapper}>
+                    <Check />
+                </span>
+            )}
+            <span class={styles.text}>{text}</span>
+        </div>
+    );
+}

special-pages/pages/new-tab/app/components/TickPill/TickPill.module.css

@@ -0,0 +1,45 @@
+.tickPill {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 10px;
+    border-radius: 100px;
+    background-color: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    height: 20px;
+    width: fit-content;
+}
+
+.iconWrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+.iconWrapper svg {
+    width: 12px;
+    height: 12px;
+}
+
+.text {
+    font-size: 11px;
+    font-weight: 400;
+    line-height: 16px;
+    color: rgba(255, 255, 255, 0.84);
+    white-space: nowrap;
+}
+
+/* Light mode styles */
+[data-theme="light"] .tickPill {
+    background-color: rgba(0, 0, 0, 0.04);
+    border: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+[data-theme="light"] .text {
+    color: rgba(0, 0, 0, 0.84);
+}
+
+[data-theme="light"] .iconWrapper svg path {
+    fill: rgba(0, 0, 0, 0.84);
+}

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

@@ -418,12 +418,16 @@
     "note": "Placeholder message indicating that no trackers are blocked"
   },
   "activity_countBlockedPlural": {
-    "title": "{tickMark} {count} Tracking attempts blocked",
-    "note": "The main headline indicating that more than 1 attempt has been blocked. Eg: '2 Tracking attempts blocked'"
+    "title": "{count} Tracking attempts blocked",
+    "note": "Pill text indicating that more than 1 attempt has been blocked. Eg: '2 Tracking attempts blocked'"
   },
   "activity_countBlockedSingular": {
-    "title": "{tickMark} {count} Tracking attempt blocked",
-    "note": "The main headline indicating that 1 attempt has been blocked. Eg: '1 Tracking attempt blocked'"
+    "title": "{count} Tracking attempt blocked",
+    "note": "Pill text indicating that 1 attempt has been blocked. Eg: '1 Tracking attempt blocked'"
+  },
+  "activity_cookiePopUpBlocked": {
+    "title": "Cookie pop-up blocked",
+    "note": "Pill text indicating that we have blocked cookie pop-ups"
   },
   "activity_noRecentAdsAndTrackers_subtitle": {
     "title": "Recently visited sites will appear here. Keep browsing to see how many ads and trackers we block.",