@theia/core 1.50.1 → 1.52.0

package/src/browser/authentication-service.ts

@@ -133,6 +133,7 @@ export interface AuthenticationService {
     readonly onDidUnregisterAuthenticationProvider: Event<AuthenticationProviderInformation>;
 
     readonly onDidChangeSessions: Event<{ providerId: string, label: string, event: AuthenticationProviderAuthenticationSessionsChangeEvent }>;
+    readonly onDidUpdateSignInCount: Event<number>;
     getSessions(providerId: string, scopes?: string[]): Promise<ReadonlyArray<AuthenticationSession>>;
     getLabel(providerId: string): string;
     supportsMultipleAccounts(providerId: string): boolean;
@@ -157,15 +158,18 @@ export class AuthenticationServiceImpl implements AuthenticationService {
 
     protected authenticationProviders: Map<string, AuthenticationProvider> = new Map<string, AuthenticationProvider>();
 
-    private onDidRegisterAuthenticationProviderEmitter: Emitter<AuthenticationProviderInformation> = new Emitter<AuthenticationProviderInformation>();
+    private readonly onDidRegisterAuthenticationProviderEmitter: Emitter<AuthenticationProviderInformation> = new Emitter<AuthenticationProviderInformation>();
     readonly onDidRegisterAuthenticationProvider: Event<AuthenticationProviderInformation> = this.onDidRegisterAuthenticationProviderEmitter.event;
 
-    private onDidUnregisterAuthenticationProviderEmitter: Emitter<AuthenticationProviderInformation> = new Emitter<AuthenticationProviderInformation>();
+    private readonly onDidUnregisterAuthenticationProviderEmitter: Emitter<AuthenticationProviderInformation> = new Emitter<AuthenticationProviderInformation>();
     readonly onDidUnregisterAuthenticationProvider: Event<AuthenticationProviderInformation> = this.onDidUnregisterAuthenticationProviderEmitter.event;
 
-    private onDidChangeSessionsEmitter: Emitter<SessionChangeEvent> = new Emitter<SessionChangeEvent>();
+    private readonly onDidChangeSessionsEmitter: Emitter<SessionChangeEvent> = new Emitter<SessionChangeEvent>();
     readonly onDidChangeSessions: Event<SessionChangeEvent> = this.onDidChangeSessionsEmitter.event;
 
+    private readonly onDidChangeSignInCountEmitter: Emitter<number> = new Emitter<number>();
+    readonly onDidUpdateSignInCount: Event<number> = this.onDidChangeSignInCountEmitter.event;
+
     @inject(MenuModelRegistry) protected readonly menus: MenuModelRegistry;
     @inject(CommandRegistry) protected readonly commands: CommandRegistry;
     @inject(StorageService) protected readonly storageService: StorageService;
@@ -295,6 +299,7 @@ export class AuthenticationServiceImpl implements AuthenticationService {
             return;
         }
 
+        const previousSize = this.signInRequestItems.size;
         const sessions = await provider.getSessions();
         Object.keys(existingRequestsForProvider).forEach(requestedScopes => {
             if (sessions.some(session => session.scopes.slice().sort().join('') === requestedScopes)) {
@@ -311,6 +316,9 @@ export class AuthenticationServiceImpl implements AuthenticationService {
                 }
             }
         });
+        if (previousSize !== this.signInRequestItems.size) {
+            this.onDidChangeSignInCountEmitter.fire(this.signInRequestItems.size);
+        }
     }
 
     async requestNewSession(providerId: string, scopes: string[], extensionId: string, extensionName: string): Promise<void> {
@@ -341,7 +349,7 @@ export class AuthenticationServiceImpl implements AuthenticationService {
             }
 
             const menuItem = this.menus.registerMenuAction(ACCOUNTS_SUBMENU, {
-                label: `Sign in to use ${extensionName} (1)`,
+                label: nls.localizeByDefault('Sign in with {0} to use {1} (1)', provider.label, extensionName),
                 order: '1',
                 commandId: `${extensionId}signIn`,
             });
@@ -362,6 +370,7 @@ export class AuthenticationServiceImpl implements AuthenticationService {
                 }
             });
 
+            const previousSize = this.signInRequestItems.size;
             if (providerRequests) {
                 const existingRequest = providerRequests[scopesList] || { disposables: [], requestingExtensionIds: [] };
 
@@ -378,6 +387,9 @@ export class AuthenticationServiceImpl implements AuthenticationService {
                     }
                 });
             }
+            if (previousSize !== this.signInRequestItems.size) {
+                this.onDidChangeSignInCountEmitter.fire(this.signInRequestItems.size);
+            }
         }
     }
 

package/src/browser/browser.ts

@@ -34,9 +34,14 @@ export const isSafari = (userAgent.indexOf('Chrome') === -1) && (userAgent.index
 export const isIPad = (userAgent.indexOf('iPad') >= 0);
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 /**
- * @deprecated us Environment.electron.is
+ * @deprecated use Environment.electron.is
  */
 export const isNative = environment.electron.is();
+/**
+ * Determines whether the backend is running in a remote environment.
+ * I.e. we use the browser version or connect to a remote Theia instance in Electron.
+ */
+export const isRemote = !environment.electron.is() || new URL(location.href).searchParams.has('localPort');
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const isBasicWasmSupported = typeof (window as any).WebAssembly !== 'undefined';
 

package/src/browser/common-frontend-contribution.ts

@@ -61,11 +61,12 @@ import { ConfirmDialog, confirmExit, ConfirmSaveDialog, Dialog } from './dialogs
 import { WindowService } from './window/window-service';
 import { FrontendApplicationConfigProvider } from './frontend-application-config-provider';
 import { DecorationStyle } from './decoration-style';
-import { isPinned, Title, togglePinned, Widget } from './widgets';
+import { codicon, isPinned, Title, togglePinned, Widget } from './widgets';
 import { SaveableService } from './saveable-service';
 import { UserWorkingDirectoryProvider } from './user-working-directory-provider';
 import { UNTITLED_SCHEME, UntitledResourceResolver } from '../common';
 import { LanguageQuickPickService } from './i18n/language-quick-pick-service';
+import { SidebarMenu } from './shell/sidebar-menu-widget';
 
 export namespace CommonMenus {
 
@@ -472,17 +473,18 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
 
         app.shell.leftPanelHandler.addBottomMenu({
             id: 'settings-menu',
-            iconClass: 'codicon codicon-settings-gear',
+            iconClass: codicon('settings-gear'),
             title: nls.localizeByDefault(CommonCommands.MANAGE_CATEGORY),
             menuPath: MANAGE_MENU,
-            order: 1,
+            order: 0,
         });
-        const accountsMenu = {
+        const accountsMenu: SidebarMenu = {
             id: 'accounts-menu',
-            iconClass: 'codicon codicon-person',
+            iconClass: codicon('account'),
             title: nls.localizeByDefault('Accounts'),
             menuPath: ACCOUNTS_MENU,
-            order: 0,
+            order: 1,
+            onDidBadgeChange: this.authenticationService.onDidUpdateSignInCount
         };
         this.authenticationService.onDidRegisterAuthenticationProvider(() => {
             app.shell.leftPanelHandler.addBottomMenu(accountsMenu);
@@ -530,7 +532,7 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
                 if (newValue === 'compact') {
                     this.shell.leftPanelHandler.addTopMenu({
                         id: mainMenuId,
-                        iconClass: 'codicon codicon-menu',
+                        iconClass: `theia-compact-menu ${codicon('menu')}`,
                         title: nls.localizeByDefault('Application Menu'),
                         menuPath: MAIN_MENU_BAR,
                         order: 0,

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

@@ -35,7 +35,8 @@ import {
     MenuCommandAdapterRegistry,
     MenuCommandExecutor,
     MenuCommandAdapterRegistryImpl,
-    MenuCommandExecutorImpl
+    MenuCommandExecutorImpl,
+    MenuPath
 } from '../common';
 import { KeybindingRegistry, KeybindingContext, KeybindingContribution } from './keybinding';
 import { FrontendApplication } from './frontend-application';
@@ -137,7 +138,7 @@ import { MarkdownRenderer, MarkdownRendererFactory, MarkdownRendererImpl } from
 import { StylingParticipant, StylingService } from './styling-service';
 import { bindCommonStylingParticipants } from './common-styling-participants';
 import { HoverService } from './hover-service';
-import { AdditionalViewsMenuWidget, AdditionalViewsMenuWidgetFactory } from './shell/additional-views-menu-widget';
+import { AdditionalViewsMenuPath, AdditionalViewsMenuWidget, AdditionalViewsMenuWidgetFactory } from './shell/additional-views-menu-widget';
 import { LanguageIconLabelProvider } from './language-icon-provider';
 import { bindTreePreferences } from './tree';
 import { OpenWithService } from './open-with-service';
@@ -177,9 +178,9 @@ export const frontendApplicationModule = new ContainerModule((bind, _unbind, _is
     bind(SidebarBottomMenuWidgetFactory).toAutoFactory(SidebarBottomMenuWidget);
     bind(AdditionalViewsMenuWidget).toSelf();
     bind(AdditionalViewsMenuWidgetFactory).toFactory(ctx => (side: 'left' | 'right') => {
-        const widget = ctx.container.resolve(AdditionalViewsMenuWidget);
-        widget.side = side;
-        return widget;
+        const childContainer = ctx.container.createChild();
+        childContainer.bind<MenuPath>(AdditionalViewsMenuPath).toConstantValue(['additional_views_menu', side]);
+        return childContainer.resolve(AdditionalViewsMenuWidget);
     });
     bind(SplitPositionHandler).toSelf().inSingletonScope();
 

package/src/browser/http-open-handler.ts

@@ -27,6 +27,8 @@ export interface HttpOpenHandlerOptions {
 @injectable()
 export class HttpOpenHandler implements OpenHandler {
 
+    static readonly PRIORITY: number = 500;
+
     readonly id = 'http';
 
     @inject(WindowService)
@@ -36,7 +38,7 @@ export class HttpOpenHandler implements OpenHandler {
     protected readonly externalUriService: ExternalUriService;
 
     canHandle(uri: URI, options?: HttpOpenHandlerOptions): number {
-        return ((options && options.openExternal) || uri.scheme.startsWith('http') || uri.scheme.startsWith('mailto')) ? 500 : 0;
+        return ((options && options.openExternal) || uri.scheme.startsWith('http') || uri.scheme.startsWith('mailto')) ? HttpOpenHandler.PRIORITY : 0;
     }
 
     async open(uri: URI): Promise<undefined> {

package/src/browser/menu/browser-menu-plugin.ts

@@ -71,25 +71,30 @@ export class BrowserMainMenuFactory implements MenuWidgetFactory {
         const menuBar = new DynamicMenuBarWidget();
         menuBar.id = 'theia:menubar';
         this.corePreferences.ready.then(() => {
-            this.showMenuBar(menuBar, this.corePreferences.get('window.menuBarVisibility', 'classic'));
-        });
-        const preferenceListener = this.corePreferences.onPreferenceChanged(preference => {
-            if (preference.preferenceName === 'window.menuBarVisibility') {
-                this.showMenuBar(menuBar, preference.newValue);
-            }
-        });
-        const keybindingListener = this.keybindingRegistry.onKeybindingsChanged(() => {
-            const preference = this.corePreferences['window.menuBarVisibility'];
-            this.showMenuBar(menuBar, preference);
-        });
-        menuBar.disposed.connect(() => {
-            preferenceListener.dispose();
-            keybindingListener.dispose();
+            this.showMenuBar(menuBar);
         });
+        const disposable = new DisposableCollection(
+            this.corePreferences.onPreferenceChanged(change => {
+                if (change.preferenceName === 'window.menuBarVisibility') {
+                    this.showMenuBar(menuBar, change.newValue);
+                }
+            }),
+            this.keybindingRegistry.onKeybindingsChanged(() => {
+                this.showMenuBar(menuBar);
+            }),
+            this.menuProvider.onDidChange(() => {
+                this.showMenuBar(menuBar);
+            })
+        );
+        menuBar.disposed.connect(() => disposable.dispose());
         return menuBar;
     }
 
-    protected showMenuBar(menuBar: DynamicMenuBarWidget, preference: string | undefined): void {
+    protected getMenuBarVisibility(): string {
+        return this.corePreferences.get('window.menuBarVisibility', 'classic');
+    }
+
+    protected showMenuBar(menuBar: DynamicMenuBarWidget, preference = this.getMenuBarVisibility()): void {
         if (preference && ['classic', 'visible'].includes(preference)) {
             menuBar.clearMenus();
             this.fillMenuBar(menuBar);
@@ -187,13 +192,13 @@ export class DynamicMenuBarWidget extends MenuBarWidget {
         this.openActiveMenu();
         await waitForRevealed(menu);
 
-        const menuPath = [label];
+        const menuPath = [label, ...labels];
 
         let current = menu;
         for (const itemLabel of labels) {
             const item = current.items.find(i => i.label === itemLabel);
             if (!item || !item.submenu) {
-                throw new Error(`could not find '${label}' submenu in ${menuPath.map(l => "'" + l + "'").join(' -> ')} menu`);
+                throw new Error(`could not find '${itemLabel}' submenu in ${menuPath.map(l => "'" + l + "'").join(' -> ')} menu`);
             }
             current.activeItem = item;
             current.triggerActiveItem();
@@ -211,7 +216,7 @@ export class DynamicMenuBarWidget extends MenuBarWidget {
         const menu = await this.activateMenu(menuPath[0], ...menuPath.slice(1));
         const item = menu.items.find(i => i.label === labels[labels.length - 1]);
         if (!item) {
-            throw new Error(`could not find '${label}' item in ${menuPath.map(l => "'" + l + "'").join(' -> ')} menu`);
+            throw new Error(`could not find '${labels[labels.length - 1]}' item in ${menuPath.map(l => "'" + l + "'").join(' -> ')} menu`);
         }
         menu.activeItem = item;
         menu.triggerActiveItem();
@@ -468,9 +473,11 @@ export class MenuCommandRegistry extends PhosphorCommandRegistry {
         });
 
         const bindings = keybindingRegistry.getKeybindingsForCommand(id);
-        // Only consider the first keybinding.
+        // Only consider the first active keybinding.
         if (bindings.length) {
-            const binding = bindings[0];
+            const binding = bindings.length > 1 ?
+                bindings.find(b => !b.when || this.services.contextKeyService.match(b.when)) ?? bindings[0] :
+                bindings[0];
             const keys = keybindingRegistry.acceleratorFor(binding, ' ', true);
             this.addKeyBinding({
                 command: id,

package/src/browser/messaging/service-connection-provider.ts

@@ -20,7 +20,13 @@ import { ChannelMultiplexer } from '../../common/message-rpc/channel';
 import { Deferred } from '../../common/promise-util';
 import { ConnectionSource } from './connection-source';
 
+/**
+ * Service id for the local connection provider
+ */
 export const LocalConnectionProvider = Symbol('LocalConnectionProvider');
+/**
+ * Service id for the remote connection provider
+ */
 export const RemoteConnectionProvider = Symbol('RemoteConnectionProvider');
 
 export namespace ServiceConnectionProvider {
@@ -28,7 +34,15 @@ export namespace ServiceConnectionProvider {
 }
 
 /**
- * This class manages the channels for remote services in the back end
+ * This class manages the channels for remote services in the back end.
+ *
+ * Since we have the ability to use a remote back end via SSH, we need to distinguish
+ * between two types of services: those that will be redirected to the remote back end
+ * and those which must remain in the local back end. For example the service that manages
+ * the remote ssh connections and port forwarding to the remote instance must remain local
+ * while e.g. the file system service will run in the remote back end. For each set
+ * of services, we will bind an instance of this class to {@linkcode LocalConnectionProvider}
+ * and {@linkcode RemoteConnectionProvider} respectively.
  */
 @injectable()
 export class ServiceConnectionProvider {

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;
@@ -1892,6 +1896,10 @@ export class ApplicationShell extends Widget {
         if (index < current.titles.length - 1) {
             return index + 1;
         }
+        // last item in tab bar. select the previous one.
+        if (index === current.titles.length - 1) {
+            return index - 1;
+        }
         return 0;
     }
 
@@ -2058,7 +2066,7 @@ export class ApplicationShell extends Widget {
      */
     async saveAll(options?: SaveOptions): Promise<void> {
         for (const widget of this.widgets) {
-            if (this.saveableService.canSaveNotSaveAs(widget)) {
+            if (Saveable.isDirty(widget) && this.saveableService.canSaveNotSaveAs(widget)) {
                 await this.saveableService.save(widget, options);
             }
         }
@@ -2172,6 +2180,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 +2202,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/split-panels.ts

@@ -91,13 +91,14 @@ export class SplitPositionHandler {
             move.resolve = resolve;
             move.reject = reject;
             if (this.splitMoves.length === 0) {
-                window.requestAnimationFrame(this.animationFrame.bind(this));
+                setTimeout(this.animationFrame.bind(this), 10);
             }
             this.splitMoves.push(move);
         });
     }
 
-    protected animationFrame(time: number): void {
+    protected animationFrame(): void {
+        const time = Date.now();
         const move = this.splitMoves[this.currentMoveIndex];
         let rejectedOrResolved = false;
         if (move.ended || move.referenceWidget && move.referenceWidget.isHidden) {
@@ -133,7 +134,7 @@ export class SplitPositionHandler {
             this.currentMoveIndex = 0;
         }
         if (this.splitMoves.length > 0) {
-            window.requestAnimationFrame(this.animationFrame.bind(this));
+            setTimeout(this.animationFrame.bind(this));
         }
     }