Make context element mandatory when showing a context menu.

CHANGELOG.md

@@ -7,7 +7,7 @@
 ## 1.59.0
 
 <a name="breaking_changes_1.59.0">[Breaking Changes:](#breaking_changes_1.59.0)</a>
-
+- [core] A context html element is now mandatory when showing a context menu [#14982](https://github.com/eclipse-theia/theia/pull/14982) - contributed on behalf of STMicroelectronics
 - [core] Adjusted the binding of named `ILogger` injections. These no longer have to be bound explicitly.
   If you encounter errors such as `Error: Ambiguous match found for serviceIdentifier: Symbol(ILogger)`, remove your bindings for the `ILogger` symbol.
 

examples/api-samples/src/browser/toolbar/sample-toolbar-contribution.tsx

@@ -91,6 +91,7 @@ export class SampleToolbarContribution extends AbstractToolbarContribution
                 includeAnchorArg: false,
                 menuPath: ToolbarMenus.SEARCH_WIDGET_DROPDOWN_MENU,
                 anchor: { x: left, y: bottom },
+                context: e.currentTarget
             });
         }
     }

packages/ai-chat-ui/src/browser/chat-input-widget.tsx

@@ -142,6 +142,7 @@ export class AIChatInputWidget extends ReactWidget {
         this.contextMenuRenderer.render({
             menuPath: AIChatInputWidget.CONTEXT_MENU,
             anchor: { x: event.posx, y: event.posy },
+            context: event.target
         });
         event.preventDefault();
     }

packages/ai-chat-ui/src/browser/chat-response-renderer/code-part-renderer.tsx

@@ -137,7 +137,8 @@ export class CodePartRenderer
         this.contextMenuRenderer.render({
             menuPath: ChatViewTreeWidget.CONTEXT_MENU,
             anchor: { x: event.posx, y: event.posy },
-            args: [node, { code }]
+            args: [node, { code }],
+            context: event.target
         });
         event.preventDefault();
     }

packages/ai-chat-ui/src/browser/chat-tree-view/chat-view-tree-widget.tsx

@@ -435,7 +435,8 @@ export class ChatViewTreeWidget extends TreeWidget {
         this.contextMenuRenderer.render({
             menuPath: ChatViewTreeWidget.CONTEXT_MENU,
             anchor: { x: event.clientX, y: event.clientY },
-            args: [node]
+            args: [node],
+            context: event.currentTarget
         });
         event.preventDefault();
     }

packages/core/src/browser/context-menu-renderer.ts

@@ -110,10 +110,10 @@ export interface RenderContextMenuOptions {
      */
     includeAnchorArg?: boolean;
     /**
-     * A DOM context to use when evaluating any `when` clauses
-     * of menu items registered for this item.
+     * A DOM context for the menu to be shown
+     * Will be used to attach the menu to a window and to evaluate enablement ("when"-clauses)
      */
-    context?: HTMLElement;
+    context: HTMLElement;
     contextKeyService?: ContextMatcher;
     onHide?: () => void;
     /**

packages/core/src/browser/shell/side-panel-handler.ts

@@ -240,7 +240,8 @@ export class SidePanelHandler {
         this.contextMenuRenderer.render({
             args: [title.owner],
             menuPath: SIDE_PANEL_TOOLBAR_CONTEXT_MENU,
-            anchor: e
+            anchor: e,
+            context: e.currentTarget instanceof HTMLElement ? e.currentTarget : this.tabBar.node
         });
     }
 

packages/core/src/browser/shell/sidebar-bottom-menu-widget.tsx

@@ -32,7 +32,8 @@ export class SidebarBottomMenuWidget extends SidebarMenuWidget {
             anchor: {
                 x: button.left + button.width,
                 y: button.top + button.height,
-            }
+            },
+            context: e.currentTarget
         });
     }
 

packages/core/src/browser/shell/sidebar-menu-widget.tsx

@@ -152,6 +152,7 @@ export class SidebarMenuWidget extends ReactWidget {
                 x: button.left + button.width,
                 y: button.top,
             },
+            context: e.currentTarget,
             onHide: () => {
                 this.preservingContext = false;
                 if (this.preservedContext) {

packages/core/src/browser/shell/tab-bar-toolbar/tab-bar-toolbar.tsx

@@ -309,7 +309,7 @@ export class TabBarToolbar extends ReactWidget {
             menuPath: TAB_BAR_TOOLBAR_CONTEXT_MENU,
             args: [this.current],
             anchor,
-            context: this.current?.node,
+            context: this.current?.node || this.node,
             onHide: () => toDisposeOnHide.dispose(),
             skipSingleRootNode: true,
         });
@@ -375,7 +375,7 @@ export class TabBarToolbar extends ReactWidget {
             menuPath,
             args: [this.current],
             anchor,
-            context: this.current?.node,
+            context: this.current?.node || this.node,
             contextKeyService: contextMatcher,
             onHide: () => toDisposeOnHide.dispose()
         });

packages/core/src/browser/shell/tab-bars.ts

@@ -653,6 +653,7 @@ export class TabBarRenderer extends TabBar.Renderer {
                 menuPath: this.contextMenuPath!,
                 anchor: event,
                 args: [event],
+                context: event.currentTarget,
                 contextKeyService: contextKeyServiceOverlay,
                 // We'd like to wait until the command triggered by the context menu has been run, but this should let it get through the preamble, at least.
                 onHide: () => setTimeout(() => { if (this.selectionService) { this.selectionService.selection = oldSelection; } })

packages/core/src/browser/tree/tree-widget.tsx

@@ -1362,6 +1362,7 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
                 const args = this.toContextMenuArgs(node);
                 setTimeout(() => this.contextMenuRenderer.render({
                     menuPath: contextMenuPath,
+                    context: event.currentTarget,
                     anchor: { x, y },
                     args
                 }), 10);

packages/core/src/browser/view-container.ts

@@ -170,7 +170,11 @@ export class ViewContainer extends BaseWidget implements StatefulWidget, Applica
                 if (event.button === 2 && every(this.containerLayout.iter(), part => !!part.isHidden)) {
                     event.stopPropagation();
                     event.preventDefault();
-                    contextMenuRenderer.render({ menuPath: this.contextMenuPath, anchor: event });
+                    contextMenuRenderer.render({
+                        menuPath: this.contextMenuPath,
+                        anchor: event,
+                        context: event.currentTarget instanceof HTMLElement ? event.currentTarget : this.node
+                    });
                 }
             }),
             commandRegistry.registerCommand({ id: this.globalHideCommandId }, {
@@ -436,7 +440,7 @@ export class ViewContainer extends BaseWidget implements StatefulWidget, Applica
                 if (event.button === 2) {
                     event.preventDefault();
                     event.stopPropagation();
-                    this.contextMenuRenderer.render({ menuPath: this.contextMenuPath, anchor: event });
+                    this.contextMenuRenderer.render({ menuPath: this.contextMenuPath, anchor: event, context: this.node });
                 }
             }),
             newPart.onTitleChanged(() => this.refreshMenu(newPart)),

packages/core/src/electron-browser/menu/electron-context-menu-renderer.ts

@@ -56,6 +56,7 @@ export class ElectronTextInputContextMenuContribution implements FrontendApplica
                     this.contextMenuRenderer.render({
                         anchor: event,
                         menuPath: ElectronTextInputContextMenu.MENU_PATH,
+                        context: event.target,
                         onHide: () => target.focus()
                     });
                 }
@@ -119,7 +120,8 @@ export class ElectronContextMenuRenderer extends BrowserContextMenuRenderer {
             const node = (menuAccess as BrowserContextMenuAccess).menu.node;
             const topPanelHeight = document.getElementById('theia-top-panel')?.clientHeight ?? 0;
             // ensure the context menu is not displayed outside of the main area
-            if (node.style.top && parseInt(node.style.top.substring(0, node.style.top.length - 2)) < topPanelHeight) {
+            const menuRect = node.getBoundingClientRect();
+            if (menuRect.top < topPanelHeight) {
                 node.style.top = `${topPanelHeight}px`;
                 node.style.maxHeight = `calc(${node.style.maxHeight} - ${topPanelHeight}px)`;
             }

packages/editor/src/browser/editor-linenumber-contribution.ts

@@ -68,6 +68,7 @@ export class EditorLineNumberContribution implements FrontendApplicationContribu
                     this.contextMenuRenderer.render({
                         menuPath: EDITOR_LINENUMBER_CONTEXT_MENU,
                         anchor: event.event,
+                        context: editor.node,
                         args,
                         contextKeyService
                     });

packages/keymaps/src/browser/keybindings-widget.tsx

@@ -462,7 +462,8 @@ export class KeybindingWidget extends ReactWidget implements StatefulWidget {
         this.contextMenuRenderer.render({
             menuPath: KeybindingWidget.CONTEXT_MENU,
             anchor: event.nativeEvent,
-            args: [item, this]
+            args: [item, this],
+            context: event.currentTarget
         });
     }
 

packages/memory-inspector/src/browser/memory-widget/memory-table-widget.tsx

@@ -605,6 +605,7 @@ export class MemoryTableWidget extends ReactWidget {
                 menuPath: MemoryTableWidget.CONTEXT_MENU,
                 anchor: { x: right, y: top },
                 args: this.getContextMenuArgs(event),
+                context: target
             });
         }
     }

packages/memory-inspector/src/browser/register-widget/register-table-widget.tsx

@@ -260,6 +260,7 @@ export class RegisterTableWidget extends MemoryTableWidget {
                 menuPath: RegisterTableWidget.CONTEXT_MENU,
                 anchor: event.nativeEvent,
                 args: this.getContextMenuArgs(event),
+                context: curTarget
             });
         }
     }

packages/monaco/src/browser/monaco-context-menu.ts

@@ -51,14 +51,14 @@ export class MonacoContextMenuService implements IContextMenuService {
         }
     }
 
-    private getContext(delegate: IContextMenuDelegate): HTMLElement | undefined {
+    private getContext(delegate: IContextMenuDelegate): HTMLElement {
         const anchor = delegate.getAnchor();
         if (anchor instanceof HTMLElement) {
             return anchor;
         } else if (anchor instanceof StandardMouseEvent) {
             return anchor.target;
         } else {
-            return undefined;
+            return window.document.body; // last resort
         }
     }
     showContextMenu(delegate: IContextMenuDelegate): void {

packages/notebook/src/browser/view/notebook-cell-toolbar-factory.tsx

@@ -92,7 +92,7 @@ export class NotebookCellToolbarFactory {
                         menuPath,
                         includeAnchorArg: false,
                         args: itemOptions.contextMenuArgs?.(),
-                        context: this.notebookContextManager.context
+                        context: this.notebookContextManager.context || (e.currentTarget as HTMLElement)
                     }) :
                 () => this.commandRegistry.executeCommand(menuNode.command!, ...(itemOptions.commandArgs?.() ?? [])),
             isVisible: () => menuPath ? true : Boolean(this.commandRegistry.getVisibleHandler(menuNode.command!, ...(itemOptions.commandArgs?.() ?? []))),

packages/plugin-ext/src/main/browser/view/tree-view-widget.tsx

@@ -929,7 +929,8 @@ export class TreeViewWidget extends TreeViewWelcomeWidget {
                     menuPath: contextMenuPath,
                     anchor: { x, y },
                     args,
-                    contextKeyService
+                    contextKeyService,
+                    context: event.currentTarget
                 }), 10);
             }
         }

packages/plugin-ext/src/main/browser/webview/webview.ts

@@ -406,7 +406,8 @@ export class WebviewWidget extends BaseWidget implements StatefulWidget, Extract
                     args: [event.context],
                     anchor: {
                         x: domRect.x + event.clientX, y: domRect.y + event.clientY
-                    }
+                    },
+                    context: this.node
                 });
             });
     }

packages/preferences/src/browser/views/components/preference-node-renderer.ts

@@ -269,6 +269,7 @@ export abstract class PreferenceLeafNodeRenderer<ValueType extends JSONValue, In
                 menuPath: PreferenceMenus.PREFERENCE_EDITOR_CONTEXT_MENU,
                 anchor: { x: domRect.left, y: domRect.bottom },
                 args: [{ id: this.id, value }],
+                context: target,
                 onHide: () => this.hideCog()
             });
         }

packages/preferences/src/browser/views/preference-scope-tabbar-widget.tsx

@@ -260,6 +260,7 @@ export class PreferencesScopeTabBar extends TabBar<Widget> implements StatefulWi
         this.contextMenuRenderer.render({
             menuPath: PreferenceMenus.FOLDER_SCOPE_MENU_PATH,
             anchor: { x: tabRect.left, y: tabRect.bottom },
+            context: folderTabNode,
             onHide: () => {
                 setTimeout(() => toDisposeOnHide.dispose());
                 if (source === 'click') { folderTabNode.blur(); }

packages/scm/src/browser/scm-tree-widget.tsx

@@ -523,7 +523,8 @@ export abstract class ScmElement<P extends ScmElement.Props = ScmElement.Props>
             contextMenuRenderer.render({
                 menuPath: this.contextMenuPath,
                 anchor: event.nativeEvent,
-                args: this.contextMenuArgs
+                args: this.contextMenuArgs,
+                context: event.currentTarget
             });
         });
     };

packages/terminal/src/browser/terminal-widget-impl.ts

@@ -281,7 +281,7 @@ export class TerminalWidgetImpl extends TerminalWidget implements StatefulWidget
         const contextMenuListener = (event: MouseEvent) => {
             event.preventDefault();
             event.stopPropagation();
-            this.contextMenuRenderer.render({ menuPath: TerminalMenus.TERMINAL_CONTEXT_MENU, anchor: event });
+            this.contextMenuRenderer.render({ menuPath: TerminalMenus.TERMINAL_CONTEXT_MENU, anchor: event, context: this.node });
         };
         this.node.addEventListener('contextmenu', contextMenuListener);
         this.onDispose(() => this.node.removeEventListener('contextmenu', contextMenuListener));

packages/timeline/src/browser/timeline-tree-widget.tsx

@@ -111,7 +111,8 @@ export class TimelineItemNode extends React.Component<TimelineItemNode.Props> {
             contextMenuRenderer.render({
                 menuPath: TIMELINE_ITEM_CONTEXT_MENU,
                 anchor: event.nativeEvent,
-                args: [timelineItem]
+                args: [timelineItem],
+                context: event.currentTarget
             });
         } finally {
             contextKeys.timelineItem.set(currentTimelineItem);

packages/toolbar/src/browser/toolbar.tsx

@@ -106,6 +106,7 @@ export class ToolbarImpl extends TabBarToolbar {
         const { menuPath, anchor } = this.getMenuDetailsForClick(event);
         return this.contextMenuRenderer.render({
             args: contextMenuArgs,
+            context: event.currentTarget,
             menuPath,
             anchor,
         });

packages/vsx-registry/src/browser/vsx-extension.tsx

@@ -351,7 +351,8 @@ export class VSXExtension implements VSXExtensionData, TreeElement {
                 x: e.clientX,
                 y: e.clientY,
             },
-            args: [this]
+            args: [this],
+            context: e.currentTarget
         });
     }