More SR fixes, closes #1445

Author: shakyShane

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

@@ -5,7 +5,7 @@ import { memo } from 'preact/compat';
 import { ActivityApiContext, ActivityContext, ActivityProvider, SignalStateContext, SignalStateProvider } from '../ActivityProvider.js';
 import { useTypedTranslationWith } from '../../types.js';
 import { useVisibility } from '../../widget-list/widget-config.provider.js';
-import { useDocumentVisibility } from '../../utils.js';
+import { useOnMiddleClick, useDocumentVisibility } from '../../utils.js';
 import { useCustomizer } from '../../customizer/components/CustomizerMenu.js';
 import { useBatchedActivityApi, usePlatformName } from '../../settings.provider.js';
 import { ActivityHeading } from '../../privacy-stats/components/PrivacyStats.js';
@@ -42,6 +42,9 @@ function ActivityConfigured({ expansion, toggle }) {
     const { activity } = useContext(SignalStateContext);
     const { didClick } = useContext(ActivityApiContext);
 
+    const ref = useRef(/** @type {HTMLUListElement|null} */ (null));
+    useOnMiddleClick(ref, didClick);
+
     const count = useComputed(() => {
         return activity.value.totalTrackers;
     });
@@ -200,7 +203,7 @@ function TrackerStatus({ id, trackersFound }) {
     const { t } = useTypedTranslationWith(/** @type {enStrings} */ ({}));
     const { activity } = useContext(SignalStateContext);
     const status = useComputed(() => activity.value.trackingStatus[id]);
-    const other = status.value.trackerCompanies.length - DDG_MAX_TRACKER_ICONS;
+    const other = status.value.trackerCompanies.slice(DDG_MAX_TRACKER_ICONS - 1);
     // const { env } = useEnv();
     // if (env === 'development') {
     //     console.groupCollapsed(`trackingStatus ${id}`);
@@ -209,14 +212,21 @@ function TrackerStatus({ id, trackersFound }) {
     //     console.groupEnd();
     // }
 
-    const companyIconsMax = other === 0 ? DDG_MAX_TRACKER_ICONS : DDG_MAX_TRACKER_ICONS - 1;
-    const icons = useComputed(() => {
-        return status.value.trackerCompanies.slice(0, companyIconsMax).map((item, index) => {
-            return <CompanyIcon displayName={item.displayName} key={item} />;
-        });
+    const companyIconsMax = other.length === 0 ? DDG_MAX_TRACKER_ICONS : DDG_MAX_TRACKER_ICONS - 1;
+
+    const icons = status.value.trackerCompanies.slice(0, companyIconsMax).map((item, index) => {
+        return <CompanyIcon displayName={item.displayName} key={item} />;
     });
 
-    const otherIcon = other > 0 ? <span class={styles.otherIcon}>+{other + 1}</span> : null;
+    let otherIcon = null;
+    if (other.length > 0) {
+        const title = other.map((item) => item.displayName).join('\n');
+        otherIcon = (
+            <span title={title} class={styles.otherIcon}>
+                +{other.length}
+            </span>
+        );
+    }
 
     if (status.value.totalCount === 0) {
         if (trackersFound) return <p>{t('activity_no_trackers_blocked')}</p>;

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

@@ -165,15 +165,18 @@ test.describe('activity widget', () => {
         });
         test('fetches the minimal amount initially, and then chunks', async ({ page }, workerInfo) => {
             const ntp = NewtabPage.create(page, workerInfo);
-            const widget = new ActivityPage(page, ntp);
+            const widget = new ActivityPage(page, ntp).withEntries(200);
             const batching = new BatchingPage(page, ntp, widget);
             await ntp.reducedMotion();
-            await ntp.openPage({ additional: { feed: 'activity', 'activity.api': 'batched', platform: 'windows', activity: '200' } });
+            await ntp.openPage({
+                additional: { feed: 'activity', 'activity.api': 'batched', platform: 'windows', activity: widget.entries },
+            });
             await batching.fetchedRows(5);
             await widget.hasRows(5);
             await batching.triggerNext();
             await widget.hasRows(15);
             await batching.triggerNext();
+            await page.waitForTimeout(100);
             await widget.hasRows(25);
         });
         test('patching in place', async ({ page }, workerInfo) => {

special-pages/pages/new-tab/app/activity/mocks/activity.mock-transport.js

@@ -88,6 +88,9 @@ export function activityMockTransport() {
 
             if (sub === 'activity_onDataPatch') {
                 /** @type {any} */ (window).af = {
+                    gen(count) {
+                        return generateSampleData(count);
+                    },
                     patchAddBack(count) {
                         const len = dataset.activity.length;
                         const all = generateSampleData(200);

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

@@ -33,7 +33,7 @@ export const CompanyIcon = memo(
             : `./company-icons/${firstChar}.svg`;
 
         return (
-            <span className={styles.icon}>
+            <span className={styles.icon} title={displayName}>
                 <img src={src} alt={''} class={styles.companyImgIcon} data-loaded="true" />
             </span>
         );

special-pages/pages/new-tab/app/favorites/components/Favorites.js

@@ -12,7 +12,7 @@ import { TileRow } from './TileRow.js';
 import { FavoritesContext } from './FavoritesProvider.js';
 import { CustomizerContext, CustomizerThemesContext } from '../../customizer/CustomizerProvider.js';
 import { signal, useComputed } from '@preact/signals';
-import { eventToTarget, useDocumentVisibility } from '../../utils.js';
+import { eventToTarget, useOnMiddleClick, useDocumentVisibility } from '../../utils.js';
 
 /**
  * @typedef {import('../../../types/new-tab.js').Expansion} Expansion
@@ -153,14 +153,17 @@ function VirtualizedGridRows({ WIDGET_ID, rowHeight, favorites, expansion, openF
         ? rowHeight
         : rows.length * rowHeight;
 
+    const clickHandler = getOnClickHandler(openFavorite, platformName);
+    useOnMiddleClick(safeAreaRef, clickHandler);
+
     return (
         <div
             className={styles.grid}
             style={{ height: containerHeight + 'px' }}
             id={WIDGET_ID}
             ref={safeAreaRef}
             onContextMenu={getContextMenuHandler(openContextMenu)}
-            onClick={getOnClickHandler(openFavorite, platformName)}
+            onClick={clickHandler}
         >
             {rows.length === 0 && <TileRow key={'empty-rows'} items={[]} topOffset={0} add={add} visibility={'visible'} />}
             {rows.length > 0 && <Inner rows={rows} safeAreaRef={safeAreaRef} rowHeight={rowHeight} add={add} />}

special-pages/pages/new-tab/app/utils.js

@@ -70,7 +70,7 @@ export function eventToTarget(event, platformName) {
     const isControlClick = platformName === 'macos' ? event.metaKey : event.ctrlKey;
     if (isControlClick) {
         return 'new-tab';
-    } else if (event.shiftKey) {
+    } else if (event.shiftKey || event.button === 1 /* middle click */) {
         return 'new-window';
     }
     return 'same-tab';
@@ -95,3 +95,23 @@ export function useDocumentVisibility() {
 
     return documentVisibility;
 }
+
+/**
+ * Custom hook to handle middle click event on an element. This is required because Preact doens't support the auxclick event.
+ * @param {import('preact').RefObject<HTMLElement>} ref - The ref of the element to attach the event listener to.
+ * @param {Function} handler - The function to execute on the middle click event.
+ */
+export function useOnMiddleClick(ref, handler) {
+    useEffect(() => {
+        const element = ref.current;
+        if (!element) return;
+
+        const handleAuxClick = (event) => event.button === 1 /* middle button */ && handler(event);
+
+        element.addEventListener('auxclick', handleAuxClick);
+
+        return () => {
+            element.removeEventListener('auxclick', handleAuxClick);
+        };
+    }, [ref, handler]);
+}