Address remaining screenshot issues

Author: jsoningram

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

@@ -17,7 +17,7 @@ import { useEnv } from '../../../../../shared/components/EnvironmentProvider.js'
 import { useComputed } from '@preact/signals';
 import { ActivityItemAnimationWrapper } from './ActivityItemAnimationWrapper.js';
 import { useDocumentVisibility } from '../../../../../shared/components/DocumentVisibility.js';
-import { HistoryItems } from './HistoryItems.js';
+import { HistoryItems, HistoryItemsLegacy } from './HistoryItems.js';
 import { NormalizedDataContext, SignalStateProvider } from '../NormalizeDataProvider.js';
 import { ActivityInteractionsContext } from '../../burning/ActivityInteractionsContext.js';
 import { ProtectionsEmpty } from '../../protections/components/Protections.js';
@@ -154,6 +154,7 @@ const BurnableItem = memo(
         // @todo legacyProtections: Once all platforms are ready for the new
         // protections report we can use `ActivityItem`
         const ActivityItemComponent = shouldDisplayLegacyActivity ? ActivityItemLegacy : ActivityItem;
+        const HistoryItemsComponent = shouldDisplayLegacyActivity ? HistoryItemsLegacy : HistoryItems;
 
         return (
             <ActivityItemAnimationWrapper url={id}>
@@ -174,7 +175,7 @@ const BurnableItem = memo(
                     ) : (
                         <TrackerStatus id={id} trackersFound={item.value.trackersFound} />
                     )}
-                    <HistoryItems id={id} />
+                    <HistoryItemsComponent id={id} />
                 </ActivityItemComponent>
             </ActivityItemAnimationWrapper>
         );
@@ -203,6 +204,7 @@ const RemovableItem = memo(
         // @todo legacyProtections: Once all platforms are ready for the new
         // protections report we can use `ActivityItem`
         const ActivityItemComponent = shouldDisplayLegacyActivity ? ActivityItemLegacy : ActivityItem;
+        const HistoryItemsComponent = shouldDisplayLegacyActivity ? HistoryItemsLegacy : HistoryItems;
 
         return (
             <ActivityItemComponent
@@ -222,7 +224,7 @@ const RemovableItem = memo(
                 ) : (
                     <TrackerStatus id={id} trackersFound={item.value.trackersFound} />
                 )}
-                <HistoryItems id={id} />
+                <HistoryItemsComponent id={id} />
             </ActivityItemComponent>
         );
     },

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

@@ -3,6 +3,7 @@ import { useContext, useState } from 'preact/hooks';
 import { NormalizedDataContext } from '../NormalizeDataProvider.js';
 import { useComputed } from '@preact/signals';
 import styles from './Activity.module.css';
+import stylesLegacy from './ActivityLegacy.module.css';
 import { ChevronSmall } from '../../components/Icons.js';
 import { h } from 'preact';
 
@@ -45,6 +46,40 @@ export function HistoryItems({ id }) {
     );
 }
 
+// @todo legacyProtections: Remove `HistoryItemsLegacy` once all platforms
+// support the new UI
+
+/**
+ * @param {object} props
+ * @param {string} props.id
+ */
+export function HistoryItemsLegacy({ id }) {
+    const { activity } = useContext(NormalizedDataContext);
+    const history = useComputed(() => activity.value.history[id]);
+    const [expansion, setExpansion] = useState(/** @type {Expansion} */ ('collapsed'));
+    const max = Math.min(history.value.length, MAX_SHOW_AMOUNT);
+    const min = Math.min(MIN_SHOW_AMOUNT, max);
+    const current = expansion === 'collapsed' ? min : max;
+
+    function onClick(event) {
+        const btn = event.target?.closest('button[data-action]');
+        if (btn?.dataset.action === 'hide') {
+            setExpansion('collapsed');
+        } else if (btn?.dataset.action === 'show') {
+            setExpansion('expanded');
+        }
+    }
+
+    return (
+        <ul class={stylesLegacy.history} onClick={onClick}>
+            {history.value.slice(0, current).map((item, index) => {
+                const isLast = index === current - 1;
+                return <HistoryItem key={item.url + item.title} item={item} isLast={isLast} current={current} min={min} max={max} />;
+            })}
+        </ul>
+    );
+}
+
 /**
  * Renders a history item with relevant details such as title, time, and optional show/hide button.
  *