adding support for context menu

special-pages/messages/new-tab/contextMenu.notify.json

@@ -0,0 +1,3 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

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

@@ -2,6 +2,7 @@ import { h } from 'preact'
 import styles from './App.module.css'
 import { usePlatformName } from '../settings.provider.js'
 import { WidgetList } from '../widget-list/WidgetList.js'
+import { useContextMenu } from '../utils.js'
 
 /**
  * Renders the App component.
@@ -11,6 +12,7 @@ import { WidgetList } from '../widget-list/WidgetList.js'
  */
 export function App ({ children }) {
     const platformName = usePlatformName()
+    useContextMenu()
     return (
         <div className={styles.layout} data-platform={platformName}>
             <WidgetList />

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

@@ -1,3 +1,6 @@
+import { useEffect } from 'preact/hooks'
+import { useMessaging } from './types.js'
+
 /**
  * Use this to verify the result of updating some local state.
  *
@@ -58,3 +61,19 @@ export function noop (named) {
         console.log(named, 'noop')
     }
 }
+
+/**
+ * Forward the contextmenu event
+ */
+export function useContextMenu () {
+    const messaging = useMessaging()
+    useEffect(() => {
+        function handler () {
+            messaging.contextMenu()
+        }
+        document.body.addEventListener('contextmenu', handler)
+        return () => {
+            document.body.removeEventListener('contextmenu', handler)
+        }
+    }, [messaging])
+}

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

@@ -62,4 +62,15 @@ test.describe('newtab widgets', () => {
             }
         }])
     })
+    test('context menu', async ({ page }, workerInfo) => {
+        const ntp = NewtabPage.create(page, workerInfo)
+        await ntp.reducedMotion()
+        await ntp.openPage()
+
+        // wait for the menu, as a signal that the JS is ready
+        await page.getByRole('button', { name: 'Customize' }).waitFor()
+
+        await page.locator('body').click({ button: 'right' })
+        await ntp.mocks.waitForCallCount({ method: 'contextMenu', count: 1 })
+    })
 })

special-pages/pages/new-tab/src/js/index.js

@@ -47,6 +47,13 @@ export class NewTabPage {
     reportPageException (params) {
         this.messaging.notify('reportPageException', params)
     }
+
+    /**
+     * Sent when a right-click occurs, and wasn't intercepted by another widget
+     */
+    contextMenu () {
+        this.messaging.notify('contextMenu')
+    }
 }
 
 const baseEnvironment = new Environment()

special-pages/types/new-tab.ts

@@ -34,6 +34,7 @@ export type RMFIcon = "Announce" | "DDGAnnounce" | "CriticalUpdate" | "AppUpdate
  */
 export interface NewTabMessages {
   notifications:
+    | ContextMenuNotification
     | ReportInitExceptionNotification
     | ReportPageExceptionNotification
     | RmfDismissNotification
@@ -50,6 +51,12 @@ export interface NewTabMessages {
     | UpdateNotificationOnDataUpdateSubscription
     | WidgetsOnConfigUpdatedSubscription;
 }
+/**
+ * Generated from @see "../messages/new-tab/contextMenu.notify.json"
+ */
+export interface ContextMenuNotification {
+  method: "contextMenu";
+}
 /**
  * Generated from @see "../messages/new-tab/reportInitException.notify.json"
  */