ntp: support right-click on images (#1403)

shakyShane · web-flow · commit 50cf08bf8f57 · 2025-01-17T16:21:59.000Z
* ntp: support right-click on images

* package-lock.json
diff --git a/package-lock.json b/package-lock.json
diff --git a/special-pages/pages/new-tab/app/customizer/CustomizerProvider.js b/special-pages/pages/new-tab/app/customizer/CustomizerProvider.js
@@ -1,13 +1,14 @@
 import { createContext, h } from 'preact';
 import { useCallback } from 'preact/hooks';
-import { effect, signal, useSignal } from '@preact/signals';
+import { signal, useSignal, useSignalEffect } from '@preact/signals';
 import { useThemes } from './themes.js';
 
 /**
  * @typedef {import('../../types/new-tab.js').CustomizerData} CustomizerData
  * @typedef {import('../../types/new-tab.js').BackgroundData} BackgroundData
  * @typedef {import('../../types/new-tab.js').ThemeData} ThemeData
  * @typedef {import('../../types/new-tab.js').UserImageData} UserImageData
+ * @typedef {import('../../types/new-tab.js').UserImageContextMenu} UserImageContextMenu
  * @typedef {import('../service.hooks.js').State<CustomizerData, undefined>} State
  * @typedef {import('../service.hooks.js').Events<CustomizerData, undefined>} Events
  */
@@ -41,6 +42,10 @@ export const CustomizerContext = createContext({
      * @type {(id: string) => void}
      */
     deleteImage: (id) => {},
+    /**
+     * @param {UserImageContextMenu} params
+     */
+    customizerContextMenu: (params) => {},
 });
 
 /**
@@ -57,7 +62,7 @@ export function CustomizerProvider({ service, initialData, children }) {
     const data = useSignal(initialData);
     const { main, browser } = useThemes(data);
 
-    effect(() => {
+    useSignalEffect(() => {
         const unsub = service.onBackground((evt) => {
             data.value = { ...data.value, background: evt.data.background };
         });
@@ -105,8 +110,11 @@ export function CustomizerProvider({ service, initialData, children }) {
         [service],
     );
 
+    /** @type {(p: UserImageContextMenu) => void} */
+    const customizerContextMenu = useCallback((params) => service.contextMenu(params), [service]);
+
     return (
-        <CustomizerContext.Provider value={{ data, select, upload, setTheme, deleteImage }}>
+        <CustomizerContext.Provider value={{ data, select, upload, setTheme, deleteImage, customizerContextMenu }}>
             <CustomizerThemesContext.Provider value={{ main, browser }}>{children}</CustomizerThemesContext.Provider>
         </CustomizerContext.Provider>
     );
diff --git a/special-pages/pages/new-tab/app/customizer/components/Customizer.examples.js b/special-pages/pages/new-tab/app/customizer/components/Customizer.examples.js
@@ -55,6 +55,7 @@ export const customizerExamples = {
                                 back={noop('back')}
                                 onUpload={noop('onUpload')}
                                 deleteImage={noop('deleteImage')}
+                                customizerContextMenu={noop('customizerContextMenu')}
                             />
                         );
                     }}
diff --git a/special-pages/pages/new-tab/app/customizer/components/CustomizerDrawer.js b/special-pages/pages/new-tab/app/customizer/components/CustomizerDrawer.js
@@ -13,6 +13,15 @@ export function CustomizerDrawer({ displayChildren }) {
 }
 
 function CustomizerConsumer() {
-    const { data, select, upload, setTheme, deleteImage } = useContext(CustomizerContext);
-    return <CustomizerDrawerInner data={data} select={select} onUpload={upload} setTheme={setTheme} deleteImage={deleteImage} />;
+    const { data, select, upload, setTheme, deleteImage, customizerContextMenu } = useContext(CustomizerContext);
+    return (
+        <CustomizerDrawerInner
+            data={data}
+            select={select}
+            onUpload={upload}
+            setTheme={setTheme}
+            deleteImage={deleteImage}
+            customizerContextMenu={customizerContextMenu}
+        />
+    );
 }
diff --git a/special-pages/pages/new-tab/app/customizer/components/CustomizerDrawerInner.js b/special-pages/pages/new-tab/app/customizer/components/CustomizerDrawerInner.js
@@ -16,7 +16,7 @@ import { InlineErrorBoundary } from '../../InlineErrorBoundary.js';
 import { useTypedTranslationWith } from '../../types.js';
 
 /**
- * @import { Widgets, WidgetConfigItem, WidgetVisibility, VisibilityMenuItem, CustomizerData, BackgroundData } from '../../../types/new-tab.js'
+ * @import { Widgets, WidgetConfigItem, WidgetVisibility, VisibilityMenuItem, CustomizerData, BackgroundData, UserImageContextMenu } from '../../../types/new-tab.js'
  * @import enStrings from '../strings.json';
  */
 
@@ -27,8 +27,9 @@ import { useTypedTranslationWith } from '../../types.js';
  * @param {() => void} props.onUpload
  * @param {(theme: import('../../../types/new-tab').ThemeData) => void} props.setTheme
  * @param {(id: string) => void} props.deleteImage
+ * @param {(p: UserImageContextMenu) => void} props.customizerContextMenu
  */
-export function CustomizerDrawerInner({ data, select, onUpload, setTheme, deleteImage }) {
+export function CustomizerDrawerInner({ data, select, onUpload, setTheme, deleteImage, customizerContextMenu }) {
     const { close } = useDrawerControls();
     const { t } = useTypedTranslationWith(/** @type {enStrings} */ ({}));
     return (
@@ -73,7 +74,14 @@ export function CustomizerDrawerInner({ data, select, onUpload, setTheme, delete
                             {id === 'color' && <ColorSelection data={data} select={select} back={pop} />}
                             {id === 'gradient' && <GradientSelection data={data} select={select} back={pop} />}
                             {id === 'image' && (
-                                <ImageSelection data={data} select={select} back={pop} onUpload={onUpload} deleteImage={deleteImage} />
+                                <ImageSelection
+                                    data={data}
+                                    select={select}
+                                    back={pop}
+                                    onUpload={onUpload}
+                                    deleteImage={deleteImage}
+                                    customizerContextMenu={customizerContextMenu}
+                                />
                             )}
                         </Fragment>
                     )}
diff --git a/special-pages/pages/new-tab/app/customizer/components/ImageSelection.js b/special-pages/pages/new-tab/app/customizer/components/ImageSelection.js
@@ -12,7 +12,7 @@ import { useTypedTranslationWith } from '../../types.js';
 
 /**
  * @import enStrings from '../strings.json';
- * @import { Widgets, WidgetConfigItem, WidgetVisibility, VisibilityMenuItem, CustomizerData, BackgroundData, PredefinedGradient } from '../../../types/new-tab.js'
+ * @import { Widgets, WidgetConfigItem, WidgetVisibility, VisibilityMenuItem, CustomizerData, BackgroundData, PredefinedGradient, UserImageContextMenu } from '../../../types/new-tab.js'
  */
 
 /**
@@ -22,8 +22,9 @@ import { useTypedTranslationWith } from '../../types.js';
  * @param {() => void} props.back
  * @param {() => void} props.onUpload
  * @param {(id: string) => void} props.deleteImage
+ * @param {(p: UserImageContextMenu) => void} props.customizerContextMenu
  */
-export function ImageSelection({ data, select, back, onUpload, deleteImage }) {
+export function ImageSelection({ data, select, back, onUpload, deleteImage, customizerContextMenu }) {
     const { t } = useTypedTranslationWith(/** @type {enStrings} */ ({}));
     function onClick(event) {
         let target = /** @type {HTMLElement|null} */ (event.target);
@@ -38,8 +39,19 @@ export function ImageSelection({ data, select, back, onUpload, deleteImage }) {
         select({ background: { kind: 'userImage', value: match } });
     }
 
+    function onContextMenu(event) {
+        const target = /** @type {HTMLElement|null} */ (event.target);
+        if (!(target instanceof HTMLElement)) return;
+        const id = target.closest('button')?.dataset.id;
+        if (typeof id === 'string') {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            customizerContextMenu({ id, target: 'userImage' });
+        }
+    }
+
     return (
-        <div>
+        <div onContextMenu={onContextMenu}>
             <button type={'button'} onClick={back} class={cn(styles.backBtn, styles.sectionTitle)}>
                 <BackChevron />
                 {t('customizer_background_selection_image_existing')}
diff --git a/special-pages/pages/new-tab/app/customizer/customizer.md b/special-pages/pages/new-tab/app/customizer/customizer.md
@@ -161,3 +161,14 @@ title: Customizer
         "id": "abc"
       } 
       ```
+  
+- {@link "NewTab Messages".CustomizerContextMenuNotification `customizer_contextMenu`}.
+    - Sends {@link "NewTab Messages".UserImageContextMenu} 
+    - Note: only sent for right-clicks on user images in the selection screen.
+    - For example:
+    - ```json
+      {
+        "target": "userImage",
+        "id": "01"
+      } 
+      ```
diff --git a/special-pages/pages/new-tab/app/customizer/customizer.service.js b/special-pages/pages/new-tab/app/customizer/customizer.service.js
@@ -2,6 +2,7 @@
  * @typedef {import("../../types/new-tab.js").CustomizerData} CustomizerData
  * @typedef {import("../../types/new-tab.js").UserImageData} UserImageData
  * @typedef {import("../../types/new-tab.js").UserColorData} UserColorData
+ * @typedef {import("../../types/new-tab.js").UserImageContextMenu} UserImageContextMenu
  * @typedef {import("../../types/new-tab.js").ThemeData} ThemeData
  * @typedef {import("../../types/new-tab.js").BackgroundData} BackgroundData
  */
@@ -135,4 +136,11 @@ export class CustomizerService {
         });
         this.ntp.messaging.notify('customizer_setTheme', theme);
     }
+
+    /**
+     * @param {import('../../types/new-tab.js').UserImageContextMenu} params
+     */
+    contextMenu(params) {
+        this.ntp.messaging.notify('customizer_contextMenu', params);
+    }
 }
diff --git a/special-pages/pages/new-tab/app/customizer/integration-tests/customizer.page.js b/special-pages/pages/new-tab/app/customizer/integration-tests/customizer.page.js
@@ -441,4 +441,11 @@ export class CustomizerPage {
             { value: 'gradient07' },
         ]);
     }
+
+    async rightClicksFirstImage() {
+        const { page } = this.ntp;
+        await page.getByRole('radio', { name: 'Select image 1' }).click({
+            button: 'right',
+        });
+    }
 }
diff --git a/special-pages/pages/new-tab/app/customizer/integration-tests/customizer.spec.js b/special-pages/pages/new-tab/app/customizer/integration-tests/customizer.spec.js
@@ -1,4 +1,4 @@
-import { test } from '@playwright/test';
+import { test, expect } from '@playwright/test';
 import { NewtabPage } from '../../../integration-tests/new-tab.page.js';
 import { CustomizerPage } from './customizer.page.js';
 
@@ -265,4 +265,23 @@ test.describe('newtab customizer', () => {
         await cp.opensCustomizer();
         await cp.opensSettings();
     });
+    test('context menu for image selections', async ({ page }, workerInfo) => {
+        const ntp = NewtabPage.create(page, workerInfo);
+        await ntp.reducedMotion();
+        const cp = new CustomizerPage(ntp);
+        await ntp.openPage({ additional: { customizerDrawer: 'enabled', userImages: 'true' } });
+        await cp.opensCustomizer();
+        await cp.opensImages();
+        await cp.rightClicksFirstImage();
+        const calls = await ntp.mocks.waitForCallCount({ method: 'customizer_contextMenu', count: 1 });
+        expect(calls[0].payload).toStrictEqual({
+            context: 'specialPages',
+            featureName: 'newTabPage',
+            method: 'customizer_contextMenu',
+            params: {
+                target: 'userImage',
+                id: '01',
+            },
+        });
+    });
 });
diff --git a/special-pages/pages/new-tab/messages/customizer_contextMenu.notify.json b/special-pages/pages/new-tab/messages/customizer_contextMenu.notify.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "oneOf": [
+    {
+      "type": "object",
+      "title": "UserImageContextMenu",
+      "required": ["id", "target"],
+      "properties": {
+        "id": {
+          "type": "string"
+        },
+        "target": {
+          "type": "string",
+          "const": "userImage"
+        }
+      }
+    }
+  ]
+}
diff --git a/special-pages/pages/new-tab/types/new-tab.ts b/special-pages/pages/new-tab/types/new-tab.ts
@@ -86,6 +86,7 @@ export type RMFIcon = "Announce" | "DDGAnnounce" | "CriticalUpdate" | "AppUpdate
 export interface NewTabMessages {
   notifications:
     | ContextMenuNotification
+    | CustomizerContextMenuNotification
     | CustomizerDeleteImageNotification
     | CustomizerSetBackgroundNotification
     | CustomizerSetThemeNotification
@@ -156,6 +157,17 @@ export interface VisibilityMenuItem {
    */
   title: string;
 }
+/**
+ * Generated from @see "../messages/customizer_contextMenu.notify.json"
+ */
+export interface CustomizerContextMenuNotification {
+  method: "customizer_contextMenu";
+  params: UserImageContextMenu;
+}
+export interface UserImageContextMenu {
+  id: string;
+  target: "userImage";
+}
 /**
  * Generated from @see "../messages/customizer_deleteImage.notify.json"
  */

Original file line number	Diff line number	Diff line change
`@@ -441,4 +441,11 @@ export class CustomizerPage {`
`441`	`441`	`{ value: 'gradient07' },`
`442`	`442`	`]);`
`443`	`443`	`}`
	`444`	`+`
	`445`	`+ async rightClicksFirstImage() {`
	`446`	`+ const { page } = this.ntp;`
	`447`	`+ await page.getByRole('radio', { name: 'Select image 1' }).click({`
	`448`	`+ button: 'right',`
	`449`	`+ });`
	`450`	`+ }`
`444`	`451`	`}`