@codingame/monaco-vscode-api 3.2.2 → 4.0.0

package/vscode/src/vs/base/browser/ui/findinput/findInputToggles.js

@@ -1,3 +1,4 @@
+import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
 import { Toggle } from '../toggle/toggle.js';
 import { Codicon } from '../../../common/codicons.js';
 import { localizeWithPath } from '../../../../nls.js';
@@ -22,6 +23,7 @@ class CaseSensitiveToggle extends Toggle {
             icon: Codicon.caseSensitive,
             title: NLS_CASE_SENSITIVE_TOGGLE_LABEL + opts.appendTitle,
             isChecked: opts.isChecked,
+            hoverDelegate: opts.hoverDelegate ?? getDefaultHoverDelegate('element'),
             inputActiveOptionBorder: opts.inputActiveOptionBorder,
             inputActiveOptionForeground: opts.inputActiveOptionForeground,
             inputActiveOptionBackground: opts.inputActiveOptionBackground
@@ -34,6 +36,7 @@ class WholeWordsToggle extends Toggle {
             icon: Codicon.wholeWord,
             title: NLS_WHOLE_WORD_TOGGLE_LABEL + opts.appendTitle,
             isChecked: opts.isChecked,
+            hoverDelegate: opts.hoverDelegate ?? getDefaultHoverDelegate('element'),
             inputActiveOptionBorder: opts.inputActiveOptionBorder,
             inputActiveOptionForeground: opts.inputActiveOptionForeground,
             inputActiveOptionBackground: opts.inputActiveOptionBackground
@@ -46,6 +49,7 @@ class RegexToggle extends Toggle {
             icon: Codicon.regex,
             title: NLS_REGEX_TOGGLE_LABEL + opts.appendTitle,
             isChecked: opts.isChecked,
+            hoverDelegate: opts.hoverDelegate ?? getDefaultHoverDelegate('element'),
             inputActiveOptionBorder: opts.inputActiveOptionBorder,
             inputActiveOptionForeground: opts.inputActiveOptionForeground,
             inputActiveOptionBackground: opts.inputActiveOptionBackground

package/vscode/src/vs/base/browser/ui/findinput/replaceInput.js

@@ -6,6 +6,7 @@ import { Codicon } from '../../../common/codicons.js';
 import { Emitter } from '../../../common/event.js';
 import './findInput.css.js';
 import { localizeWithPath } from '../../../../nls.js';
+import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
 const NLS_DEFAULT_LABEL = ( localizeWithPath('vs/base/browser/ui/findinput/replaceInput', 'defaultLabel', "input"));
 const NLS_PRESERVE_CASE_LABEL = ( localizeWithPath(
     'vs/base/browser/ui/findinput/replaceInput',
@@ -18,9 +19,10 @@ class PreserveCaseToggle extends Toggle {
             icon: Codicon.preserveCase,
             title: NLS_PRESERVE_CASE_LABEL + opts.appendTitle,
             isChecked: opts.isChecked,
+            hoverDelegate: opts.hoverDelegate ?? getDefaultHoverDelegate('element'),
             inputActiveOptionBorder: opts.inputActiveOptionBorder,
             inputActiveOptionForeground: opts.inputActiveOptionForeground,
-            inputActiveOptionBackground: opts.inputActiveOptionBackground
+            inputActiveOptionBackground: opts.inputActiveOptionBackground,
         });
     }
 }

package/vscode/src/vs/base/browser/ui/grid/gridview.js

@@ -7,6 +7,7 @@ import { Disposable, DisposableStore, toDisposable } from '../../../common/lifec
 import { rot } from '../../../common/numbers.js';
 import { isUndefined } from '../../../common/types.js';
 import './gridview.css.js';
+import '../sash/sash.js';
 const defaultStyles = {
     separatorBorder: Color.transparent
 };

package/vscode/src/vs/base/browser/ui/highlightedlabel/highlightedLabel.js

@@ -1,8 +1,13 @@
 import { append, $, reset } from '../../dom.js';
+import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
+import { setupCustomHover } from '../hover/updatableHoverWidget.js';
 import { renderLabelWithIcons } from '../iconLabel/iconLabels.js';
+import { Disposable } from '../../../common/lifecycle.js';
 import { equals } from '../../../common/objects.js';
-class HighlightedLabel {
+class HighlightedLabel extends Disposable {
     constructor(container, options) {
+        super();
+        this.options = options;
         this.text = '';
         this.title = '';
         this.highlights = [];
@@ -63,11 +68,17 @@ class HighlightedLabel {
             }
         }
         reset(this.domNode, ...children);
-        if (this.title) {
+        if (this.options?.hoverDelegate?.showNativeHover) {
             this.domNode.title = this.title;
         }
         else {
-            this.domNode.removeAttribute('title');
+            if (!this.customHover && this.title !== '') {
+                const hoverDelegate = this.options?.hoverDelegate ?? getDefaultHoverDelegate('mouse');
+                this.customHover = this._register(setupCustomHover(hoverDelegate, this.domNode, this.title));
+            }
+            else if (this.customHover) {
+                this.customHover.update(this.title);
+            }
         }
         this.didEverRender = true;
     }

package/vscode/src/vs/base/browser/ui/{iconLabel/iconHoverDelegate.d.ts → hover/hoverDelegate.d.ts}

@@ -1,5 +1,5 @@
-import { HoverPosition } from '../hover/hoverWidget.js';
-import { IUpdatableHoverOptions } from './iconLabelHover.js';
+import { HoverPosition } from './hoverWidget.js';
+import { IHoverWidget, IUpdatableHoverOptions } from './updatableHoverWidget.js';
 import { IMarkdownString } from '../../../common/htmlContent.js';
 import { IDisposable } from '../../../common/lifecycle.js';
 
@@ -57,8 +57,5 @@ interface IHoverDelegate {
     placement?: 'mouse' | 'element';
     showNativeHover?: boolean;
 }
-interface IHoverWidget extends IDisposable {
-    readonly isDisposed: boolean;
-}
 
-export type { IHoverDelegate, IHoverDelegateOptions, IHoverDelegateTarget, IHoverWidget };
+export type { IHoverDelegate, IHoverDelegateOptions, IHoverDelegateTarget };

package/vscode/src/vs/base/browser/ui/hover/{hoverDelegate.js → hoverDelegateFactory.js}

@@ -10,13 +10,13 @@ const defaultHoverDelegateElement = ( new Lazy(() => hoverDelegateFactory('eleme
 function setHoverDelegateFactory(hoverDelegateProvider) {
     hoverDelegateFactory = hoverDelegateProvider;
 }
-function getDefaultHoverDelegate(placement, enableInstantHover) {
-    if (enableInstantHover) {
-        return hoverDelegateFactory(placement, true);
-    }
+function getDefaultHoverDelegate(placement) {
     if (placement === 'element') {
         return defaultHoverDelegateElement.value;
     }
     return defaultHoverDelegateMouse.value;
 }
-export { getDefaultHoverDelegate, setHoverDelegateFactory };
+function createInstantHoverDelegate() {
+    return hoverDelegateFactory('element', true);
+}
+export { createInstantHoverDelegate, getDefaultHoverDelegate, setHoverDelegateFactory };

package/vscode/src/vs/base/browser/ui/hover/hoverWidget.js

@@ -2,7 +2,7 @@ import { append, addDisposableListener, EventType, $ as $$1 } from '../../dom.js
 import { StandardKeyboardEvent } from '../../keyboardEvent.js';
 import { DomScrollableElement } from '../scrollbar/scrollableElement.js';
 import { Disposable } from '../../../common/lifecycle.js';
-import './hover.css.js';
+import './hoverWidget.css.js';
 import { localizeWithPath } from '../../../../nls.js';
 const $ = $$1;
 class HoverWidget extends Disposable {

package/vscode/src/vs/base/browser/ui/{iconLabel/iconLabelHover.d.ts → hover/updatableHoverWidget.d.ts}

@@ -1,3 +1,5 @@
+import { IDisposable } from '../../../common/lifecycle.js';
+
 /**
  * Copied from src\vs\workbench\services\hover\browser\hover.ts
  * @deprecated Use IHoverService
@@ -12,5 +14,8 @@ interface IUpdatableHoverOptions {
     actions?: IHoverAction[];
     linkHandler?(url: string): void;
 }
+interface IHoverWidget extends IDisposable {
+    readonly isDisposed: boolean;
+}
 
-export type { IUpdatableHoverOptions };
+export type { IHoverWidget, IUpdatableHoverOptions };

package/vscode/src/vs/base/browser/ui/{iconLabel/iconLabelHover.js → hover/updatableHoverWidget.js}

@@ -1,4 +1,4 @@
-import { addDisposableListener, EventType } from '../../dom.js';
+import { addDisposableListener, EventType, getWindow } from '../../dom.js';
 import { TimeoutTimer } from '../../../common/async.js';
 import { CancellationTokenSource } from '../../../common/cancellation.js';
 import { isMarkdownString } from '../../../common/htmlContent.js';
@@ -41,7 +41,7 @@ class UpdatableHoverWidget {
         else {
             if (!this._hoverWidget) {
                 this.show(( localizeWithPath(
-                    'vs/base/browser/ui/iconLabel/iconLabelHover',
+                    'vs/base/browser/ui/hover/updatableHoverWidget',
                     'iconLabel.loading',
                     "Loading..."
                 )), focus);
@@ -95,7 +95,20 @@ class UpdatableHoverWidget {
         this._cancellationTokenSource = undefined;
     }
 }
+function getHoverTargetElement(element, stopElement) {
+    stopElement = stopElement ?? getWindow(element).document.body;
+    while (!element.hasAttribute('custom-hover') && element !== stopElement) {
+        element = element.parentElement;
+    }
+    return element;
+}
 function setupCustomHover(hoverDelegate, htmlElement, content, options) {
+    htmlElement.setAttribute('custom-hover', 'true');
+    if (htmlElement.title !== '') {
+        console.warn('HTML element already has a title attribute, which will conflict with the custom hover. Please remove the title attribute.');
+        console.trace('Stack trace:', htmlElement.title);
+        htmlElement.title = '';
+    }
     let hoverPreparation;
     let hoverWidget;
     const hideHover = (disposeWidget, disposePreparation) => {
@@ -133,7 +146,7 @@ function setupCustomHover(hoverDelegate, htmlElement, content, options) {
         isMouseDown = false;
         hideHover(false, e.fromElement === htmlElement);
     }, true);
-    const onMouseOver = () => {
+    const onMouseOver = (e) => {
         if (hoverPreparation) {
             return;
         }
@@ -145,14 +158,17 @@ function setupCustomHover(hoverDelegate, htmlElement, content, options) {
         if (hoverDelegate.placement === undefined || hoverDelegate.placement === 'mouse') {
             const onMouseMove = (e) => {
                 target.x = e.x + 10;
-                if ((e.target instanceof HTMLElement) && e.target.classList.contains('action-label')) {
+                if ((e.target instanceof HTMLElement) && getHoverTargetElement(e.target, htmlElement) !== htmlElement) {
                     hideHover(true, true);
                 }
             };
             toDispose.add(addDisposableListener(htmlElement, EventType.MOUSE_MOVE, onMouseMove, true));
         }
-        toDispose.add(triggerShowHover(hoverDelegate.delay, false, target));
         hoverPreparation = toDispose;
+        if ((e.target instanceof HTMLElement) && getHoverTargetElement(e.target, htmlElement) !== htmlElement) {
+            return;
+        }
+        toDispose.add(triggerShowHover(hoverDelegate.delay, false, target));
     };
     const mouseOverDomEmitter = addDisposableListener(htmlElement, EventType.MOUSE_OVER, onMouseOver, true);
     const onFocus = () => {
@@ -169,7 +185,11 @@ function setupCustomHover(hoverDelegate, htmlElement, content, options) {
         toDispose.add(triggerShowHover(hoverDelegate.delay, false, target));
         hoverPreparation = toDispose;
     };
-    const focusDomEmitter = addDisposableListener(htmlElement, EventType.FOCUS, onFocus, true);
+    let focusDomEmitter;
+    const tagName = htmlElement.tagName.toLowerCase();
+    if (tagName !== 'input' && tagName !== 'textarea') {
+        focusDomEmitter = addDisposableListener(htmlElement, EventType.FOCUS, onFocus, true);
+    }
     const hover = {
         show: focus => {
             hideHover(false, true);
@@ -186,7 +206,7 @@ function setupCustomHover(hoverDelegate, htmlElement, content, options) {
             mouseLeaveEmitter.dispose();
             mouseDownEmitter.dispose();
             mouseUpEmitter.dispose();
-            focusDomEmitter.dispose();
+            focusDomEmitter?.dispose();
             hideHover(true, true);
         }
     };

package/vscode/src/vs/base/browser/ui/iconLabel/iconLabel.js

@@ -1,11 +1,11 @@
 import './iconlabel.css.js';
 import { append, $, after } from '../../dom.js';
 import { HighlightedLabel } from '../highlightedlabel/highlightedLabel.js';
-import { setupNativeHover, setupCustomHover } from './iconLabelHover.js';
+import { setupNativeHover, setupCustomHover } from '../hover/updatableHoverWidget.js';
 import { Disposable } from '../../../common/lifecycle.js';
 import { equals } from '../../../common/objects.js';
 import { Range } from '../../../common/range.js';
-import { getDefaultHoverDelegate } from '../hover/hoverDelegate.js';
+import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
 class FastLabelNode {
     constructor(_element) {
         this._element = _element;
@@ -47,7 +47,7 @@ class IconLabel extends Disposable {
         this.labelContainer = append(this.domNode.element, $('.monaco-icon-label-container'));
         this.nameContainer = append(this.labelContainer, $('span.monaco-icon-name-container'));
         if (options?.supportHighlights || options?.supportIcons) {
-            this.nameNode = ( new LabelWithHighlights(this.nameContainer, !!options.supportIcons));
+            this.nameNode = this._register(( new LabelWithHighlights(this.nameContainer, !!options.supportIcons)));
         }
         else {
             this.nameNode = ( new Label(this.nameContainer));
@@ -145,10 +145,10 @@ class IconLabel extends Disposable {
                 append(this.labelContainer, $('span.monaco-icon-description-container'))
             )));
             if (this.creationOptions?.supportDescriptionHighlights) {
-                this.descriptionNode = ( new HighlightedLabel(
+                this.descriptionNode = this._register(( new HighlightedLabel(
                     append(descriptionContainer.element, $('span.label-description')),
                     { supportIcons: !!this.creationOptions.supportIcons }
-                ));
+                )));
             }
             else {
                 this.descriptionNode = this._register(( new FastLabelNode(append(descriptionContainer.element, $('span.label-description')))));
@@ -207,8 +207,9 @@ function splitMatches(labels, separator, matches) {
         return result;
     }));
 }
-class LabelWithHighlights {
+class LabelWithHighlights extends Disposable {
     constructor(container, supportIcons) {
+        super();
         this.container = container;
         this.supportIcons = supportIcons;
         this.label = undefined;
@@ -224,10 +225,10 @@ class LabelWithHighlights {
             if (!this.singleLabel) {
                 this.container.innerText = '';
                 this.container.classList.remove('multiple');
-                this.singleLabel = ( new HighlightedLabel(
+                this.singleLabel = this._register(( new HighlightedLabel(
                     append(this.container, $('a.label-name', { id: options?.domId })),
                     { supportIcons: this.supportIcons }
-                ));
+                )));
             }
             this.singleLabel.set(label, options?.matches, undefined, options?.labelEscapeNewLines);
         }
@@ -242,7 +243,7 @@ class LabelWithHighlights {
                 const m = matches ? matches[i] : undefined;
                 const id = options?.domId && `${options?.domId}_${i}`;
                 const name = $('a.label-name', { id, 'data-icon-label-count': label.length, 'data-icon-label-index': i, 'role': 'treeitem' });
-                const highlightedLabel = ( new HighlightedLabel(append(this.container, name), { supportIcons: this.supportIcons }));
+                const highlightedLabel = this._register(( new HighlightedLabel(append(this.container, name), { supportIcons: this.supportIcons })));
                 highlightedLabel.set(l, m, undefined, options?.labelEscapeNewLines);
                 if (i < label.length - 1) {
                     append(name, $('span.label-separator', undefined, separator));

package/vscode/src/vs/base/browser/ui/iconLabel/simpleIconLabel.js

@@ -1,4 +1,6 @@
 import { reset } from '../../dom.js';
+import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
+import { setupCustomHover } from '../hover/updatableHoverWidget.js';
 import { renderLabelWithIcons } from './iconLabels.js';
 class SimpleIconLabel {
     constructor(_container) {
@@ -8,7 +10,15 @@ class SimpleIconLabel {
         reset(this._container, ...renderLabelWithIcons(text ?? ''));
     }
     set title(title) {
-        this._container.title = title;
+        if (!this.hover && title) {
+            this.hover = setupCustomHover(getDefaultHoverDelegate('mouse'), this._container, title);
+        }
+        else if (this.hover) {
+            this.hover.update(title);
+        }
+    }
+    dispose() {
+        this.hover?.dispose();
     }
 }
 export { SimpleIconLabel };

package/vscode/src/vs/base/browser/ui/inputbox/inputBox.js

@@ -3,6 +3,8 @@ import { DomEmitter } from '../../event.js';
 import { renderFormattedText, renderText } from '../../formattedTextRenderer.js';
 import { ActionBar } from '../actionbar/actionbar.js';
 import { alert, status } from '../aria/aria.js';
+import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
+import { setupCustomHover } from '../hover/updatableHoverWidget.js';
 import { ScrollableElement } from '../scrollbar/scrollableElement.js';
 import { Widget } from '../widget.js';
 import { Emitter, Event } from '../../../common/event.js';
@@ -115,7 +117,12 @@ class InputBox extends Widget {
     }
     setTooltip(tooltip) {
         this.tooltip = tooltip;
-        this.input.title = tooltip;
+        if (!this.hover) {
+            this.hover = this._register(setupCustomHover(getDefaultHoverDelegate('mouse'), this.input, tooltip));
+        }
+        else {
+            this.hover.update(tooltip);
+        }
     }
     setAriaLabel(label) {
         this.ariaLabel = label;
@@ -174,6 +181,17 @@ class InputBox extends Widget {
     isSelectionAtEnd() {
         return this.input.selectionEnd === this.input.value.length && this.input.selectionStart === this.input.selectionEnd;
     }
+    getSelection() {
+        const selectionStart = this.input.selectionStart;
+        if (selectionStart === null) {
+            return null;
+        }
+        const selectionEnd = this.input.selectionEnd ?? selectionStart;
+        return {
+            start: selectionStart,
+            end: selectionEnd,
+        };
+    }
     enable() {
         this.input.removeAttribute('disabled');
     }

package/vscode/src/vs/base/browser/ui/keybindingLabel/keybindingLabel.js

@@ -1,5 +1,8 @@
 import { append, clearNode, $ as $$1 } from '../../dom.js';
+import { getDefaultHoverDelegate } from '../hover/hoverDelegateFactory.js';
+import { setupCustomHover } from '../hover/updatableHoverWidget.js';
 import { UILabelProvider } from '../../../common/keybindingLabels.js';
+import { Disposable } from '../../../common/lifecycle.js';
 import { equals } from '../../../common/objects.js';
 import './keybindingLabel.css.js';
 import { localizeWithPath } from '../../../../nls.js';
@@ -11,8 +14,9 @@ const unthemedKeybindingLabelOptions = {
     keybindingLabelBottomBorder: undefined,
     keybindingLabelShadow: undefined
 };
-class KeybindingLabel {
+class KeybindingLabel extends Disposable {
     constructor(container, os, options) {
+        super();
         this.os = os;
         this.keyElements = ( new Set());
         this.options = options || Object.create(null);
@@ -21,6 +25,7 @@ class KeybindingLabel {
         if (labelForeground) {
             this.domNode.style.color = labelForeground;
         }
+        this.hover = this._register(setupCustomHover(getDefaultHoverDelegate('mouse'), this.domNode, ''));
         this.didEverRender = false;
         container.appendChild(this.domNode);
     }
@@ -47,12 +52,8 @@ class KeybindingLabel {
                 this.renderChord(this.domNode, chords[i], this.matches ? this.matches.chordPart : null);
             }
             const title = (this.options.disableTitle ?? false) ? undefined : this.keybinding.getAriaLabel() || undefined;
-            if (title !== undefined) {
-                this.domNode.title = title;
-            }
-            else {
-                this.domNode.removeAttribute('title');
-            }
+            this.hover.update(title);
+            this.domNode.setAttribute('aria-label', title || '');
         }
         else if (this.options && this.options.renderUnboundKeybindings) {
             this.renderUnbound(this.domNode);

package/vscode/src/vs/base/browser/ui/list/listView.js

@@ -1,6 +1,6 @@
 import { __decorate } from '../../../../../../../external/tslib/tslib.es6.js';
 import { DataTransfers } from '../../dnd.js';
-import { getContentWidth, scheduleAtNextAnimationFrame, getWindow, addDisposableListener, getContentHeight, $, getTopLeftOffset, animate } from '../../dom.js';
+import { getContentWidth, scheduleAtNextAnimationFrame, getWindow, addDisposableListener, getContentHeight, $, getTopLeftOffset, animate, isAncestor } from '../../dom.js';
 import { DomEmitter } from '../../event.js';
 import { Gesture, EventType } from '../../touch.js';
 import { SmoothScrollableElement } from '../scrollbar/scrollableElement.js';
@@ -1047,6 +1047,9 @@ class ListView {
         if (item.row) {
             item.row.domNode.style.height = '';
             item.size = item.row.domNode.offsetHeight;
+            if (item.size === 0 && !isAncestor(item.row.domNode, getWindow(item.row.domNode).document.body)) {
+                console.warn('Measuring item node that is not in DOM! Add ListView to the DOM before measuring row height!');
+            }
             item.lastDynamicHeightWidth = this.renderWidth;
             return item.size - size;
         }

package/vscode/src/vs/base/browser/ui/list/listWidget.js

@@ -19,6 +19,10 @@ import './list.css.js';
 import { ListError } from './list.js';
 import { ListView } from './listView.js';
 import { StandardMouseEvent } from '../../mouseEvent.js';
+import '../../../common/observableInternal/derived.js';
+import { autorun } from '../../../common/observableInternal/autorun.js';
+import { constObservable } from '../../../common/observableInternal/utils.js';
+import '../../../common/cancellation.js';
 class TraitRenderer {
     constructor(trait) {
         this.trait = trait;
@@ -399,9 +403,12 @@ class TypeNavigationController {
         const focus = this.list.getFocus();
         if (focus.length > 0 && focus[0] === this.previouslyFocused) {
             const ariaLabel = this.list.options.accessibilityProvider?.getAriaLabel(this.list.element(focus[0]));
-            if (ariaLabel) {
+            if (typeof ariaLabel === 'string') {
                 alert(ariaLabel);
             }
+            else if (ariaLabel) {
+                alert(ariaLabel.get());
+            }
         }
         this.previouslyFocused = -1;
     }
@@ -922,25 +929,35 @@ class AccessibiltyRenderer {
         this.templateId = 'a18n';
     }
     renderTemplate(container) {
-        return container;
+        return { container, disposables: ( new DisposableStore()) };
     }
-    renderElement(element, index, container) {
+    renderElement(element, index, data) {
         const ariaLabel = this.accessibilityProvider.getAriaLabel(element);
-        if (ariaLabel) {
-            container.setAttribute('aria-label', ariaLabel);
+        const observable = (ariaLabel && typeof ariaLabel !== 'string') ? ariaLabel : constObservable(ariaLabel);
+        data.disposables.add(autorun(reader => {
+            this.setAriaLabel(reader.readObservable(observable), data.container);
+        }));
+        const ariaLevel = this.accessibilityProvider.getAriaLevel && this.accessibilityProvider.getAriaLevel(element);
+        if (typeof ariaLevel === 'number') {
+            data.container.setAttribute('aria-level', `${ariaLevel}`);
         }
         else {
-            container.removeAttribute('aria-label');
+            data.container.removeAttribute('aria-level');
         }
-        const ariaLevel = this.accessibilityProvider.getAriaLevel && this.accessibilityProvider.getAriaLevel(element);
-        if (typeof ariaLevel === 'number') {
-            container.setAttribute('aria-level', `${ariaLevel}`);
+    }
+    setAriaLabel(ariaLabel, element) {
+        if (ariaLabel) {
+            element.setAttribute('aria-label', ariaLabel);
         }
         else {
-            container.removeAttribute('aria-level');
+            element.removeAttribute('aria-label');
         }
     }
+    disposeElement(element, index, templateData, height) {
+        templateData.disposables.clear();
+    }
     disposeTemplate(templateData) {
+        templateData.disposables.dispose();
     }
 }
 class ListViewDragAndDrop {

package/vscode/src/vs/base/browser/ui/menu/menu.js

@@ -9,7 +9,8 @@ import { layout } from '../contextview/contextview.js';
 import { DomScrollableElement } from '../scrollbar/scrollableElement.js';
 import { Separator, SubmenuAction, EmptySubmenuAction } from '../../../common/actions.js';
 import { RunOnceScheduler } from '../../../common/async.js';
-import { Codicon, getCodiconFontCharacters } from '../../../common/codicons.js';
+import { Codicon } from '../../../common/codicons.js';
+import { getCodiconFontCharacters } from '../../../common/codiconsUtil.js';
 import { ThemeIcon } from '../../../common/themables.js';
 import { stripIcons } from '../../../common/iconLabels.js';
 import { DisposableStore } from '../../../common/lifecycle.js';
@@ -17,11 +18,16 @@ import { isMacintosh, isLinux } from '../../../common/platform.js';
 import { escape, ltrim, rtrim } from '../../../common/strings.js';
 const MENU_MNEMONIC_REGEX = /\(&([^\s&])\)|(^|[^&])&([^\s&])/;
 const MENU_ESCAPED_MNEMONIC_REGEX = /(&)?(&)([^\s&])/g;
-var Direction;
-( (function(Direction) {
-    Direction[Direction["Right"] = 0] = "Right";
-    Direction[Direction["Left"] = 1] = "Left";
-})(Direction || (Direction = {})));
+var HorizontalDirection;
+( (function(HorizontalDirection) {
+    HorizontalDirection[HorizontalDirection["Right"] = 0] = "Right";
+    HorizontalDirection[HorizontalDirection["Left"] = 1] = "Left";
+})(HorizontalDirection || (HorizontalDirection = {})));
+var VerticalDirection;
+( (function(VerticalDirection) {
+    VerticalDirection[VerticalDirection["Above"] = 0] = "Above";
+    VerticalDirection[VerticalDirection["Below"] = 1] = "Below";
+})(VerticalDirection || (VerticalDirection = {})));
 class Menu extends ActionBar {
     constructor(container, actions, options, menuStyles) {
         container.classList.add('monaco-menu-container');
@@ -512,7 +518,7 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
         this.mysubmenu = null;
         this.submenuDisposables = this._register(( new DisposableStore()));
         this.mouseOver = false;
-        this.expandDirection = submenuOptions && submenuOptions.expandDirection !== undefined ? submenuOptions.expandDirection : Direction.Right;
+        this.expandDirection = submenuOptions && submenuOptions.expandDirection !== undefined ? submenuOptions.expandDirection : { horizontal: HorizontalDirection.Right, vertical: VerticalDirection.Below };
         this.showScheduler = ( new RunOnceScheduler(() => {
             if (this.mouseOver) {
                 this.cleanupExistingSubmenu(false);
@@ -602,7 +608,7 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
     }
     calculateSubmenuMenuLayout(windowDimensions, submenu, entry, expandDirection) {
         const ret = { top: 0, left: 0 };
-        ret.left = layout(windowDimensions.width, submenu.width, { position: expandDirection === Direction.Right ? 0  : 1 , offset: entry.left, size: entry.width });
+        ret.left = layout(windowDimensions.width, submenu.width, { position: expandDirection.horizontal === HorizontalDirection.Right ? 0  : 1 , offset: entry.left, size: entry.width });
         if (ret.left >= entry.left && ret.left < entry.left + entry.width) {
             if (entry.left + 10 + submenu.width <= windowDimensions.width) {
                 ret.left = entry.left + 10;
@@ -1110,4 +1116,4 @@ ${formatRule(Codicon.menuSubmenu)}
     }
     return result;
 }
-export { Direction, MENU_ESCAPED_MNEMONIC_REGEX, MENU_MNEMONIC_REGEX, Menu, cleanMnemonic, formatRule };
+export { HorizontalDirection, MENU_ESCAPED_MNEMONIC_REGEX, MENU_MNEMONIC_REGEX, Menu, VerticalDirection, cleanMnemonic, formatRule };

package/vscode/src/vs/base/browser/ui/menu/menubar.js

@@ -3,7 +3,7 @@ import { ModifierKeyEmitter, addDisposableListener, getWindow, scheduleAtNextAni
 import { StandardKeyboardEvent } from '../../keyboardEvent.js';
 import { StandardMouseEvent } from '../../mouseEvent.js';
 import { Gesture, EventType as EventType$1 } from '../../touch.js';
-import { cleanMnemonic, MENU_ESCAPED_MNEMONIC_REGEX, Direction, Menu, MENU_MNEMONIC_REGEX } from './menu.js';
+import { cleanMnemonic, MENU_ESCAPED_MNEMONIC_REGEX, HorizontalDirection, VerticalDirection, Menu, MENU_MNEMONIC_REGEX } from './menu.js';
 import { ActionRunner, SubmenuAction, Separator } from '../../../common/actions.js';
 import { asArray } from '../../../common/arrays.js';
 import { RunOnceScheduler } from '../../../common/async.js';
@@ -234,10 +234,10 @@ class MenuBar extends Disposable {
             }
             else {
                 triggerKeys.push(10 );
-                if (this.options.compactMode === Direction.Right) {
+                if (this.options.compactMode?.horizontal === HorizontalDirection.Right) {
                     triggerKeys.push(17 );
                 }
-                else if (this.options.compactMode === Direction.Left) {
+                else if (this.options.compactMode?.horizontal === HorizontalDirection.Left) {
                     triggerKeys.push(15 );
                 }
             }
@@ -793,26 +793,33 @@ class MenuBar extends Disposable {
         customMenu.buttonElement.classList.add('open');
         const titleBoundingRect = customMenu.titleElement.getBoundingClientRect();
         const titleBoundingRectZoom = getDomNodeZoomLevel(customMenu.titleElement);
-        if (this.options.compactMode === Direction.Right) {
-            menuHolder.style.top = `${titleBoundingRect.top}px`;
+        if (this.options.compactMode?.horizontal === HorizontalDirection.Right) {
             menuHolder.style.left = `${titleBoundingRect.left + this.container.clientWidth}px`;
         }
-        else if (this.options.compactMode === Direction.Left) {
+        else if (this.options.compactMode?.horizontal === HorizontalDirection.Left) {
             menuHolder.style.top = `${titleBoundingRect.top}px`;
             menuHolder.style.right = `${this.container.clientWidth}px`;
             menuHolder.style.left = 'auto';
         }
         else {
-            menuHolder.style.top = `${titleBoundingRect.bottom * titleBoundingRectZoom}px`;
             menuHolder.style.left = `${titleBoundingRect.left * titleBoundingRectZoom}px`;
         }
+        if (this.options.compactMode?.vertical === VerticalDirection.Above) {
+            menuHolder.style.top = `${titleBoundingRect.top - this.menus.length * 30 + this.container.clientHeight}px`;
+        }
+        else if (this.options.compactMode?.vertical === VerticalDirection.Below) {
+            menuHolder.style.top = `${titleBoundingRect.top}px`;
+        }
+        else {
+            menuHolder.style.top = `${titleBoundingRect.bottom * titleBoundingRectZoom}px`;
+        }
         customMenu.buttonElement.appendChild(menuHolder);
         const menuOptions = {
             getKeyBinding: this.options.getKeybinding,
             actionRunner: this.actionRunner,
             enableMnemonics: this.options.alwaysOnMnemonics || (this.mnemonicsInUse && this.options.enableMnemonics),
             ariaLabel: customMenu.buttonElement.getAttribute('aria-label') ?? undefined,
-            expandDirection: this.isCompact ? this.options.compactMode : Direction.Right,
+            expandDirection: this.isCompact ? this.options.compactMode : { horizontal: HorizontalDirection.Right, vertical: VerticalDirection.Below },
             useEventAsContext: true
         };
         const menuWidget = this.menuDisposables.add(( new Menu(menuHolder, customMenu.actions, menuOptions, this.menuStyle)));