@codingame/monaco-vscode-api 37.6.1 → 38.0.0

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

@@ -1,12 +1,15 @@
 
 import { registerCss } from '../../../../../../css.js';
 import { __decorate, __param } from '../../../../../../external/tslib/tslib.es6.js';
-import { createElement, setVisibility, clearNode, addDisposableListener, EventType, EventHelper, isHTMLElement, append, $, addStandardDisposableListener, addDisposableGenericMouseUpListener, isEditableElement, isActiveElement, isAncestorOfActiveElement, getWindow, getDomNodeZoomLevel, getComputedStyle, isMouseEvent, DisposableResizeObserver, getActiveElement, SafeTriangle } from '../../../base/browser/dom.js';
+import { createElement, append, $, clearNode, setVisibility, isHTMLElement, addDisposableListener, EventType, addDisposableGenericMouseDownListener, EventHelper, scheduleAtNextAnimationFrame, getWindow, addStandardDisposableListener, addDisposableGenericMouseUpListener, isEditableElement, isActiveElement, isAncestorOfActiveElement, getDomNodeZoomLevel, getComputedStyle, isMouseEvent, getActiveElement, DisposableResizeObserver, SafeTriangle } from '../../../base/browser/dom.js';
 import { StandardKeyboardEvent } from '../../../base/browser/keyboardEvent.js';
 import { renderMarkdown } from '../../../base/browser/markdownRenderer.js';
+import { EventType as EventType$1 } from '../../../base/browser/touch.js';
 import { ActionBar } from '../../../base/browser/ui/actionbar/actionbar.js';
+import { ActionViewItem } from '../../../base/browser/ui/actionbar/actionViewItems.js';
 import { getAnchorRect } from '../../../base/browser/ui/contextview/contextview.js';
 import { KeybindingLabel } from '../../../base/browser/ui/keybindingLabel/keybindingLabel.js';
+import { HoverAction } from '../../../base/browser/ui/hover/hoverWidget.js';
 import { DomScrollableElement } from '../../../base/browser/ui/scrollbar/scrollableElement.js';
 import { Switch } from '../../../base/browser/ui/toggle/switch.js';
 import { List } from '../../../base/browser/ui/list/listWidget.js';
@@ -16,7 +19,7 @@ import { Codicon } from '../../../base/common/codicons.js';
 import { Emitter } from '../../../base/common/event.js';
 import { isMarkdownString, MarkdownString } from '../../../base/common/htmlContent.js';
 import { KeyCode } from '../../../base/common/keyCodes.js';
-import { AnchorPosition } from '../../../base/common/layout.js';
+import { AnchorPosition, layout, LayoutAnchorPosition } from '../../../base/common/layout.js';
 import { DisposableStore, Disposable, MutableDisposable, toDisposable } from '../../../base/common/lifecycle.js';
 import { OS } from '../../../base/common/platform.js';
 import { ScrollbarVisibility } from '../../../base/common/scrollable.js';
@@ -26,6 +29,7 @@ import * as actionWidget from './actionWidget.css';
 import { localize } from '../../../nls.js';
 import { IContextViewService } from '../../contextview/browser/contextView.service.js';
 import { IKeybindingService } from '../../keybinding/common/keybinding.service.js';
+import { ResultKind } from '../../keybinding/common/keybindingResolver.js';
 import { IOpenerService } from '../../opener/common/opener.service.js';
 import { Link } from '../../opener/browser/link.js';
 import { defaultListStyles } from '../../theme/browser/defaultStyles.js';
@@ -42,11 +46,19 @@ 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 { finishActionWidgetOpeningAnimation, ACTION_WIDGET_ANIMATED_CLASS } from './actionWidgetMotion.js';
 
 var ActionListWidget_1;
 registerCss(actionWidget, 0);
 const acceptSelectedActionCommand = "acceptSelectedCodeAction";
 const previewSelectedActionCommand = "previewSelectedCodeAction";
+const actionWidgetKeybindingCommands = ( new Set([
+    acceptSelectedActionCommand,
+    previewSelectedActionCommand,
+    "toggleSectionCodeAction"
+]));
+const removeToolbarActionId = "actionList.remove";
 var ActionListItemKind;
 (function(ActionListItemKind) {
     ActionListItemKind["Action"] = "action";
@@ -71,24 +83,58 @@ class HeaderRenderer {
     }
     disposeTemplate(_templateData) {}
 }
-class SeparatorRenderer {
+let SeparatorRenderer = class SeparatorRenderer {
     get templateId() {
         return ActionListItemKind.Separator;
     }
+    constructor(_hoverService) {
+        this._hoverService = _hoverService;
+    }
     renderTemplate(container) {
         container.classList.add("separator");
         const text = createElement("span");
         container.append(text);
+        const badges = append(container, $("span.action-item-additional-badges", {
+            "aria-hidden": "true"
+        }));
         return {
             container,
-            text
+            text,
+            badges,
+            elementDisposables: ( new DisposableStore())
         };
     }
     renderElement(element, _index, templateData) {
         templateData.container.classList.toggle("has-label", !!element.label);
         templateData.text.textContent = element.label ?? "";
+        templateData.elementDisposables.clear();
+        renderAdditionalBadges(
+            element.additionalBadges,
+            templateData.badges,
+            templateData.elementDisposables,
+            this._hoverService
+        );
     }
-    disposeTemplate(_templateData) {}
+    disposeTemplate(templateData) {
+        templateData.elementDisposables.dispose();
+    }
+};
+SeparatorRenderer = ( __decorate([( __param(0, IHoverService))], SeparatorRenderer));
+function renderAdditionalBadges(badges, container, disposables, hoverService) {
+    clearNode(container);
+    for (const badge of badges ?? []) {
+        const label = append(container, $("span.action-item-badge", undefined, badge.label));
+        if (badge.className) {
+            label.classList.add(badge.className);
+        }
+        if (badge.tooltip) {
+            label.title = "";
+            disposables.add(hoverService.setupDelayedHover(label, {
+                content: badge.tooltip
+            }));
+        }
+    }
+    container.style.display = badges?.length ? "" : "none";
 }
 function hasExpandablePanel(item) {
     return (!!item.submenuActions?.length && !item.hover?.content) || !!item.hover?.expandable;
@@ -96,6 +142,12 @@ function hasExpandablePanel(item) {
 function hasSubmenuIndicator(item) {
     return hasExpandablePanel(item) && item.hover?.showIndicator !== false;
 }
+class DialogActionViewItem extends ActionViewItem {
+    render(container) {
+        super.render(container);
+        this.label?.setAttribute("aria-haspopup", "dialog");
+    }
+}
 let ActionItemRenderer = class ActionItemRenderer {
     get templateId() {
         return ActionListItemKind.Action;
@@ -108,9 +160,13 @@ let ActionItemRenderer = class ActionItemRenderer {
         _groupTitleByIndex,
         _linkHandler,
         _hideDefaultKeybindingTooltip,
+        _stopToolbarPointerPropagation,
         _registerStandaloneToggle,
+        _registerToolbar,
+        _registerDetailLinks,
         _keybindingService,
-        _openerService
+        _openerService,
+        _hoverService
     ) {
         this._supportsPreview = _supportsPreview;
         this._onRemoveItem = _onRemoveItem;
@@ -119,9 +175,13 @@ let ActionItemRenderer = class ActionItemRenderer {
         this._groupTitleByIndex = _groupTitleByIndex;
         this._linkHandler = _linkHandler;
         this._hideDefaultKeybindingTooltip = _hideDefaultKeybindingTooltip;
+        this._stopToolbarPointerPropagation = _stopToolbarPointerPropagation;
         this._registerStandaloneToggle = _registerStandaloneToggle;
+        this._registerToolbar = _registerToolbar;
+        this._registerDetailLinks = _registerDetailLinks;
         this._keybindingService = _keybindingService;
         this._openerService = _openerService;
+        this._hoverService = _hoverService;
     }
     renderTemplate(container) {
         container.classList.add(this.templateId);
@@ -133,7 +193,11 @@ let ActionItemRenderer = class ActionItemRenderer {
         container.append(text);
         const badge = createElement("span");
         badge.className = "action-item-badge";
+        badge.ariaHidden = "true";
         container.append(badge);
+        const additionalBadges = append(container, $("span.action-item-additional-badges", {
+            "aria-hidden": "true"
+        }));
         const description = createElement("span");
         description.className = "description";
         container.append(description);
@@ -160,6 +224,7 @@ let ActionItemRenderer = class ActionItemRenderer {
             text,
             detail,
             badge,
+            additionalBadges,
             description,
             groupTitle,
             keybinding,
@@ -201,6 +266,7 @@ let ActionItemRenderer = class ActionItemRenderer {
         }
         data.previousClassNames = classNames;
         data.text.textContent = stripNewlines(element.label);
+        data.container.insertBefore(data.badge, element.badgeBeforeLabel ? data.text : data.text.nextSibling);
         if (element.badge) {
             data.badge.textContent = element.badge;
             data.badge.style.display = "";
@@ -208,6 +274,12 @@ let ActionItemRenderer = class ActionItemRenderer {
             data.badge.textContent = "";
             data.badge.style.display = "none";
         }
+        renderAdditionalBadges(
+            element.additionalBadges,
+            data.additionalBadges,
+            data.elementDisposables,
+            this._hoverService
+        );
         if (element.keybinding) {
             data.description.textContent = element.keybinding.getLabel();
             data.description.style.display = "inline";
@@ -248,17 +320,48 @@ let ActionItemRenderer = class ActionItemRenderer {
         if (element.detail) {
             data.detail.textContent = stripNewlines(element.detail);
             data.detail.style.display = "";
+            if (element.detailLink) {
+                const {
+                    label,
+                    uri
+                } = element.detailLink;
+                const linkHandler = this._linkHandler;
+                data.elementDisposables.add(( new Link(data.detail, {
+                    label,
+                    href: ( uri.toString(true))
+                }, {
+                    opener: linkHandler && (() => linkHandler(uri, element))
+                }, this._hoverService, this._openerService)));
+                const link = data.detail.lastElementChild;
+                if (isHTMLElement(link)) {
+                    data.detail.prepend(link);
+                    link.tabIndex = -1;
+                    data.elementDisposables.add(this._registerDetailLinks(element, [link]));
+                }
+            }
         } else {
             data.detail.textContent = "";
             data.detail.style.display = "none";
         }
         data.container.classList.toggle("has-detail", !!element.detail);
+        data.detail.classList.toggle("has-link", !!element.detail && !!element.detailLink);
         clearNode(data.inlineToggleContainer);
         const toggleConfig = element.standaloneToggle ?? element.inlineToggle;
         if (toggleConfig) {
             const toggleLabel = createElement("span");
             toggleLabel.className = "action-list-item-inline-toggle-label";
             toggleLabel.textContent = stripNewlines(toggleConfig.label);
+            if (toggleConfig.showInfoIcon) {
+                const labelContainer = element.standaloneToggle ? data.text : toggleLabel;
+                labelContainer.replaceChildren($(
+                    "span.action-list-item-toggle-label-text",
+                    undefined,
+                    labelContainer.textContent ?? ""
+                ));
+                const infoIcon = append(labelContainer, $("span.action-list-item-toggle-info"));
+                infoIcon.classList.add(...ThemeIcon.asClassNameArray(Codicon.info));
+                infoIcon.ariaHidden = "true";
+            }
             if (!element.standaloneToggle) {
                 data.inlineToggleContainer.append(toggleLabel);
             }
@@ -298,9 +401,9 @@ let ActionItemRenderer = class ActionItemRenderer {
             data.container.title = "";
         } else if (actionTitle && previewTitle) {
             if (this._supportsPreview && element.canPreview) {
-                data.container.title = ( localize(1813, "{0} to Apply, {1} to Preview", actionTitle, previewTitle));
+                data.container.title = ( localize(1826, "{0} to Apply, {1} to Preview", actionTitle, previewTitle));
             } else {
-                data.container.title = ( localize(1814, "{0} to Apply", actionTitle));
+                data.container.title = ( localize(1827, "{0} to Apply", actionTitle));
             }
         } else {
             data.container.title = "";
@@ -309,8 +412,8 @@ let ActionItemRenderer = class ActionItemRenderer {
         const toolbarActions = [...(element.toolbarActions ?? [])];
         if (element.onRemove) {
             toolbarActions.push(toAction({
-                id: "actionList.remove",
-                label: ( localize(1815, "Remove")),
+                id: removeToolbarActionId,
+                label: ( localize(1828, "Remove")),
                 class: ThemeIcon.asClassName(Codicon.close),
                 run: async () => {
                     await element.onRemove();
@@ -320,12 +423,32 @@ let ActionItemRenderer = class ActionItemRenderer {
         }
         data.container.classList.toggle("has-toolbar", toolbarActions.length > 0);
         if (toolbarActions.length > 0) {
-            const actionBar = ( new ActionBar(data.toolbar));
+            const dialogActionIds = element.toolbarDialogActionIds;
+            const actionBar = ( new ActionBar(data.toolbar, dialogActionIds?.length ? {
+                actionViewItemProvider: (action, options) => dialogActionIds.includes(action.id) ? ( new DialogActionViewItem(undefined, action, options)) : undefined
+            } : undefined));
             data.elementDisposables.add(actionBar);
+            if (this._stopToolbarPointerPropagation) {
+                data.elementDisposables.add(addDisposableGenericMouseDownListener(data.toolbar, e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }));
+                data.elementDisposables.add(
+                    addDisposableListener(data.toolbar, EventType.CLICK, e => e.stopPropagation())
+                );
+                data.elementDisposables.add(
+                    addDisposableListener(data.toolbar, EventType$1.Tap, e => e.stopPropagation())
+                );
+            } else {
+                data.elementDisposables.add(
+                    addDisposableGenericMouseDownListener(data.toolbar, e => e.preventDefault())
+                );
+            }
             actionBar.push(toolbarActions, {
-                icon: true,
-                label: false
+                icon: !element.toolbarLabels,
+                label: !!element.toolbarLabels
             });
+            data.elementDisposables.add(this._registerToolbar(element, actionBar));
         }
         if (hasSubmenuIndicator(element)) {
             data.submenuIndicator.className = "action-list-submenu-indicator has-submenu " + ThemeIcon.asClassName(Codicon.chevronRight);
@@ -349,7 +472,11 @@ let ActionItemRenderer = class ActionItemRenderer {
             data.container.setAttribute("aria-haspopup", element.hover?.expandable ? "dialog" : "menu");
             data.container.setAttribute("aria-expanded", "false");
         } else {
-            data.container.removeAttribute("aria-haspopup");
+            if (element.opensDialog) {
+                data.container.setAttribute("aria-haspopup", "dialog");
+            } else {
+                data.container.removeAttribute("aria-haspopup");
+            }
             if (!element.isSectionToggle) {
                 data.container.removeAttribute("aria-expanded");
             }
@@ -360,7 +487,7 @@ let ActionItemRenderer = class ActionItemRenderer {
         templateData.elementDisposables.dispose();
     }
 };
-ActionItemRenderer = ( __decorate([( __param(8, IKeybindingService)), ( __param(9, IOpenerService))], ActionItemRenderer));
+ActionItemRenderer = ( __decorate([( __param(11, IKeybindingService)), ( __param(12, IOpenerService)), ( __param(13, IHoverService))], ActionItemRenderer));
 class AcceptSelectedEvent extends UIEvent {
     constructor() {
         super("acceptSelectedAction");
@@ -387,7 +514,8 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         _options,
         _keybindingService,
         _openerService,
-        _instantiationService
+        _instantiationService,
+        _hoverService
     ) {
         super();
         this._supportsPreview = _supportsPreview;
@@ -396,20 +524,26 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         this._keybindingService = _keybindingService;
         this._openerService = _openerService;
         this._instantiationService = _instantiationService;
+        this._hoverService = _hoverService;
         this._headerLineHeight = 24;
         this._separatorLineHeight = 8;
         this.cts = this._register(( new CancellationTokenSource()));
         this._submenuDisposables = this._register(( new DisposableStore()));
+        this._submenuHoverActionElements = [];
         this._itemMoveAnimation = this._register(( new MutableDisposable()));
         this._collapsedSections = ( new Set());
         this._filterText = "";
         this._imeSessionInProgress = false;
+        this._isMeasuringWidth = false;
         this._suppressHover = false;
+        this._hoverEnabled = true;
         this._ignoreInitialHover = true;
         this._hasLaidOut = false;
         this._filterCts = this._register(( new MutableDisposable()));
         this._groupTitleByIndex = ( new Map());
         this._standaloneToggles = ( new Map());
+        this._itemToolbars = ( new Map());
+        this._itemDetailLinks = ( new Map());
         this._onDidRequestLayout = this._register(( new Emitter()));
         this.onDidRequestLayout = this._onDidRequestLayout.event;
         this._visibleMenuItems = items;
@@ -436,16 +570,29 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         this._submenuContainer.tabIndex = -1;
         this.domNode.append(this._submenuContainer);
         this._register(addDisposableListener(this._submenuContainer, "keydown", e => {
+            if ((e.key === "Enter" || e.key === " ") && this._currentSubmenuElement?.hover?.tabThroughPanel) {
+                const target = isHTMLElement(e.target) ? e.target : undefined;
+                if (target && this._currentSubmenuElement.hover.getTabbableElements?.().includes(target)) {
+                    e.stopPropagation();
+                    return;
+                }
+            }
             if (e.key !== "ArrowLeft" && e.key !== "Escape") {
                 return;
             }
             EventHelper.stop(e, true);
+            const dismissWidget = e.key === "Escape" && this._currentSubmenuWidget !== undefined;
             this._hideSubmenu();
+            if (dismissWidget) {
+                this.hide();
+                return;
+            }
+            this._setKeyboardNavigation(true);
             this._list.domFocus();
         }));
         this._register(addDisposableListener(this._submenuContainer, "mouseenter", () => {
             this._cancelSubmenuHide();
-            if (this._options?.persistentHover) {
+            if (this._usesSubmenuPointerIntent()) {
                 this._cancelSubmenuShow();
                 this._resetSubmenuPointer();
             }
@@ -457,7 +604,7 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
             this._cancelSubmenuShow();
             this._resetSubmenuPointer();
         }));
-        if (this._options?.persistentHover) {
+        if (this._usesSubmenuPointerIntent()) {
             this._register(
                 addDisposableListener(this.domNode, EventType.MOUSE_MOVE, event => {
                     if (isHTMLElement(event.target) && this._expandedTrigger?.contains(event.target)) {
@@ -493,6 +640,7 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
             this._groupTitleByIndex,
             this._options?.linkHandler,
             this._options?.hideDefaultKeybindingTooltip ?? false,
+            this._options?.stopToolbarPointerPropagation ?? false,
             (item, toggle) => {
                 this._standaloneToggles.set(item, toggle);
                 return toDisposable(() => {
@@ -501,9 +649,27 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
                     }
                 });
             },
+            (item, toolbar) => {
+                this._itemToolbars.set(item, toolbar);
+                this._updateToolbarFocusability();
+                return toDisposable(() => {
+                    if (this._itemToolbars.get(item) === toolbar) {
+                        this._itemToolbars.delete(item);
+                    }
+                });
+            },
+            (item, links) => {
+                this._itemDetailLinks.set(item, links);
+                return toDisposable(() => {
+                    if (this._itemDetailLinks.get(item) === links) {
+                        this._itemDetailLinks.delete(item);
+                    }
+                });
+            },
             this._keybindingService,
-            this._openerService
-        )), ( new HeaderRenderer()), ( new SeparatorRenderer())], {
+            this._openerService,
+            this._hoverService
+        )), ( new HeaderRenderer()), ( new SeparatorRenderer(this._hoverService))], {
             keyboardSupport: false,
             typeNavigationEnabled: !this._options?.showFilter && !this._options?.onType,
             keyboardNavigationLabelProvider: {
@@ -513,6 +679,12 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
                 getAriaLabel: element => {
                     if (element.kind === ActionListItemKind.Action) {
                         let label = element.label ? stripNewlines(element?.label) : "";
+                        if (element.badge) {
+                            label = element.badgeBeforeLabel ? stripNewlines(element.badge) + ", " + label : label + ", " + stripNewlines(element.badge);
+                        }
+                        for (const badge of element.additionalBadges ?? []) {
+                            label = label + ", " + stripNewlines(badge.label);
+                        }
                         if (element.detail) {
                             label = label + ", " + stripNewlines(element.detail);
                         }
@@ -534,19 +706,19 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
                         }
                         const toggleConfig = element.standaloneToggle ?? element.inlineToggle;
                         if (toggleConfig) {
-                            label = element.standaloneToggle ? (toggleConfig.checked ? ( localize(1816, "{0}, on", toggleConfig.label)) : ( localize(1817, "{0}, off", toggleConfig.label))) : label + ", " + (toggleConfig.checked ? ( localize(1818, "{0}, on", toggleConfig.label)) : ( localize(1819, "{0}, off", toggleConfig.label)));
+                            label = element.standaloneToggle ? (toggleConfig.checked ? ( localize(1829, "{0}, on", toggleConfig.label)) : ( localize(1830, "{0}, off", toggleConfig.label))) : label + ", " + (toggleConfig.checked ? ( localize(1831, "{0}, on", toggleConfig.label)) : ( localize(1832, "{0}, off", toggleConfig.label)));
                         }
                         if (element.disabled) {
-                            label = ( localize(1820, "{0}, Disabled Reason: {1}", label, element.disabled));
+                            label = ( localize(1833, "{0}, Disabled Reason: {1}", label, element.disabled));
                         }
                         if (element.submenuActions?.length) {
-                            label = ( localize(1821, "{0}, use right arrow to access options", label));
+                            label = ( localize(1834, "{0}, use right arrow to access options", label));
                         }
                         return label;
                     }
                     return null;
                 },
-                getWidgetAriaLabel: () => ( localize(1822, "Action Widget")),
+                getWidgetAriaLabel: () => ( localize(1835, "Action Widget")),
                 getSetSize: () => this._visibleMenuItems.filter(item => item.kind === ActionListItemKind.Action).length,
                 getPosInSet: (_element, index) => Math.max(
                     this._visibleMenuItems.slice(0, index + 1).filter(item => item.kind === ActionListItemKind.Action).length,
@@ -567,6 +739,14 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
             }
         })));
         this._list.style(defaultListStyles);
+        this._register(this._list.onKeyDown(() => this._setKeyboardNavigation(true)));
+        this._register(
+            addDisposableListener(this._list.getHTMLElement(), EventType.MOUSE_MOVE, e => {
+                if (e.movementX !== 0 || e.movementY !== 0) {
+                    this._setKeyboardNavigation(false);
+                }
+            })
+        );
         this._register(this._list.onMouseClick(e => this.onListClick(e)));
         this._register(this._list.onMouseOver(e => {
             if (!this._ignoreInitialHover) {
@@ -584,12 +764,43 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         this._register(this._list.onMouseDown(() => {
             initialMouseMove.clear();
             this._ignoreInitialHover = false;
+            this._setKeyboardNavigation(false);
+        }));
+        this._register(this._list.onDidChangeFocus(() => {
+            this._updateToolbarFocusability();
+            this.onFocus();
         }));
-        this._register(this._list.onDidChangeFocus(() => this.onFocus()));
         this._register(this._list.onDidChangeSelection(e => this.onListSelection(e)));
-        if (this._options?.persistentHover) {
-            this._register(this._list.onDidScroll(() => this._layoutSubmenu?.()));
-        }
+        let canPrefetchVisibleItems = false;
+        let visibleItems = ( new Set());
+        const identity = item => item.item?.id ?? item;
+        const getVisibleItems = () => {
+            const first = Math.max(0, this._list.firstVisibleIndex);
+            const last = Math.min(this._visibleMenuItems.length - 1, this._list.lastVisibleIndex);
+            return this._visibleMenuItems.slice(first, last + 1);
+        };
+        const visibleItemsUpdate = this._register(( new MutableDisposable()));
+        this._register(scheduleAtNextAnimationFrame(getWindow(this.domNode), () => {
+            canPrefetchVisibleItems = true;
+        }));
+        this._register(this._list.onDidScroll(event => {
+            if (!this._isMeasuringWidth) {
+                this._layoutSubmenu?.();
+            }
+            if (canPrefetchVisibleItems && !this._isMeasuringWidth && event.scrollTopChanged && !visibleItemsUpdate.value) {
+                visibleItemsUpdate.value = scheduleAtNextAnimationFrame(getWindow(this.domNode), () => {
+                    visibleItemsUpdate.clear();
+                    const items = getVisibleItems();
+                    const previous = visibleItems;
+                    visibleItems = ( new Set(items.map(identity)));
+                    for (const item of items) {
+                        if (!( previous.has(identity(item)))) {
+                            item.onDidBecomeVisible?.();
+                        }
+                    }
+                });
+            }
+        }));
         this._allMenuItems = [...items];
         if (this._options?.showFilter || this._options?.secondaryHeading) {
             this._filterContainer = createElement("div");
@@ -599,10 +810,36 @@ 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(1823, "Search..."));
+                this._filterInput.placeholder = this._options?.filterPlaceholder ?? ( localize(1836, "Search..."));
                 this._filterInput.value = this._filterText;
-                this._filterInput.setAttribute("aria-label", ( localize(1824, "Filter items")));
+                this._filterInput.setAttribute("aria-label", ( localize(1837, "Filter items")));
                 filterRow.appendChild(this._filterInput);
+                this._register(
+                    addDisposableListener(this._filterInput, EventType.KEY_DOWN, e => {
+                        this._setKeyboardNavigation(true);
+                        if (e.isComposing || !this._filterInput?.closest(".action-list-submenu-panel")) {
+                            return;
+                        }
+                        const keybinding = this._keybindingService.softDispatch(( new StandardKeyboardEvent(e)), this._filterInput);
+                        const isActionWidgetKeybinding = keybinding.kind === ResultKind.KbFound && keybinding.commandId !== null && ( actionWidgetKeybindingCommands.has(keybinding.commandId));
+                        if (isActionWidgetKeybinding || (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey)) {
+                            e.stopPropagation();
+                        }
+                    })
+                );
+                this._register(addDisposableListener(
+                    this._filterInput,
+                    EventType.MOUSE_DOWN,
+                    () => this._setKeyboardNavigation(false)
+                ));
+                if (this._options.tabThroughItemActions) {
+                    this._register(addDisposableListener(
+                        this._filterInput,
+                        "keydown",
+                        e => this._handleTabThroughPanelKeyDown(e),
+                        true
+                    ));
+                }
                 if (this._options.filterAsCombobox) {
                     const listElement = this._list.getHTMLElement();
                     listElement.id = this._list.domId;
@@ -655,11 +892,12 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
                 }
                 const onFilterValueChanged = () => {
                     const value = this._filterInput.value;
-                    if (this._imeSessionInProgress || value === this._filterText) {
+                    if (this._imeSessionInProgress || value === this._filterText && !this._filterCts.value?.token.isCancellationRequested) {
                         return;
                     }
                     this._filterText = value;
                     this._applyOrUpdateFilter();
+                    this._options?.onDidChangeFilter?.(value);
                 };
                 this._register(addDisposableListener(this._filterInput, "compositionstart", () => {
                     this._imeSessionInProgress = true;
@@ -720,7 +958,7 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
                 dismissButton.appendChild($(ThemeIcon.asCSSSelector(Codicon.close)));
                 dismissButton.tabIndex = 0;
                 dismissButton.setAttribute("role", "button");
-                dismissButton.setAttribute("aria-label", ( localize(1825, "Dismiss")));
+                dismissButton.setAttribute("aria-label", ( localize(1838, "Dismiss")));
                 const dismiss = () => {
                     onDismiss();
                     this.focus();
@@ -742,7 +980,7 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
             this._focusCheckedOrFirst();
         }
         this._register(addDisposableListener(this.domNode, "keydown", e => {
-            if (e.key === "ArrowRight" && !e.isComposing) {
+            if (e.key === "ArrowRight" && !e.isComposing && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey) {
                 const focused = this._list.getFocus();
                 if (focused.length > 0) {
                     const element = this._list.element(focused[0]);
@@ -751,7 +989,9 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
                         const rowElement = this._getRowElement(focused[0]);
                         if (rowElement) {
                             this._showSubmenuForElement(element, rowElement);
-                            if (this._currentSubmenuWidget) {
+                            if (element.hover?.tabThroughPanel) {
+                                this._focusFirstTabThroughPanelControl(element, rowElement);
+                            } else if (this._currentSubmenuWidget) {
                                 this._currentSubmenuWidget.focus();
                             } else {
                                 this._submenuContainer.focus();
@@ -761,6 +1001,9 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
                 }
             }
         }));
+        this._register(
+            addDisposableListener(this.domNode, "keydown", e => this._handleTabThroughPanelKeyDown(e), true)
+        );
         if (this._filterInput || this._options?.onType) {
             this._register(addDisposableListener(this.domNode, "keydown", e => {
                 const target = e.target;
@@ -775,6 +1018,7 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
                         this._filterInput.value = e.key;
                         this._filterText = e.key;
                         this._applyOrUpdateFilter();
+                        this._options?.onDidChangeFilter?.(e.key);
                     } else {
                         this._options?.onType?.(e.key);
                     }
@@ -826,7 +1070,11 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
             }
             this._allMenuItems = [...items];
             this._applyFilter(true);
-        }).catch(() => {});
+        }).catch(() => {}).finally(() => {
+            if (this._filterCts.value === cts && !cts.token.isCancellationRequested) {
+                this._filterCts.clear();
+            }
+        });
     }
     _applyFilter(skipTextFilter = false, fireLayout = true, focusItemId) {
         this._itemMoveAnimation.clear();
@@ -854,7 +1102,7 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
             const matchesFilter = item => {
                 const label = (item.label ?? "").toLowerCase();
                 const descValue = typeof item.description === "string" ? item.description : (item.description?.value ?? "");
-                return label.includes(filterLower) || descValue.toLowerCase().includes(filterLower);
+                return label.includes(filterLower) || descValue.toLowerCase().includes(filterLower) || (!!item.toolbarLabels && (item.toolbarActions?.some(action => action.label.toLowerCase().includes(filterLower)) ?? false));
             };
             for (const item of this._allMenuItems) {
                 if (item.kind === ActionListItemKind.Header) {
@@ -872,6 +1120,14 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
                 if (item.isSectionToggle) {
                     continue;
                 }
+                if (item.filterItems) {
+                    const matchingFilterItems = matchesFilter(item) ? item.filterItems : item.filterItems.filter(matchesFilter);
+                    if (matchingFilterItems.length > 0) {
+                        hasMatchingActionInSection = true;
+                        filteredSectionItems.push(...matchingFilterItems);
+                    }
+                    continue;
+                }
                 if (matchesFilter(item)) {
                     hasMatchingActionInSection = true;
                     filteredSectionItems.push(item);
@@ -950,25 +1206,32 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         if (fireLayout) {
             this._onDidRequestLayout.fire();
         }
+        const restoreItemFocus = () => {
+            const itemId = focusItemId ?? focusedItem?.item?.id;
+            if (!itemId) {
+                return false;
+            }
+            for (let i = 0; i < this._list.length; i++) {
+                const element = this._list.element(i);
+                if (element.item?.id === itemId) {
+                    this._list.setFocus([i]);
+                    this._list.reveal(i);
+                    return true;
+                }
+            }
+            return false;
+        };
         if (filterInputHasFocus) {
             this._filterInput?.focus();
-            this._focusCheckedOrFirst();
+            if (!restoreItemFocus()) {
+                this._focusCheckedOrFirst();
+            }
         } else if (this._hasLaidOut) {
             if (focusedItem || focusItemId) {
-                const focusedItemId = focusItemId ?? focusedItem?.item?.id;
-                if (focusedItemId) {
-                    for (let i = 0; i < this._list.length; i++) {
-                        const el = this._list.element(i);
-                        if (el.item?.id === focusedItemId) {
-                            this._list.setFocus([i]);
-                            this._list.reveal(i);
-                            break;
-                        }
-                    }
-                    if (listHasFocus) {
-                        this._focusCheckedOrFirst();
-                        this._list.domFocus();
-                    }
+                restoreItemFocus();
+                if (listHasFocus) {
+                    this._focusCheckedOrFirst();
+                    this._list.domFocus();
                 }
             }
         }
@@ -991,6 +1254,15 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
     focusCondition(element) {
         return !element.disabled && element.kind === ActionListItemKind.Action;
     }
+    _setKeyboardNavigation(keyboardNavigation) {
+        if (this._keyboardNavigation === keyboardNavigation) {
+            return;
+        }
+        this._keyboardNavigation = keyboardNavigation;
+        const listElement = this._list.getHTMLElement();
+        listElement.classList.toggle("keyboard-navigation", keyboardNavigation === true);
+        listElement.classList.toggle("mouse-navigation", keyboardNavigation === false);
+    }
     _updateFilterActiveDescendant() {
         if (!this._filterInput) {
             return;
@@ -1003,6 +1275,7 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         }
     }
     focus() {
+        this._setKeyboardNavigation(undefined);
         if (this._filterInput && this._options?.focusFilterOnOpen) {
             this._filterInput.focus();
             this._focusCheckedOrFirst();
@@ -1021,6 +1294,20 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         }
         return undefined;
     }
+    setHoverEnabled(enabled) {
+        if (this._hoverEnabled === enabled) {
+            return;
+        }
+        this._hoverEnabled = enabled;
+        if (!enabled) {
+            this._hideSubmenu();
+        } else if (this._options?.persistentHover) {
+            const [index] = this._list.getFocus();
+            if (index !== undefined) {
+                this._showHoverForElement(this._list.element(index), index);
+            }
+        }
+    }
     showHoverForCheckedItem() {
         const element = this._allMenuItems.find(item => item.kind === ActionListItemKind.Action && item.item?.checked) ?? (this._options?.persistentHover ? this.getFocusedElement() : undefined);
         if (!element) {
@@ -1037,14 +1324,29 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         }
     }
     updateItems(items, focusItemId, options) {
+        if (this._pendingSubmenuElement) {
+            const pendingId = this._pendingSubmenuElement.item?.id;
+            const pendingItem = options?.preserveHover && pendingId ? items.find(item => item.item?.id === pendingId) : undefined;
+            if (pendingItem) {
+                this._pendingSubmenuElement = pendingItem;
+            } else {
+                this._cancelSubmenuShow();
+            }
+        }
+        const scrollTop = options?.preserveScrollPosition ? this._list.scrollTop : undefined;
         const expandedItemId = this._currentSubmenuElement?.item?.id;
         const preservedItem = options?.preserveHover && expandedItemId ? items.find(item => item.item?.id === (focusItemId ?? expandedItemId)) : undefined;
         const content = preservedItem?.hover?.content;
         const preservedContent = typeof content === "function" ? content() : content;
         const preserveHover = !this._currentSubmenuWidget && isHTMLElement(preservedContent) && this._submenuContainer.contains(preservedContent);
-        const previousRow = options?.animateItemMove && preserveHover && this._currentSubmenuElement ? this._getRowElement(this._list.indexOf(this._currentSubmenuElement))?.getBoundingClientRect() : undefined;
+        const preserveSubmenu = !!this._currentSubmenuWidget && !!preservedItem?.submenuActions?.length;
+        const preservePanel = preserveHover || preserveSubmenu;
+        if (!preserveHover && typeof content === "function" && isHTMLElement(preservedContent)) {
+            preservedItem?.hover?.disposeContent?.(preservedContent);
+        }
+        const previousRow = options?.animateItemMove && preservePanel && this._currentSubmenuElement ? this._getRowElement(this._list.indexOf(this._currentSubmenuElement))?.getBoundingClientRect() : undefined;
         this._allMenuItems = [...items];
-        if (preserveHover && preservedItem) {
+        if (preservePanel && preservedItem) {
             this._currentSubmenuElement = preservedItem;
             if (preservedItem.label && preservedItem.hover?.expandable) {
                 this._submenuContainer.setAttribute("aria-label", preservedItem.label);
@@ -1057,16 +1359,19 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         }
         const previousVisibleCount = this._visibleMenuItems.length;
         const suppressHover = this._suppressHover;
-        this._suppressHover ||= preserveHover || (!this._currentSubmenuElement && !this._options?.persistentHover);
+        this._suppressHover ||= preservePanel || (!this._currentSubmenuElement && !this._options?.persistentHover);
         try {
-            this._applyFilter(false, false, preserveHover ? focusItemId ?? expandedItemId : undefined);
+            this._applyFilter(false, false, preservePanel ? focusItemId ?? expandedItemId : undefined);
         } finally {
             this._suppressHover = suppressHover;
         }
+        if (preserveSubmenu && preservedItem) {
+            this._currentSubmenuWidget.updateItems(this._createSubmenuItems(preservedItem.submenuActions));
+        }
         if (this._visibleMenuItems.length !== previousVisibleCount) {
             this._onDidRequestLayout.fire();
         }
-        if (preserveHover) {
+        if (preservePanel) {
             this._layoutSubmenu?.();
             if (previousRow && preservedItem) {
                 this._animateItemMove(preservedItem, previousRow);
@@ -1074,6 +1379,9 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         } else if (focusItemId !== undefined) {
             this.focusItemById(focusItemId);
         }
+        if (scrollTop !== undefined) {
+            this._list.scrollTop = scrollTop;
+        }
     }
     _animateItemMove(item, previous) {
         if (this.domNode.closest(".monaco-reduce-motion") || getWindow(this.domNode).matchMedia("(prefers-reduced-motion: reduce)").matches) {
@@ -1126,6 +1434,38 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
             }
         });
     }
+    focusItemAction(itemId, actionId) {
+        const item = this._allMenuItems.find(item => item.item?.id === itemId);
+        if (!item) {
+            return false;
+        }
+        if (item.section && ( this._collapsedSections.has(item.section))) {
+            this._toggleSection(item.section);
+        }
+        const index = this._list.indexOf(item);
+        if (index < 0) {
+            return false;
+        }
+        this._list.setFocus([index]);
+        this._list.reveal(index);
+        const toolbar = this._itemToolbars.get(item);
+        const actionIndex = toolbar?.viewItems.findIndex(item => item.action.id === actionId) ?? -1;
+        if (!toolbar || actionIndex < 0) {
+            return false;
+        }
+        toolbar.focus(actionIndex);
+        return isAncestorOfActiveElement(toolbar.domNode);
+    }
+    _updateToolbarFocusability() {
+        if (!this._options?.tabThroughItemActions) {
+            return;
+        }
+        const [index] = this._list.getFocus();
+        const focused = index !== undefined && index < this._list.length ? this._list.element(index) : undefined;
+        for (const [item, toolbar] of this._itemToolbars) {
+            toolbar.setFocusable(item === focused);
+        }
+    }
     _focusCheckedOrFirst() {
         const suppressHover = this._suppressHover;
         this._suppressHover = true;
@@ -1177,6 +1517,18 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         this._filterCts.clear();
         this._hideSubmenu();
     }
+    setFilter(value, focusItemId) {
+        if (!this._filterInput) {
+            return;
+        }
+        this._filterInput.value = value;
+        this._filterText = value;
+        this._applyOrUpdateFilter();
+        if (focusItemId) {
+            this.focusItemById(focusItemId);
+        }
+        this._filterInput.focus();
+    }
     clearFilter() {
         if (this._filterInput && this._filterText) {
             this._filterInput.value = "";
@@ -1233,6 +1585,33 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         }
         return listHeight;
     }
+    computeMaxVisibleItemsHeightFor(items) {
+        const maxVisibleItems = this._options?.maxVisibleItems;
+        if (maxVisibleItems === undefined) {
+            return Number.POSITIVE_INFINITY;
+        }
+        let height = 0;
+        let actionCount = 0;
+        for (const item of items) {
+            if (actionCount >= maxVisibleItems) {
+                break;
+            }
+            height += this._itemHeightWith(item, this._options);
+            if (item.kind === ActionListItemKind.Action) {
+                actionCount++;
+            }
+        }
+        return height;
+    }
+    computeMaxVisibleItemsHeight() {
+        return this.computeMaxVisibleItemsHeightFor(this._visibleMenuItems);
+    }
+    computeMaxFullHeight() {
+        return Math.min(
+            this.computeFullHeight(),
+            this.computeMaxVisibleItemsHeightFor(this._allMenuItems)
+        );
+    }
     layout(height, width) {
         this._hasLaidOut = true;
         this._list.layout(height, width);
@@ -1261,6 +1640,8 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
             const height = this._list.renderHeight;
             const scrollTop = this._list.scrollTop;
             const focus = this._list.getFocus();
+            const wasMeasuringWidth = this._isMeasuringWidth;
+            this._isMeasuringWidth = true;
             try {
                 const allItems = [...this._allMenuItems];
                 this._list.splice(0, visibleCount, allItems);
@@ -1272,15 +1653,19 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
                 const itemWidths = this._measureItemWidths(allItems);
                 return clamp(Math.max(...itemWidths));
             } finally {
-                this._list.splice(0, this._list.length, visibleItems);
-                this._list.layout(height);
-                this._list.scrollTop = scrollTop;
-                const suppressHover = this._suppressHover;
-                this._suppressHover = true;
                 try {
-                    this._list.setFocus(focus);
+                    this._list.splice(0, this._list.length, visibleItems);
+                    this._list.layout(height);
+                    this._list.scrollTop = scrollTop;
+                    const suppressHover = this._suppressHover;
+                    this._suppressHover = true;
+                    try {
+                        this._list.setFocus(focus);
+                    } finally {
+                        this._suppressHover = suppressHover;
+                    }
                 } finally {
-                    this._suppressHover = suppressHover;
+                    this._isMeasuringWidth = wasMeasuringWidth;
                 }
             }
         }
@@ -1292,6 +1677,7 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         return clamp(Math.max(...itemWidths));
     }
     focusPrevious() {
+        this._setKeyboardNavigation(true);
         if (this._focusFilterResult("previous")) {
             return;
         }
@@ -1328,6 +1714,7 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         }
     }
     focusNext() {
+        this._setKeyboardNavigation(true);
         if (this._focusFilterResult("next")) {
             return;
         }
@@ -1446,13 +1833,26 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
             });
             return;
         }
-        if (isMouseEvent(e.browserEvent)) {
+        const isPointerActivation = isMouseEvent(e.browserEvent) || e.browserEvent?.type === EventType$1.Tap;
+        if (isPointerActivation) {
             const target = e.browserEvent.target;
             if (isHTMLElement(target) && (target.closest(".action-list-item-toolbar") || target.closest(".action-list-submenu-indicator") || target.closest(".action-list-item-inline-toggle"))) {
                 this._list.setSelection([]);
                 return;
             }
         }
+        if (element.openSubmenuOnClick && (element.submenuActions?.length || element.hover?.expandable) && (isPointerActivation || e.browserEvent instanceof AcceptSelectedEvent)) {
+            this._list.setSelection([]);
+            this._showSubmenuForItem(element);
+            if (!isPointerActivation) {
+                if (this._currentSubmenuWidget) {
+                    this._currentSubmenuWidget.focus();
+                } else {
+                    this._submenuContainer.focus();
+                }
+            }
+            return;
+        }
         if (element.item && this.focusCondition(element)) {
             const isPreviewEvent = e.browserEvent instanceof PreviewSelectedEvent;
             this._delegate.onSelect(element.item, isPreviewEvent && this._supportsPreview);
@@ -1530,6 +1930,12 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         if (actionCount === 0) {
             return 0;
         }
+        if (item.toolbarLabels) {
+            const toolbar = this._itemToolbars.get(item);
+            if (toolbar) {
+                return toolbar.domNode.scrollWidth + 16;
+            }
+        }
         const actionButtonWidth = 22;
         return actionCount * actionButtonWidth + 6 + 10;
     }
@@ -1539,6 +1945,112 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         }
         return this.domNode.getRootNode().getElementById(this._list.getElementID(index));
     }
+    _getTabThroughPanelControls(element, row) {
+        if (element.hover?.tabThroughPanel && this._currentSubmenuElement !== element) {
+            this._showSubmenuForElement(element, row);
+        }
+        return {
+            toolbar: this._itemToolbars.get(element),
+            panelControls: [
+                ...(this._itemDetailLinks.get(element) ?? []),
+                ...(element.hover?.getTabbableElements?.() ?? []),
+                ...this._submenuHoverActionElements
+            ]
+        };
+    }
+    _focusFirstTabThroughPanelControl(element, row) {
+        const controls = this._getTabThroughPanelControls(element, row);
+        if (controls.toolbar?.length()) {
+            controls.toolbar.focus(0);
+        } else {
+            (controls.panelControls[0] ?? this._list.getHTMLElement()).focus();
+        }
+    }
+    _handleTabThroughPanelKeyDown(event) {
+        if (event.isComposing) {
+            return;
+        }
+        const focused = this._list.getFocus();
+        if (focused.length === 0) {
+            return;
+        }
+        const index = focused[0];
+        const element = this._list.element(index);
+        const detailLinks = this._itemDetailLinks.get(element) ?? [];
+        if (!element.hover?.tabThroughPanel && !this._options?.tabThroughItemActions && !detailLinks.length) {
+            return;
+        }
+        const row = this._getRowElement(index);
+        const activeElement = getActiveElement();
+        if (!row || !isHTMLElement(activeElement)) {
+            return;
+        }
+        const inToolbar = this._itemToolbars.get(element)?.isFocused() ?? false;
+        const inPanel = this._submenuContainer.contains(activeElement) || detailLinks.includes(activeElement);
+        if ((event.key === "ArrowUp" || event.key === "ArrowDown") && (inToolbar || inPanel)) {
+            EventHelper.stop(event, true);
+            this._list.domFocus();
+            if (event.key === "ArrowUp") {
+                this.focusPrevious();
+            } else {
+                this.focusNext();
+            }
+            return;
+        }
+        if (event.key !== "Tab" || event.ctrlKey || event.metaKey || event.altKey) {
+            return;
+        }
+        const controls = this._getTabThroughPanelControls(element, row);
+        let target;
+        if (event.shiftKey) {
+            if (inPanel) {
+                const panelControlIndex = controls.panelControls.indexOf(activeElement);
+                if (panelControlIndex > 0) {
+                    target = controls.panelControls[panelControlIndex - 1];
+                } else if (controls.toolbar?.length()) {
+                    EventHelper.stop(event, true);
+                    controls.toolbar.focus(controls.toolbar.length() - 1);
+                    return;
+                } else {
+                    target = this._list.getHTMLElement();
+                }
+            } else if (controls.toolbar?.isFocused()) {
+                const toolbarIndex = controls.toolbar.viewItems.findIndex((_, actionIndex) => controls.toolbar?.isFocused(actionIndex));
+                if (toolbarIndex > 0) {
+                    EventHelper.stop(event, true);
+                    controls.toolbar.focus(toolbarIndex - 1);
+                    return;
+                }
+                target = this._options?.filterAsCombobox ? this._filterInput : this._list.getHTMLElement();
+            }
+        } else if (activeElement === this._list.getHTMLElement() || activeElement === this._filterInput) {
+            if (controls.toolbar?.length()) {
+                EventHelper.stop(event, true);
+                controls.toolbar.focus(0);
+                return;
+            }
+            target = controls.panelControls[0];
+        } else {
+            if (controls.toolbar?.isFocused()) {
+                const toolbarIndex = controls.toolbar.viewItems.findIndex((_, actionIndex) => controls.toolbar?.isFocused(actionIndex));
+                if (toolbarIndex + 1 < controls.toolbar.length()) {
+                    EventHelper.stop(event, true);
+                    controls.toolbar.focus(toolbarIndex + 1);
+                    return;
+                }
+                target = controls.panelControls[0];
+            } else {
+                const panelControlIndex = controls.panelControls.indexOf(activeElement);
+                if (panelControlIndex >= 0) {
+                    target = controls.panelControls[panelControlIndex + 1] ?? this._list.getHTMLElement();
+                }
+            }
+        }
+        if (target) {
+            EventHelper.stop(event, true);
+            target.focus();
+        }
+    }
     _showHoverForElement(element, index) {
         if (this._currentSubmenuElement === element) {
             return;
@@ -1566,9 +2078,13 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         }
     }
     _showSubmenuForElement(element, anchor) {
-        if (this._currentSubmenuElement === element) {
+        if (!this._hoverEnabled || this._currentSubmenuElement === element) {
             return;
         }
+        const parentWidget = this.domNode.closest(".action-widget");
+        if (parentWidget) {
+            finishActionWidgetOpeningAnimation(parentWidget);
+        }
         this._currentSubmenuElement = element;
         this._clearSubmenuContainer();
         anchor.setAttribute("aria-expanded", "true");
@@ -1578,9 +2094,11 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
             this._submenuContainer.classList.add(this._submenuPanelClassName);
         }
         const preserveVerticalPosition = element.hover?.preserveVerticalPosition;
-        const content = preserveVerticalPosition ? $(".action-list-submenu-content") : this._submenuContainer;
-        const viewport = preserveVerticalPosition ? $(".action-list-submenu-viewport", undefined, content) : undefined;
-        const scrollbar = viewport ? this._submenuDisposables.add(( new DomScrollableElement(viewport, {
+        const hasSubmenuActions = !!element.submenuActions?.length;
+        const scrollableContent = preserveVerticalPosition || element.hover?.alignToParentBottom || (!hasSubmenuActions && !this._options?.persistentHover && !element.hover?.alignToParent);
+        const content = scrollableContent ? $(".action-list-submenu-content") : this._submenuContainer;
+        const viewport = scrollableContent ? $(".action-list-submenu-viewport", undefined, content) : undefined;
+        const scrollbar = viewport && !hasSubmenuActions ? this._submenuDisposables.add(( new DomScrollableElement(viewport, {
             horizontal: ScrollbarVisibility.Hidden,
             vertical: ScrollbarVisibility.Auto,
             consumeMouseWheelIfScrollbarIsNeeded: true,
@@ -1602,6 +2120,8 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
                     }
                 })
             );
+        } else if (viewport) {
+            this._submenuContainer.appendChild(viewport);
         }
         let hoverHeader;
         const hoverContent = typeof element.hover?.content === "function" ? element.hover.content() : element.hover?.content;
@@ -1630,12 +2150,27 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
                 hoverHeader = rendered.element;
             }
             hoverHeader.classList.add("action-list-submenu-hover-header");
+            hoverHeader.classList.toggle("content-owns-padding", element.hover?.contentOwnsPadding === true);
             if (element.submenuActions?.length) {
                 hoverHeader.classList.add("has-submenu");
             }
             content.appendChild(hoverHeader);
         }
-        const hasSubmenuActions = !!element.submenuActions?.length;
+        if (element.hover?.actions?.length) {
+            const statusBarElement = $(".hover-row.status-bar");
+            const actionsElement = append(statusBarElement, $(".actions"));
+            for (const action of element.hover.actions) {
+                const keybinding = this._keybindingService.lookupKeybinding(action.commandId);
+                const hoverAction = this._submenuDisposables.add(HoverAction.render(actionsElement, {
+                    label: action.label,
+                    commandId: action.commandId,
+                    run: target => action.run(target),
+                    iconClass: action.iconClass
+                }, keybinding?.getLabel() ?? null));
+                this._submenuHoverActionElements.push(hoverAction.actionContainer);
+            }
+            this._submenuContainer.appendChild(statusBarElement);
+        }
         this._submenuContainer.style.display = "";
         this._submenuContainer.style.position = "absolute";
         if (element.hover?.expandable) {
@@ -1649,67 +2184,9 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         const targetWindow = getWindow(this.domNode);
         let totalHeight = 0;
         let maxWidth = hoverHeader ? hoverHeader.offsetWidth : 0;
+        let submenuWidget;
         if (hasSubmenuActions) {
-            const submenuItems = [];
-            const submenuActions = element.submenuActions;
-            const submenuGroups = 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];
-                    const extendedChild = child;
-                    const icon = extendedChild.icon ?? ThemeIcon.fromId(child.checked ? Codicon.check.id : Codicon.blank.id);
-                    const hoverContent = extendedChild.hoverContent;
-                    submenuItems.push({
-                        item: child,
-                        kind: ActionListItemKind.Action,
-                        label: child.label,
-                        description: child.tooltip || undefined,
-                        group: {
-                            title: "",
-                            icon
-                        },
-                        hideIcon: false,
-                        hover: hoverContent ? {
-                            content: hoverContent
-                        } : {},
-                        onRemove: extendedChild.onRemove
-                    });
-                }
-                if (gi < groupsWithActions.length - 1) {
-                    submenuItems.push({
-                        kind: ActionListItemKind.Separator,
-                        label: ""
-                    });
-                }
-            }
-            for (const action of submenuActions) {
-                if (!(action instanceof SubmenuAction)) {
-                    const extendedAction = action;
-                    submenuItems.push({
-                        item: action,
-                        kind: ActionListItemKind.Action,
-                        label: action.label,
-                        description: action.tooltip || undefined,
-                        group: {
-                            title: ""
-                        },
-                        hideIcon: false,
-                        hover: {},
-                        onRemove: extendedAction.onRemove
-                    });
-                }
-            }
+            const submenuItems = this._createSubmenuItems(element.submenuActions);
             const submenuDelegate = {
                 onHide: () => {},
                 onSelect: action => {
@@ -1722,25 +2199,48 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
                     this.hide();
                 }
             };
-            const submenuWidget = this._submenuDisposables.add(this._instantiationService.createInstance(
+            const createdSubmenuWidget = this._submenuDisposables.add(this._instantiationService.createInstance(
                 ActionListWidget_1,
                 "submenu",
                 false,
                 submenuItems,
                 submenuDelegate,
                 undefined,
-                undefined
+                element.submenuOptions
             ));
-            content.appendChild(submenuWidget.domNode);
-            this._currentSubmenuWidget = submenuWidget;
-            submenuWidget.clearFocus();
-            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 => {
+            submenuWidget = createdSubmenuWidget;
+            if (createdSubmenuWidget.headerContainer) {
+                content.appendChild(createdSubmenuWidget.headerContainer);
+            }
+            if (createdSubmenuWidget.filterContainer) {
+                content.appendChild(createdSubmenuWidget.filterContainer);
+            }
+            content.appendChild(createdSubmenuWidget.domNode);
+            if (createdSubmenuWidget.footerContainer) {
+                content.appendChild(createdSubmenuWidget.footerContainer);
+            }
+            this._currentSubmenuWidget = createdSubmenuWidget;
+            createdSubmenuWidget.clearFocus();
+            totalHeight = createdSubmenuWidget.computeListHeight();
+            createdSubmenuWidget.layout(totalHeight);
+            const submenuMaxWidth = createdSubmenuWidget.computeMaxWidth(0);
+            maxWidth = Math.max(
+                maxWidth,
+                submenuMaxWidth,
+                createdSubmenuWidget.footerContainer?.offsetWidth ?? 0
+            );
+            createdSubmenuWidget.layout(totalHeight, maxWidth);
+            createdSubmenuWidget.domNode.style.width = `${maxWidth}px`;
+            if (element.submenuOptions) {
+                this._submenuContainer.style.boxSizing = "border-box";
+                this._submenuContainer.style.width = `${maxWidth + 10}px`;
+            }
+            this._submenuDisposables.add(createdSubmenuWidget.onDidRequestLayout(() => {
+                totalHeight = createdSubmenuWidget.computeListHeight();
+                createdSubmenuWidget.layout(totalHeight, maxWidth);
+                this._layoutSubmenu?.();
+            }));
+            this._submenuDisposables.add(addDisposableListener(content, "keydown", e => {
                 if (e.key === "Escape") {
                     EventHelper.stop(e, true);
                     this._hideSubmenu();
@@ -1748,16 +2248,17 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
                 } else if (e.key === "ArrowLeft") {
                     EventHelper.stop(e, true);
                     this._hideSubmenu();
+                    this._setKeyboardNavigation(true);
                     this._list.domFocus();
                 } else if (e.key === "Enter" || e.key === " ") {
                     EventHelper.stop(e, true);
-                    submenuWidget.acceptSelected();
+                    createdSubmenuWidget.acceptSelected();
                 } else if (e.key === "ArrowDown") {
                     EventHelper.stop(e, true);
-                    submenuWidget.focusNext();
+                    createdSubmenuWidget.focusNext();
                 } else if (e.key === "ArrowUp") {
                     EventHelper.stop(e, true);
-                    submenuWidget.focusPrevious();
+                    createdSubmenuWidget.focusPrevious();
                 }
             }));
         }
@@ -1768,6 +2269,7 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
             if (!currentElement || this._layoutSubmenu !== layout) {
                 return;
             }
+            finishActionWidgetOpeningAnimation(this._submenuContainer);
             const index = this._list.indexOf(currentElement);
             const row = index >= 0 ? this._getRowElement(index) : null;
             const persistent = this._options?.persistentHover;
@@ -1783,18 +2285,34 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
             }
             row?.setAttribute("aria-expanded", "true");
             const parentRect = this.domNode.getBoundingClientRect();
-            const alignToParent = persistent || currentElement.hover?.alignToParent;
+            const alignToParent = persistent || currentElement.hover?.alignToParent || currentElement.hover?.alignToParentBottom;
             const edgeRect = alignToParent ? this.domNode.parentElement?.closest(".action-widget")?.getBoundingClientRect() ?? parentRect : parentRect;
             const anchorRect = row?.getBoundingClientRect() ?? edgeRect;
             const zoom = alignToParent || preserveVerticalPosition ? getDomNodeZoomLevel(this.domNode) : 1;
             if (persistent) {
                 this._submenuContainer.style.width = `${edgeRect.width / zoom}px`;
             }
-            const panelRect = this._submenuContainer.getBoundingClientRect();
-            const panelWidth = alignToParent ? panelRect.width : maxWidth + 10;
-            const spaceRight = targetWindow.innerWidth - (alignToParent ? edgeRect.right : anchorRect.right);
-            const spaceLeft = edgeRect.left;
+            let panelRect = this._submenuContainer.getBoundingClientRect();
+            let panelWidth = alignToParent ? panelRect.width : maxWidth + 10;
             const gap = alignToParent ? 0 : 4;
+            const viewportMargin = 4;
+            const spaceRight = targetWindow.innerWidth - viewportMargin - edgeRect.right - gap;
+            const spaceLeft = edgeRect.left - viewportMargin - gap;
+            if (!alignToParent && !hasSubmenuActions) {
+                const minimumPanelWidth = Math.min(panelWidth, 240);
+                const availableSideWidth = Math.max(spaceRight, spaceLeft);
+                if (availableSideWidth >= minimumPanelWidth) {
+                    panelWidth = Math.min(panelWidth, availableSideWidth);
+                }
+            }
+            if (!alignToParent) {
+                const availableWidth = targetWindow.innerWidth - 2 * viewportMargin;
+                if (panelWidth > availableWidth) {
+                    panelWidth = Math.max(availableWidth, 0);
+                }
+                this._submenuContainer.style.boxSizing = "border-box";
+                this._submenuContainer.style.width = `${panelWidth}px`;
+            }
             let showRight = spaceRight >= panelWidth || spaceRight >= spaceLeft;
             if (persistent && this._submenuSide && (this._submenuSide === "right" ? spaceRight : spaceLeft) >= panelWidth) {
                 showRight = this._submenuSide === "right";
@@ -1802,54 +2320,159 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
             if (persistent) {
                 this._submenuSide = showRight ? "right" : "left";
             }
-            const left = showRight ? edgeRect.right - parentRect.left + gap : edgeRect.left - parentRect.left - panelWidth - gap;
+            let left = showRight ? edgeRect.right - parentRect.left + gap : edgeRect.left - parentRect.left - panelWidth - gap;
+            const pageLeft = parentRect.left + left;
+            if (pageLeft < viewportMargin) {
+                left += viewportMargin - pageLeft;
+            } else if (pageLeft + panelWidth > targetWindow.innerWidth - viewportMargin) {
+                left -= (pageLeft + panelWidth) - (targetWindow.innerWidth - viewportMargin);
+            }
+            panelRect = this._submenuContainer.getBoundingClientRect();
+            const panelHeight = viewport && scrollbar && !preserveVerticalPosition ? content.getBoundingClientRect().height + panelRect.height - scrollbar.getDomNode().getBoundingClientRect().height : panelRect.height;
             this._submenuContainer.style.left = `${left / zoom}px`;
-            const panelHeight = alignToParent || preserveVerticalPosition ? panelRect.height : totalHeight + (hoverHeader?.offsetHeight ?? 0);
+            this._submenuContainer.style.transformOrigin = showRight ? "top left" : "top right";
             if (preserveVerticalPosition) {
                 openingPanelHeight ??= panelHeight / zoom;
             }
             const anchorHeight = openingPanelHeight !== undefined ? openingPanelHeight * zoom : panelHeight;
-            let top = openingPanelTop !== undefined ? openingPanelTop * zoom : row ? anchorRect.top - parentRect.top + (anchorRect.height - anchorHeight) / 2 : panelRect.top - parentRect.top;
+            const bottomBoundary = currentElement.hover?.alignToParentBottom ? Math.min(edgeRect.bottom, targetWindow.innerHeight) : targetWindow.innerHeight;
+            let top = currentElement.hover?.alignToParentBottom ? bottomBoundary - parentRect.top - anchorHeight : openingPanelTop !== undefined ? openingPanelTop * zoom : row && currentElement.hover?.alignToAnchorTop ? anchorRect.top - parentRect.top : row ? anchorRect.top - parentRect.top + (anchorRect.height - anchorHeight) / 2 : panelRect.top - parentRect.top;
+            if (preserveVerticalPosition && currentElement.hover?.alignToAnchorTop && viewport && submenuWidget) {
+                const outerChromeHeight = panelRect.height - viewport.getBoundingClientRect().height;
+                const submenuChromeHeight = (submenuWidget.headerContainer?.offsetHeight ?? 0) + (submenuWidget.filterContainer?.offsetHeight ?? 0) + (submenuWidget.footerContainer?.offsetHeight ?? 0);
+                const desiredPanelHeight = outerChromeHeight + (submenuChromeHeight + totalHeight) * zoom;
+                top = Math.min(top, targetWindow.innerHeight - parentRect.top - desiredPanelHeight - 8);
+            }
             const panelBottom = parentRect.top + top + anchorHeight;
-            if (panelBottom > targetWindow.innerHeight) {
-                top -= panelBottom - targetWindow.innerHeight + 8;
+            if (panelBottom > bottomBoundary && !(preserveVerticalPosition && currentElement.hover?.alignToAnchorTop)) {
+                top -= panelBottom - bottomBoundary + 8;
             }
             if (parentRect.top + top < 0) {
                 top = -parentRect.top;
             }
+            this._submenuContainer.style.left = `${left / zoom}px`;
             if (preserveVerticalPosition) {
                 openingPanelTop ??= top / zoom;
             }
+            const availablePanelHeight = currentElement.hover?.alignToParentBottom ? bottomBoundary - 8 : targetWindow.innerHeight - parentRect.top - top - 8;
             if (viewport && scrollbar) {
                 const chromeHeight = (panelRect.height - scrollbar.getDomNode().getBoundingClientRect().height) / zoom;
-                const availableHeight = Math.max(
-                    0,
-                    (targetWindow.innerHeight - parentRect.top - top - 8) / zoom - chromeHeight
-                );
+                const availableHeight = Math.max(0, availablePanelHeight / zoom - chromeHeight);
                 viewport.style.height = `${Math.min(content.getBoundingClientRect().height / zoom, availableHeight)}px`;
                 scrollbar.scanDomNode();
+            } else if (viewport && submenuWidget) {
+                const chromeHeight = (panelRect.height - viewport.getBoundingClientRect().height) / zoom;
+                const availableHeight = Math.max(0, availablePanelHeight / zoom - chromeHeight);
+                const submenuChromeHeight = (submenuWidget.headerContainer?.offsetHeight ?? 0) + (submenuWidget.filterContainer?.offsetHeight ?? 0) + (submenuWidget.footerContainer?.offsetHeight ?? 0);
+                const submenuHeight = totalHeight === 0 ? 0 : Math.max(
+                    this._actionLineHeight,
+                    Math.min(totalHeight, availableHeight - submenuChromeHeight)
+                );
+                submenuWidget.layout(submenuHeight, maxWidth);
+                viewport.style.height = `${submenuChromeHeight + submenuHeight}px`;
+            }
+            if (currentElement.hover?.alignToParentBottom) {
+                top = Math.max(0, bottomBoundary - this._submenuContainer.getBoundingClientRect().height) - parentRect.top;
             }
             this._submenuContainer.style.top = `${top / zoom}px`;
         };
         this._layoutSubmenu = layout;
         layout();
-        if ((this._options?.persistentHover || element.hover?.alignToParent || preserveVerticalPosition) && this._currentSubmenuElement === element) {
-            const observer = this._submenuDisposables.add(
-                new DisposableResizeObserver("ActionListWidget.hoverPanel", layout, targetWindow)
-            );
-            this._submenuDisposables.add(
-                observer.observe(preserveVerticalPosition ? content : this._submenuContainer, {
+        this._submenuContainer.classList.toggle(ACTION_WIDGET_ANIMATED_CLASS, hasSubmenuActions);
+        if ((this._options?.persistentHover || element.hover?.alignToParent || element.hover?.tabThroughPanel || preserveVerticalPosition || element.hover?.alignToParentBottom) && this._currentSubmenuElement === element) {
+            if (!submenuWidget) {
+                const scheduledLayout = this._submenuDisposables.add(( new MutableDisposable()));
+                const observer = this._submenuDisposables.add(new DisposableResizeObserver("ActionListWidget.hoverPanel", () => {
+                    if (!scheduledLayout.value) {
+                        scheduledLayout.value = scheduleAtNextAnimationFrame(targetWindow, () => {
+                            scheduledLayout.clear();
+                            layout();
+                        });
+                    }
+                }, targetWindow));
+                this._submenuDisposables.add(observer.observe(viewport ? content : this._submenuContainer, {
                     box: "border-box"
-                })
-            );
-            if (this._options?.persistentHover || preserveVerticalPosition) {
-                this._submenuDisposables.add(addDisposableListener(targetWindow, EventType.RESIZE, () => {
-                    this._cancelSubmenuShow();
-                    this._resetSubmenuPointer();
-                    layout();
                 }));
             }
         }
+        if (this._currentSubmenuElement === element) {
+            this._submenuDisposables.add(addDisposableListener(targetWindow, EventType.RESIZE, () => {
+                this._cancelSubmenuShow();
+                this._resetSubmenuPointer();
+                layout();
+            }));
+        }
+    }
+    _createSubmenuItems(submenuActions) {
+        const submenuItems = [];
+        const submenuGroups = submenuActions.filter(action => action instanceof SubmenuAction);
+        const groupsWithActions = submenuGroups.filter(group => group.actions.length > 0);
+        for (let groupIndex = 0; groupIndex < groupsWithActions.length; groupIndex++) {
+            const group = groupsWithActions[groupIndex];
+            if (group.label) {
+                submenuItems.push({
+                    kind: ActionListItemKind.Header,
+                    group: {
+                        title: group.label
+                    },
+                    label: group.label
+                });
+            }
+            for (const child of group.actions) {
+                const extendedChild = child;
+                const icon = extendedChild.icon ?? ThemeIcon.fromId(child.checked ? Codicon.check.id : Codicon.blank.id);
+                const hoverContent = extendedChild.hoverContent;
+                const hover = hoverContent ? ( new MarkdownString()).appendText(`${child.label}\n`).appendMarkdown(hoverContent) : undefined;
+                submenuItems.push({
+                    item: child,
+                    kind: ActionListItemKind.Action,
+                    label: child.label,
+                    description: child.tooltip && child.tooltip !== child.label ? child.tooltip : undefined,
+                    group: {
+                        title: "",
+                        icon
+                    },
+                    hideIcon: false,
+                    hover: hover ? {
+                        content: hover
+                    } : undefined,
+                    tooltip: child.tooltip || child.label,
+                    onRemove: extendedChild.onRemove,
+                    submenuActions: child instanceof SubmenuAction ? [( new SubmenuAction(child.id, "", child.actions))] : undefined
+                });
+            }
+            if (groupIndex < groupsWithActions.length - 1) {
+                submenuItems.push({
+                    kind: ActionListItemKind.Separator,
+                    label: ""
+                });
+            }
+        }
+        for (const action of submenuActions) {
+            if (!(action instanceof SubmenuAction)) {
+                const extendedAction = action;
+                const icon = extendedAction.icon ?? ThemeIcon.fromId(action.checked ? Codicon.check.id : Codicon.blank.id);
+                const hoverContent = extendedAction.hoverContent;
+                const hover = hoverContent ? ( new MarkdownString()).appendText(`${action.label}\n`).appendMarkdown(hoverContent) : undefined;
+                submenuItems.push({
+                    item: action,
+                    kind: ActionListItemKind.Action,
+                    label: action.label,
+                    description: action.tooltip && action.tooltip !== action.label ? action.tooltip : undefined,
+                    group: {
+                        title: "",
+                        icon
+                    },
+                    hideIcon: false,
+                    hover: hover ? {
+                        content: hover
+                    } : undefined,
+                    tooltip: action.tooltip || action.label,
+                    onRemove: extendedAction.onRemove
+                });
+            }
+        }
+        return submenuItems;
     }
     _hideSubmenu() {
         this._cancelSubmenuHide();
@@ -1860,13 +2483,17 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         this._submenuContainer.style.display = "none";
     }
     _clearSubmenuContainer() {
+        this._cancelSubmenuHide();
+        this._cancelSubmenuShow();
         this._layoutSubmenu = undefined;
+        this._submenuContainer.classList.remove(ACTION_WIDGET_ANIMATED_CLASS);
         this._resetSubmenuPointer();
         if (this._submenuContainer.contains(getActiveElement())) {
             this._list.domFocus();
         }
         this._submenuDisposables.clear();
         this._currentSubmenuWidget = undefined;
+        this._submenuHoverActionElements = [];
         if (this._submenuPanelClassName) {
             this._submenuContainer.classList.remove(this._submenuPanelClassName);
             this._submenuPanelClassName = undefined;
@@ -1878,6 +2505,8 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         }
         this._expandedTrigger = undefined;
         clearNode(this._submenuContainer);
+        this._submenuContainer.style.width = "";
+        this._submenuContainer.style.boxSizing = this._options?.persistentHover ? "border-box" : "";
     }
     _scheduleSubmenuHide() {
         this._cancelSubmenuHide();
@@ -1896,8 +2525,9 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
     }
     _scheduleSubmenuShow(element, pointer) {
         this._cancelSubmenuShow();
-        let delay = 500;
-        if (this._options?.persistentHover) {
+        this._pendingSubmenuElement = element;
+        let delay = this._options?.submenuHoverDelay ?? 500;
+        if (this._usesSubmenuPointerIntent()) {
             delay = 0;
             const origin = this._submenuPointerOrigin;
             if (origin && pointer.clientX !== origin.x && this._currentSubmenuElement && new SafeTriangle(origin.x, origin.y, this._submenuContainer).contains(pointer.clientX, pointer.clientY)) {
@@ -1908,11 +2538,16 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         }
         const show = () => {
             this._submenuShowTimeout = undefined;
-            const index = this._list.indexOf(element);
+            const pendingElement = this._pendingSubmenuElement;
+            this._pendingSubmenuElement = undefined;
+            if (!pendingElement) {
+                return;
+            }
+            const index = this._list.indexOf(pendingElement);
             const rowElement = index >= 0 ? this._getRowElement(index) : null;
             if (rowElement) {
-                this._showSubmenuForElement(element, rowElement);
-                if (this._options?.persistentHover) {
+                this._showSubmenuForElement(pendingElement, rowElement);
+                if (this._usesSubmenuPointerIntent()) {
                     this._updateSubmenuPointer(pointer);
                 }
             }
@@ -1934,30 +2569,40 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         this._submenuPointerOrigin = undefined;
         this._submenuPointerGraceDeadline = undefined;
     }
+    _usesSubmenuPointerIntent() {
+        return this._options?.persistentHover === true || this._options?.submenuPointerIntent === true;
+    }
     _cancelSubmenuShow() {
+        this._pendingSubmenuElement = undefined;
         if (this._submenuShowTimeout !== undefined) {
             clearTimeout(this._submenuShowTimeout);
             this._submenuShowTimeout = undefined;
         }
     }
     async onListHover(e) {
+        this._setKeyboardNavigation(false);
         const element = e.element;
         if (element && element.item && this.focusCondition(element)) {
+            const focus = typeof e.index === "number" ? [e.index] : [];
+            const activeElement = getActiveElement();
+            if (this._options?.tabThroughItemActions && this._list.getFocus()[0] !== e.index && isHTMLElement(activeElement) && this.domNode.contains(activeElement) && activeElement.closest(".action-list-item-toolbar")) {
+                this._list.domFocus();
+            }
             const isHoveringToolbar = isHTMLElement(e.browserEvent.target) && e.browserEvent.target.closest(".action-list-item-toolbar") !== null;
             if (isHoveringToolbar) {
                 if (!element.submenuActions?.length) {
                     this._cancelSubmenuShow();
                 }
-                this._list.setFocus([]);
+                this._list.setFocus(this._options?.tabThroughItemActions ? focus : []);
                 return;
             }
             const hasPanel = !!(element.submenuActions?.length || element.hover?.content);
             const suppressHover = this._suppressHover;
-            if (hasPanel || this._options?.persistentHover) {
+            if (hasPanel || this._usesSubmenuPointerIntent()) {
                 this._suppressHover = true;
             }
             try {
-                this._list.setFocus(typeof e.index === "number" ? [e.index] : []);
+                this._list.setFocus(focus);
             } finally {
                 this._suppressHover = suppressHover;
             }
@@ -1965,11 +2610,11 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
                 if (this._currentSubmenuElement === element) {
                     this._cancelSubmenuHide();
                     this._cancelSubmenuShow();
-                    if (this._options?.persistentHover) {
+                    if (this._usesSubmenuPointerIntent()) {
                         this._updateSubmenuPointer(e.browserEvent);
                     }
                 } else {
-                    if (!this._options?.persistentHover) {
+                    if (!this._usesSubmenuPointerIntent()) {
                         this._hideSubmenu();
                     }
                     this._scheduleSubmenuShow(element, e.browserEvent);
@@ -1980,7 +2625,9 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
                 this._cancelSubmenuHide();
             } else {
                 this._cancelSubmenuShow();
-                if (!this._options?.persistentHover) {
+                if (this._options?.submenuPointerIntent) {
+                    this._scheduleSubmenuHide();
+                } else if (!this._options?.persistentHover) {
                     this._hideSubmenu();
                 }
             }
@@ -2013,7 +2660,7 @@ let ActionListWidget = ActionListWidget_1 = class ActionListWidget extends Dispo
         }
     }
 };
-ActionListWidget = ActionListWidget_1 = ( __decorate([( __param(6, IKeybindingService)), ( __param(7, IOpenerService)), ( __param(8, IInstantiationService))], ActionListWidget));
+ActionListWidget = ActionListWidget_1 = ( __decorate([( __param(6, IKeybindingService)), ( __param(7, IOpenerService)), ( __param(8, IInstantiationService)), ( __param(9, IHoverService))], ActionListWidget));
 let ActionList = class ActionList extends Disposable {
     get domNode() {
         return this._widget.domNode;
@@ -2037,8 +2684,8 @@ let ActionList = class ActionList extends Disposable {
         return this._widgetClassName;
     }
     get anchorPosition() {
-        if (this._preferredAnchorPosition !== undefined) {
-            return this._preferredAnchorPosition;
+        if (this._anchorPosition !== undefined) {
+            return this._anchorPosition;
         }
         if (this._showAbove === undefined) {
             return undefined;
@@ -2063,8 +2710,10 @@ let ActionList = class ActionList extends Disposable {
         this._lastMinWidth = 0;
         this._hasLaidOut = false;
         this._anchor = anchor;
-        this._preferredAnchorPosition = options?.anchorPosition;
+        this._anchorPosition = options?.anchorPosition;
+        this._preferredAnchorPosition = options?.preferredAnchorPosition;
         this._useFullHeight = options?.useFullHeight ?? false;
+        this._getPopupChromeHeight = options?.getPopupChromeHeight;
         this._widgetClassName = options?.widgetClassName;
         this._widget = this._register(instantiationService.createInstance(
             ActionListWidget,
@@ -2088,12 +2737,18 @@ let ActionList = class ActionList extends Disposable {
     showHoverForCheckedItem() {
         this._widget.showHoverForCheckedItem();
     }
+    setHoverEnabled(enabled) {
+        this._widget.setHoverEnabled(enabled);
+    }
     hide(didCancel, hideContextView = true) {
         this._widget.hide(didCancel);
         if (hideContextView) {
             this._contextViewService.hideContextView();
         }
     }
+    setFilter(value, focusItemId) {
+        this._widget.setFilter(value, focusItemId);
+    }
     clearFilter() {
         return this._widget.clearFilter();
     }
@@ -2118,12 +2773,18 @@ let ActionList = class ActionList extends Disposable {
     updateItems(items, focusItemId, options) {
         this._widget.updateItems(items, focusItemId, options);
     }
+    getFocusedElement() {
+        return this._widget.getFocusedElement();
+    }
     computeHeightForItems(items, collapsedSections, options) {
         return this._widget.computeHeightForItems(items, collapsedSections, options);
     }
     focusItemById(itemId) {
         this._widget.focusItemById(itemId);
     }
+    focusItemAction(itemId, actionId) {
+        return this._widget.focusItemAction(itemId, actionId);
+    }
     hasDynamicHeight() {
         return this._widget.hasDynamicHeight;
     }
@@ -2137,14 +2798,17 @@ let ActionList = class ActionList extends Disposable {
         return toPixels(style.paddingTop) + toPixels(style.paddingBottom) + toPixels(style.borderTopWidth) + toPixels(style.borderBottomWidth);
     }
     computeHeight() {
-        const listHeight = this._fixedContentHeight ?? this._widget.computeListHeight();
+        const maxVisibleItemsHeight = this._widget.computeMaxVisibleItemsHeight();
+        const listHeight = this._fixedContentHeight ?? Math.min(this._widget.computeListHeight(), maxVisibleItemsHeight);
         const filterHeight = this._widget.filterContainer ? 36 : 0;
         const footerHeight = this._widget.footerContainer ? 32 : 0;
-        const headerHeight = this._widget.headerContainer ? this._widget.headerContainer.offsetHeight || 36 : 0;
+        const headerHeight = this._widget.headerContainer && !this._widget.headerContainer.hidden ? this._widget.headerContainer.offsetHeight || 36 : 0;
         const chromeHeight = filterHeight + footerHeight + headerHeight;
+        const popupChromeHeight = this._getPopupChromeHeight?.(this.domNode);
+        const outerChromeHeight = popupChromeHeight === undefined ? this.computeActionWidgetVerticalChromeHeight() : Math.max(0, popupChromeHeight - chromeHeight);
         const targetWindow = getWindow(this.domNode);
         let availableHeight;
-        if (this.hasDynamicHeight() || this._preferredAnchorPosition !== undefined) {
+        if (this.hasDynamicHeight() || this._anchorPosition !== undefined || this._preferredAnchorPosition !== undefined) {
             const viewportHeight = targetWindow.innerHeight;
             const anchorRect = getAnchorRect(this._anchor);
             const anchorTopInViewport = anchorRect.top - targetWindow.pageYOffset;
@@ -2152,13 +2816,24 @@ let ActionList = class ActionList extends Disposable {
             const spaceBelow = viewportHeight - anchorTopInViewport - anchorRect.height - bottomGap;
             const spaceAbove = anchorTopInViewport;
             if (this._showAbove === undefined) {
-                const fullHeight = this._fixedContentHeight ?? this._widget.computeFullHeight();
-                this._showAbove = this._preferredAnchorPosition !== undefined ? this._preferredAnchorPosition === AnchorPosition.ABOVE : (chromeHeight + fullHeight > spaceBelow && spaceAbove > spaceBelow);
+                const fullHeight = this._fixedContentHeight ?? this._widget.computeMaxFullHeight();
+                if (this._anchorPosition !== undefined) {
+                    this._showAbove = this._anchorPosition === AnchorPosition.ABOVE;
+                } else if (this._preferredAnchorPosition !== undefined) {
+                    const preferAbove = this._preferredAnchorPosition === AnchorPosition.ABOVE;
+                    const viewportMaxHeight = this._useFullHeight ? viewportHeight : Math.floor(viewportHeight * 0.6);
+                    const desiredHeight = Math.min(chromeHeight + fullHeight, viewportMaxHeight) + outerChromeHeight;
+                    const placement = layout(viewportHeight - bottomGap, desiredHeight, {
+                        offset: preferAbove ? viewportHeight - bottomGap - anchorTopInViewport - anchorRect.height : anchorTopInViewport,
+                        size: anchorRect.height,
+                        position: LayoutAnchorPosition.Before
+                    });
+                    this._showAbove = placement.result === "overlap" ? spaceAbove > spaceBelow : placement.result === "ok" ? preferAbove : !preferAbove;
+                } else {
+                    this._showAbove = chromeHeight + fullHeight > spaceBelow && spaceAbove > spaceBelow;
+                }
             }
-            availableHeight = Math.max(
-                0,
-                (this._showAbove ? spaceAbove : spaceBelow) - this.computeActionWidgetVerticalChromeHeight()
-            );
+            availableHeight = Math.max(0, (this._showAbove ? spaceAbove : spaceBelow) - outerChromeHeight);
         } else {
             const padding = 10;
             const windowHeight = this._layoutService.getContainer(targetWindow).clientHeight;
@@ -2167,7 +2842,7 @@ let ActionList = class ActionList extends Disposable {
         }
         const viewportMaxHeight = this._useFullHeight ? targetWindow.innerHeight : Math.floor(targetWindow.innerHeight * 0.6);
         const actionLineHeight = this._widget.lineHeight;
-        if (this._preferredAnchorPosition !== undefined) {
+        if (this._anchorPosition !== undefined || this._preferredAnchorPosition !== undefined) {
             const maxHeight = Math.min(availableHeight, viewportMaxHeight);
             const height = Math.min(listHeight + chromeHeight, Math.max(0, maxHeight));
             return Math.max(0, height - chromeHeight);