@codingame/monaco-vscode-api 25.1.1 → 26.0.0

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

@@ -24,12 +24,12 @@ import { escape, ltrim, rtrim } from '../../../common/strings.js';
 const MENU_MNEMONIC_REGEX = /\(&([^\s&])\)|(^|[^&])&([^\s&])/;
 const MENU_ESCAPED_MNEMONIC_REGEX = /(&)?(&)([^\s&])/g;
 var HorizontalDirection;
-(function (HorizontalDirection) {
+(function(HorizontalDirection) {
     HorizontalDirection[HorizontalDirection["Right"] = 0] = "Right";
     HorizontalDirection[HorizontalDirection["Left"] = 1] = "Left";
 })(HorizontalDirection || (HorizontalDirection = {}));
 var VerticalDirection;
-(function (VerticalDirection) {
+(function(VerticalDirection) {
     VerticalDirection[VerticalDirection["Above"] = 0] = "Above";
     VerticalDirection[VerticalDirection["Below"] = 1] = "Below";
 })(VerticalDirection || (VerticalDirection = {}));
@@ -41,34 +41,37 @@ const unthemedMenuStyles = {
 };
 class Menu extends ActionBar {
     constructor(container, actions, options, menuStyles) {
-        container.classList.add('monaco-menu-container');
-        container.setAttribute('role', 'presentation');
-        const menuElement = createElement('div');
-        menuElement.classList.add('monaco-menu');
-        menuElement.setAttribute('role', 'presentation');
+        container.classList.add("monaco-menu-container");
+        container.setAttribute("role", "presentation");
+        const menuElement = createElement("div");
+        menuElement.classList.add("monaco-menu");
+        menuElement.setAttribute("role", "presentation");
         super(menuElement, {
             orientation: ActionsOrientation.VERTICAL,
             actionViewItemProvider: action => this.doGetActionViewItem(action, options, parentData),
             context: options.context,
             actionRunner: options.actionRunner,
             ariaLabel: options.ariaLabel,
-            ariaRole: 'menu',
+            ariaRole: "menu",
             focusOnlyEnabledItems: true,
-            triggerKeys: { keys: [KeyCode.Enter, ...(isMacintosh || isLinux ? [KeyCode.Space] : [])], keyDown: true }
+            triggerKeys: {
+                keys: [KeyCode.Enter, ...(isMacintosh || isLinux ? [KeyCode.Space] : [])],
+                keyDown: true
+            }
         });
         this.menuStyles = menuStyles;
         this.menuElement = menuElement;
         this.actionsList.tabIndex = 0;
         this.initializeOrUpdateStyleSheet(container, menuStyles);
         this._register(Gesture.addTarget(menuElement));
-        this._register(addDisposableListener(menuElement, EventType.KEY_DOWN, (e) => {
+        this._register(addDisposableListener(menuElement, EventType.KEY_DOWN, e => {
             const event = ( new StandardKeyboardEvent(e));
             if (event.equals(KeyCode.Tab)) {
                 e.preventDefault();
             }
         }));
         if (options.enableMnemonics) {
-            this._register(addDisposableListener(menuElement, EventType.KEY_DOWN, (e) => {
+            this._register(addDisposableListener(menuElement, EventType.KEY_DOWN, e => {
                 const key = e.key.toLocaleLowerCase();
                 const actions = this.mnemonics.get(key);
                 if (actions !== undefined) {
@@ -97,8 +100,7 @@ class Menu extends ActionBar {
                     this.focusedItem = this.viewItems.length - 1;
                     this.focusNext();
                     EventHelper.stop(e, true);
-                }
-                else if (event.equals(KeyCode.End) || event.equals(KeyCode.PageDown)) {
+                } else if (event.equals(KeyCode.End) || event.equals(KeyCode.PageDown)) {
                     this.focusedItem = 0;
                     this.focusPrevious();
                     EventHelper.stop(e, true);
@@ -121,7 +123,7 @@ class Menu extends ActionBar {
             while (target.parentElement !== this.actionsList && target.parentElement !== null) {
                 target = target.parentElement;
             }
-            if (target.classList.contains('action-item')) {
+            if (target.classList.contains("action-item")) {
                 const lastFocusedItem = this.focusedItem;
                 this.setFocusedItem(target);
                 if (lastFocusedItem !== this.focusedItem) {
@@ -138,7 +140,7 @@ class Menu extends ActionBar {
             while (target.parentElement !== this.actionsList && target.parentElement !== null) {
                 target = target.parentElement;
             }
-            if (target.classList.contains('action-item')) {
+            if (target.classList.contains("action-item")) {
                 const lastFocusedItem = this.focusedItem;
                 this.setFocusedItem(target);
                 if (lastFocusedItem !== this.focusedItem) {
@@ -159,12 +161,14 @@ class Menu extends ActionBar {
             useShadows: true
         })));
         const scrollElement = this.scrollableElement.getDomNode();
-        scrollElement.style.position = '';
+        scrollElement.style.position = "";
         this.styleScrollElement(scrollElement, menuStyles);
         this._register(addDisposableListener(menuElement, EventType$1.Change, e => {
             EventHelper.stop(e, true);
             const scrollTop = this.scrollableElement.getScrollPosition().scrollTop;
-            this.scrollableElement.setScrollPosition({ scrollTop: scrollTop - e.translationY });
+            this.scrollableElement.setScrollPosition({
+                scrollTop: scrollTop - e.translationY
+            });
         }));
         this._register(addDisposableListener(scrollElement, EventType.MOUSE_UP, e => {
             e.preventDefault();
@@ -187,7 +191,11 @@ class Menu extends ActionBar {
             }
             return true;
         });
-        this.push(actions, { icon: true, label: true, isMenu: true });
+        this.push(actions, {
+            icon: true,
+            label: true,
+            isMenu: true
+        });
         container.appendChild(this.scrollableElement.getDomNode());
         this.scrollableElement.scanDomNode();
         this.viewItems.filter(item => !(item instanceof MenuSeparatorActionViewItem)).forEach((item, index, array) => {
@@ -198,8 +206,7 @@ class Menu extends ActionBar {
         if (!this.styleSheet) {
             if (isInShadowDOM(container)) {
                 this.styleSheet = createStyleSheet(container);
-            }
-            else {
+            } else {
                 if (!Menu.globalStyleSheet) {
                     Menu.globalStyleSheet = createStyleSheet();
                 }
@@ -209,11 +216,11 @@ class Menu extends ActionBar {
         this.styleSheet.textContent = getMenuWidgetCSS(style, isInShadowDOM(container));
     }
     styleScrollElement(scrollElement, style) {
-        const fgColor = style.foregroundColor ?? '';
-        const bgColor = style.backgroundColor ?? '';
-        const border = style.borderColor ? `1px solid ${style.borderColor}` : '';
-        const borderRadius = '5px';
-        const shadow = style.shadowColor ? `0 2px 8px ${style.shadowColor}` : '';
+        const fgColor = style.foregroundColor ?? "";
+        const bgColor = style.backgroundColor ?? "";
+        const border = style.borderColor ? `1px solid ${style.borderColor}` : "";
+        const borderRadius = "5px";
+        const shadow = style.shadowColor ? `0 2px 8px ${style.shadowColor}` : "";
         scrollElement.style.outline = border;
         scrollElement.style.borderRadius = borderRadius;
         scrollElement.style.color = fgColor;
@@ -235,11 +242,9 @@ class Menu extends ActionBar {
             if (item instanceof SubmenuMenuActionViewItem) {
                 super.focus(index);
                 item.open(true);
-            }
-            else if (item instanceof BaseMenuActionViewItem) {
+            } else if (item instanceof BaseMenuActionViewItem) {
                 super.run(item._action, item._context);
-            }
-            else {
+            } else {
                 return;
             }
         }
@@ -262,7 +267,7 @@ class Menu extends ActionBar {
     }
     updateFocus(fromRight) {
         super.updateFocus(fromRight, true, true);
-        if (typeof this.focusedItem !== 'undefined') {
+        if (typeof this.focusedItem !== "undefined") {
             this.scrollableElement.setScrollPosition({
                 scrollTop: Math.round(this.menuElement.scrollTop)
             });
@@ -270,36 +275,32 @@ class Menu extends ActionBar {
     }
     doGetActionViewItem(action, options, parentData) {
         if (action instanceof Separator) {
-            return ( new MenuSeparatorActionViewItem(options.context, action, { icon: true }, this.menuStyles));
-        }
-        else if (action instanceof SubmenuAction) {
-            const menuActionViewItem = ( new SubmenuMenuActionViewItem(
-                action,
-                action.actions,
-                parentData,
-                { ...options, submenuIds: ( new Set([...(options.submenuIds || []), action.id])) },
-                this.menuStyles
-            ));
+            return ( new MenuSeparatorActionViewItem(options.context, action, {
+                icon: true
+            }, this.menuStyles));
+        } else if (action instanceof SubmenuAction) {
+            const menuActionViewItem = ( new SubmenuMenuActionViewItem(action, action.actions, parentData, {
+                ...options,
+                submenuIds: ( new Set([...(options.submenuIds || []), action.id]))
+            }, this.menuStyles));
             if (options.enableMnemonics) {
                 const mnemonic = menuActionViewItem.getMnemonic();
                 if (mnemonic && menuActionViewItem.isEnabled()) {
                     const actionViewItems = this.mnemonics.get(mnemonic);
                     if (actionViewItems !== undefined) {
                         actionViewItems.push(menuActionViewItem);
-                    }
-                    else {
+                    } else {
                         this.mnemonics.set(mnemonic, [menuActionViewItem]);
                     }
                 }
             }
             return menuActionViewItem;
-        }
-        else {
+        } else {
             const keybindingLabel = options.getKeyBinding?.(action)?.getLabel();
             const menuItemOptions = {
                 enableMnemonics: options.enableMnemonics,
                 useEventAsContext: options.useEventAsContext,
-                keybinding: keybindingLabel,
+                keybinding: keybindingLabel
             };
             const menuActionViewItem = ( new BaseMenuActionViewItem(options.context, action, menuItemOptions, this.menuStyles));
             if (options.enableMnemonics) {
@@ -308,8 +309,7 @@ class Menu extends ActionBar {
                     const actionViewItems = this.mnemonics.get(mnemonic);
                     if (actionViewItems !== undefined) {
                         actionViewItems.push(menuActionViewItem);
-                    }
-                    else {
+                    } else {
                         this.mnemonics.set(mnemonic, [menuActionViewItem]);
                     }
                 }
@@ -324,12 +324,12 @@ class BaseMenuActionViewItem extends BaseActionViewItem {
             ...options,
             isMenu: true,
             icon: options.icon !== undefined ? options.icon : false,
-            label: options.label !== undefined ? options.label : true,
+            label: options.label !== undefined ? options.label : true
         };
         super(action, action, options);
         this.menuStyle = menuStyle;
         this.options = options;
-        this.cssClass = '';
+        this.cssClass = "";
         if (this.options.label && options.enableMnemonics) {
             const label = this.action.label;
             if (label) {
@@ -370,21 +370,23 @@ class BaseMenuActionViewItem extends BaseActionViewItem {
             return;
         }
         this.container = container;
-        this.item = append(this.element, $('a.action-menu-item'));
+        this.item = append(this.element, $("a.action-menu-item"));
         if (this._action.id === Separator.ID) {
-            this.item.setAttribute('role', 'presentation');
-        }
-        else {
-            this.item.setAttribute('role', 'menuitem');
+            this.item.setAttribute("role", "presentation");
+        } else {
+            this.item.setAttribute("role", "menuitem");
             if (this.mnemonic) {
-                this.item.setAttribute('aria-keyshortcuts', `${this.mnemonic}`);
+                this.item.setAttribute("aria-keyshortcuts", `${this.mnemonic}`);
             }
         }
-        this.check = append(this.item, $('span.menu-item-check' + ThemeIcon.asCSSSelector(Codicon.menuSelection)));
-        this.check.setAttribute('role', 'none');
-        this.label = append(this.item, $('span.action-label'));
+        this.check = append(
+            this.item,
+            $("span.menu-item-check" + ThemeIcon.asCSSSelector(Codicon.menuSelection))
+        );
+        this.check.setAttribute("role", "none");
+        this.label = append(this.item, $("span.action-label"));
         if (this.options.label && this.options.keybinding) {
-            append(this.item, $('span.keybinding')).textContent = this.options.keybinding;
+            append(this.item, $("span.keybinding")).textContent = this.options.keybinding;
         }
         this.runOnceToEnableMouseUp.schedule();
         this.updateClass();
@@ -405,8 +407,8 @@ class BaseMenuActionViewItem extends BaseActionViewItem {
     }
     updatePositionInSet(pos, setSize) {
         if (this.item) {
-            this.item.setAttribute('aria-posinset', `${pos}`);
-            this.item.setAttribute('aria-setsize', `${setSize}`);
+            this.item.setAttribute("aria-posinset", `${pos}`);
+            this.item.setAttribute("aria-setsize", `${setSize}`);
         }
     }
     updateLabel() {
@@ -421,7 +423,7 @@ class BaseMenuActionViewItem extends BaseActionViewItem {
                 if (!this.options.enableMnemonics) {
                     label = cleanLabel;
                 }
-                this.label.setAttribute('aria-label', cleanLabel.replace(/&&/g, '&'));
+                this.label.setAttribute("aria-label", cleanLabel.replace(/&&/g, "&"));
                 const matches = MENU_MNEMONIC_REGEX.exec(label);
                 if (matches) {
                     label = escape(label);
@@ -430,59 +432,66 @@ class BaseMenuActionViewItem extends BaseActionViewItem {
                     while (escMatch && escMatch[1]) {
                         escMatch = MENU_ESCAPED_MNEMONIC_REGEX.exec(label);
                     }
-                    const replaceDoubleEscapes = (str) => str.replace(/&&/g, '&');
+                    const replaceDoubleEscapes = str => str.replace(/&&/g, "&");
                     if (escMatch) {
-                        this.label.append(ltrim(replaceDoubleEscapes(label.substr(0, escMatch.index)), ' '), $('u', { 'aria-hidden': 'true' }, escMatch[3]), rtrim(replaceDoubleEscapes(label.substr(escMatch.index + escMatch[0].length)), ' '));
-                    }
-                    else {
+                        this.label.append(
+                            ltrim(replaceDoubleEscapes(label.substr(0, escMatch.index)), " "),
+                            $("u", {
+                                "aria-hidden": "true"
+                            }, escMatch[3]),
+                            rtrim(
+                                replaceDoubleEscapes(label.substr(escMatch.index + escMatch[0].length)),
+                                " "
+                            )
+                        );
+                    } else {
                         this.label.textContent = replaceDoubleEscapes(label).trim();
                     }
-                    this.item?.setAttribute('aria-keyshortcuts', (!!matches[1] ? matches[1] : matches[3]).toLocaleLowerCase());
-                }
-                else {
-                    this.label.textContent = label.replace(/&&/g, '&').trim();
+                    this.item?.setAttribute(
+                        "aria-keyshortcuts",
+                        (!!matches[1] ? matches[1] : matches[3]).toLocaleLowerCase()
+                    );
+                } else {
+                    this.label.textContent = label.replace(/&&/g, "&").trim();
                 }
             }
         }
     }
-    updateTooltip() {
-    }
+    updateTooltip() {}
     updateClass() {
         if (this.cssClass && this.item) {
-            this.item.classList.remove(...this.cssClass.split(' '));
+            this.item.classList.remove(...this.cssClass.split(" "));
         }
         if (this.options.icon && this.label) {
-            this.cssClass = this.action.class || '';
-            this.label.classList.add('icon');
+            this.cssClass = this.action.class || "";
+            this.label.classList.add("icon");
             if (this.cssClass) {
-                this.label.classList.add(...this.cssClass.split(' '));
+                this.label.classList.add(...this.cssClass.split(" "));
             }
             this.updateEnabled();
-        }
-        else if (this.label) {
-            this.label.classList.remove('icon');
+        } else if (this.label) {
+            this.label.classList.remove("icon");
         }
     }
     updateEnabled() {
         if (this.action.enabled) {
             if (this.element) {
-                this.element.classList.remove('disabled');
-                this.element.removeAttribute('aria-disabled');
+                this.element.classList.remove("disabled");
+                this.element.removeAttribute("aria-disabled");
             }
             if (this.item) {
-                this.item.classList.remove('disabled');
-                this.item.removeAttribute('aria-disabled');
+                this.item.classList.remove("disabled");
+                this.item.removeAttribute("aria-disabled");
                 this.item.tabIndex = 0;
             }
-        }
-        else {
+        } else {
             if (this.element) {
-                this.element.classList.add('disabled');
-                this.element.setAttribute('aria-disabled', 'true');
+                this.element.classList.add("disabled");
+                this.element.setAttribute("aria-disabled", "true");
             }
             if (this.item) {
-                this.item.classList.add('disabled');
-                this.item.setAttribute('aria-disabled', 'true');
+                this.item.classList.add("disabled");
+                this.item.setAttribute("aria-disabled", "true");
             }
         }
     }
@@ -491,33 +500,32 @@ class BaseMenuActionViewItem extends BaseActionViewItem {
             return;
         }
         const checked = this.action.checked;
-        this.item.classList.toggle('checked', !!checked);
+        this.item.classList.toggle("checked", !!checked);
         if (checked !== undefined) {
-            this.item.setAttribute('role', 'menuitemcheckbox');
-            this.item.setAttribute('aria-checked', checked ? 'true' : 'false');
-        }
-        else {
-            this.item.setAttribute('role', 'menuitem');
-            this.item.setAttribute('aria-checked', '');
+            this.item.setAttribute("role", "menuitemcheckbox");
+            this.item.setAttribute("aria-checked", checked ? "true" : "false");
+        } else {
+            this.item.setAttribute("role", "menuitem");
+            this.item.setAttribute("aria-checked", "");
         }
     }
     getMnemonic() {
         return this.mnemonic;
     }
     applyStyle() {
-        const isSelected = this.element && this.element.classList.contains('focused');
+        const isSelected = this.element && this.element.classList.contains("focused");
         const fgColor = isSelected && this.menuStyle.selectionForegroundColor ? this.menuStyle.selectionForegroundColor : this.menuStyle.foregroundColor;
         const bgColor = isSelected && this.menuStyle.selectionBackgroundColor ? this.menuStyle.selectionBackgroundColor : undefined;
-        const outline = isSelected && this.menuStyle.selectionBorderColor ? `1px solid ${this.menuStyle.selectionBorderColor}` : '';
-        const outlineOffset = isSelected && this.menuStyle.selectionBorderColor ? `-1px` : '';
+        const outline = isSelected && this.menuStyle.selectionBorderColor ? `1px solid ${this.menuStyle.selectionBorderColor}` : "";
+        const outlineOffset = isSelected && this.menuStyle.selectionBorderColor ? `-1px` : "";
         if (this.item) {
-            this.item.style.color = fgColor ?? '';
-            this.item.style.backgroundColor = bgColor ?? '';
+            this.item.style.color = fgColor ?? "";
+            this.item.style.backgroundColor = bgColor ?? "";
             this.item.style.outline = outline;
             this.item.style.outlineOffset = outlineOffset;
         }
         if (this.check) {
-            this.check.style.color = fgColor ?? '';
+            this.check.style.color = fgColor ?? "";
         }
     }
 }
@@ -530,7 +538,10 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
         this.mysubmenu = null;
         this.submenuDisposables = this._register(( new DisposableStore()));
         this.mouseOver = false;
-        this.expandDirection = submenuOptions && submenuOptions.expandDirection !== undefined ? submenuOptions.expandDirection : { horizontal: HorizontalDirection.Right, vertical: VerticalDirection.Below };
+        this.expandDirection = submenuOptions && submenuOptions.expandDirection !== undefined ? submenuOptions.expandDirection : {
+            horizontal: HorizontalDirection.Right,
+            vertical: VerticalDirection.Below
+        };
         this.showScheduler = ( new RunOnceScheduler(() => {
             if (this.mouseOver) {
                 this.cleanupExistingSubmenu(false);
@@ -550,12 +561,15 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
             return;
         }
         if (this.item) {
-            this.item.classList.add('monaco-submenu-item');
+            this.item.classList.add("monaco-submenu-item");
             this.item.tabIndex = 0;
-            this.item.setAttribute('aria-haspopup', 'true');
-            this.updateAriaExpanded('false');
-            this.submenuIndicator = append(this.item, $('span.submenu-indicator' + ThemeIcon.asCSSSelector(Codicon.menuSubmenu)));
-            this.submenuIndicator.setAttribute('aria-hidden', 'true');
+            this.item.setAttribute("aria-haspopup", "true");
+            this.updateAriaExpanded("false");
+            this.submenuIndicator = append(
+                this.item,
+                $("span.submenu-indicator" + ThemeIcon.asCSSSelector(Codicon.menuSubmenu))
+            );
+            this.submenuIndicator.setAttribute("aria-hidden", "true");
         }
         this._register(addDisposableListener(this.element, EventType.KEY_UP, e => {
             const event = ( new StandardKeyboardEvent(e));
@@ -593,8 +607,7 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
             }
         }));
     }
-    updateEnabled() {
-    }
+    updateEnabled() {}
     open(selectFirst) {
         this.cleanupExistingSubmenu(false);
         this.createSubmenu(selectFirst);
@@ -608,10 +621,9 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
         if (this.parentData.submenu && (force || (this.parentData.submenu !== this.mysubmenu))) {
             try {
                 this.parentData.submenu.dispose();
-            }
-            catch { }
+            } catch {}
             this.parentData.submenu = undefined;
-            this.updateAriaExpanded('false');
+            this.updateAriaExpanded("false");
             if (this.submenuContainer) {
                 this.submenuDisposables.clear();
                 this.submenuContainer = undefined;
@@ -619,8 +631,15 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
         }
     }
     calculateSubmenuMenuLayout(windowDimensions, submenu, entry, expandDirection) {
-        const ret = { top: 0, left: 0 };
-        ret.left = layout(windowDimensions.width, submenu.width, { position: expandDirection.horizontal === HorizontalDirection.Right ? LayoutAnchorPosition.Before : LayoutAnchorPosition.After, offset: entry.left, size: entry.width });
+        const ret = {
+            top: 0,
+            left: 0
+        };
+        ret.left = layout(windowDimensions.width, submenu.width, {
+            position: expandDirection.horizontal === HorizontalDirection.Right ? LayoutAnchorPosition.Before : LayoutAnchorPosition.After,
+            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;
@@ -628,7 +647,11 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
             entry.top += 10;
             entry.height = 0;
         }
-        ret.top = layout(windowDimensions.height, submenu.height, { position: LayoutAnchorPosition.Before, offset: entry.top, size: 0 });
+        ret.top = layout(windowDimensions.height, submenu.height, {
+            position: LayoutAnchorPosition.Before,
+            offset: entry.top,
+            size: 0
+        });
         if (ret.top + submenu.height === entry.top && ret.top + entry.height + submenu.height <= windowDimensions.height) {
             ret.top += entry.height;
         }
@@ -639,15 +662,15 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
             return;
         }
         if (!this.parentData.submenu) {
-            this.updateAriaExpanded('true');
-            this.submenuContainer = append(this.element, $('div.monaco-submenu'));
-            this.submenuContainer.classList.add('menubar-menu-items-holder', 'context-view');
+            this.updateAriaExpanded("true");
+            this.submenuContainer = append(this.element, $("div.monaco-submenu"));
+            this.submenuContainer.classList.add("menubar-menu-items-holder", "context-view");
             const computedStyles = getWindow(this.parentData.parent.domNode).getComputedStyle(this.parentData.parent.domNode);
-            const paddingTop = parseFloat(computedStyles.paddingTop || '0') || 0;
-            this.submenuContainer.style.position = 'fixed';
-            this.submenuContainer.style.top = '0';
-            this.submenuContainer.style.left = '0';
-            this.submenuContainer.style.zIndex = '1';
+            const paddingTop = parseFloat(computedStyles.paddingTop || "0") || 0;
+            this.submenuContainer.style.position = "fixed";
+            this.submenuContainer.style.top = "0";
+            this.submenuContainer.style.left = "0";
+            this.submenuContainer.style.zIndex = "1";
             this.parentData.submenu = ( new Menu(
                 this.submenuContainer,
                 this.submenuActions.length ? this.submenuActions : [( new EmptySubmenuAction())],
@@ -663,7 +686,10 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
             };
             const viewBox = this.submenuContainer.getBoundingClientRect();
             const window = getWindow(this.element);
-            const { top, left } = this.calculateSubmenuMenuLayout(( new Dimension(window.innerWidth, window.innerHeight)), Dimension.lift(viewBox), entryBoxUpdated, this.expandDirection);
+            const {
+                top,
+                left
+            } = this.calculateSubmenuMenuLayout(( new Dimension(window.innerWidth, window.innerHeight)), Dimension.lift(viewBox), entryBoxUpdated, this.expandDirection);
             this.submenuContainer.style.left = `${left - viewBox.left}px`;
             this.submenuContainer.style.top = `${top - viewBox.top}px`;
             this.submenuDisposables.add(addDisposableListener(this.submenuContainer, EventType.KEY_UP, e => {
@@ -686,22 +712,21 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
             }));
             this.parentData.submenu.focus(selectFirstItem);
             this.mysubmenu = this.parentData.submenu;
-        }
-        else {
+        } else {
             this.parentData.submenu.focus(false);
         }
     }
     updateAriaExpanded(value) {
         if (this.item) {
-            this.item?.setAttribute('aria-expanded', value);
+            this.item?.setAttribute("aria-expanded", value);
         }
     }
     applyStyle() {
         super.applyStyle();
-        const isSelected = this.element && this.element.classList.contains('focused');
+        const isSelected = this.element && this.element.classList.contains("focused");
         const fgColor = isSelected && this.menuStyle.selectionForegroundColor ? this.menuStyle.selectionForegroundColor : this.menuStyle.foregroundColor;
         if (this.submenuIndicator) {
-            this.submenuIndicator.style.color = fgColor ?? '';
+            this.submenuIndicator.style.color = fgColor ?? "";
         }
     }
     dispose() {
@@ -724,7 +749,7 @@ class MenuSeparatorActionViewItem extends ActionViewItem {
     render(container) {
         super.render(container);
         if (this.label) {
-            this.label.style.borderBottomColor = this.menuStyles.separatorColor ? `${this.menuStyles.separatorColor}` : '';
+            this.label.style.borderBottomColor = this.menuStyles.separatorColor ? `${this.menuStyles.separatorColor}` : "";
         }
     }
 }
@@ -735,7 +760,7 @@ function cleanMnemonic(label) {
         return label;
     }
     const mnemonicInText = !matches[1];
-    return label.replace(regex, mnemonicInText ? '$2$3' : '').trim();
+    return label.replace(regex, mnemonicInText ? "$2$3" : "").trim();
 }
 function formatRule(c) {
     const fontCharacter = getCodiconFontCharacters()[c.id];
@@ -744,392 +769,392 @@ function formatRule(c) {
 function getMenuWidgetCSS(style, isForShadowDom) {
     let result =  `
 .monaco-menu {
-	font-size: 13px;
-	border-radius: 5px;
-	min-width: 160px;
+    font-size: 13px;
+    border-radius: 5px;
+    min-width: 160px;
 }
 
 ${formatRule(Codicon.menuSelection)}
 ${formatRule(Codicon.menuSubmenu)}
 
 .monaco-menu .monaco-action-bar {
-	text-align: right;
-	overflow: hidden;
-	white-space: nowrap;
+    text-align: right;
+    overflow: hidden;
+    white-space: nowrap;
 }
 
 .monaco-menu .monaco-action-bar .actions-container {
-	display: flex;
-	margin: 0 auto;
-	padding: 0;
-	width: 100%;
-	justify-content: flex-end;
+    display: flex;
+    margin: 0 auto;
+    padding: 0;
+    width: 100%;
+    justify-content: flex-end;
 }
 
 .monaco-menu .monaco-action-bar.vertical .actions-container {
-	display: inline-block;
+    display: inline-block;
 }
 
 .monaco-menu .monaco-action-bar.reverse .actions-container {
-	flex-direction: row-reverse;
+    flex-direction: row-reverse;
 }
 
 .monaco-menu .monaco-action-bar .action-item {
-	cursor: pointer;
-	display: inline-block;
-	transition: transform 50ms ease;
-	position: relative;  /* DO NOT REMOVE - this is the key to preventing the ghosting icon bug in Chrome 42 */
+    cursor: pointer;
+    display: inline-block;
+    transition: transform 50ms ease;
+    position: relative;  /* DO NOT REMOVE - this is the key to preventing the ghosting icon bug in Chrome 42 */
 }
 
 .monaco-menu .monaco-action-bar .action-item.disabled {
-	cursor: default;
+    cursor: default;
 }
 
 .monaco-menu .monaco-action-bar .action-item .icon,
 .monaco-menu .monaco-action-bar .action-item .codicon {
-	display: inline-block;
+    display: inline-block;
 }
 
 .monaco-menu .monaco-action-bar .action-item .codicon {
-	display: flex;
-	align-items: center;
+    display: flex;
+    align-items: center;
 }
 
 .monaco-menu .monaco-action-bar .action-label {
-	font-size: 11px;
-	margin-right: 4px;
+    font-size: 11px;
+    margin-right: 4px;
 }
 
 .monaco-menu .monaco-action-bar .action-item.disabled .action-label,
 .monaco-menu .monaco-action-bar .action-item.disabled .action-label:hover {
-	color: var(--vscode-disabledForeground);
+    color: var(--vscode-disabledForeground);
 }
 
 /* Vertical actions */
 
 .monaco-menu .monaco-action-bar.vertical {
-	text-align: left;
+    text-align: left;
 }
 
 .monaco-menu .monaco-action-bar.vertical .action-item {
-	display: block;
+    display: block;
 }
 
 .monaco-menu .monaco-action-bar.vertical .action-label.separator {
-	display: block;
-	border-bottom: 1px solid var(--vscode-menu-separatorBackground);
-	padding-top: 1px;
-	padding: 30px;
+    display: block;
+    border-bottom: 1px solid var(--vscode-menu-separatorBackground);
+    padding-top: 1px;
+    padding: 30px;
 }
 
 .monaco-menu .secondary-actions .monaco-action-bar .action-label {
-	margin-left: 6px;
+    margin-left: 6px;
 }
 
 /* Action Items */
 .monaco-menu .monaco-action-bar .action-item.select-container {
-	overflow: hidden; /* somehow the dropdown overflows its container, we prevent it here to not push */
-	flex: 1;
-	max-width: 170px;
-	min-width: 60px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	margin-right: 10px;
+    overflow: hidden; /* somehow the dropdown overflows its container, we prevent it here to not push */
+    flex: 1;
+    max-width: 170px;
+    min-width: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 10px;
 }
 
 .monaco-menu .monaco-action-bar.vertical {
-	margin-left: 0;
-	overflow: visible;
+    margin-left: 0;
+    overflow: visible;
 }
 
 .monaco-menu .monaco-action-bar.vertical .actions-container {
-	display: block;
+    display: block;
 }
 
 .monaco-menu .monaco-action-bar.vertical .action-item {
-	padding: 0;
-	transform: none;
-	display: flex;
+    padding: 0;
+    transform: none;
+    display: flex;
 }
 
 .monaco-menu .monaco-action-bar.vertical .action-item.active {
-	transform: none;
+    transform: none;
 }
 
 .monaco-menu .monaco-action-bar.vertical .action-menu-item {
-	flex: 1 1 auto;
-	display: flex;
-	height: 2em;
-	align-items: center;
-	position: relative;
-	margin: 0 4px;
-	border-radius: 4px;
+    flex: 1 1 auto;
+    display: flex;
+    height: 2em;
+    align-items: center;
+    position: relative;
+    margin: 0 4px;
+    border-radius: 4px;
 }
 
 .monaco-menu .monaco-action-bar.vertical .action-menu-item:hover .keybinding,
 .monaco-menu .monaco-action-bar.vertical .action-menu-item:focus .keybinding {
-	opacity: unset;
+    opacity: unset;
 }
 
 .monaco-menu .monaco-action-bar.vertical .action-label {
-	flex: 1 1 auto;
-	text-decoration: none;
-	padding: 0 1em;
-	background: none;
-	font-size: 12px;
-	line-height: 1;
+    flex: 1 1 auto;
+    text-decoration: none;
+    padding: 0 1em;
+    background: none;
+    font-size: 12px;
+    line-height: 1;
 }
 
 .monaco-menu .monaco-action-bar.vertical .keybinding,
 .monaco-menu .monaco-action-bar.vertical .submenu-indicator {
-	display: inline-block;
-	flex: 2 1 auto;
-	padding: 0 1em;
-	text-align: right;
-	font-size: 12px;
-	line-height: 1;
-	opacity: 0.7;
+    display: inline-block;
+    flex: 2 1 auto;
+    padding: 0 1em;
+    text-align: right;
+    font-size: 12px;
+    line-height: 1;
+    opacity: 0.7;
 }
 
 .monaco-menu .monaco-action-bar.vertical .submenu-indicator {
-	height: 100%;
+    height: 100%;
 }
 
 .monaco-menu .monaco-action-bar.vertical .submenu-indicator.codicon {
-	font-size: 16px !important;
-	display: flex;
-	align-items: center;
+    font-size: 16px !important;
+    display: flex;
+    align-items: center;
 }
 
 .monaco-menu .monaco-action-bar.vertical .submenu-indicator.codicon::before {
-	margin-left: auto;
-	margin-right: -20px;
+    margin-left: auto;
+    margin-right: -20px;
 }
 
 .monaco-menu .monaco-action-bar.vertical .action-item.disabled .keybinding,
 .monaco-menu .monaco-action-bar.vertical .action-item.disabled .submenu-indicator {
-	opacity: 0.4;
+    opacity: 0.4;
 }
 
 .monaco-menu .monaco-action-bar.vertical .action-label:not(.separator) {
-	display: inline-block;
-	box-sizing: border-box;
-	margin: 0;
+    display: inline-block;
+    box-sizing: border-box;
+    margin: 0;
 }
 
 .monaco-menu .monaco-action-bar.vertical .action-item {
-	position: static;
-	overflow: visible;
+    position: static;
+    overflow: visible;
 }
 
 .monaco-menu .monaco-action-bar.vertical .action-item .monaco-submenu {
-	position: absolute;
+    position: absolute;
 }
 
 .monaco-menu .monaco-action-bar.vertical .action-label.separator {
-	width: 100%;
-	height: 0px !important;
-	opacity: 1;
+    width: 100%;
+    height: 0px !important;
+    opacity: 1;
 }
 
 .monaco-menu .monaco-action-bar.vertical .action-label.separator.text {
-	padding: 0.7em 1em 0.1em 1em;
-	font-weight: bold;
-	opacity: 1;
+    padding: 0.7em 1em 0.1em 1em;
+    font-weight: bold;
+    opacity: 1;
 }
 
 .monaco-menu .monaco-action-bar.vertical .action-label:hover {
-	color: inherit;
+    color: inherit;
 }
 
 .monaco-menu .monaco-action-bar.vertical .menu-item-check {
-	position: absolute;
-	visibility: hidden;
-	width: 1em;
-	height: 100%;
+    position: absolute;
+    visibility: hidden;
+    width: 1em;
+    height: 100%;
 }
 
 .monaco-menu .monaco-action-bar.vertical .action-menu-item.checked .menu-item-check {
-	visibility: visible;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+    visibility: visible;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 /* Context Menu */
 
 .context-view.monaco-menu-container {
-	outline: 0;
-	border: none;
-	animation: fadeIn 0.083s linear;
-	-webkit-app-region: no-drag;
+    outline: 0;
+    border: none;
+    animation: fadeIn 0.083s linear;
+    -webkit-app-region: no-drag;
 }
 
 .context-view.monaco-menu-container :focus,
 .context-view.monaco-menu-container .monaco-action-bar.vertical:focus,
 .context-view.monaco-menu-container .monaco-action-bar.vertical :focus {
-	outline: 0;
+    outline: 0;
 }
 
 .hc-black .context-view.monaco-menu-container,
 .hc-light .context-view.monaco-menu-container,
 :host-context(.hc-black) .context-view.monaco-menu-container,
 :host-context(.hc-light) .context-view.monaco-menu-container {
-	box-shadow: none;
+    box-shadow: none;
 }
 
 .hc-black .monaco-menu .monaco-action-bar.vertical .action-item.focused,
 .hc-light .monaco-menu .monaco-action-bar.vertical .action-item.focused,
 :host-context(.hc-black) .monaco-menu .monaco-action-bar.vertical .action-item.focused,
 :host-context(.hc-light) .monaco-menu .monaco-action-bar.vertical .action-item.focused {
-	background: none;
+    background: none;
 }
 
 /* Vertical Action Bar Styles */
 
 .monaco-menu .monaco-action-bar.vertical {
-	padding: 4px 0;
+    padding: 4px 0;
 }
 
 .monaco-menu .monaco-action-bar.vertical .action-menu-item {
-	height: 2em;
+    height: 2em;
 }
 
 .monaco-menu .monaco-action-bar.vertical .action-label:not(.separator),
 .monaco-menu .monaco-action-bar.vertical .keybinding {
-	font-size: inherit;
-	padding: 0 2em;
-	max-height: 100%;
+    font-size: inherit;
+    padding: 0 2em;
+    max-height: 100%;
 }
 
 .monaco-menu .monaco-action-bar.vertical .menu-item-check {
-	font-size: inherit;
-	width: 2em;
+    font-size: inherit;
+    width: 2em;
 }
 
 .monaco-menu .monaco-action-bar.vertical .action-label.separator {
-	font-size: inherit;
-	margin: 5px 0 !important;
-	padding: 0;
-	border-radius: 0;
+    font-size: inherit;
+    margin: 5px 0 !important;
+    padding: 0;
+    border-radius: 0;
 }
 
 .linux .monaco-menu .monaco-action-bar.vertical .action-label.separator,
 :host-context(.linux) .monaco-menu .monaco-action-bar.vertical .action-label.separator {
-	margin-left: 0;
-	margin-right: 0;
+    margin-left: 0;
+    margin-right: 0;
 }
 
 .monaco-menu .monaco-action-bar.vertical .submenu-indicator {
-	font-size: 60%;
-	padding: 0 1.8em;
+    font-size: 60%;
+    padding: 0 1.8em;
 }
 
 .linux .monaco-menu .monaco-action-bar.vertical .submenu-indicator,
 :host-context(.linux) .monaco-menu .monaco-action-bar.vertical .submenu-indicator {
-	height: 100%;
-	mask-size: 10px 10px;
-	-webkit-mask-size: 10px 10px;
+    height: 100%;
+    mask-size: 10px 10px;
+    -webkit-mask-size: 10px 10px;
 }
 
 .monaco-menu .action-item {
-	cursor: default;
+    cursor: default;
 }`;
     if (isForShadowDom) {
         result += `
-			/* Arrows */
-			.monaco-scrollable-element > .scrollbar > .scra {
-				cursor: pointer;
-				font-size: 11px !important;
-			}
+            /* Arrows */
+            .monaco-scrollable-element > .scrollbar > .scra {
+                cursor: pointer;
+                font-size: 11px !important;
+            }
 
-			.monaco-scrollable-element > .visible {
-				opacity: 1;
+            .monaco-scrollable-element > .visible {
+                opacity: 1;
 
-				/* Background rule added for IE9 - to allow clicks on dom node */
-				background:rgba(0,0,0,0);
+                /* Background rule added for IE9 - to allow clicks on dom node */
+                background:rgba(0,0,0,0);
 
-				transition: opacity 100ms linear;
-			}
-			.monaco-scrollable-element > .invisible {
-				opacity: 0;
-				pointer-events: none;
-			}
-			.monaco-scrollable-element > .invisible.fade {
-				transition: opacity 800ms linear;
-			}
+                transition: opacity 100ms linear;
+            }
+            .monaco-scrollable-element > .invisible {
+                opacity: 0;
+                pointer-events: none;
+            }
+            .monaco-scrollable-element > .invisible.fade {
+                transition: opacity 800ms linear;
+            }
 
-			/* Scrollable Content Inset Shadow */
-			.monaco-scrollable-element > .shadow {
-				position: absolute;
-				display: none;
-			}
-			.monaco-scrollable-element > .shadow.top {
-				display: block;
-				top: 0;
-				left: 3px;
-				height: 3px;
-				width: 100%;
-			}
-			.monaco-scrollable-element > .shadow.left {
-				display: block;
-				top: 3px;
-				left: 0;
-				height: 100%;
-				width: 3px;
-			}
-			.monaco-scrollable-element > .shadow.top-left-corner {
-				display: block;
-				top: 0;
-				left: 0;
-				height: 3px;
-				width: 3px;
-			}
-			/* Fix for https://github.com/microsoft/vscode/issues/103170 */
-			.monaco-menu .action-item .monaco-submenu {
-				z-index: 1;
-			}
-		`;
+            /* Scrollable Content Inset Shadow */
+            .monaco-scrollable-element > .shadow {
+                position: absolute;
+                display: none;
+            }
+            .monaco-scrollable-element > .shadow.top {
+                display: block;
+                top: 0;
+                left: 3px;
+                height: 3px;
+                width: 100%;
+            }
+            .monaco-scrollable-element > .shadow.left {
+                display: block;
+                top: 3px;
+                left: 0;
+                height: 100%;
+                width: 3px;
+            }
+            .monaco-scrollable-element > .shadow.top-left-corner {
+                display: block;
+                top: 0;
+                left: 0;
+                height: 3px;
+                width: 3px;
+            }
+            /* Fix for https://github.com/microsoft/vscode/issues/103170 */
+            .monaco-menu .action-item .monaco-submenu {
+                z-index: 1;
+            }
+        `;
         const scrollbarShadowColor = style.scrollbarShadow;
         if (scrollbarShadowColor) {
             result += `
-				.monaco-scrollable-element > .shadow.top {
-					box-shadow: ${scrollbarShadowColor} 0 6px 6px -6px inset;
-				}
+                .monaco-scrollable-element > .shadow.top {
+                    box-shadow: ${scrollbarShadowColor} 0 6px 6px -6px inset;
+                }
 
-				.monaco-scrollable-element > .shadow.left {
-					box-shadow: ${scrollbarShadowColor} 6px 0 6px -6px inset;
-				}
+                .monaco-scrollable-element > .shadow.left {
+                    box-shadow: ${scrollbarShadowColor} 6px 0 6px -6px inset;
+                }
 
-				.monaco-scrollable-element > .shadow.top.left {
-					box-shadow: ${scrollbarShadowColor} 6px 6px 6px -6px inset;
-				}
-			`;
+                .monaco-scrollable-element > .shadow.top.left {
+                    box-shadow: ${scrollbarShadowColor} 6px 6px 6px -6px inset;
+                }
+            `;
         }
         const scrollbarSliderBackgroundColor = style.scrollbarSliderBackground;
         if (scrollbarSliderBackgroundColor) {
             result += `
-				.monaco-scrollable-element > .scrollbar > .slider {
-					background: ${scrollbarSliderBackgroundColor};
-				}
-			`;
+                .monaco-scrollable-element > .scrollbar > .slider {
+                    background: ${scrollbarSliderBackgroundColor};
+                }
+            `;
         }
         const scrollbarSliderHoverBackgroundColor = style.scrollbarSliderHoverBackground;
         if (scrollbarSliderHoverBackgroundColor) {
             result += `
-				.monaco-scrollable-element > .scrollbar > .slider:hover {
-					background: ${scrollbarSliderHoverBackgroundColor};
-				}
-			`;
+                .monaco-scrollable-element > .scrollbar > .slider:hover {
+                    background: ${scrollbarSliderHoverBackgroundColor};
+                }
+            `;
         }
         const scrollbarSliderActiveBackgroundColor = style.scrollbarSliderActiveBackground;
         if (scrollbarSliderActiveBackgroundColor) {
             result += `
-				.monaco-scrollable-element > .scrollbar > .slider.active {
-					background: ${scrollbarSliderActiveBackgroundColor};
-				}
-			`;
+                .monaco-scrollable-element > .scrollbar > .slider.active {
+                    background: ${scrollbarSliderActiveBackgroundColor};
+                }
+            `;
         }
     }
     return result;