fix middle click

Author: shakyShane

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>
     );

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() {

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() {