Right click to open context menu?

[dzpt]

Is your feature request related to a problem? Please describe.

I see few app still got reload button while using right click.
any chance to customize this behaviour like vscode?
It would be great to have context menu

Describe the solution you'd like

Don't have

Describe alternatives you've considered

No response

Additional context

No response

[leaanthony]

Thanks for opening this! Yes, I'm surprised it isn't already on the roadmap. Adding it 👍

[glitchedgitz]

Actually, one can create a context menu using JS. And using wails can perform any action from golang.
For JS implementation check this
https://www.sitepoint.com/building-custom-right-click-context-menu-javascript/

I believe there are no limitations for this to need something extra, or Is it there?

[dzpt]

@giteshnxtlvl i know, native context menu is much better.
the view / design of context menu is native like vscode.
some uses both like insomnia.

@leaanthony i found some waiting options right there

wails/v2/pkg/options/options.go

Line 69 in f2568f1

//ContextMenus []*menu.ContextMenu

do you need help to implement it?
i look for "reload" and "inspect element" on context menu but couldn't find it

[leaanthony]

I have some old context menu code for Mac that I need to port. The issue is simply this: do we add some features for some platforms and workarounds for others? Or just wait until we can support common functionality across the platforms? It requires a lot of contributions from the community to do the first or else it will end up a fragmented experience.

In answer to your question: I'll never turn down offers of help! 👍 I'll give you an insight into the original design and see what you think:

• Context menus are standard Wails menus but registered by string ID. Think of it as a map of IDs to menus
• To know which context menu to show at runtime, an html attribute is used to declare it. Example:

Given that we've registered a context menu called "card-context-menu", we can 'attach' it to the frontend using this data attribute:

<div data-wails-context-menu-id='card-context-menu'>
</div>

• When the "contextmenu" javascript event occurs, we send a message to the Go runtime to show the menu in the frontend, based on the ID.
• Callbacks work like normal menus, except a piece of (optional) data is passed back to it. This allows you to provide some context(!) for the context menu.

Example:

<div data-wails-context-menu-id='card-context-menu' data-wails-context-menu-data='uuid-of-image'>
</div>

The idea is that when a menu is clicked, the callback is triggered but the data is passed back also. This is currently commented out in menu/callback.go:

type CallbackData struct {
	MenuItem *MenuItem
	//ContextData string
}

The JS side looked like this:

	// Setup context menu hook
	window.addEventListener('contextmenu', function (e) {
		let currentElement = e.target;
		let contextMenuId;
		while (currentElement != null) {
			contextMenuId = currentElement.dataset['wails-context-menu-id'];
			if (contextMenuId != null) {
				break;
			}
			currentElement = currentElement.parentElement;
		}
		if (contextMenuId != null || window.disableWailsDefaultContextMenu) {
			e.preventDefault();
		}
		if( contextMenuId != null ) {
			let contextData = currentElement.dataset['wails-context-menu-data'];
			let message = {
				id: contextMenuId,
				data: contextData || '',
			};
			window.wailsContextMenuMessage(JSON.stringify(message));
		}
	});

Q: Why do we have context IDs?
A: So we can have different context menus for different frontend components

Q: Why have the context data?
A: Imagine you are showing a set of images and you want to have the same context menu for each, you can determine which image the context operation applies to by attaching the ID to the context-data attribute.

Currently, the context data is a string. I'm wondering whether we should leverage generics for context menus/callbacks so that you can attach arbitrary info (maybe json?) to the element and have it automatically unmarshalled in the callback - not sure yet!

I'm open to suggestions on this! If you want to browse the previous (not battle hardened code), then check out the xbar branch and do a global search for "Context". Let me know your thoughts 👍

[glitchedgitz]

@dzpt, What I see is today's application creates context menu design with their branding, Consider slack or vscode...
Also Afaik and Googled vscode/slack and most of the apps look the same on all the platforms except the title bar.
And the title bar is quite a major part that needs to be native.
Well, the whole thing also depends on the type of app one creating.

[dzpt]

@leaanthony i see you put the id on contextmenu.
the whole idea is great to implement contextmenu on elements.
how about the API to inject the menu on webkit, is that part implement yet?

[fairking]

Should the context menu be a part of UI framework? For example I am using Quasar and they have that feature: https://quasar.dev/vue-components/menu#context-menu

[leaanthony]

Custom Context menus are in v3. Default context menu feature available now in v2 by @mmghv