@codingame/monaco-vscode-api 30.0.1 → 31.0.1

package/vscode/src/vs/platform/actionWidget/browser/actionList.js

@@ -36,8 +36,6 @@ import '../../theme/common/colors/quickpickColors.js';
 import '../../theme/common/colors/searchColors.js';
 import { ILayoutService } from '../../layout/browser/layoutService.service.js';
 import { IInstantiationService } from '../../instantiation/common/instantiation.js';
-import { IHoverService } from '../../hover/browser/hover.service.js';
-import { HoverPosition } from '../../../base/browser/ui/hover/hoverWidget.js';
 
 var ActionListWidget_1;
 registerCss(actionWidget);
@@ -246,7 +244,7 @@ let ActionItemRenderer = class ActionItemRenderer {
                 label: false
             });
         }
-        if (element.submenuActions?.length) {
+        if (element.submenuActions?.length && !element.hover?.content) {
             data.submenuIndicator.className = "action-list-submenu-indicator has-submenu " + ThemeIcon.asClassName(Codicon.chevronRight);
             data.submenuIndicator.style.display = "";
             data.submenuIndicator.style.visibility = "";
@@ -296,7 +294,6 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         accessibilityProvider,
         _options,
         _keybindingService,
-        _hoverService,
         _openerService,
         _instantiationService
     ) {
@@ -304,19 +301,18 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         this._delegate = _delegate;
         this._options = _options;
         this._keybindingService = _keybindingService;
-        this._hoverService = _hoverService;
         this._openerService = _openerService;
         this._instantiationService = _instantiationService;
         this._baseLineHeight = 24;
         this._headerLineHeight = 24;
         this._separatorLineHeight = 8;
         this.cts = this._register(( new CancellationTokenSource()));
-        this._hover = this._register(( new MutableDisposable()));
         this._submenuDisposables = this._register(( new DisposableStore()));
         this._collapsedSections = ( new Set());
         this._filterText = "";
         this._suppressHover = false;
         this._hasLaidOut = false;
+        this._filterCts = this._register(( new MutableDisposable()));
         this._onDidRequestLayout = this._register(( new Emitter()));
         this.onDidRequestLayout = this._onDidRequestLayout.event;
         this.domNode = createElement("div");
@@ -351,7 +347,7 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
             getTemplateId: element => element.kind
         };
         const reserveSubmenuSpace = this._options?.reserveSubmenuSpace ?? true;
-        const hasAnySubmenuActions = reserveSubmenuSpace && ( items.some(item => !!item.submenuActions?.length));
+        const hasAnySubmenuActions = reserveSubmenuSpace && ( items.some(item => !!item.submenuActions?.length && !item.hover?.content));
         this._list = this._register(( new List(user, this.domNode, virtualDelegate, [( new ActionItemRenderer(
             preview,
             item => this._removeItem(item),
@@ -377,11 +373,14 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
                         if (element.disabled) {
                             label = ( localize(1781, "{0}, Disabled Reason: {1}", label, element.disabled));
                         }
+                        if (element.submenuActions?.length) {
+                            label = ( localize(1782, "{0}, use right arrow to access options", label));
+                        }
                         return label;
                     }
                     return null;
                 },
-                getWidgetAriaLabel: () => ( localize(1782, "Action Widget")),
+                getWidgetAriaLabel: () => ( localize(1783, "Action Widget")),
                 getRole: e => {
                     switch (e.kind) {
                     case ActionListItemKind.Action:
@@ -409,8 +408,8 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
             this._filterInput = createElement("input");
             this._filterInput.type = "text";
             this._filterInput.className = "action-list-filter-input";
-            this._filterInput.placeholder = this._options?.filterPlaceholder ?? ( localize(1783, "Search..."));
-            this._filterInput.setAttribute("aria-label", ( localize(1784, "Filter items")));
+            this._filterInput.placeholder = this._options?.filterPlaceholder ?? ( localize(1784, "Search..."));
+            this._filterInput.setAttribute("aria-label", ( localize(1785, "Filter items")));
             filterRow.appendChild(this._filterInput);
             const filterActions = this._options?.filterActions ?? [];
             if (filterActions.length > 0) {
@@ -423,7 +422,7 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
             }
             this._register(addDisposableListener(this._filterInput, "input", () => {
                 this._filterText = this._filterInput.value;
-                this._applyFilter();
+                this._applyOrUpdateFilter();
             }));
         }
         this._applyFilter();
@@ -452,7 +451,7 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
                     this._filterInput.focus();
                     this._filterInput.value = e.key;
                     this._filterText = e.key;
-                    this._applyFilter();
+                    this._applyOrUpdateFilter();
                     e.preventDefault();
                     e.stopPropagation();
                 }
@@ -468,9 +467,26 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         this._options?.onDidToggleSection?.(section, ( this._collapsedSections.has(section)));
         this._applyFilter();
     }
-    _applyFilter() {
-        const filterLower = this._filterText.toLowerCase();
-        const isFiltering = filterLower.length > 0;
+    _applyOrUpdateFilter() {
+        if (!this._delegate.onFilter) {
+            this._applyFilter();
+            return;
+        }
+        const filterText = this._filterText;
+        this._filterCts.value?.cancel();
+        const cts = ( new CancellationTokenSource());
+        this._filterCts.value = cts;
+        this._delegate.onFilter(filterText, cts.token).then(items => {
+            if (cts.token.isCancellationRequested) {
+                return;
+            }
+            this._allMenuItems = [...items];
+            this._applyFilter(true);
+        }).catch(() => {});
+    }
+    _applyFilter(skipTextFilter = false) {
+        const filterLower = skipTextFilter ? "" : this._filterText.toLowerCase();
+        const isFiltering = !skipTextFilter && filterLower.length > 0;
         const visible = [];
         const focusedIndexes = this._list.getFocus();
         let focusedItem;
@@ -597,14 +613,15 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
     hide(didCancel) {
         this._delegate.onHide(didCancel);
         this.cts.cancel();
-        this._hover.clear();
+        this._filterCts.value?.cancel();
+        this._filterCts.clear();
         this._hideSubmenu();
     }
     clearFilter() {
         if (this._filterInput && this._filterText) {
             this._filterInput.value = "";
             this._filterText = "";
-            this._applyFilter();
+            this._applyOrUpdateFilter();
             return true;
         }
         return false;
@@ -876,40 +893,19 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         return this.domNode.getRootNode().getElementById(this._list.getElementID(index));
     }
     _showHoverForElement(element, index) {
-        if (this._currentSubmenuElement === element || element.submenuActions?.length) {
-            return;
-        }
-        this._submenuDisposables.clear();
-        const rowElement = this._getRowElement(index);
-        if (!rowElement) {
-            this._hover.clear();
+        if (this._currentSubmenuElement === element) {
             return;
         }
         const hasHoverContent = !!element.hover?.content;
-        if (!hasHoverContent) {
-            this._hover.clear();
+        const hasSubmenuActions = !!element.submenuActions?.length;
+        if (hasHoverContent || hasSubmenuActions) {
+            const rowElement = this._getRowElement(index);
+            if (rowElement) {
+                this._showSubmenuForElement(element, rowElement);
+            }
             return;
         }
-        const markdown = typeof element.hover.content === "string" ? ( new MarkdownString(element.hover.content)) : element.hover.content;
-        const linkHandler = this._options?.linkHandler;
-        this._hover.value = this._hoverService.showDelayedHover({
-            content: markdown ?? "",
-            target: rowElement,
-            additionalClasses: ["action-widget-hover"],
-            linkHandler: linkHandler ? url => {
-                linkHandler(( URI.parse(url)), element);
-            } : undefined,
-            position: {
-                hoverPosition: HoverPosition.LEFT,
-                forcePosition: false,
-                ...element.hover.position
-            },
-            appearance: {
-                showPointer: true
-            }
-        }, {
-            groupId: `actionListHover`
-        });
+        this._submenuDisposables.clear();
     }
     _showSubmenuForItem(item) {
         const index = this._list.indexOf(item);
@@ -921,115 +917,102 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         }
     }
     _showSubmenuForElement(element, anchor) {
+        if (this._currentSubmenuElement === element) {
+            return;
+        }
         this._submenuDisposables.clear();
-        this._hover.clear();
         this._currentSubmenuElement = element;
         clearNode(this._submenuContainer);
-        const submenuItems = [];
-        const submenuGroups = element.submenuActions.filter(a => a instanceof SubmenuAction);
-        const groupsWithActions = submenuGroups.filter(g => g.actions.length > 0);
-        for (let gi = 0; gi < groupsWithActions.length; gi++) {
-            const group = groupsWithActions[gi];
-            if (group.label) {
-                submenuItems.push({
-                    kind: ActionListItemKind.Header,
-                    group: {
-                        title: group.label
-                    },
-                    label: group.label
-                });
-            }
-            for (let ci = 0; ci < group.actions.length; ci++) {
-                const child = group.actions[ci];
-                submenuItems.push({
-                    item: child,
-                    kind: ActionListItemKind.Action,
-                    label: child.label,
-                    description: child.tooltip || undefined,
-                    group: {
-                        title: "",
-                        icon: ThemeIcon.fromId(child.checked ? Codicon.check.id : Codicon.blank.id)
-                    },
-                    hideIcon: false,
-                    hover: {}
-                });
-            }
-            if (gi < groupsWithActions.length - 1) {
-                submenuItems.push({
-                    kind: ActionListItemKind.Separator,
-                    label: ""
-                });
-            }
-        }
-        for (const action of element.submenuActions) {
-            if (!(action instanceof SubmenuAction)) {
-                submenuItems.push({
-                    item: action,
-                    kind: ActionListItemKind.Action,
-                    label: action.label,
-                    description: action.tooltip || undefined,
-                    group: {
-                        title: ""
-                    },
-                    hideIcon: false,
-                    hover: {}
-                });
-            }
-        }
-        const submenuDelegate = {
-            onHide: () => {},
-            onSelect: action => {
-                action.run();
-                const parentItem = this._currentSubmenuElement?.item;
-                this._hideSubmenu();
-                if (parentItem) {
-                    this._delegate.onSelect(parentItem);
+        let hoverHeader;
+        const hoverContent = element.hover?.content;
+        if (hoverContent) {
+            const markdown = typeof hoverContent === "string" ? ( new MarkdownString(hoverContent)) : hoverContent;
+            const linkHandler = this._options?.linkHandler;
+            const rendered = renderMarkdown(markdown, {
+                actionHandler: url => {
+                    const uri = ( URI.parse(url));
+                    if (linkHandler) {
+                        linkHandler(uri, element);
+                    } else {
+                        this._openerService.open(uri, {
+                            allowCommands: true
+                        });
+                    }
                 }
-                this.hide();
+            });
+            this._submenuDisposables.add(rendered);
+            hoverHeader = rendered.element;
+            hoverHeader.classList.add("action-list-submenu-hover-header");
+            if (element.submenuActions?.length) {
+                hoverHeader.classList.add("has-submenu");
             }
-        };
+            this._submenuContainer.appendChild(hoverHeader);
+        }
+        const hasSubmenuActions = !!element.submenuActions?.length;
         this._submenuContainer.style.display = "";
         this._submenuContainer.style.position = "absolute";
+        this._submenuContainer.removeAttribute("role");
         const anchorRect = anchor.getBoundingClientRect();
         const parentRect = this.domNode.getBoundingClientRect();
-        const submenuWidget = this._submenuDisposables.add(this._instantiationService.createInstance(
-            ActionListWidget_1,
-            "submenu",
-            false,
-            submenuItems,
-            submenuDelegate,
-            undefined,
-            undefined
-        ));
-        this._submenuContainer.appendChild(submenuWidget.domNode);
-        this._currentSubmenuWidget = submenuWidget;
-        const totalHeight = submenuWidget.computeListHeight();
-        submenuWidget.layout(totalHeight);
-        const maxWidth = submenuWidget.computeMaxWidth(0);
-        submenuWidget.layout(totalHeight, maxWidth);
-        submenuWidget.domNode.style.width = `${maxWidth}px`;
         const targetWindow = getWindow(this.domNode);
-        const viewportWidth = targetWindow.innerWidth;
-        const spaceRight = viewportWidth - anchorRect.right;
-        const spaceLeft = parentRect.left;
-        const submenuWidth = maxWidth + 10;
-        const gap = 4;
-        if (spaceRight >= submenuWidth || spaceRight >= spaceLeft) {
-            this._submenuContainer.style.left = `${parentRect.right - parentRect.left + gap}px`;
-        } else {
-            this._submenuContainer.style.left = `${-submenuWidth - gap}px`;
-        }
-        this._submenuContainer.style.top = `${anchorRect.top - parentRect.top - 4}px`;
-        this._submenuDisposables.add(addDisposableListener(submenuWidget.domNode, "keydown", e => {
-            if (e.key === "ArrowLeft" || e.key === "Escape") {
-                EventHelper.stop(e, true);
-                this._hideSubmenu();
-                this._list.domFocus();
-            } else if (e.key === "Enter") {
-                EventHelper.stop(e, true);
-                const focused = submenuWidget.getFocusedElement();
-                if (focused?.item) {
-                    focused.item.run();
+        let totalHeight = 0;
+        let maxWidth = hoverHeader ? hoverHeader.offsetWidth : 0;
+        if (hasSubmenuActions) {
+            const submenuItems = [];
+            const submenuGroups = element.submenuActions.filter(a => a instanceof SubmenuAction);
+            const groupsWithActions = submenuGroups.filter(g => g.actions.length > 0);
+            for (let gi = 0; gi < groupsWithActions.length; gi++) {
+                const group = groupsWithActions[gi];
+                if (group.label) {
+                    submenuItems.push({
+                        kind: ActionListItemKind.Header,
+                        group: {
+                            title: group.label
+                        },
+                        label: group.label
+                    });
+                }
+                for (let ci = 0; ci < group.actions.length; ci++) {
+                    const child = group.actions[ci];
+                    submenuItems.push({
+                        item: child,
+                        kind: ActionListItemKind.Action,
+                        label: child.label,
+                        description: child.tooltip || undefined,
+                        group: {
+                            title: "",
+                            icon: ThemeIcon.fromId(child.checked ? Codicon.check.id : Codicon.blank.id)
+                        },
+                        hideIcon: false,
+                        hover: {}
+                    });
+                }
+                if (gi < groupsWithActions.length - 1) {
+                    submenuItems.push({
+                        kind: ActionListItemKind.Separator,
+                        label: ""
+                    });
+                }
+            }
+            for (const action of element.submenuActions) {
+                if (!(action instanceof SubmenuAction)) {
+                    submenuItems.push({
+                        item: action,
+                        kind: ActionListItemKind.Action,
+                        label: action.label,
+                        description: action.tooltip || undefined,
+                        group: {
+                            title: ""
+                        },
+                        hideIcon: false,
+                        hover: {}
+                    });
+                }
+            }
+            const submenuDelegate = {
+                onHide: () => {},
+                onSelect: action => {
+                    action.run();
                     const parentItem = this._currentSubmenuElement?.item;
                     this._hideSubmenu();
                     if (parentItem) {
@@ -1037,14 +1020,69 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
                     }
                     this.hide();
                 }
-            } else if (e.key === "ArrowDown") {
-                EventHelper.stop(e, true);
-                submenuWidget.focusNext();
-            } else if (e.key === "ArrowUp") {
-                EventHelper.stop(e, true);
-                submenuWidget.focusPrevious();
-            }
-        }));
+            };
+            const submenuWidget = this._submenuDisposables.add(this._instantiationService.createInstance(
+                ActionListWidget_1,
+                "submenu",
+                false,
+                submenuItems,
+                submenuDelegate,
+                undefined,
+                undefined
+            ));
+            this._submenuContainer.appendChild(submenuWidget.domNode);
+            this._currentSubmenuWidget = submenuWidget;
+            totalHeight = submenuWidget.computeListHeight();
+            submenuWidget.layout(totalHeight);
+            const submenuMaxWidth = submenuWidget.computeMaxWidth(0);
+            maxWidth = Math.max(maxWidth, submenuMaxWidth);
+            submenuWidget.layout(totalHeight, maxWidth);
+            submenuWidget.domNode.style.width = `${maxWidth}px`;
+            this._submenuDisposables.add(addDisposableListener(submenuWidget.domNode, "keydown", e => {
+                if (e.key === "ArrowLeft" || e.key === "Escape") {
+                    EventHelper.stop(e, true);
+                    this._hideSubmenu();
+                    this._list.domFocus();
+                } else if (e.key === "Enter") {
+                    EventHelper.stop(e, true);
+                    const focused = submenuWidget.getFocusedElement();
+                    if (focused?.item) {
+                        focused.item.run();
+                        const parentItem = this._currentSubmenuElement?.item;
+                        this._hideSubmenu();
+                        if (parentItem) {
+                            this._delegate.onSelect(parentItem);
+                        }
+                        this.hide();
+                    }
+                } else if (e.key === "ArrowDown") {
+                    EventHelper.stop(e, true);
+                    submenuWidget.focusNext();
+                } else if (e.key === "ArrowUp") {
+                    EventHelper.stop(e, true);
+                    submenuWidget.focusPrevious();
+                }
+            }));
+        }
+        const viewportWidth = targetWindow.innerWidth;
+        const spaceRight = viewportWidth - anchorRect.right;
+        const spaceLeft = parentRect.left;
+        const panelWidth = maxWidth + 10;
+        const gap = 4;
+        if (spaceRight >= panelWidth || spaceRight >= spaceLeft) {
+            this._submenuContainer.style.left = `${parentRect.right - parentRect.left + gap}px`;
+        } else {
+            this._submenuContainer.style.left = `${-panelWidth - gap}px`;
+        }
+        const hoverHeaderHeight = hoverHeader ? hoverHeader.offsetHeight : 0;
+        const totalPanelHeight = totalHeight + hoverHeaderHeight;
+        const viewportHeight = targetWindow.innerHeight;
+        let top = anchorRect.top - parentRect.top - 4;
+        const panelBottom = parentRect.top + top + totalPanelHeight;
+        if (panelBottom > viewportHeight) {
+            top -= (panelBottom - viewportHeight + 8);
+        }
+        this._submenuContainer.style.top = `${top}px`;
     }
     _hideSubmenu() {
         this._cancelSubmenuHide();
@@ -1075,7 +1113,7 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
             if (rowElement) {
                 this._showSubmenuForElement(element, rowElement);
             }
-        }, 300);
+        }, 500);
     }
     _cancelSubmenuShow() {
         if (this._submenuShowTimeout !== undefined) {
@@ -1094,12 +1132,20 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
                 this._list.setFocus([]);
                 return;
             }
+            const hasPanel = !!(element.submenuActions?.length || element.hover?.content);
+            if (hasPanel) {
+                this._suppressHover = true;
+            }
             this._list.setFocus(typeof e.index === "number" ? [e.index] : []);
-            if (element.submenuActions?.length) {
+            if (hasPanel) {
+                this._suppressHover = false;
+            }
+            if (hasPanel) {
                 if (this._currentSubmenuElement === element) {
                     this._cancelSubmenuHide();
                     this._cancelSubmenuShow();
                 } else {
+                    this._hideSubmenu();
                     this._scheduleSubmenuShow(element, e.index);
                 }
                 return;
@@ -1122,7 +1168,8 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
                 }
             }
         } else if (element && element.hover?.content && typeof e.index === "number") {
-            this._showHoverForElement(element, e.index);
+            this._hideSubmenu();
+            this._scheduleSubmenuShow(element, e.index);
         }
     }
     onListClick(e) {
@@ -1131,7 +1178,7 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         }
     }
 };
-ActionListWidget = ActionListWidget_1 = ( __decorate([( __param(6, IKeybindingService)), ( __param(7, IHoverService)), ( __param(8, IOpenerService)), ( __param(9, IInstantiationService))], ActionListWidget));
+ActionListWidget = ActionListWidget_1 = ( __decorate([( __param(6, IKeybindingService)), ( __param(7, IOpenerService)), ( __param(8, IInstantiationService))], ActionListWidget));
 let ActionList = class ActionList extends Disposable {
     get domNode() {
         return this._widget.domNode;

package/vscode/src/vs/platform/actionWidget/browser/actionWidget.css

@@ -348,3 +348,28 @@
 	z-index: 50;
 	width: fit-content;
 }
+
+.action-list-submenu-hover-header {
+	padding: 4px 8px;
+	line-height: 1.5em;
+	min-width: 200px;
+	max-width: var(--vscode-hover-maxWidth, 500px);
+	word-wrap: break-word;
+}
+
+.action-list-submenu-hover-header.has-submenu {
+	border-bottom: 1px solid var(--vscode-menu-separatorBackground, var(--vscode-editorWidget-border));
+}
+
+.action-list-submenu-hover-header > p {
+	margin-left: 0;
+	margin-right: 0;
+}
+
+.action-list-submenu-hover-header > p:first-child {
+	margin-top: 0;
+}
+
+.action-list-submenu-hover-header > p:last-child {
+	margin-bottom: 0;
+}