Expand the contextmenu event to allow for providing custom context menus

[ExE-Boss]

Since <menu type="context"> has been removed in #2730 because Chrome deemed it hard to control using JavaScript, I propose the following expansion to the contextmenu event specification:

---

Function insertMenu(menu)

Where menu would be an array of objects with the following properties:

Parameter	Required	Details
checked: boolean	Optional, may only be used when the type parameter is "checkbox" or "radio" (default: false).	Indicates whether the checkbox or radio button is checked.
command: "<element ID>"	Optional, can’t be present when any of checked, default, disabled, events, icon, id, label, menu, radiogroup or type parameters are present.	Specifies the ID of a separate element, indicating a command to be invoked indirectly.
default: boolean	Optional	This Boolean attribute indicates use of the same command as the menu's subject element.
disabled: boolean	Optional	Boolean value which indicates that the command is not available.
events: {...}	Optional	An object of functions where the parameters are the name of an HTML event.
icon: "<image URL>"	Optional	Image URL, used to provide a picture to represent the command.
id: "<menu item ID>"	Optional, required to be pressable.	The command ID, passed to the contextmenucommand event listener.
label: "<label>"	Required when the command parameter is not present and the type is not "separator"	The name of the command as shown to the user.
menu: [...]	Required when the type parameter is "menu"	The submenu content.
radiogroup: "<radiogroup>"	Optional, may only be used when the type parameter is "radio".	This attribute specifies the name of a group of commands to be toggled as radio buttons when selected.
type: "<type>"	Optional	Can have any of the following as a parameter: "command" A regular command with an associated action. This is the missing value default. "checkbox" Represents a command that can be toggled between two different states. "menu" Represents a submenu that can be opened. "radio" Represent one selection from a group of commands that can be toggled as radio buttons. "separator" Represents a separator between a group of commands. Note that the "separator" type can’t have any other parameters.

Function preventDefault()

Causes the default browser context menu to not be opened, but any custom context menu specified using insertMenu(menu) is still opened.

[Yay295]

There should be a method to remove a menu item as well.

[ExE-Boss]

@Yay295 You remove a menu item by not including it in the menu array when the event listener calls the insertMenu(menu) function.

[lemnis]

Maybe it could also be based on the browser.menus API used within Web Extensions

[ExE-Boss]

@lemnis That could work as well, but would have to be submitted as a separate proposal. Of course, the menu specified by the website would be placed at the top level (where the old <menu type="context"> would have been placed by the browser).

[jimmywarting]

I'm very interested to see a comeback to tackle custom context menu whether it will be via a <menu> or a javascript api (since i need it on a table and also a canvas element) So I'm subscribing and bumping this 3y old issue a bit

btw, I also saw in some js-dom library I'm using that they had a option for showing a shortcut command at the right side, think that would also be useful...