@theia/core 1.65.0-next.6 → 1.66.0-next.0

package/src/browser/shell/tab-bar-toolbar/tab-bar-toolbar-menu-adapters.tsx

@@ -23,37 +23,36 @@ import { ACTION_ITEM, codicon } from '../../widgets';
 import { ContextMenuRenderer } from '../../context-menu-renderer';
 import { TabBarToolbarItem } from './tab-toolbar-item';
 import { ContextKeyService, ContextMatcher } from '../../context-key-service';
-import { CommandMenu, CompoundMenuNode, MenuModelRegistry, MenuNode, MenuPath, RenderedMenuNode } from '../../../common/menu';
+import { CommandMenu, CompoundMenuNode, ContextExpressionMatcher, Group, MenuModelRegistry, MenuNode, MenuPath, RenderedMenuNode, Submenu } from '../../../common/menu';
 
 export const TOOLBAR_WRAPPER_ID_SUFFIX = '-as-tabbar-toolbar-item';
 
 abstract class AbstractToolbarMenuWrapper {
 
     constructor(
-        protected readonly effectiveMenuPath: MenuPath,
+        readonly effectiveMenuPath: MenuPath,
         protected readonly commandRegistry: CommandRegistry,
         protected readonly menuRegistry: MenuModelRegistry,
         protected readonly contextKeyService: ContextKeyService,
         protected readonly contextMenuRenderer: ContextMenuRenderer) {
     }
 
-    protected abstract menuPath?: MenuPath;
-    protected abstract menuNode?: MenuNode;
+    protected abstract menuNode: MenuNode | undefined;
     protected abstract id: string;
     protected abstract icon: string | undefined;
     protected abstract tooltip: string | undefined;
     protected abstract text: string | undefined;
-    protected abstract executeCommand(e: React.MouseEvent<HTMLDivElement, MouseEvent>): void;
+    protected abstract executeCommand(widget: Widget, e: React.MouseEvent<HTMLDivElement, MouseEvent>): void;
 
-    isEnabled(): boolean {
+    isEnabled(widget: Widget): boolean {
         if (CommandMenu.is(this.menuNode)) {
-            return this.menuNode.isEnabled(this.effectiveMenuPath);
+            return this.menuNode.isEnabled(this.effectiveMenuPath, widget);
         }
         return true;
     }
-    isToggled(): boolean {
+    isToggled(widget: Widget): boolean {
         if (CommandMenu.is(this.menuNode) && this.menuNode.isToggled) {
-            return !!this.menuNode.isToggled(this.effectiveMenuPath);
+            return !!this.menuNode.isToggled(this.effectiveMenuPath, widget);
         }
         return false;
     }
@@ -61,9 +60,7 @@ abstract class AbstractToolbarMenuWrapper {
         return this.renderMenuItem(widget);
     }
 
-    toMenuNode?(): MenuNode | undefined {
-        return this.menuNode;
-    }
+    abstract toMenuNode(): MenuNode | undefined;
 
     /**
      * Presents the menu to popup on the `event` that is the clicking of
@@ -78,7 +75,7 @@ abstract class AbstractToolbarMenuWrapper {
         const anchor = toAnchor(event);
 
         this.contextMenuRenderer.render({
-            menuPath: menuPath,
+            menuPath: this.effectiveMenuPath,
             menu: this.menuNode as CompoundMenuNode,
             args: [widget],
             anchor,
@@ -97,56 +94,47 @@ abstract class AbstractToolbarMenuWrapper {
     protected renderMenuItem(widget: Widget): React.ReactNode {
         const icon = this.icon || 'ellipsis';
         const contextMatcher: ContextMatcher = this.contextKeyService;
+        const className = `${icon} ${ACTION_ITEM}`;
         if (CompoundMenuNode.is(this.menuNode) && !this.menuNode.isEmpty(this.effectiveMenuPath, this.contextKeyService, widget.node)) {
-
             return <div key={this.id} className={TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM + ' enabled menu'}>
-                <div className={codicon(icon, true)}
-                    title={this.text}
-                    onClick={e => this.executeCommand(e)}
+                <div className={className}
+                    title={this.tooltip || this.text}
+                    onClick={e => this.executeCommand(widget, e)}
                 />
-                <div className={ACTION_ITEM} onClick={event => this.showPopupMenu(widget, this.menuPath!, event, contextMatcher)} >
+                <div className={ACTION_ITEM} onClick={event => this.showPopupMenu(widget, this.effectiveMenuPath!, event, contextMatcher)} >
                     <div className={codicon('chevron-down') + ' chevron'} />
                 </div>
             </div>;
         } else {
             return <div key={this.id} className={TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM + ' enabled menu'}>
-                <div className={codicon(icon, true)}
-                    title={this.text}
-                    onClick={e => this.executeCommand(e)}
+                <div className={className}
+                    title={this.tooltip || this.text}
+                    onClick={e => this.executeCommand(widget, e)}
                 />
             </div>;
         }
     }
 }
 
-export class ToolbarMenuNodeWrapper extends AbstractToolbarMenuWrapper implements TabBarToolbarItem {
+export class SubmenuAsToolbarItemWrapper extends AbstractToolbarMenuWrapper implements TabBarToolbarItem {
     constructor(
         effectiveMenuPath: MenuPath,
         commandRegistry: CommandRegistry,
         menuRegistry: MenuModelRegistry,
         contextKeyService: ContextKeyService,
         contextMenuRenderer: ContextMenuRenderer,
-        protected readonly menuNode: MenuNode & RenderedMenuNode,
-        readonly group: string | undefined,
-        readonly menuPath?: MenuPath) {
+        protected readonly menuNode: Submenu,
+        readonly group: string | undefined) {
         super(effectiveMenuPath, commandRegistry, menuRegistry, contextKeyService, contextMenuRenderer);
     }
+    priority?: number | undefined;
 
-    executeCommand(e: React.MouseEvent<HTMLDivElement, MouseEvent>): void {
-        if (CommandMenu.is(this.menuNode)) {
-            this.menuNode.run(this.effectiveMenuPath);
-        }
+    executeCommand(widget: Widget, e: React.MouseEvent<HTMLDivElement, MouseEvent>): void {
     }
 
     isVisible(widget: Widget): boolean {
-        const menuNodeVisible = this.menuNode.isVisible(this.effectiveMenuPath, this.contextKeyService, widget.node);
-        if (CommandMenu.is(this.menuNode)) {
-            return menuNodeVisible;
-        } else if (CompoundMenuNode.is(this.menuNode)) {
-            return menuNodeVisible && !MenuModelRegistry.isEmpty(this.menuNode);
-        } else {
-            return menuNodeVisible;
-        }
+        const menuNodeVisible = this.menuNode.isVisible(this.effectiveMenuPath, this.contextKeyService, widget.node, widget);
+        return menuNodeVisible && !MenuModelRegistry.isEmpty(this.menuNode);
     }
 
     get id(): string { return this.menuNode.id + TOOLBAR_WRAPPER_ID_SUFFIX; }
@@ -158,9 +146,48 @@ export class ToolbarMenuNodeWrapper extends AbstractToolbarMenuWrapper implement
     get onDidChange(): Event<void> | undefined {
         return this.menuNode.onDidChange;
     }
+
+    override toMenuNode(): Group | undefined {
+        return new ToolbarItemAsSubmenuWrapper(this.menuNode!, this.effectiveMenuPath);
+    };
 }
 
-export class ToolbarSubmenuWrapper extends AbstractToolbarMenuWrapper implements TabBarToolbarItem {
+export class CommandMenuAsToolbarItemWrapper extends AbstractToolbarMenuWrapper implements TabBarToolbarItem {
+    constructor(
+        effectiveMenuPath: MenuPath,
+        commandRegistry: CommandRegistry,
+        menuRegistry: MenuModelRegistry,
+        contextKeyService: ContextKeyService,
+        contextMenuRenderer: ContextMenuRenderer,
+        protected readonly menuNode: CommandMenu,
+        readonly group: string | undefined) {
+        super(effectiveMenuPath, commandRegistry, menuRegistry, contextKeyService, contextMenuRenderer);
+    }
+
+    isVisible(widget: Widget): boolean {
+        return this.menuNode.isVisible(this.effectiveMenuPath, this.contextKeyService, widget.node, widget);
+    }
+
+    executeCommand(widget: Widget, e: React.MouseEvent<HTMLDivElement, MouseEvent>): void {
+        this.menuNode.run(this.effectiveMenuPath, widget);
+    }
+
+    get id(): string { return this.menuNode.id + TOOLBAR_WRAPPER_ID_SUFFIX; }
+    get icon(): string | undefined { return this.menuNode.icon; }
+    get tooltip(): string | undefined { return this.menuNode.label; }
+    get text(): string | undefined {
+        return (this.group === NAVIGATION || this.group === undefined) ? undefined : this.menuNode.label;
+    }
+    get onDidChange(): Event<void> | undefined {
+        return this.menuNode.onDidChange;
+    }
+
+    override toMenuNode(): MenuNode | undefined {
+        return new ToolbarItemAsCommandMenuWrapper(this.menuNode, this.effectiveMenuPath);
+    }
+}
+
+export class ToolbarActionWrapper extends AbstractToolbarMenuWrapper implements TabBarToolbarItem {
     constructor(
         effectiveMenuPath: MenuPath,
         commandRegistry: CommandRegistry,
@@ -176,7 +203,7 @@ export class ToolbarSubmenuWrapper extends AbstractToolbarMenuWrapper implements
         return this.toolbarItem.command ? this.commandRegistry.isEnabled(this.toolbarItem.command, widget) : !!this.toolbarItem.menuPath;
     }
 
-    protected executeCommand(e: React.MouseEvent<HTMLElement>, widget?: Widget): void {
+    protected executeCommand(widget: Widget, e: React.MouseEvent<HTMLElement>): void {
         e.preventDefault();
         e.stopPropagation();
 
@@ -232,8 +259,80 @@ export class ToolbarSubmenuWrapper extends AbstractToolbarMenuWrapper implements
         return this.toolbarItem.menuPath!;
     }
 
-    get menuNode(): MenuNode | undefined {
+    get menuNode(): CompoundMenuNode | undefined {
         return this.menuRegistry.getMenu(this.menuPath);
     }
+
+    override toMenuNode(): MenuNode | undefined {
+        return new ToolbarItemAsSubmenuWrapper(this.menuNode!, this.effectiveMenuPath);
+    }
 }
 
+/**
+ * This class wraps a menu node, but replaces the effective menu path. Command parameters need to be mapped
+ * for commands contributed by extension and this mapping is keyed by the menu path
+ */
+abstract class AbstractMenuNodeAsToolbarItemWrapper<T extends MenuNode> {
+    constructor(protected readonly menuNode: T, readonly effectiveMenuPath: MenuPath) { }
+
+    get label(): string | undefined {
+        if (RenderedMenuNode.is(this.menuNode)) {
+            return this.menuNode.label;
+        }
+    };
+    /**
+     * Icon classes for the menu node. If present, these will produce an icon to the left of the label in browser-style menus.
+     */
+    get icon(): string | undefined {
+        if (RenderedMenuNode.is(this.menuNode)) {
+            return this.menuNode.label;
+        }
+    }
+    get id(): string {
+        return this.menuNode.id;
+    }
+    get sortString(): string {
+        return this.menuNode.sortString;
+    }
+
+    isVisible<K>(effectiveMenuPath: MenuPath, contextMatcher: ContextExpressionMatcher<K>, context: K | undefined, ...args: unknown[]): boolean {
+        return this.menuNode!.isVisible(this.effectiveMenuPath, contextMatcher, context, args);
+    }
+}
+
+/**
+ * Wrapper form submenu nodes
+ */
+class ToolbarItemAsSubmenuWrapper extends AbstractMenuNodeAsToolbarItemWrapper<CompoundMenuNode> implements Group {
+
+    get contextKeyOverlays(): Record<string, string> | undefined {
+        return this.menuNode.contextKeyOverlays;
+    }
+    isEmpty<T>(effectiveMenuPath: MenuPath, contextMatcher: ContextExpressionMatcher<T>, context: T | undefined, ...args: unknown[]): boolean {
+        return this.menuNode.isEmpty(this.effectiveMenuPath, contextMatcher, context, args);
+    }
+    get children(): MenuNode[] {
+        return this.menuNode.children;
+    }
+
+}
+/**
+ * Wrapper for command menus
+ */
+class ToolbarItemAsCommandMenuWrapper extends AbstractMenuNodeAsToolbarItemWrapper<CommandMenu> implements CommandMenu {
+
+    isEnabled(effectiveMenuPath: MenuPath, ...args: unknown[]): boolean {
+        return this.menuNode.isEnabled(this.effectiveMenuPath, ...args);
+    }
+    isToggled(effectiveMenuPath: MenuPath, ...args: unknown[]): boolean {
+        return this.menuNode.isToggled(this.effectiveMenuPath, ...args);
+    }
+    run(effectiveMenuPath: MenuPath, ...args: unknown[]): Promise<void> {
+        return this.menuNode.run(this.effectiveMenuPath, args);
+    }
+
+    override get label(): string {
+        return super.label!;
+    }
+
+}

package/src/browser/shell/tab-bar-toolbar/tab-bar-toolbar-registry.ts

@@ -22,7 +22,7 @@ import { ContextKeyService } from '../../context-key-service';
 import { FrontendApplicationContribution } from '../../frontend-application-contribution';
 import { Widget } from '../../widgets';
 import { ReactTabBarToolbarAction, RenderedToolbarAction } from './tab-bar-toolbar-types';
-import { ToolbarMenuNodeWrapper, ToolbarSubmenuWrapper } from './tab-bar-toolbar-menu-adapters';
+import { CommandMenuAsToolbarItemWrapper, SubmenuAsToolbarItemWrapper, ToolbarActionWrapper } from './tab-bar-toolbar-menu-adapters';
 import { KeybindingRegistry } from '../../keybinding';
 import { LabelParser } from '../../label-parser';
 import { ContextMenuRenderer } from '../../context-menu-renderer';
@@ -90,7 +90,7 @@ export class TabBarToolbarRegistry implements FrontendApplicationContribution {
             return this.doRegisterItem(new ReactToolbarItemImpl(this.commandRegistry, this.contextKeyService, item));
         } else {
             if (item.menuPath) {
-                return this.doRegisterItem(new ToolbarSubmenuWrapper(item.menuPath,
+                return this.doRegisterItem(new ToolbarActionWrapper(item.menuPath,
                     this.commandRegistry, this.menuRegistry, this.contextKeyService, this.contextMenuRenderer, item));
             } else {
                 const wrapper = new RenderedToolbarItemImpl(this.commandRegistry, this.contextKeyService, this.keybindingRegistry, this.labelParser, item);
@@ -146,13 +146,19 @@ export class TabBarToolbarRegistry implements FrontendApplicationContribution {
                                 for (const grandchild of child.children) {
                                     if (grandchild.isVisible([...delegate.menuPath, child.id, grandchild.id],
                                         this.contextKeyService, widget.node) && RenderedMenuNode.is(grandchild)) {
-                                        result.push(new ToolbarMenuNodeWrapper([...delegate.menuPath, child.id, grandchild.id], this.commandRegistry, this.menuRegistry,
-                                            this.contextKeyService, this.contextMenuRenderer, grandchild, child.id, delegate.menuPath));
+                                        if (CommandMenu.is(grandchild)) {
+                                            result.push(new CommandMenuAsToolbarItemWrapper([...delegate.menuPath, child.id, grandchild.id], this.commandRegistry,
+                                                this.menuRegistry, this.contextKeyService, this.contextMenuRenderer, grandchild, child.id));
+                                        } else if (CompoundMenuNode.is(grandchild)) {
+                                            result.push(new SubmenuAsToolbarItemWrapper([...delegate.menuPath, child.id, grandchild.id], this.commandRegistry, this.menuRegistry,
+                                                this.contextKeyService, this.contextMenuRenderer, grandchild, child.id));
+                                        }
+
                                     }
                                 }
                             } else if (CommandMenu.is(child)) {
-                                result.push(new ToolbarMenuNodeWrapper([...delegate.menuPath, child.id], this.commandRegistry, this.menuRegistry,
-                                    this.contextKeyService, this.contextMenuRenderer, child, undefined, delegate.menuPath));
+                                result.push(new CommandMenuAsToolbarItemWrapper([...delegate.menuPath, child.id], this.commandRegistry, this.menuRegistry,
+                                    this.contextKeyService, this.contextMenuRenderer, child, undefined));
                             }
                         }
                     }

package/src/browser/shell/tab-bar-toolbar/tab-bar-toolbar.tsx

@@ -22,7 +22,7 @@ import { Anchor, ContextMenuAccess, ContextMenuRenderer } from '../../context-me
 import { LabelParser } from '../../label-parser';
 import { codicon, ReactWidget, Widget } from '../../widgets';
 import { TabBarToolbarRegistry } from './tab-bar-toolbar-registry';
-import { TabBarDelegator, TabBarToolbarAction } from './tab-bar-toolbar-types';
+import { TAB_BAR_TOOLBAR_CONTEXT_MENU, TabBarDelegator, TabBarToolbarAction } from './tab-bar-toolbar-types';
 import { KeybindingRegistry } from '../..//keybinding';
 import { TabBarToolbarItem } from './tab-toolbar-item';
 import { GroupImpl, MenuModelRegistry } from '../../../common/menu';
@@ -173,7 +173,7 @@ export class TabBarToolbar extends ReactWidget {
         }
         return this.contextMenuRenderer.render({
             menu: MenuModelRegistry.removeSingleRootNodes(menu),
-            menuPath: ['contextMenu'],
+            menuPath: TAB_BAR_TOOLBAR_CONTEXT_MENU,
             args: [this.current],
             anchor,
             context: this.current?.node || this.node,

package/src/browser/shell/tab-bar-toolbar/tab-toolbar-item.tsx

@@ -28,8 +28,8 @@ import { ActionMenuNode, GroupImpl, MenuNode } from '../../../common/menu';
 export interface TabBarToolbarItem {
     id: string;
     isVisible(widget: Widget): boolean;
-    isEnabled(widget?: Widget): boolean;
-    isToggled(): boolean;
+    isEnabled(widget: Widget): boolean;
+    isToggled(widget: Widget): boolean;
     render(widget?: Widget): React.ReactNode;
     onDidChange?: Event<void>;
     group?: string;

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

@@ -32,7 +32,7 @@ import { BreadcrumbsRenderer, BreadcrumbsRendererFactory } from '../breadcrumbs/
 import { NavigatableWidget } from '../navigatable-types';
 import { Drag } from '@lumino/dragdrop';
 import { LOCKED_CLASS, PINNED_CLASS } from '../widgets/widget';
-import { CorePreferences } from '../core-preferences';
+import { CorePreferences } from '../../common/core-preferences';
 import { HoverService } from '../hover-service';
 import { Root, createRoot } from 'react-dom/client';
 import { SelectComponent } from '../widgets/select-component';

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

@@ -18,7 +18,7 @@ import { find, toArray } from '@lumino/algorithm';
 import { TabBar, Widget, DockPanel, Title } from '@lumino/widgets';
 import { Signal } from '@lumino/signaling';
 import { Disposable, DisposableCollection } from '../../common/disposable';
-import { CorePreferences } from '../core-preferences';
+import { CorePreferences } from '../../common/core-preferences';
 import { Emitter, Event, environment } from '../../common';
 import { ToolbarAwareTabBar } from './tab-bars';
 
@@ -47,6 +47,8 @@ export class TheiaDockPanel extends DockPanel {
     readonly widgetRemoved = new Signal<this, Widget>(this);
 
     protected readonly onDidChangeCurrentEmitter = new Emitter<Title<Widget> | undefined>();
+    protected disableDND: boolean | undefined = false;
+    protected tabWithDNDDisabledStyling?: HTMLElement = undefined;
 
     get onDidChangeCurrent(): Event<Title<Widget> | undefined> {
         return this.onDidChangeCurrentEmitter.event;
@@ -57,6 +59,7 @@ export class TheiaDockPanel extends DockPanel {
         protected readonly maximizeCallback?: (area: TheiaDockPanel) => void
     ) {
         super(options);
+        this.disableDND = TheiaDockPanel.isTheiaDockPanelIOptions(options) && options.disableDragAndDrop;
         this['_onCurrentChanged'] = (sender: TabBar<Widget>, args: TabBar.ICurrentChangedArgs<Widget>) => {
             this.markAsCurrent(args.currentTitle || undefined);
             super['_onCurrentChanged'](sender, args);
@@ -68,12 +71,72 @@ export class TheiaDockPanel extends DockPanel {
             if (tabBar instanceof ToolbarAwareTabBar) {
                 tabBar.setDockPanel(this);
             }
+            if (this.disableDND) {
+                tabBar['tabDetachRequested'].disconnect(this['_onTabDetachRequested'], this);
+                tabBar['tabDetachRequested'].connect(this.onTabDetachRequestedWithDisabledDND, this);
+
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any, no-null/no-null
+                let dragDataValue: any = null;
+                Object.defineProperty(tabBar, '_dragData', {
+                    get: () => dragDataValue,
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    set: (value: any) => {
+                        dragDataValue = value;
+                        // eslint-disable-next-line no-null/no-null
+                        if (value === null) {
+                            this.onNullTabDragDataWithDisabledDND();
+                        }
+                    },
+                    configurable: true
+                });
+            }
             return tabBar;
         };
         this['_onTabActivateRequested'] = (sender: TabBar<Widget>, args: TabBar.ITabActivateRequestedArgs<Widget>) => {
             this.markAsCurrent(args.title);
             super['_onTabActivateRequested'](sender, args);
         };
+        this['_onTabCloseRequested'] = (sender: TabBar<Widget>, args: TabBar.ITabCloseRequestedArgs<Widget>) => {
+            if (TheiaDockPanel.isTheiaDockPanelIOptions(options) && options.closeHandler !== undefined) {
+                if (options.closeHandler(sender, args)) {
+                    return;
+                }
+            }
+            super['_onTabCloseRequested'](sender, args);
+        };
+    }
+
+    protected onTabDetachRequestedWithDisabledDND(sender: TabBar<Widget>, args: TabBar.ITabDetachRequestedArgs<Widget>): void {
+        // don't process the detach request at all. We still want to support other drag starts, e.g. tab reorder
+        // provide visual feedback that DnD is disabled by adding not-allowed class
+        const tab = sender.contentNode.children[args.index] as HTMLElement;
+        if (tab) {
+            tab.classList.add('theia-drag-not-allowed');
+            this.tabWithDNDDisabledStyling = tab;
+        }
+    }
+
+    protected onNullTabDragDataWithDisabledDND(): void {
+        if (this.tabWithDNDDisabledStyling) {
+            this.tabWithDNDDisabledStyling.classList.remove('theia-drag-not-allowed');
+            this.tabWithDNDDisabledStyling = undefined;
+        }
+    }
+
+    override handleEvent(event: globalThis.Event): void {
+        if (this.disableDND) {
+            switch (event.type) {
+                case 'lm-dragenter':
+                case 'lm-dragleave':
+                case 'lm-dragover':
+                case 'lm-drop':
+                    /* no-op */
+                    break;
+                default:
+                    super.handleEvent(event);
+            }
+        }
+        super.handleEvent(event);
     }
 
     toggleMaximized(): void {
@@ -178,11 +241,47 @@ export class TheiaDockPanel extends DockPanel {
         }
         return undefined;
     }
+
+    override dispose(): void {
+        super.dispose();
+        this.onDidChangeCurrentEmitter.dispose();
+        this._currentTitle = undefined;
+        this.toDisposeOnMarkAsCurrent.dispose();
+    }
 }
 export namespace TheiaDockPanel {
     export const Factory = Symbol('TheiaDockPanel#Factory');
     export interface Factory {
-        (options?: DockPanel.IOptions, maximizeCallback?: (area: TheiaDockPanel) => void): TheiaDockPanel;
+        (options?: DockPanel.IOptions | TheiaDockPanel.IOptions, maximizeCallback?: (area: TheiaDockPanel) => void): TheiaDockPanel;
+    }
+
+    export interface IOptions extends DockPanel.IOptions {
+        /** whether drag and drop for tabs should be disabled */
+        disableDragAndDrop?: boolean;
+
+        /**
+         * @param sender the tab bar
+         * @param args the widget (title)
+         * @returns true if the request was handled by this handler, false if the tabbar should handle the request
+         */
+        closeHandler?: (sender: TabBar<Widget>, args: TabBar.ITabCloseRequestedArgs<Widget>) => boolean;
+    }
+
+    export function isTheiaDockPanelIOptions(options: DockPanel.IOptions | undefined): options is IOptions {
+        if (options === undefined) {
+            return false;
+        }
+        if ('disableDragAndDrop' in options) {
+            if (options.disableDragAndDrop !== undefined && typeof options.disableDragAndDrop !== 'boolean') {
+                return false;
+            }
+        }
+        if ('closeHandler' in options) {
+            if (options.closeHandler !== undefined && typeof options.closeHandler !== 'function') {
+                return false;
+            }
+        }
+        return true;
     }
 
     export interface AddOptions extends DockPanel.IAddOptions {

package/src/browser/status-bar/status-bar.tsx

@@ -21,11 +21,12 @@ import { CommandService } from '../../common';
 import { ReactWidget } from '../widgets/react-widget';
 import { FrontendApplicationStateService } from '../frontend-application-state';
 import { LabelParser, LabelIcon } from '../label-parser';
-import { PreferenceService } from '../preferences';
 import { StatusBar, StatusBarEntry, StatusBarAlignment, StatusBarViewEntry } from './status-bar-types';
 import { StatusBarViewModel } from './status-bar-view-model';
 import { HoverService } from '../hover-service';
 import { codicon } from '../widgets';
+import { PreferenceService } from '../../common/preferences';
+import { MarkdownString } from '../../common/markdown-rendering';
 export { StatusBar, StatusBarAlignment, StatusBarEntry };
 
 @injectable()
@@ -122,7 +123,7 @@ export class StatusBarImpl extends ReactWidget implements StatusBar {
             content: entry.tooltip!,
             target: e.currentTarget,
             position: 'top',
-            interactive: entry.tooltip instanceof HTMLElement,
+            interactive: entry.tooltip instanceof HTMLElement || MarkdownString.is(entry.tooltip),
         });
     }
 

package/src/browser/style/dockpanel.css

@@ -84,3 +84,10 @@
 .lm-DockPanel-overlay.lm-mod-root-bottom {
   background: var(--theia-panel-dropBackground);
 }
+
+.lm-TabBar-tab.theia-drag-not-allowed {
+  cursor: not-allowed !important;
+  background-color: var(--theia-errorBackground) !important;
+  opacity: 0.8;
+  transition: background-color 0.3s ease;
+}

package/src/browser/theming.ts

@@ -14,15 +14,16 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { Emitter, Event } from '../common/event';
-import { Disposable } from '../common/disposable';
-import { FrontendApplicationConfigProvider } from './frontend-application-config-provider';
 import { ApplicationProps, DefaultTheme } from '@theia/application-package/lib/application-props';
-import { Theme, ThemeChangeEvent } from '../common/theme';
 import { inject, injectable, postConstruct } from 'inversify';
+import { Disposable } from '../common/disposable';
+import { Emitter, Event } from '../common/event';
+import { PreferenceSchemaService } from '../common/preferences/preference-schema';
 import { Deferred } from '../common/promise-util';
-import { PreferenceSchemaProvider, PreferenceService } from './preferences';
+import { Theme, ThemeChangeEvent } from '../common/theme';
+import { FrontendApplicationConfigProvider } from './frontend-application-config-provider';
 import debounce = require('lodash.debounce');
+import { PreferenceService } from '../common/preferences';
 
 const COLOR_THEME_PREFERENCE_KEY = 'workbench.colorTheme';
 const NO_THEME = { id: 'no-theme', label: 'Not a real theme.', type: 'dark' } as const;
@@ -32,7 +33,7 @@ export class ThemeService {
     static readonly STORAGE_KEY = 'theme';
 
     @inject(PreferenceService) protected readonly preferences: PreferenceService;
-    @inject(PreferenceSchemaProvider) protected readonly schemaProvider: PreferenceSchemaProvider;
+    @inject(PreferenceSchemaService) protected readonly schemaProvider: PreferenceSchemaService;
 
     protected themes: { [id: string]: Theme } = {};
     protected activeTheme: Theme = NO_THEME;

package/src/browser/tooltip-service.tsx

@@ -18,8 +18,8 @@ import { injectable, inject, optional, postConstruct } from 'inversify';
 import * as React from 'react';
 import ReactTooltip from 'react-tooltip';
 import { ReactRenderer, RendererHost } from './widgets/react-renderer';
-import { CorePreferences } from './core-preferences';
 import { generateUuid } from '../common/uuid';
+import { CorePreferences } from '../common/core-preferences';
 
 export const TooltipService = Symbol('TooltipService');
 

package/src/browser/tree/index.ts

@@ -26,4 +26,3 @@ export * from './tree-container';
 export * from './tree-decorator';
 export * from './tree-search';
 export * from './tree-compression';
-export * from './tree-preference';

package/src/browser/tree/tree-widget.tsx

@@ -41,11 +41,11 @@ import { ElementExt } from '@lumino/domutils';
 import { TreeWidgetSelection } from './tree-widget-selection';
 import { MaybePromise } from '../../common/types';
 import { LabelProvider } from '../label-provider';
-import { CorePreferences } from '../core-preferences';
+import { CorePreferences } from '../../common/core-preferences';
 import { TreeFocusService } from './tree-focus-service';
 import { useEffect } from 'react';
-import { PreferenceService, PreferenceChange } from '../preferences';
-import { PREFERENCE_NAME_TREE_INDENT } from './tree-preference';
+import { PREFERENCE_NAME_TREE_INDENT } from '../../common/tree-preference';
+import { PreferenceService, PreferenceChange } from '../../common/preferences';
 
 const debounce = require('lodash.debounce');
 
@@ -306,7 +306,7 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
             }),
             this.preferenceService.onPreferenceChanged((event: PreferenceChange) => {
                 if (event.preferenceName === PREFERENCE_NAME_TREE_INDENT) {
-                    this.treeIndent = event.newValue;
+                    this.treeIndent = event.newValue as number;
                     this.update();
                 }
             })
@@ -1442,9 +1442,10 @@ export class TreeWidget extends ReactWidget implements StatefulWidget {
             if (contextMenuPath) {
                 const { x, y } = event.nativeEvent;
                 const args = this.toContextMenuArgs(node);
+                const target = event.currentTarget;
                 setTimeout(() => this.contextMenuRenderer.render({
                     menuPath: contextMenuPath,
-                    context: event.currentTarget,
+                    context: target,
                     anchor: { x, y },
                     args
                 }), 10);