Implementation:AUTOMATIC1111 Stable diffusion webui Context Menus

Knowledge Sources	AUTOMATIC1111_Stable_diffusion_webui
Domains	UI_Frontend, Context_Menu, User_Interaction
Last Updated	2025-05-15 00:00 GMT

Overview

Implements a custom context menu system for the Gradio web UI, supporting right-click and two-finger touch menus with extensible menu entries.

Description

This JavaScript module provides a framework for adding custom context menus to any element in the web UI. The contextMenuInit function creates a closure-based system with three public APIs: appendContextMenuOption to register menu items for specific CSS selectors, removeContextMenuOption to unregister items by unique ID, and addContextMenuEventListener to activate the context menu handling. Menu entries are stored in a Map keyed by CSS selectors, and when a right-click or two-finger touch event matches a registered selector, a styled nav element is created and positioned at the event coordinates. The menu inherits the styling of the current active tab for visual consistency. Built-in menu entries include "Generate forever" (which repeatedly clicks the generate button at 500ms intervals) and "Cancel generate forever" for both txt2img and img2img tabs. The context menu is dismissed on any trusted click event outside the menu.

Usage

Right-click (or two-finger touch on mobile) on the Generate or Interrupt buttons to access "Generate forever" and "Cancel generate forever" options. Extensions can add custom context menu entries by calling appendContextMenuOption with a CSS selector, entry name, and callback function.

Code Reference

Source Location

• Repository: AUTOMATIC1111_Stable_diffusion_webui
• File: javascript/contextMenus.js
• Lines: 1-163

Signature

var contextMenuInit = function()
function showContextMenu(event, element, menuEntries)
function appendContextMenuOption(targetElementSelector, entryName, entryFunction)
function removeContextMenuOption(uid)
function addContextMenuEventListener()

Import

// Loaded automatically by the web UI as part of the javascript/ directory
// Public API exposed as global variables:
// appendContextMenuOption, removeContextMenuOption, addContextMenuEventListener

I/O Contract

Inputs

Name	Type	Required	Description
targetElementSelector	string	Yes	CSS selector identifying elements that should trigger this context menu
entryName	string	Yes	Display name for the menu entry
entryFunction	function	Yes	Callback function invoked when the menu entry is clicked

Outputs

Name	Type	Description
uid	string	Unique identifier for the registered menu entry (returned by appendContextMenuOption)
(side effect)	DOM	Creates a nav#context-menu element positioned at the event coordinates

Usage Examples

// Add a custom context menu entry to the generate button
var entryId = appendContextMenuOption(
    '#txt2img_generate',
    'My Custom Action',
    function() {
        console.log('Custom action triggered');
    }
);

// Remove the entry later
removeContextMenuOption(entryId);

// Built-in: right-click on Generate button shows "Generate forever"
// Built-in: right-click on Interrupt shows "Cancel generate forever"

Related Pages

• Principle:AUTOMATIC1111_Stable_diffusion_webui_UI_Extensibility