@theia/core 1.18.0 → 1.19.0

package/src/browser/frontend-application.ts

@@ -25,6 +25,7 @@ import { FrontendApplicationStateService } from './frontend-application-state';
 import { preventNavigation, parseCssTime, animationFrame } from './browser';
 import { CorePreferences } from './core-preferences';
 import { WindowService } from './window/window-service';
+import { TooltipService } from './tooltip-service';
 
 /**
  * Clients can implement to get a callback for contributing widgets to a shell on start.
@@ -100,6 +101,9 @@ export class FrontendApplication {
     @inject(WindowService)
     protected readonly windowsService: WindowService;
 
+    @inject(TooltipService)
+    protected readonly tooltipService: TooltipService;
+
     constructor(
         @inject(CommandRegistry) protected readonly commands: CommandRegistry,
         @inject(MenuModelRegistry) protected readonly menus: MenuModelRegistry,
@@ -130,6 +134,7 @@ export class FrontendApplication {
 
         const host = await this.getHost();
         this.attachShell(host);
+        this.attachTooltip(host);
         await animationFrame();
         this.stateService.state = 'attached_shell';
 
@@ -221,6 +226,13 @@ export class FrontendApplication {
         Widget.attach(this.shell, host, ref);
     }
 
+    /**
+     * Attach the tooltip container to the host element.
+     */
+    protected attachTooltip(host: HTMLElement): void {
+        this.tooltipService.attachTo(host);
+    }
+
     /**
      * If a startup indicator is present, it is first hidden with the `theia-hidden` CSS class and then
      * removed after a while. The delay until removal is taken from the CSS transition duration.
@@ -231,6 +243,7 @@ export class FrontendApplication {
             return new Promise(resolve => {
                 window.requestAnimationFrame(() => {
                     startupElem.classList.add('theia-hidden');
+                    console.log(`Finished loading frontend application after ${(performance.now() / 1000).toFixed(3)} seconds`);
                     const preloadStyle = window.getComputedStyle(startupElem);
                     const transitionDuration = parseCssTime(preloadStyle.transitionDuration, 0);
                     window.setTimeout(() => {

package/src/browser/index.ts

@@ -40,3 +40,4 @@ export * from './diff-uris';
 export * from './core-preferences';
 export * from './view-container';
 export * from './breadcrumbs';
+export * from './tooltip-service';

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

@@ -19,16 +19,18 @@ import { isOSX } from '../../common/os';
 import { CommandContribution, CommandRegistry, Command } from '../../common/command';
 import { BrowserKeyboardLayoutProvider, KeyboardLayoutData } from './browser-keyboard-layout-provider';
 import { QuickPickValue, QuickInputService, QuickPickItem } from '../quick-input';
+import { nls } from '../../common/nls';
 
 export namespace KeyboardCommands {
 
+    const KEYBOARD_CATEGORY_KEY = 'vscode/settingsLayout/keyboard';
     const KEYBOARD_CATEGORY = 'Keyboard';
 
-    export const CHOOSE_KEYBOARD_LAYOUT: Command = {
+    export const CHOOSE_KEYBOARD_LAYOUT = Command.toLocalizedCommand({
         id: 'core.keyboard.choose',
         category: KEYBOARD_CATEGORY,
         label: 'Choose Keyboard Layout',
-    };
+    }, 'theia/core/keyboard/choose', KEYBOARD_CATEGORY_KEY);
 
 }
 
@@ -50,9 +52,9 @@ export class BrowserKeyboardFrontendContribution implements CommandContribution
     protected async chooseLayout(): Promise<KeyboardLayoutData | undefined> {
         const current = this.layoutProvider.currentLayoutData;
         const autodetect: QuickPickValue<'autodetect'> = {
-            label: 'Auto-detect',
-            description: this.layoutProvider.currentLayoutSource !== 'user-choice' ? `(current: ${current.name})` : undefined,
-            detail: 'Try to detect the keyboard layout from browser information and pressed keys.',
+            label: nls.localize('vscode/editorStatus/autoDetect', 'Auto-detect'),
+            description: this.layoutProvider.currentLayoutSource !== 'user-choice' ? nls.localize('theia/core/keyboard/current', '(current: {0})', current.name) : undefined,
+            detail: nls.localize('theia/core/keyboard/tryDetect', 'Try to detect the keyboard layout from browser information and pressed keys.'),
             value: 'autodetect'
         };
         const pcLayouts = this.layoutProvider.allLayoutData
@@ -64,20 +66,22 @@ export class BrowserKeyboardFrontendContribution implements CommandContribution
             .sort((a, b) => compare(a.name, b.name))
             .map(layout => this.toQuickPickValue(layout, current === layout));
         let layouts: Array<QuickPickValue<KeyboardLayoutData | 'autodetect'> | QuickPickItem>;
+        const macKeyboards = nls.localize('theia/core/keyboard/mac', 'Mac Keyboards');
+        const pcKeyboards = nls.localize('theia/core/keyboard/pc', 'PC Keyboards');
         if (isOSX) {
             layouts = [
                 autodetect,
-                { type: 'separator', label: 'Mac Keyboards' }, ...macLayouts,
-                { type: 'separator', label: 'PC Keyboards' }, ...pcLayouts
+                { type: 'separator', label: macKeyboards }, ...macLayouts,
+                { type: 'separator', label: pcKeyboards }, ...pcLayouts
             ];
         } else {
             layouts = [
                 autodetect,
-                { type: 'separator', label: 'PC Keyboards' }, ...pcLayouts,
-                { type: 'separator', label: 'Mac Keyboards' }, ...macLayouts
+                { type: 'separator', label: pcKeyboards }, ...pcLayouts,
+                { type: 'separator', label: macKeyboards }, ...macLayouts
             ];
         }
-        const selectedItem = await this.quickInputService?.showQuickPick(layouts, { placeholder: 'Choose a keyboard layout' });
+        const selectedItem = await this.quickInputService?.showQuickPick(layouts, { placeholder: nls.localize('theia/core/keyboard/chooseLayout', 'Choose a keyboard layout') });
         if (selectedItem && ('value' in selectedItem)) {
             return this.layoutProvider.setLayoutData(selectedItem.value);
         }
@@ -86,7 +90,8 @@ export class BrowserKeyboardFrontendContribution implements CommandContribution
     protected toQuickPickValue(layout: KeyboardLayoutData, isCurrent: boolean): QuickPickValue<KeyboardLayoutData> {
         return {
             label: layout.name,
-            description: `${layout.hardware === 'mac' ? 'Mac' : 'PC'} (${layout.language})${isCurrent ? ' - current layout' : ''}`,
+            description:
+                `${layout.hardware === 'mac' ? 'Mac' : 'PC'} (${layout.language})${isCurrent ? nls.localize('theia/core/keyboard/currentLayout', ' - current layout') : ''}`,
             value: layout
         };
     }

package/src/browser/menu/browser-context-menu-renderer.ts

@@ -36,7 +36,7 @@ export class BrowserContextMenuRenderer extends ContextMenuRenderer {
         super();
     }
 
-    protected doRender({ menuPath, anchor, args, onHide }: RenderContextMenuOptions): BrowserContextMenuAccess {
+    protected doRender({ menuPath, anchor, args, onHide }: RenderContextMenuOptions): ContextMenuAccess {
         const contextMenu = this.menuFactory.createContextMenu(menuPath, args);
         const { x, y } = coordinateFromAnchor(anchor);
         if (onHide) {

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

@@ -18,7 +18,7 @@ import { injectable, inject } from 'inversify';
 import { MenuBar, Menu as MenuWidget, Widget } from '@phosphor/widgets';
 import { CommandRegistry as PhosphorCommandRegistry } from '@phosphor/commands';
 import {
-    CommandRegistry, ActionMenuNode, CompositeMenuNode,
+    CommandRegistry, ActionMenuNode, CompositeMenuNode, environment,
     MenuModelRegistry, MAIN_MENU_BAR, MenuPath, DisposableCollection, Disposable, MenuNode
 } from '../../common';
 import { KeybindingRegistry } from '../keybinding';
@@ -28,6 +28,7 @@ import { ContextMenuContext } from './context-menu-context';
 import { waitForRevealed } from '../widgets';
 import { ApplicationShell } from '../shell';
 import { CorePreferences } from '../core-preferences';
+import { PreferenceService } from '../preferences/preference-service';
 
 export abstract class MenuBarWidget extends MenuBar {
     abstract activateMenu(label: string, ...labels: string[]): Promise<MenuWidget>;
@@ -371,21 +372,40 @@ export class BrowserMenuBarContribution implements FrontendApplicationContributi
     @inject(ApplicationShell)
     protected readonly shell: ApplicationShell;
 
+    @inject(PreferenceService)
+    protected readonly preferenceService: PreferenceService;
+
     constructor(
         @inject(BrowserMainMenuFactory) protected readonly factory: BrowserMainMenuFactory
     ) { }
 
     onStart(app: FrontendApplication): void {
-        const logo = this.createLogo();
-        app.shell.addWidget(logo, { area: 'top' });
-        const menu = this.factory.createMenuBar();
-        app.shell.addWidget(menu, { area: 'top' });
+        this.appendMenu(app.shell);
     }
 
     get menuBar(): MenuBarWidget | undefined {
         return this.shell.topPanel.widgets.find(w => w instanceof MenuBarWidget) as MenuBarWidget | undefined;
     }
 
+    protected appendMenu(shell: ApplicationShell): void {
+        const logo = this.createLogo();
+        shell.addWidget(logo, { area: 'top' });
+        const menu = this.factory.createMenuBar();
+        shell.addWidget(menu, { area: 'top' });
+        // Hiding the menu is only necessary in electron
+        // In the browser we hide the whole top panel
+        if (environment.electron.is()) {
+            this.preferenceService.ready.then(() => {
+                menu.setHidden(['compact', 'hidden'].includes(this.preferenceService.get('window.menuBarVisibility', '')));
+            });
+            this.preferenceService.onPreferenceChanged(change => {
+                if (change.preferenceName === 'window.menuBarVisibility') {
+                    menu.setHidden(['compact', 'hidden'].includes(change.newValue));
+                }
+            });
+        }
+    }
+
     protected createLogo(): Widget {
         const logo = new Widget();
         logo.id = 'theia:icon';

package/src/browser/nls-loader.ts

@@ -0,0 +1,26 @@
+/********************************************************************************
+ * Copyright (C) 2021 TypeFox and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { nls } from '../common/nls';
+import { Endpoint } from './endpoint';
+
+export async function loadTranslations(): Promise<void> {
+    if (nls.locale) {
+        const endpoint = new Endpoint({ path: '/i18n/' + nls.locale }).getRestUrl().toString();
+        const response = await fetch(endpoint);
+        nls.localization = await response.json();
+    }
+}

package/src/browser/progress-status-bar-item.ts

@@ -16,8 +16,7 @@
 
 import { injectable, inject } from 'inversify';
 import { CancellationToken } from 'vscode-ws-jsonrpc';
-import { ProgressClient } from '../common';
-import { ProgressMessage, ProgressUpdate } from '../common';
+import { ProgressClient, ProgressMessage, ProgressUpdate } from '../common';
 import { StatusBar, StatusBarAlignment } from './status-bar';
 import { Deferred } from '../common/promise-util';
 import throttle = require('lodash.throttle');

package/src/browser/quick-input/quick-command-frontend-contribution.ts

@@ -14,7 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 import { injectable, inject, optional } from 'inversify';
-import { CommandRegistry, CommandContribution, MenuContribution, MenuModelRegistry } from '../../common';
+import { CommandRegistry, CommandContribution, MenuContribution, MenuModelRegistry, nls } from '../../common';
 import { KeybindingRegistry, KeybindingContribution } from '../keybinding';
 import { CommonMenus } from '../common-frontend-contribution';
 import { CLEAR_COMMAND_HISTORY, quickCommand, QuickCommandService } from './quick-command-service';
@@ -43,7 +43,7 @@ export class QuickCommandFrontendContribution implements CommandContribution, Ke
     registerMenus(menus: MenuModelRegistry): void {
         menus.registerMenuAction(CommonMenus.VIEW_PRIMARY, {
             commandId: quickCommand.id,
-            label: 'Find Command...'
+            label: nls.localize('vscode/quickAccess.contribution/commandsQuickAccess', 'Find Command...')
         });
     }
 

package/src/browser/quick-input/quick-command-service.ts

@@ -28,10 +28,10 @@ export const quickCommand: Command = {
     id: 'workbench.action.showCommands'
 };
 
-export const CLEAR_COMMAND_HISTORY: Command = {
+export const CLEAR_COMMAND_HISTORY = Command.toLocalizedCommand({
     id: 'clear.command.history',
     label: 'Clear Command History'
-};
+}, 'vscode/commandsQuickAccess/clearCommandHistory');
 
 @injectable()
 export class QuickCommandService implements QuickAccessContribution, QuickAccessProvider {

package/src/browser/quick-input/quick-view-service.ts

@@ -18,8 +18,7 @@ import { inject, injectable } from 'inversify';
 import { filterItems, QuickPickItem, QuickPicks } from '..';
 import { CancellationToken, Disposable } from '../../common';
 import { ContextKeyService } from '../context-key-service';
-import { QuickAccessProvider, QuickAccessRegistry } from './quick-access';
-import { QuickAccessContribution } from './quick-access';
+import { QuickAccessContribution, QuickAccessProvider, QuickAccessRegistry } from './quick-access';
 
 export interface QuickViewItem {
     readonly label: string;

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

@@ -23,7 +23,7 @@ import {
 } from '@phosphor/widgets';
 import { Message } from '@phosphor/messaging';
 import { IDragEvent } from '@phosphor/dragdrop';
-import { RecursivePartial, Event as CommonEvent, DisposableCollection, Disposable } from '../../common';
+import { RecursivePartial, Event as CommonEvent, DisposableCollection, Disposable, environment } from '../../common';
 import { animationFrame } from '../browser';
 import { Saveable, SaveableWidget, SaveOptions } from '../saveable';
 import { StatusBarImpl, StatusBarEntry, StatusBarAlignment } from '../status-bar/status-bar';
@@ -37,7 +37,6 @@ import { ContextKeyService } from '../context-key-service';
 import { Emitter } from '../../common/event';
 import { waitForRevealed, waitForClosed } from '../widgets';
 import { CorePreferences } from '../core-preferences';
-import { environment } from '../../common';
 import { BreadcrumbsRendererFactory } from '../breadcrumbs/breadcrumbs-renderer';
 
 /** The class name added to ApplicationShell instances. */
@@ -59,7 +58,9 @@ export type ApplicationShellLayoutVersion =
     /** git history view is replaced by a more generic scm history view, backward compatible to 3.0 */
     4.0 |
     /** Replace custom/font-awesome icons with codicons */
-    5.0;
+    5.0 |
+    /** added the ability to drag and drop view parts between view containers */
+    6.0;
 
 /**
  * When a version is increased, make sure to introduce a migration (ApplicationShellLayoutMigration) to this version.

package/src/browser/shell/shell-layout-restorer.ts

@@ -25,6 +25,7 @@ import { ThemeService } from '../theming';
 import { ContributionProvider } from '../../common/contribution-provider';
 import { MaybePromise } from '../../common/types';
 import { ApplicationShell, applicationShellLayoutVersion, ApplicationShellLayoutVersion } from './application-shell';
+import { CommonCommands } from '../common-frontend-contribution';
 
 /**
  * A contract for widgets that want to store and restore their inner state, between sessions.
@@ -109,11 +110,11 @@ export interface ApplicationShellLayoutMigration {
     onWillInflateWidget?(desc: WidgetDescription, context: ApplicationShellLayoutMigrationContext): MaybePromise<WidgetDescription | undefined>;
 }
 
-export const RESET_LAYOUT: Command = {
+export const RESET_LAYOUT = Command.toLocalizedCommand({
     id: 'reset.layout',
-    category: 'View',
+    category: CommonCommands.VIEW_CATEGORY,
     label: 'Reset Workbench Layout'
-};
+}, 'theia/core/resetWorkbenchLayout', CommonCommands.VIEW_CATEGORY_KEY);
 
 @injectable()
 export class ShellLayoutRestorer implements CommandContribution {

package/src/browser/shell/tab-bar-decorator.ts

@@ -57,7 +57,7 @@ export class TabBarDecoratorService implements FrontendApplicationContribution {
         this.contributions.getContributions().map(decorator => decorator.onDidChangeDecorations(this.fireDidChangeDecorations));
     }
 
-    protected fireDidChangeDecorations = debounce(() => this.onDidChangeDecorationsEmitter.fire(undefined), 150);
+    fireDidChangeDecorations = debounce(() => this.onDidChangeDecorationsEmitter.fire(undefined), 150);
 
     /**
      * Assign tabs the decorators provided by all the contributions.

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

@@ -27,6 +27,7 @@ import { ContextKeyService } from '../context-key-service';
 import { Event, Emitter } from '../../common/event';
 import { ContextMenuRenderer, Anchor } from '../context-menu-renderer';
 import { MenuModelRegistry } from '../../common/menu';
+import { nls } from '../../common/nls';
 
 /**
  * Clients should implement this interface if they want to contribute to the tab-bar toolbar.
@@ -403,7 +404,8 @@ export class TabBarToolbar extends ReactWidget {
 
     protected renderMore(): React.ReactNode {
         return !!this.more.size && <div key='__more__' className={TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM + ' enabled'}>
-            <div id='__more__' className={codicon('ellipsis', true)} onClick={this.showMoreContextMenu} title='More Actions...' />
+            <div id='__more__' className={codicon('ellipsis', true)} onClick={this.showMoreContextMenu}
+                title={nls.localize('vscode/compositePart/viewsAndMoreActions', 'More Actions...')} />
         </div>;
     }
 

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

@@ -30,6 +30,7 @@ import { TabBarDecoratorService } from './tab-bar-decorator';
 import { IconThemeService } from '../icon-theme-service';
 import { BreadcrumbsRenderer, BreadcrumbsRendererFactory } from '../breadcrumbs/breadcrumbs-renderer';
 import { NavigatableWidget } from '../navigatable-types';
+import { IDragEvent } from '@phosphor/dragdrop';
 
 /** The class name added to hidden content nodes, which are required to render vertical side bars. */
 const HIDDEN_CONTENT_CLASS = 'theia-TabBar-hidden-content';
@@ -229,11 +230,11 @@ export class TabBarRenderer extends TabBar.Renderer {
     }
 
     renderBadge(data: SideBarRenderData, isInSidePanel?: boolean): VirtualElement {
-        const badge: number | undefined = this.getDecorationData(data.title, 'badge')[0];
-        if (!badge) {
+        const totalBadge = this.getDecorationData(data.title, 'badge').reduce((sum, badge) => sum! + badge!, 0);
+        if (!totalBadge) {
             return h.div({});
         }
-        const limitedBadge = badge >= 100 ? '99+' : badge;
+        const limitedBadge = totalBadge >= 100 ? '99+' : totalBadge;
         return isInSidePanel
             ? h.div({ className: 'theia-badge-decorator-sidebar' }, `${limitedBadge}`)
             : h.div({ className: 'theia-badge-decorator-horizontal' }, `${limitedBadge}`);
@@ -279,7 +280,6 @@ export class TabBarRenderer extends TabBar.Renderer {
      */
     protected getDecorationData<K extends keyof WidgetDecoration.Data>(title: Title<Widget>, key: K): WidgetDecoration.Data[K][] {
         return this.getDecorations(title).filter(data => data[key] !== undefined).map(data => data[key]);
-
     }
 
     /**
@@ -383,8 +383,8 @@ export class TabBarRenderer extends TabBar.Renderer {
      * @param {SideBarRenderData} data Data used to render the tab icon.
      * @param {boolean} isInSidePanel An optional check which determines if the tab is in the side-panel.
      */
-    renderIcon(data: SideBarRenderData, inSidePanel?: boolean): VirtualElement {
-        if (!inSidePanel && this.iconThemeService && this.iconThemeService.current === 'none') {
+    renderIcon(data: SideBarRenderData, isInSidePanel?: boolean): VirtualElement {
+        if (!isInSidePanel && this.iconThemeService && this.iconThemeService.current === 'none') {
             return h.div();
         }
         let top: string | undefined;
@@ -401,13 +401,13 @@ export class TabBarRenderer extends TabBar.Renderer {
         if (decorationData.length > 0) {
             const baseIcon: VirtualElement = h.div({ className: baseClassName, style }, data.title.iconLabel);
             const wrapperClassName: string = WidgetDecoration.Styles.ICON_WRAPPER_CLASS;
-            const decoratorSizeClassName: string = inSidePanel ? WidgetDecoration.Styles.DECORATOR_SIDEBAR_SIZE_CLASS : WidgetDecoration.Styles.DECORATOR_SIZE_CLASS;
+            const decoratorSizeClassName: string = isInSidePanel ? WidgetDecoration.Styles.DECORATOR_SIDEBAR_SIZE_CLASS : WidgetDecoration.Styles.DECORATOR_SIZE_CLASS;
 
             decorationData
                 .filter(notEmpty)
                 .map(overlay => [overlay.position, overlay] as [WidgetDecoration.IconOverlayPosition, WidgetDecoration.IconOverlay | WidgetDecoration.IconClassOverlay])
                 .forEach(([position, overlay]) => {
-                    const iconAdditionalClasses: string[] = [decoratorSizeClassName, WidgetDecoration.IconOverlayPosition.getStyle(position, inSidePanel)];
+                    const iconAdditionalClasses: string[] = [decoratorSizeClassName, WidgetDecoration.IconOverlayPosition.getStyle(position, isInSidePanel)];
                     const overlayIconStyle = (color?: string) => {
                         if (color === undefined) {
                             return {};
@@ -772,6 +772,18 @@ export class SideTabBar extends ScrollableTabBar {
     protected onAfterAttach(msg: Message): void {
         super.onAfterAttach(msg);
         this.renderTabBar();
+        this.node.addEventListener('p-dragenter', this);
+        this.node.addEventListener('p-dragover', this);
+        this.node.addEventListener('p-dragleave', this);
+        document.addEventListener('p-drop', this);
+    }
+
+    protected onAfterDetach(msg: Message): void {
+        super.onAfterDetach(msg);
+        this.node.removeEventListener('p-dragenter', this);
+        this.node.removeEventListener('p-dragover', this);
+        this.node.removeEventListener('p-dragleave', this);
+        document.removeEventListener('p-drop', this);
     }
 
     protected onUpdateRequest(msg: Message): void {
@@ -869,6 +881,15 @@ export class SideTabBar extends ScrollableTabBar {
                 this.onMouseMove(event as MouseEvent);
                 super.handleEvent(event);
                 break;
+            case 'p-dragenter':
+                this.onDragEnter(event as IDragEvent);
+                break;
+            case 'p-dragover':
+                this.onDragOver(event as IDragEvent);
+                break;
+            case 'p-dragleave': case 'p-drop':
+                this.cancelViewContainerDND();
+                break;
             default:
                 super.handleEvent(event);
         }
@@ -934,4 +955,78 @@ export class SideTabBar extends ScrollableTabBar {
         }
     }
 
+    toCancelViewContainerDND = new DisposableCollection();
+    protected cancelViewContainerDND = () => {
+        this.toCancelViewContainerDND.dispose();
+    };
+
+    /**
+     * Handles `viewContainerPart` drag enter.
+     */
+    protected onDragEnter = (event: IDragEvent) => {
+        this.cancelViewContainerDND();
+        if (event.mimeData.getData('application/vnd.phosphor.view-container-factory')) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    };
+
+    /**
+     * Handle `viewContainerPart` drag over,
+     * Defines the appropriate `drpAction` and opens the tab on which the mouse stands on for more than 800 ms.
+     */
+    protected onDragOver = (event: IDragEvent) => {
+        const factory = event.mimeData.getData('application/vnd.phosphor.view-container-factory');
+        const widget = factory && factory();
+        if (!widget) {
+            event.dropAction = 'none';
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.toCancelViewContainerDND.disposed) {
+            event.dropAction = event.proposedAction;
+            return;
+        }
+
+        const { target, clientX, clientY } = event;
+        if (target instanceof HTMLElement) {
+            if (widget.options.disableDraggingToOtherContainers || widget.viewContainer.disableDNDBetweenContainers) {
+                event.dropAction = 'none';
+                target.classList.add('theia-cursor-no-drop');
+                this.toCancelViewContainerDND.push(Disposable.create(() => {
+                    target.classList.remove('theia-cursor-no-drop');
+                }));
+            } else {
+                event.dropAction = event.proposedAction;
+            }
+            const { top, bottom, left, right, height } = target.getBoundingClientRect();
+            const mouseOnTop = (clientY - top) < (height / 2);
+            const dropTargetClass = `drop-target-${mouseOnTop ? 'top' : 'bottom'}`;
+            const tabs = this.contentNode.children;
+            const targetTab = ArrayExt.findFirstValue(tabs, t => ElementExt.hitTest(t, clientX, clientY));
+            if (!targetTab) {
+                return;
+            }
+            targetTab.classList.add(dropTargetClass);
+            this.toCancelViewContainerDND.push(Disposable.create(() => {
+                if (targetTab) {
+                    targetTab.classList.remove(dropTargetClass);
+                }
+            }));
+            const openTabTimer = setTimeout(() => {
+                const title = this.titles.find(t => (this.renderer as TabBarRenderer).createTabId(t) === targetTab.id);
+                if (title) {
+                    const mouseStillOnTab = clientX >= left && clientX <= right && clientY >= top && clientY <= bottom;
+                    if (mouseStillOnTab) {
+                        this.currentTitle = title;
+                    }
+                }
+            }, 800);
+            this.toCancelViewContainerDND.push(Disposable.create(() => {
+                clearTimeout(openTabTimer);
+            }));
+        }
+    };
+
 }

package/src/browser/style/index.css

@@ -235,6 +235,10 @@ button.secondary[disabled], .theia-button.secondary[disabled] {
     z-index: 999;
 }
 
+.theia-cursor-no-drop, .theia-cursor-no-drop:active {
+  cursor: no-drop;
+}
+
 /*-----------------------------------------------------------------------------
 | Import children style files
 |----------------------------------------------------------------------------*/
@@ -259,3 +263,4 @@ button.secondary[disabled], .theia-button.secondary[disabled] {
 @import './quick-title-bar.css';
 @import './progress-bar.css';
 @import './breadcrumbs.css';
+@import './tooltip.css';

package/src/browser/style/sidepanel.css

@@ -128,6 +128,11 @@
   -webkit-mask-position: 50% 50%;
 }
 
+/* inactive legacy/plugin icons */
+.p-TabBar.theia-app-sides .p-TabBar-tabIcon:not(.codicon) {
+  background: var(--theia-activityBar-inactiveForeground);
+}
+
 /* inactive file icons */
 .p-TabBar.theia-app-sides .file-icon.p-TabBar-tabIcon {
   background: inherit !important;
@@ -144,8 +149,9 @@
   color: var(--theia-activityBar-foreground);
 }
 
-.p-TabBar.theia-app-sides .p-TabBar-tabIcon.theia-plugin-view-container:hover,
-.p-TabBar.theia-app-sides .p-mod-current .p-TabBar-tabIcon.theia-plugin-view-container {
+/* active legacy/plugin icons */
+.p-TabBar.theia-app-sides .p-TabBar-tabIcon:not(.codicon):hover,
+.p-TabBar.theia-app-sides .p-mod-current .p-TabBar-tabIcon:not(.codicon) {
   background-color: var(--theia-activityBar-foreground);
 }
 

package/src/browser/style/tabs.css

@@ -10,6 +10,7 @@
   --theia-tabbar-toolbar-z-index: 1001;
   --theia-toolbar-active-transform-scale: 1.272019649;
   --theia-horizontal-toolbar-height: calc(var(--theia-private-horizontal-tab-height) + var(--theia-private-horizontal-tab-scrollbar-rail-height) / 2);
+  --theia-dragover-tab-border-width: 2px;
 }
 
 /*-----------------------------------------------------------------------------
@@ -39,6 +40,19 @@
   align-items: center;
 }
 
+.p-TabBar[data-orientation='vertical'] .p-TabBar-tab {
+  border-top: var(--theia-dragover-tab-border-width) solid transparent !important;
+  border-bottom: var(--theia-dragover-tab-border-width) solid transparent !important;
+}
+
+.p-TabBar[data-orientation='vertical'] .p-TabBar-tab.drop-target-top {
+  border-top-color: var(--theia-activityBar-activeBorder) !important;
+}
+
+.p-TabBar[data-orientation='vertical'] .p-TabBar-tab.drop-target-bottom {
+  border-bottom-color: var(--theia-activityBar-activeBorder) !important;
+}
+
 .p-TabBar[data-orientation='horizontal'] .p-TabBar-tab .theia-tab-icon-label,
 .p-TabBar-tab.p-mod-drag-image .theia-tab-icon-label  {
     display: flex;
@@ -185,11 +199,13 @@ body.theia-editor-highlightModifiedTabs
     background-repeat: no-repeat;
 }
 
+/* common icons */
 .p-TabBar.theia-app-centers .p-TabBar-tabIcon,
 .p-TabBar-tab.p-mod-drag-image .p-TabBar-tabIcon {
     min-height: 14px;
     background-size: 13px;
     background-position-y: 3px;
+    background: var(--theia-icon-foreground);
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-size: auto 13px;
     mask-repeat: no-repeat;
@@ -197,6 +213,20 @@ body.theia-editor-highlightModifiedTabs
     padding-right: 8px;
 }
 
+/* codicons */
+.p-TabBar.theia-app-centers .p-TabBar-tabIcon.codicon,
+.p-TabBar-tab.p-mod-drag-image .p-TabBar-tabIcon.codicon {
+    background: none;
+}
+
+/* file icons */
+.p-TabBar[data-orientation='horizontal'] .p-TabBar-tabIcon.file-icon,
+.p-TabBar-tab.p-mod-drag-image .p-TabBar-tabIcon.file-icon {
+    background: none;
+    padding-bottom: 0px;
+    min-height: 20px;
+}
+
 .p-TabBar[data-orientation='horizontal'] .p-TabBar-tabIcon.fa,
 .p-TabBar-tab.p-mod-drag-image .p-TabBar-tabIcon.fa {
     background: none;