@theia/core 1.50.1 → 1.51.0

package/src/browser/saveable.ts

@@ -22,6 +22,7 @@ import { Key } from './keyboard/keys';
 import { AbstractDialog } from './dialogs';
 import { nls } from '../common/nls';
 import { DisposableCollection, isObject } from '../common';
+import { BinaryBuffer } from '../common/buffer';
 
 export type AutoSaveMode = 'off' | 'afterDelay' | 'onFocusChange' | 'onWindowChange';
 
@@ -46,13 +47,17 @@ export interface Saveable {
      */
     revert?(options?: Saveable.RevertOptions): Promise<void>;
     /**
-     * Creates a snapshot of the dirty state.
+     * Creates a snapshot of the dirty state. See also {@link Saveable.Snapshot}.
      */
     createSnapshot?(): Saveable.Snapshot;
     /**
      * Applies the given snapshot to the dirty state.
      */
     applySnapshot?(snapshot: object): void;
+    /**
+     * Serializes the full state of the saveable item to a binary buffer.
+     */
+    serialize?(): Promise<BinaryBuffer>;
 }
 
 export interface SaveableSource {
@@ -79,6 +84,7 @@ export class DelegatingSaveable implements Saveable {
     revert?(options?: Saveable.RevertOptions): Promise<void>;
     createSnapshot?(): Saveable.Snapshot;
     applySnapshot?(snapshot: object): void;
+    serialize?(): Promise<BinaryBuffer>;
 
     protected _delegate?: Saveable;
     protected toDispose = new DisposableCollection();
@@ -101,6 +107,7 @@ export class DelegatingSaveable implements Saveable {
         this.revert = delegate.revert?.bind(delegate);
         this.createSnapshot = delegate.createSnapshot?.bind(delegate);
         this.applySnapshot = delegate.applySnapshot?.bind(delegate);
+        this.serialize = delegate.serialize?.bind(delegate);
     }
 
 }
@@ -114,7 +121,16 @@ export namespace Saveable {
         soft?: boolean
     }
 
+    /**
+     * A snapshot of a saveable item.
+     * Applying a snapshot of a saveable on another (of the same type) using the `applySnapshot` should yield the state of the original saveable.
+     */
     export type Snapshot = { value: string } | { read(): string | null };
+    export namespace Snapshot {
+        export function read(snapshot: Snapshot): string | undefined {
+            return 'value' in snapshot ? snapshot.value : (snapshot.read() ?? undefined);
+        }
+    }
     export function isSource(arg: unknown): arg is SaveableSource {
         return isObject<SaveableSource>(arg) && is(arg.saveable);
     }

package/src/browser/shell/additional-views-menu-widget.tsx

@@ -23,13 +23,13 @@ import { SideTabBar } from './tab-bars';
 export const AdditionalViewsMenuWidgetFactory = Symbol('AdditionalViewsMenuWidgetFactory');
 export type AdditionalViewsMenuWidgetFactory = (side: 'left' | 'right') => AdditionalViewsMenuWidget;
 
-export const ADDITIONAL_VIEWS_MENU_PATH: MenuPath = ['additional_views_menu'];
-
+export const AdditionalViewsMenuPath = Symbol('AdditionalViewsMenuPath');
 @injectable()
 export class AdditionalViewsMenuWidget extends SidebarMenuWidget {
     static readonly ID = 'sidebar.additional.views';
 
-    side: 'left' | 'right';
+    @inject(AdditionalViewsMenuPath)
+    protected menuPath: MenuPath;
 
     @inject(CommandRegistry)
     protected readonly commandRegistry: CommandRegistry;
@@ -47,7 +47,7 @@ export class AdditionalViewsMenuWidget extends SidebarMenuWidget {
                 title: nls.localizeByDefault('Additional Views'),
                 iconClass: codicon('ellipsis'),
                 id: AdditionalViewsMenuWidget.ID,
-                menuPath: ADDITIONAL_VIEWS_MENU_PATH,
+                menuPath: this.menuPath,
                 order: 0
             });
         }
@@ -66,6 +66,6 @@ export class AdditionalViewsMenuWidget extends SidebarMenuWidget {
                 });
             }
         }));
-        this.menuDisposables.push(this.menuModelRegistry.registerMenuAction(ADDITIONAL_VIEWS_MENU_PATH, { commandId: command.id, order: index.toString() }));
+        this.menuDisposables.push(this.menuModelRegistry.registerMenuAction(this.menuPath, { commandId: command.id, order: index.toString() }));
     }
 }

package/src/browser/shell/application-shell.ts

@@ -960,7 +960,7 @@ export class ApplicationShell extends Widget {
         }
     }
 
-    getInsertionOptions(options?: Readonly<ApplicationShell.WidgetOptions>): { area: string; addOptions: DockLayout.IAddOptions; } {
+    getInsertionOptions(options?: Readonly<ApplicationShell.WidgetOptions>): { area: string; addOptions: TheiaDockPanel.AddOptions; } {
         let ref: Widget | undefined = options?.ref;
         let area: ApplicationShell.Area = options?.area || 'main';
         if (!ref && (area === 'main' || area === 'bottom')) {
@@ -969,7 +969,7 @@ export class ApplicationShell extends Widget {
         }
         // make sure that ref belongs to area
         area = ref && this.getAreaFor(ref) || area;
-        const addOptions: DockPanel.IAddOptions = {};
+        const addOptions: TheiaDockPanel.AddOptions = {};
         if (ApplicationShell.isOpenToSideMode(options?.mode)) {
             const areaPanel = area === 'main' ? this.mainPanel : area === 'bottom' ? this.bottomPanel : undefined;
             const sideRef = areaPanel && ref && (options?.mode === 'open-to-left' ?
@@ -981,6 +981,10 @@ export class ApplicationShell extends Widget {
                 addOptions.ref = ref;
                 addOptions.mode = options?.mode === 'open-to-left' ? 'split-left' : 'split-right';
             }
+        } else if (ApplicationShell.isReplaceMode(options?.mode)) {
+            addOptions.ref = options?.ref;
+            addOptions.closeRef = true;
+            addOptions.mode = 'tab-after';
         } else {
             addOptions.ref = ref;
             addOptions.mode = options?.mode;
@@ -2172,6 +2176,15 @@ export namespace ApplicationShell {
         return mode === 'open-to-left' || mode === 'open-to-right';
     }
 
+    /**
+     * Whether the `ref` of the options widget should be replaced.
+     */
+    export type ReplaceMode = 'tab-replace';
+
+    export function isReplaceMode(mode: unknown): mode is ReplaceMode {
+        return mode === 'tab-replace';
+    }
+
     /**
      * Options for adding a widget to the application shell.
      */
@@ -2185,7 +2198,7 @@ export namespace ApplicationShell {
          *
          * The default is `'tab-after'`.
          */
-        mode?: DockLayout.InsertMode | OpenToSideMode
+        mode?: DockLayout.InsertMode | OpenToSideMode | ReplaceMode
         /**
          * The reference widget for the insert location.
          *

package/src/browser/shell/side-panel-handler.ts

@@ -211,6 +211,7 @@ export class SidePanelHandler {
     protected createAdditionalViewsWidget(): AdditionalViewsMenuWidget {
         const widget = this.additionalViewsMenuFactory(this.side);
         widget.addClass('theia-sidebar-menu');
+        widget.addClass('theia-additional-views-menu');
         return widget;
     }
 
@@ -653,7 +654,7 @@ export class SidePanelHandler {
     }
 
     protected onTabsOverflowChanged(sender: SideTabBar, event: { titles: Title<Widget>[], startIndex: number }): void {
-        if (event.startIndex >= 0 && event.startIndex <= sender.currentIndex) {
+        if (event.startIndex > 0 && event.startIndex <= sender.currentIndex) {
             sender.revealTab(sender.currentIndex);
         } else {
             this.additionalViewsMenu.updateAdditionalViews(sender, event);

package/src/browser/shell/sidebar-menu-widget.tsx

@@ -20,6 +20,7 @@ import { ReactWidget } from '../widgets';
 import { ContextMenuRenderer } from '../context-menu-renderer';
 import { MenuPath } from '../../common/menu';
 import { HoverService } from '../hover-service';
+import { Event, Disposable, Emitter, DisposableCollection } from '../../common';
 
 export const SidebarTopMenuWidgetFactory = Symbol('SidebarTopMenuWidgetFactory');
 export const SidebarBottomMenuWidgetFactory = Symbol('SidebarBottomMenuWidgetFactory');
@@ -29,18 +30,54 @@ export interface SidebarMenu {
     iconClass: string;
     title: string;
     menuPath: MenuPath;
+    onDidBadgeChange?: Event<number>;
     /*
      * Used to sort menus. The lower the value the lower they are placed in the sidebar.
      */
     order: number;
 }
 
+export class SidebarMenuItem implements Disposable {
+
+    readonly menu: SidebarMenu;
+    get badge(): string {
+        if (this._badge <= 0) {
+            return '';
+        } else if (this._badge > 99) {
+            return '99+';
+        } else {
+            return this._badge.toString();
+        }
+    };
+    protected readonly onDidBadgeChangeEmitter = new Emitter<number>();
+    readonly onDidBadgeChange: Event<number> = this.onDidBadgeChangeEmitter.event;
+    protected _badge = 0;
+
+    protected readonly toDispose = new DisposableCollection();
+
+    constructor(menu: SidebarMenu) {
+        this.menu = menu;
+        if (menu.onDidBadgeChange) {
+            this.toDispose.push(menu.onDidBadgeChange(value => {
+                this._badge = value;
+                this.onDidBadgeChangeEmitter.fire(value);
+            }));
+        }
+    }
+
+    dispose(): void {
+        this.toDispose.dispose();
+        this.onDidBadgeChangeEmitter.dispose();
+    }
+
+}
+
 /**
  * The menu widget placed on the sidebar.
  */
 @injectable()
 export class SidebarMenuWidget extends ReactWidget {
-    protected readonly menus: SidebarMenu[];
+    protected readonly items: SidebarMenuItem[];
     /**
      * The element that had focus when a menu rendered by this widget was activated.
      */
@@ -58,27 +95,27 @@ export class SidebarMenuWidget extends ReactWidget {
 
     constructor() {
         super();
-        this.menus = [];
+        this.items = [];
     }
 
     addMenu(menu: SidebarMenu): void {
-        const exists = this.menus.find(m => m.id === menu.id);
+        const exists = this.items.find(item => item.menu.id === menu.id);
         if (exists) {
             return;
         }
-        this.menus.push(menu);
-        this.menus.sort((a, b) => a.order - b.order);
+        const newItem = new SidebarMenuItem(menu);
+        newItem.onDidBadgeChange(() => this.update());
+        this.items.push(newItem);
+        this.items.sort((a, b) => a.menu.order - b.menu.order);
         this.update();
     }
 
     removeMenu(menuId: string): void {
-        const menu = this.menus.find(m => m.id === menuId);
-        if (menu) {
-            const index = this.menus.indexOf(menu);
-            if (index !== -1) {
-                this.menus.splice(index, 1);
-                this.update();
-            }
+        const index = this.items.findIndex(m => m.menu.id === menuId);
+        if (index !== -1) {
+            this.items[index].dispose();
+            this.items.splice(index, 1);
+            this.update();
         }
     }
 
@@ -127,14 +164,20 @@ export class SidebarMenuWidget extends ReactWidget {
 
     protected render(): React.ReactNode {
         return <React.Fragment>
-            {this.menus.map(menu => <i
-                key={menu.id}
-                className={menu.iconClass}
-                onClick={e => this.onClick(e, menu.menuPath)}
-                onMouseDown={this.onMouseDown}
-                onMouseEnter={e => this.onMouseEnter(e, menu.title)}
-                onMouseLeave={this.onMouseOut}
-            />)}
+            {this.items.map(item => this.renderItem(item))}
         </React.Fragment>;
     }
+
+    protected renderItem(item: SidebarMenuItem): React.ReactNode {
+        return <div
+            key={item.menu.id}
+            className='theia-sidebar-menu-item'
+            onClick={e => this.onClick(e, item.menu.menuPath)}
+            onMouseDown={this.onMouseDown}
+            onMouseEnter={e => this.onMouseEnter(e, item.menu.title)}
+            onMouseLeave={this.onMouseOut}>
+            <i className={item.menu.iconClass} />
+            {item.badge && <div className='theia-badge-decorator-sidebar'>{item.badge}</div>}
+        </div>;
+    }
 }

package/src/browser/shell/tab-bars.ts

@@ -1084,8 +1084,6 @@ export class SideTabBar extends ScrollableTabBar {
         startIndex: number
     };
 
-    protected _rowGap: number;
-
     constructor(options?: TabBar.IOptions<Widget> & PerfectScrollbar.Options) {
         super(options);
 
@@ -1142,31 +1140,6 @@ export class SideTabBar extends ScrollableTabBar {
         }
     }
 
-    // Queries the tabRowGap value of the content node. Needed to properly compute overflowing
-    // tabs that should be hidden
-    protected get tabRowGap(): number {
-        // We assume that the tab row gap is static i.e. we compute it once an then cache it
-        if (!this._rowGap) {
-            this._rowGap = this.computeTabRowGap();
-        }
-        return this._rowGap;
-
-    }
-
-    protected computeTabRowGap(): number {
-        const style = window.getComputedStyle(this.contentNode);
-        const rowGapStyle = style.getPropertyValue('row-gap');
-        const numericValue = parseFloat(rowGapStyle);
-        const unit = rowGapStyle.match(/[a-zA-Z]+/)?.[0];
-
-        const tempDiv = document.createElement('div');
-        tempDiv.style.height = '1' + unit;
-        document.body.appendChild(tempDiv);
-        const rowGapValue = numericValue * tempDiv.offsetHeight;
-        document.body.removeChild(tempDiv);
-        return rowGapValue;
-    }
-
     /**
      * Reveal the tab with the given index by moving it into the non-overflowing tabBar section
      * if necessary.
@@ -1207,18 +1180,13 @@ export class SideTabBar extends ScrollableTabBar {
                 const hiddenContent = this.hiddenContentNode;
                 const n = hiddenContent.children.length;
                 const renderData = new Array<Partial<SideBarRenderData>>(n);
-                const availableWidth = this.node.clientHeight - this.tabRowGap;
-                let actualWidth = 0;
-                let overflowStartIndex = -1;
                 for (let i = 0; i < n; i++) {
                     const hiddenTab = hiddenContent.children[i];
-                    // Extract tab padding from the computed style
+                    // Extract tab padding, and margin from the computed style
                     const tabStyle = window.getComputedStyle(hiddenTab);
-                    const paddingTop = parseFloat(tabStyle.paddingTop!);
-                    const paddingBottom = parseFloat(tabStyle.paddingBottom!);
                     const rd: Partial<SideBarRenderData> = {
-                        paddingTop,
-                        paddingBottom
+                        paddingTop: parseFloat(tabStyle.paddingTop!),
+                        paddingBottom: parseFloat(tabStyle.paddingBottom!)
                     };
                     // Extract label size from the DOM
                     const labelElements = hiddenTab.getElementsByClassName('p-TabBar-tabLabel');
@@ -1231,38 +1199,21 @@ export class SideTabBar extends ScrollableTabBar {
                     if (iconElements.length === 1) {
                         const icon = iconElements[0];
                         rd.iconSize = { width: icon.clientWidth, height: icon.clientHeight };
-                        actualWidth += icon.clientHeight + paddingTop + paddingBottom + this.tabRowGap;
-
-                        if (actualWidth > availableWidth && i !== 0) {
-                            rd.visible = false;
-                            if (overflowStartIndex === -1) {
-                                overflowStartIndex = i;
-                            }
-                        }
-                        renderData[i] = rd;
                     }
-                }
 
-                // Special handling if only one element is overflowing.
-                if (overflowStartIndex === n - 1 && renderData[overflowStartIndex]) {
-                    if (!this.tabsOverflowData) {
-                        overflowStartIndex--;
-                        renderData[overflowStartIndex].visible = false;
-                    } else {
-                        renderData[overflowStartIndex].visible = true;
-                        overflowStartIndex = -1;
-                    }
+                    renderData[i] = rd;
                 }
                 // Render into the visible node
                 this.renderTabs(this.contentNode, renderData);
-                this.computeOverflowingTabsData(overflowStartIndex);
+                this.computeOverflowingTabsData();
             });
         }
     }
 
-    protected computeOverflowingTabsData(startIndex: number): void {
+    protected computeOverflowingTabsData(): void {
         // ensure that render tabs has completed
         window.requestAnimationFrame(() => {
+            const startIndex = this.hideOverflowingTabs();
             if (startIndex === -1) {
                 if (this.tabsOverflowData) {
                     this.tabsOverflowData = undefined;
@@ -1286,6 +1237,38 @@ export class SideTabBar extends ScrollableTabBar {
         });
     }
 
+    /**
+     * Hide overflowing tabs and return the index of the first hidden tab.
+     */
+    protected hideOverflowingTabs(): number {
+        const availableHeight = this.node.clientHeight;
+        const invisibleClass = 'p-mod-invisible';
+        let startIndex = -1;
+        const n = this.contentNode.children.length;
+        for (let i = 0; i < n; i++) {
+            const tab = this.contentNode.children[i] as HTMLLIElement;
+            if (tab.offsetTop + tab.offsetHeight >= availableHeight) {
+                tab.classList.add(invisibleClass);
+                if (startIndex === -1) {
+                    startIndex = i;
+                    /* If only one element is overflowing and the additional menu widget is visible (i.e. this.tabsOverflowData is set)
+                     * there might already be enough space to show the last tab. In this case, we need to include the size of the
+                     * additional menu widget and recheck if the last tab is visible */
+                    if (startIndex === n - 1 && this.tabsOverflowData) {
+                        const additionalViewsMenu = this.node.parentElement?.querySelector('.theia-additional-views-menu') as HTMLDivElement;
+                        if (tab.offsetTop + tab.offsetHeight < availableHeight + additionalViewsMenu.offsetHeight) {
+                            tab.classList.remove(invisibleClass);
+                            startIndex = -1;
+                        }
+                    }
+                }
+            } else {
+                tab.classList.remove(invisibleClass);
+            }
+        }
+        return startIndex;
+    }
+
     /**
      * Render the tab bar using the given DOM element as host. The optional `renderData` is forwarded
      * to the TabBarRenderer.

package/src/browser/shell/theia-dock-panel.ts

@@ -14,7 +14,7 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { find, toArray, ArrayExt } from '@phosphor/algorithm';
+import { find, toArray } from '@phosphor/algorithm';
 import { TabBar, Widget, DockPanel, Title, DockLayout } from '@phosphor/widgets';
 import { Signal } from '@phosphor/signaling';
 import { Disposable, DisposableCollection } from '../../common/disposable';
@@ -103,7 +103,7 @@ export class TheiaDockPanel extends DockPanel {
     }
 
     findTabBar(title: Title<Widget>): TabBar<Widget> | undefined {
-        return find(this.tabBars(), bar => ArrayExt.firstIndexOf(bar.titles, title) > -1);
+        return find(this.tabBars(), bar => bar.titles.includes(title));
     }
 
     protected readonly toDisposeOnMarkAsCurrent = new DisposableCollection();
@@ -133,11 +133,14 @@ export class TheiaDockPanel extends DockPanel {
         }
     }
 
-    override addWidget(widget: Widget, options?: DockPanel.IAddOptions): void {
+    override addWidget(widget: Widget, options?: TheiaDockPanel.AddOptions): void {
         if (this.mode === 'single-document' && widget.parent === this) {
             return;
         }
         super.addWidget(widget, options);
+        if (options?.closeRef) {
+            options.ref?.close();
+        }
         this.widgetAdded.emit(widget);
         this.markActiveTabBar(widget.title);
     }
@@ -252,4 +255,11 @@ export namespace TheiaDockPanel {
     export interface Factory {
         (options?: DockPanel.IOptions): TheiaDockPanel;
     }
+
+    export interface AddOptions extends DockPanel.IAddOptions {
+        /**
+         * Whether to also close the widget referenced by `ref`.
+         */
+        closeRef?: boolean
+    }
 }

package/src/browser/style/sidepanel.css

@@ -186,23 +186,26 @@
   flex-direction: column-reverse;
 }
 
+.p-Widget .theia-sidebar-menu-item {
+    cursor: pointer;
+}
+
 .p-Widget.theia-sidebar-menu i {
   padding: var(--theia-private-sidebar-tab-padding-top-and-bottom)
     var(--theia-private-sidebar-tab-padding-left-and-right);
   display: flex;
   justify-content: center;
   align-items: center;
-  cursor: pointer;
   color: var(--theia-activityBar-inactiveForeground);
   background-color: var(--theia-activityBar-background);
   font-size: var(--theia-private-sidebar-icon-size);
 }
 
-.theia-sidebar-menu i:hover {
+.theia-sidebar-menu .theia-sidebar-menu-item:hover i {
   color: var(--theia-activityBar-foreground);
 }
 
-.theia-sidebar-menu > i.codicon-menu {
+.theia-sidebar-menu i.theia-compact-menu {
   font-size: 16px;
 }
 

package/src/browser/style/tabs.css

@@ -305,7 +305,7 @@
   display: none !important;
 }
 
-.p-TabBar .theia-badge-decorator-sidebar {
+.theia-badge-decorator-sidebar {
   background-color: var(--theia-activityBarBadge-background);
   border-radius: 20px;
   color: var(--theia-activityBarBadge-foreground);

package/src/browser/widgets/react-renderer.tsx

@@ -41,7 +41,10 @@ export class ReactRenderer implements Disposable {
     }
 
     render(): void {
-        this.hostRoot.render(<React.Fragment>{this.doRender()}</React.Fragment>);
+        // Ignore all render calls after the host element has unmounted
+        if (!this.toDispose.disposed) {
+            this.hostRoot.render(<React.Fragment>{this.doRender()}</React.Fragment>);
+        }
     }
 
     protected doRender(): React.ReactNode {

package/src/browser-only/frontend-only-application-module.ts

@@ -56,6 +56,7 @@ export const frontendOnlyApplicationModule = new ContainerModule((bind, unbind,
         getExtensionsInfos: async (): Promise<ExtensionInfo[]> => [],
         getApplicationInfo: async (): Promise<ApplicationInfo | undefined> => undefined,
         getApplicationRoot: async (): Promise<string> => '',
+        getApplicationPlatform: () => Promise.resolve('web'),
         getBackendOS: async (): Promise<OS.Type> => OS.Type.Linux
     };
     if (isBound(ApplicationServer)) {

package/src/common/application-protocol.ts

@@ -24,6 +24,7 @@ export interface ApplicationServer {
     getExtensionsInfos(): Promise<ExtensionInfo[]>;
     getApplicationInfo(): Promise<ApplicationInfo | undefined>;
     getApplicationRoot(): Promise<string>;
+    getApplicationPlatform(): Promise<string>;
     /**
      * @deprecated since 1.25.0. Use `OS.backend.type()` instead.
      */

package/src/common/menu/menu-model-registry.ts

@@ -18,6 +18,7 @@ import { inject, injectable, named } from 'inversify';
 import { Command, CommandRegistry } from '../command';
 import { ContributionProvider } from '../contribution-provider';
 import { Disposable } from '../disposable';
+import { Emitter, Event } from '../event';
 import { ActionMenuNode } from './action-menu-node';
 import { CompositeMenuNode, CompositeMenuNodeWrapper } from './composite-menu-node';
 import { CompoundMenuNode, MenuAction, MenuNode, MenuNodeMetadata, MenuPath, MutableCompoundMenuNode, SubMenuOptions } from './menu-types';
@@ -68,6 +69,14 @@ export class MenuModelRegistry {
     protected readonly root = new CompositeMenuNode('');
     protected readonly independentSubmenus = new Map<string, MutableCompoundMenuNode>();
 
+    protected readonly onDidChangeEmitter = new Emitter<void>();
+
+    get onDidChange(): Event<void> {
+        return this.onDidChangeEmitter.event;
+    }
+
+    protected isReady = false;
+
     constructor(
         @inject(ContributionProvider) @named(MenuContribution)
         protected readonly contributions: ContributionProvider<MenuContribution>,
@@ -78,6 +87,7 @@ export class MenuModelRegistry {
         for (const contrib of this.contributions.getContributions()) {
             contrib.registerMenus(this);
         }
+        this.isReady = true;
     }
 
     /**
@@ -97,7 +107,9 @@ export class MenuModelRegistry {
      */
     registerMenuNode(menuPath: MenuPath | string, menuNode: MenuNode, group?: string): Disposable {
         const parent = this.getMenuNode(menuPath, group);
-        return parent.addNode(menuNode);
+        const disposable = parent.addNode(menuNode);
+        this.fireChangeEvent();
+        return this.changeEventOnDispose(disposable);
     }
 
     getMenuNode(menuPath: MenuPath | string, group?: string): MutableCompoundMenuNode {
@@ -137,13 +149,15 @@ export class MenuModelRegistry {
         const groupPath = index === 0 ? [] : menuPath.slice(0, index);
         const parent = this.findGroup(groupPath, options);
         let groupNode = this.findSubMenu(parent, menuId, options);
+        let disposable = Disposable.NULL;
         if (!groupNode) {
             groupNode = new CompositeMenuNode(menuId, label, options, parent);
-            return parent.addNode(groupNode);
+            disposable = this.changeEventOnDispose(parent.addNode(groupNode));
         } else {
             groupNode.updateOptions({ ...options, label });
-            return Disposable.NULL;
         }
+        this.fireChangeEvent();
+        return disposable;
     }
 
     registerIndependentSubmenu(id: string, label: string, options?: SubMenuOptions): Disposable {
@@ -151,7 +165,7 @@ export class MenuModelRegistry {
             console.debug(`Independent submenu with path ${id} registered, but given ID already exists.`);
         }
         this.independentSubmenus.set(id, new CompositeMenuNode(id, label, options));
-        return { dispose: () => this.independentSubmenus.delete(id) };
+        return this.changeEventOnDispose(Disposable.create(() => this.independentSubmenus.delete(id)));
     }
 
     linkSubmenu(parentPath: MenuPath | string, childId: string | MenuPath, options?: SubMenuOptions, group?: string): Disposable {
@@ -175,7 +189,9 @@ export class MenuModelRegistry {
         }
 
         const wrapper = new CompositeMenuNodeWrapper(child, parent, options);
-        return parent.addNode(wrapper);
+        const disposable = parent.addNode(wrapper);
+        this.fireChangeEvent();
+        return this.changeEventOnDispose(disposable);
     }
 
     /**
@@ -207,6 +223,7 @@ export class MenuModelRegistry {
         if (menuPath) {
             const parent = this.findGroup(menuPath);
             parent.removeNode(id);
+            this.fireChangeEvent();
             return;
         }
 
@@ -228,6 +245,7 @@ export class MenuModelRegistry {
             });
         };
         recurse(this.root);
+        this.fireChangeEvent();
     }
 
     /**
@@ -321,6 +339,19 @@ export class MenuModelRegistry {
         return true;
     }
 
+    protected changeEventOnDispose(disposable: Disposable): Disposable {
+        return Disposable.create(() => {
+            disposable.dispose();
+            this.fireChangeEvent();
+        });
+    }
+
+    protected fireChangeEvent(): void {
+        if (this.isReady) {
+            this.onDidChangeEmitter.fire();
+        }
+    }
+
     /**
      * Returns the {@link MenuPath path} at which a given menu node can be accessed from this registry, if it can be determined.
      * Returns `undefined` if the `parent` of any node in the chain is unknown.