@theia/plugin-ext 1.49.1 → 1.50.0

package/src/main/browser/custom-editors/custom-editors-main.ts

@@ -25,7 +25,7 @@ import { RPCProtocol } from '../../../common/rpc-protocol';
 import { HostedPluginSupport } from '../../../hosted/browser/hosted-plugin';
 import { PluginCustomEditorRegistry } from './plugin-custom-editor-registry';
 import { CustomEditorWidget } from './custom-editor-widget';
-import { Emitter, UNTITLED_SCHEME } from '@theia/core';
+import { Emitter } from '@theia/core';
 import { UriComponents } from '../../../common/uri-components';
 import { URI } from '@theia/core/shared/vscode-uri';
 import TheiaURI from '@theia/core/lib/common/uri';
@@ -139,14 +139,14 @@ export class CustomEditorsMainImpl implements CustomEditorsMain, Disposable {
                     widget.onMove(async (newResource: TheiaURI) => {
                         const oldModel = modelRef;
                         modelRef = await this.getOrCreateCustomEditorModel(modelType, newResource, viewType, onMoveCancelTokenSource.token);
-                        this.proxy.$onMoveCustomEditor(identifier.id, URI.file(newResource.path.toString()), viewType);
+                        this.proxy.$onMoveCustomEditor(identifier.id, newResource.toComponents(), viewType);
                         oldModel.dispose();
                     });
                 }
 
                 const _cancellationSource = new CancellationTokenSource();
                 await this.proxy.$resolveWebviewEditor(
-                    URI.file(resource.path.toString()),
+                    resource.toComponents(),
                     identifier.id,
                     viewType,
                     this.labelProvider.getName(resource)!,
@@ -189,7 +189,7 @@ export class CustomEditorsMainImpl implements CustomEditorsMain, Disposable {
                 return this.customEditorService.models.add(resource, viewType, model);
             }
             case CustomEditorModelType.Custom: {
-                const model = MainCustomEditorModel.create(this.proxy, viewType, resource, this.undoRedoService, this.fileService, this.editorPreferences, cancellationToken);
+                const model = MainCustomEditorModel.create(this.proxy, viewType, resource, this.undoRedoService, this.fileService, cancellationToken);
                 return this.customEditorService.models.add(resource, viewType, model);
             }
         }
@@ -297,8 +297,8 @@ export class MainCustomEditorModel implements CustomEditorModel {
     private readonly onDirtyChangedEmitter = new Emitter<void>();
     readonly onDirtyChanged = this.onDirtyChangedEmitter.event;
 
-    autoSave: 'off' | 'afterDelay' | 'onFocusChange' | 'onWindowChange';
-    autoSaveDelay: number;
+    private readonly onContentChangedEmitter = new Emitter<void>();
+    readonly onContentChanged = this.onContentChangedEmitter.event;
 
     static async create(
         proxy: CustomEditorsExt,
@@ -306,11 +306,10 @@ export class MainCustomEditorModel implements CustomEditorModel {
         resource: TheiaURI,
         undoRedoService: UndoRedoService,
         fileService: FileService,
-        editorPreferences: EditorPreferences,
         cancellation: CancellationToken,
     ): Promise<MainCustomEditorModel> {
-        const { editable } = await proxy.$createCustomDocument(URI.file(resource.path.toString()), viewType, {}, cancellation);
-        return new MainCustomEditorModel(proxy, viewType, resource, editable, undoRedoService, fileService, editorPreferences);
+        const { editable } = await proxy.$createCustomDocument(resource.toComponents(), viewType, {}, cancellation);
+        return new MainCustomEditorModel(proxy, viewType, resource, editable, undoRedoService, fileService);
     }
 
     constructor(
@@ -319,27 +318,13 @@ export class MainCustomEditorModel implements CustomEditorModel {
         private readonly editorResource: TheiaURI,
         private readonly editable: boolean,
         private readonly undoRedoService: UndoRedoService,
-        private readonly fileService: FileService,
-        private readonly editorPreferences: EditorPreferences
+        private readonly fileService: FileService
     ) {
-        this.autoSave = this.editorPreferences.get('files.autoSave', undefined, editorResource.toString());
-        this.autoSaveDelay = this.editorPreferences.get('files.autoSaveDelay', undefined, editorResource.toString());
-
-        this.toDispose.push(
-            this.editorPreferences.onPreferenceChanged(event => {
-                if (event.preferenceName === 'files.autoSave') {
-                    this.autoSave = this.editorPreferences.get('files.autoSave', undefined, editorResource.toString());
-                }
-                if (event.preferenceName === 'files.autoSaveDelay') {
-                    this.autoSaveDelay = this.editorPreferences.get('files.autoSaveDelay', undefined, editorResource.toString());
-                }
-            })
-        );
         this.toDispose.push(this.onDirtyChangedEmitter);
     }
 
     get resource(): URI {
-        return URI.file(this.editorResource.path.toString());
+        return URI.from(this.editorResource.toComponents());
     }
 
     get dirty(): boolean {
@@ -441,7 +426,7 @@ export class MainCustomEditorModel implements CustomEditorModel {
     async saveCustomEditorAs(resource: TheiaURI, targetResource: TheiaURI, options?: SaveOptions): Promise<void> {
         if (this.editable) {
             const source = new CancellationTokenSource();
-            await this.proxy.$onSaveAs(this.resource, this.viewType, URI.file(targetResource.path.toString()), source.token);
+            await this.proxy.$onSaveAs(this.resource, this.viewType, targetResource.toComponents(), source.token);
             this.change(() => {
                 this.savePoint = this.currentEditIndex;
             });
@@ -505,13 +490,7 @@ export class MainCustomEditorModel implements CustomEditorModel {
         if (this.dirty !== wasDirty) {
             this.onDirtyChangedEmitter.fire();
         }
-
-        if (this.autoSave !== 'off' && this.dirty && this.resource.scheme !== UNTITLED_SCHEME) {
-            const handle = window.setTimeout(() => {
-                this.save();
-                window.clearTimeout(handle);
-            }, this.autoSaveDelay);
-        }
+        this.onContentChangedEmitter.fire();
     }
 
 }
@@ -521,6 +500,8 @@ export class CustomTextEditorModel implements CustomEditorModel {
     private readonly toDispose = new DisposableCollection();
     private readonly onDirtyChangedEmitter = new Emitter<void>();
     readonly onDirtyChanged = this.onDirtyChangedEmitter.event;
+    private readonly onContentChangedEmitter = new Emitter<void>();
+    readonly onContentChanged = this.onContentChangedEmitter.event;
 
     static async create(
         viewType: string,
@@ -544,15 +525,13 @@ export class CustomTextEditorModel implements CustomEditorModel {
                 this.onDirtyChangedEmitter.fire();
             })
         );
+        this.toDispose.push(
+            this.editorTextModel.onContentChanged(e => {
+                this.onContentChangedEmitter.fire();
+            })
+        );
         this.toDispose.push(this.onDirtyChangedEmitter);
-    }
-
-    get autoSave(): 'off' | 'afterDelay' | 'onFocusChange' | 'onWindowChange' {
-        return this.editorTextModel.autoSave;
-    }
-
-    get autoSaveDelay(): number {
-        return this.editorTextModel.autoSaveDelay;
+        this.toDispose.push(this.onContentChangedEmitter);
     }
 
     dispose(): void {
@@ -561,7 +540,7 @@ export class CustomTextEditorModel implements CustomEditorModel {
     }
 
     get resource(): URI {
-        return URI.file(this.editorResource.path.toString());
+        return URI.from(this.editorResource.toComponents());
     }
 
     get dirty(): boolean {

package/src/main/browser/editors-and-documents-main.ts

@@ -32,7 +32,7 @@ import { MonacoEditor } from '@theia/monaco/lib/browser/monaco-editor';
 import { TextEditorMain } from './text-editor-main';
 import { DisposableCollection, Emitter, URI } from '@theia/core';
 import { EditorManager, EditorWidget } from '@theia/editor/lib/browser';
-import { SaveResourceService } from '@theia/core/lib/browser/save-resource-service';
+import { SaveableService } from '@theia/core/lib/browser/saveable-service';
 
 export class EditorsAndDocumentsMain implements Disposable {
 
@@ -43,7 +43,7 @@ export class EditorsAndDocumentsMain implements Disposable {
 
     private readonly modelService: EditorModelService;
     private readonly editorManager: EditorManager;
-    private readonly saveResourceService: SaveResourceService;
+    private readonly saveResourceService: SaveableService;
 
     private readonly onTextEditorAddEmitter = new Emitter<TextEditorMain[]>();
     private readonly onTextEditorRemoveEmitter = new Emitter<string[]>();
@@ -64,7 +64,7 @@ export class EditorsAndDocumentsMain implements Disposable {
 
         this.editorManager = container.get(EditorManager);
         this.modelService = container.get(EditorModelService);
-        this.saveResourceService = container.get(SaveResourceService);
+        this.saveResourceService = container.get(SaveableService);
 
         this.stateComputer = new EditorAndDocumentStateComputer(d => this.onDelta(d), this.editorManager, this.modelService);
         this.toDispose.push(this.stateComputer);

package/src/main/browser/notebooks/notebook-documents-main.ts

@@ -25,6 +25,7 @@ import { MAIN_RPC_CONTEXT, NotebookCellsChangedEventDto, NotebookDataDto, Notebo
 import { RPCProtocol } from '../../../common/rpc-protocol';
 import { NotebookDto } from './notebook-dto';
 import { MonacoEditorModel } from '@theia/monaco/lib/browser/monaco-editor-model';
+import { NotebookOpenHandler } from '@theia/notebook/lib/browser/notebook-open-handler';
 
 export class NotebookDocumentsMainImpl implements NotebookDocumentsMain {
 
@@ -35,7 +36,8 @@ export class NotebookDocumentsMainImpl implements NotebookDocumentsMain {
 
     protected readonly notebookModelResolverService: NotebookModelResolverService;
 
-    protected notebookMonacoTextModelService: NotebookMonacoTextModelService;
+    protected readonly notebookMonacoTextModelService: NotebookMonacoTextModelService;
+    protected readonly notebookOpenHandler: NotebookOpenHandler;
 
     constructor(
         rpc: RPCProtocol,
@@ -43,6 +45,7 @@ export class NotebookDocumentsMainImpl implements NotebookDocumentsMain {
     ) {
         this.proxy = rpc.getProxy(MAIN_RPC_CONTEXT.NOTEBOOK_DOCUMENTS_EXT);
         this.notebookModelResolverService = container.get(NotebookModelResolverService);
+        this.notebookOpenHandler = container.get(NotebookOpenHandler);
 
         // forward dirty and save events
         this.disposables.push(this.notebookModelResolverService.onDidChangeDirty(model => this.proxy.$acceptDirtyStateChanged(model.uri.toComponents(), model.isDirty())));
@@ -157,10 +160,10 @@ export class NotebookDocumentsMainImpl implements NotebookDocumentsMain {
         this.proxy.$acceptDirtyStateChanged(ref.uri.toComponents(), true);
 
         // apply content changes... slightly HACKY -> this triggers a change event
-        // if (options.content) {
-        //     const data = NotebookDto.fromNotebookDataDto(options.content);
-        //     ref.notebook.reset(data.cells, data.metadata, ref.object.notebook.transientOptions);
-        // }
+        if (options.content) {
+            const data = NotebookDto.fromNotebookDataDto(options.content);
+            ref.setData(data);
+        }
         return ref.uri.toComponents();
     }
 
@@ -171,9 +174,8 @@ export class NotebookDocumentsMainImpl implements NotebookDocumentsMain {
 
     async $trySaveNotebook(uriComponents: UriComponents): Promise<boolean> {
         const uri = URI.fromComponents(uriComponents);
-
         const ref = await this.notebookModelResolverService.resolve(uri);
-        await ref.save({});
+        await ref.save();
         ref.dispose();
         return true;
     }

package/src/main/browser/notebooks/notebook-editors-main.ts

@@ -20,16 +20,17 @@
 
 import { UriComponents, URI } from '@theia/core/lib/common/uri';
 import { CellRange } from '@theia/notebook/lib/common';
-import { NotebookEditorWidget } from '@theia/notebook/lib/browser';
+import { NotebookEditorWidget, NotebookService } from '@theia/notebook/lib/browser';
 import { MAIN_RPC_CONTEXT, NotebookDocumentShowOptions, NotebookEditorRevealType, NotebookEditorsExt, NotebookEditorsMain } from '../../../common';
 import { RPCProtocol } from '../../../common/rpc-protocol';
 import { interfaces } from '@theia/core/shared/inversify';
-import { open, OpenerService } from '@theia/core/lib/browser';
+import { NotebookOpenHandler } from '@theia/notebook/lib/browser/notebook-open-handler';
 
 export class NotebookEditorsMainImpl implements NotebookEditorsMain {
 
     protected readonly proxy: NotebookEditorsExt;
-    protected readonly openerService: OpenerService;
+    protected readonly notebookService: NotebookService;
+    protected readonly notebookOpenHandler: NotebookOpenHandler;
 
     protected readonly mainThreadEditors = new Map<string, NotebookEditorWidget>();
 
@@ -38,12 +39,16 @@ export class NotebookEditorsMainImpl implements NotebookEditorsMain {
         container: interfaces.Container
     ) {
         this.proxy = rpc.getProxy(MAIN_RPC_CONTEXT.NOTEBOOK_EDITORS_EXT);
-        this.openerService = container.get(OpenerService);
+        this.notebookService = container.get(NotebookService);
+        this.notebookOpenHandler = container.get(NotebookOpenHandler);
     }
 
     async $tryShowNotebookDocument(uriComponents: UriComponents, viewType: string, options: NotebookDocumentShowOptions): Promise<string> {
-        const editor = await open(this.openerService, URI.fromComponents(uriComponents), {});
-        return (editor as NotebookEditorWidget).id;
+        const editor = await this.notebookOpenHandler.open(URI.fromComponents(uriComponents), {
+            notebookType: viewType
+        });
+        await editor.ready;
+        return editor.id;
     }
     $tryRevealRange(id: string, range: CellRange, revealType: NotebookEditorRevealType): Promise<void> {
         throw new Error('Method not implemented.');

package/src/main/browser/notebooks/notebooks-main.ts

@@ -58,7 +58,7 @@ export class NotebooksMainImpl implements NotebooksMain {
         const plugins = container.get(HostedPluginSupport);
 
         this.proxy = rpc.getProxy(MAIN_RPC_CONTEXT.NOTEBOOKS_EXT);
-        this.notebookService.onWillUseNotebookSerializer(async event => plugins.activateByNotebookSerializer(event));
+        this.notebookService.onWillUseNotebookSerializer(event => plugins.activateByNotebookSerializer(event));
         this.notebookService.markReady();
         commands.registerArgumentProcessor({
             processArgument: arg => {

package/src/main/browser/notebooks/renderers/cell-output-webview.tsx

@@ -38,15 +38,82 @@ import { NotebookModel } from '@theia/notebook/lib/browser/view-model/notebook-m
 
 const CellModel = Symbol('CellModel');
 const Notebook = Symbol('NotebookModel');
+export const AdditionalNotebookCellOutputCss = Symbol('AdditionalNotebookCellOutputCss');
 
 export function createCellOutputWebviewContainer(ctx: interfaces.Container, cell: NotebookCellModel, notebook: NotebookModel): interfaces.Container {
     const child = ctx.createChild();
     child.bind(CellModel).toConstantValue(cell);
     child.bind(Notebook).toConstantValue(notebook);
+    child.bind(AdditionalNotebookCellOutputCss).toConstantValue(DEFAULT_NOTEBOOK_OUTPUT_CSS);
     child.bind(CellOutputWebviewImpl).toSelf().inSingletonScope();
     return child;
 }
 
+export const DEFAULT_NOTEBOOK_OUTPUT_CSS = `
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+  
+table th,
+table td {
+    border: 1px solid;
+}
+
+table > thead > tr > th {
+    text-align: left;
+    border-bottom: 1px solid;
+}
+
+table > thead > tr > th,
+table > thead > tr > td,
+table > tbody > tr > th,
+table > tbody > tr > td {
+    padding: 5px 10px;
+}
+
+table > tbody > tr + tr > td {
+    border-top: 1px solid;
+}
+
+table,
+thead,
+tr,
+th,
+td,
+tbody {
+    border: none !important;
+    border-color: transparent;
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+
+table,
+th,
+tr {
+    vertical-align: middle;
+    text-align: right;
+}
+
+thead {
+    font-weight: bold;
+    background-color: rgba(130, 130, 130, 0.16);
+}
+
+th,
+td {
+    padding: 4px 8px;
+}
+
+tr:nth-child(even) {
+    background-color: rgba(130, 130, 130, 0.08);
+}
+
+tbody th {
+    font-weight: normal;
+}
+`;
+
 @injectable()
 export class CellOutputWebviewImpl implements CellOutputWebview, Disposable {
 
@@ -77,6 +144,9 @@ export class CellOutputWebviewImpl implements CellOutputWebview, Disposable {
     @inject(QuickPickService)
     protected readonly quickPickService: QuickPickService;
 
+    @inject(AdditionalNotebookCellOutputCss)
+    protected readonly additionalOutputCss: string;
+
     readonly id = generateUuid();
 
     protected editor: NotebookEditorWidget | undefined;
@@ -129,7 +199,7 @@ export class CellOutputWebviewImpl implements CellOutputWebview, Disposable {
                 'jupyter.viewOutput',
                 'workbench.action.openLargeOutput',
                 'cellOutput.enableScrolling',
-            ]
+            ],
         });
         this.webviewWidget.setHTML(await this.createWebviewContent());
 
@@ -216,6 +286,8 @@ export class CellOutputWebviewImpl implements CellOutputWebview, Disposable {
                 // console.log('from webview customKernelMessage ', JSON.stringify(message.message));
                 this.editor.recieveKernelMessage(message.message);
                 break;
+            case 'inputFocusChanged':
+                this.editor?.outputInputFocusChanged(message.focused);
         }
     }
 
@@ -236,6 +308,9 @@ export class CellOutputWebviewImpl implements CellOutputWebview, Disposable {
                 <html>
                     <head>
                         <meta charset="UTF-8">
+                        <style>
+                            ${this.additionalOutputCss}
+                        </style>
                     </head>
                     <body>
                         <script type="module">${preloads}</script>

package/src/main/browser/notebooks/renderers/output-webview-internal.ts

@@ -581,5 +581,15 @@ export async function outputWebviewPreload(ctx: PreloadContext): Promise<void> {
         return this.originalAppendChild(node);
     };
 
+    const focusChange = (event: FocusEvent, focus: boolean) => {
+        if (event.target instanceof HTMLInputElement) {
+            theia.postMessage({ type: 'inputFocusChanged', focused: focus } as webviewCommunication.InputFocusChange);
+        }
+    };
+
+    window.addEventListener('focusin', (event: FocusEvent) => focusChange(event, true));
+
+    window.addEventListener('focusout', (event: FocusEvent) => focusChange(event, false));
+
     theia.postMessage(<webviewCommunication.WebviewInitialized>{ type: 'initialized' });
 }

package/src/main/browser/notebooks/renderers/webview-communication.ts

@@ -76,7 +76,12 @@ export interface WheelMessage {
     readonly deltaX: number;
 }
 
-export type FromWebviewMessage = WebviewInitialized | OnDidRenderOutput | WheelMessage | CustomRendererMessage | KernelMessage;
+export interface InputFocusChange {
+    readonly type: 'inputFocusChanged';
+    readonly focused: boolean;
+}
+
+export type FromWebviewMessage = WebviewInitialized | OnDidRenderOutput | WheelMessage | CustomRendererMessage | KernelMessage | InputFocusChange;
 
 export interface Output {
     id: string
@@ -88,3 +93,4 @@ export interface OutputItem {
     readonly mime: string;
     readonly data: Uint8Array;
 }
+

package/src/main/browser/plugin-ext-frontend-module.ts

@@ -47,7 +47,6 @@ import { PluginDebugService } from './debug/plugin-debug-service';
 import { DebugService } from '@theia/debug/lib/common/debug-service';
 import { PluginSharedStyle } from './plugin-shared-style';
 import { SelectionProviderCommandContribution } from './selection-provider-command';
-import { ViewColumnService } from './view-column-service';
 import { ViewContextKeyService } from './view/view-context-key-service';
 import { PluginViewWidget, PluginViewWidgetIdentifier } from './view/plugin-view-widget';
 import { TreeViewWidgetOptions, VIEW_ITEM_CONTEXT_MENU, PluginTree, TreeViewWidget, PluginTreeModel } from './view/tree-view-widget';
@@ -244,8 +243,6 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
     bind(PluginDebugSessionContributionRegistry).toSelf().inSingletonScope();
     rebind(DebugSessionContributionRegistry).toService(PluginDebugSessionContributionRegistry);
 
-    bind(ViewColumnService).toSelf().inSingletonScope();
-
     bind(CommentsService).to(PluginCommentService).inSingletonScope();
     bind(CommentingRangeDecorator).toSelf().inSingletonScope();
     bind(CommentsContribution).toSelf().inSingletonScope();

package/src/main/browser/quick-open-main.ts

@@ -35,6 +35,7 @@ import {
     QuickInputButtonHandle,
     QuickInputService,
     QuickPickItem,
+    QuickPickItemOrSeparator,
     codiconArray
 } from '@theia/core/lib/browser';
 import { DisposableCollection, Disposable } from '@theia/core/lib/common/disposable';
@@ -46,10 +47,11 @@ import { UriComponents } from '../../common/uri-components';
 import { URI } from '@theia/core/shared/vscode-uri';
 import { ThemeIcon } from '@theia/monaco-editor-core/esm/vs/base/common/themables';
 import { isUriComponents } from '@theia/monaco-editor-core/esm/vs/base/common/uri';
+import { QuickPickSeparator } from '@theia/core';
 
 export interface QuickInputSession {
     input: QuickInput;
-    handlesToItems: Map<number, QuickPickItem>;
+    handlesToItems: Map<number, QuickPickItemOrSeparator>;
 }
 
 interface IconPath {
@@ -63,7 +65,7 @@ export class QuickOpenMainImpl implements QuickOpenMain, Disposable {
     private proxy: QuickOpenExt;
     private delegate: MonacoQuickInputService;
     private readonly items: Record<number, {
-        resolve(items: QuickPickItem[]): void;
+        resolve(items: QuickPickItemOrSeparator[]): void;
         reject(error: Error): void;
     }> = {};
 
@@ -80,7 +82,7 @@ export class QuickOpenMainImpl implements QuickOpenMain, Disposable {
     }
 
     async $show(instance: number, options: TransferQuickPickOptions<TransferQuickPickItem>, token: CancellationToken): Promise<number | number[] | undefined> {
-        const contents = new Promise<QuickPickItem[]>((resolve, reject) => {
+        const contents = new Promise<QuickPickItemOrSeparator[]>((resolve, reject) => {
             this.items[instance] = { resolve, reject };
         });
 
@@ -92,7 +94,7 @@ export class QuickOpenMainImpl implements QuickOpenMain, Disposable {
                     this.proxy.$onItemSelected(Number.parseInt((<QuickPickItem>el).id!));
                 }
             },
-            activeItem: activeItem ? this.toQuickPickItem(activeItem) : undefined
+            activeItem: this.isItem(activeItem) ? this.toQuickPickItem(activeItem) : undefined
         };
 
         const result = await this.delegate.pick(contents, transformedOptions, token);
@@ -105,6 +107,10 @@ export class QuickOpenMainImpl implements QuickOpenMain, Disposable {
         return undefined;
     }
 
+    private isItem(item?: TransferQuickPickItem): item is TransferQuickPickItem & { kind: 'item' } {
+        return item?.kind === 'item';
+    }
+
     private normalizeIconPath(path: UriComponents | { light: UriComponents; dark: UriComponents } | ThemeIcon | undefined): {
         iconPath?: IconPath
         iconClasses?: string[]
@@ -127,10 +133,17 @@ export class QuickOpenMainImpl implements QuickOpenMain, Disposable {
     }
 
     private toQuickPickItem(item: undefined): undefined;
-    private toQuickPickItem(item: TransferQuickPickItem): QuickPickItem
-    private toQuickPickItem(item: TransferQuickPickItem | undefined): QuickPickItem | undefined {
+    private toQuickPickItem(item: TransferQuickPickItem & { kind: 'item' }): QuickPickItem;
+    private toQuickPickItem(item: TransferQuickPickItem & { kind: 'separator' }): QuickPickSeparator;
+    private toQuickPickItem(item: TransferQuickPickItem): QuickPickItemOrSeparator;
+    private toQuickPickItem(item: TransferQuickPickItem | undefined): QuickPickItemOrSeparator | undefined {
         if (!item) {
             return undefined;
+        } else if (item.kind === 'separator') {
+            return {
+                type: 'separator',
+                label: item.label
+            };
         }
         return {
             ...this.normalizeIconPath(item.iconPath),
@@ -309,7 +322,7 @@ export class QuickOpenMainImpl implements QuickOpenMain, Disposable {
                     }
                 } else if (param === 'items') {
                     handlesToItems.clear();
-                    const items: QuickPickItem[] = [];
+                    const items: QuickPickItemOrSeparator[] = [];
                     params[param].forEach((transferItem: TransferQuickPickItem) => {
                         const item = this.toQuickPickItem(transferItem);
                         items.push(item);

package/src/main/browser/tabs/tabs-main.ts

@@ -24,6 +24,8 @@ import { MonacoDiffEditor } from '@theia/monaco/lib/browser/monaco-diff-editor';
 import { toUriComponents } from '../hierarchy/hierarchy-types-converters';
 import { TerminalWidget } from '@theia/terminal/lib/browser/base/terminal-widget';
 import { DisposableCollection } from '@theia/core';
+import { NotebookEditorWidget } from '@theia/notebook/lib/browser';
+import { ViewColumnService } from '@theia/core/lib/browser/shell/view-column-service';
 
 interface TabInfo {
     tab: TabDto;
@@ -46,6 +48,14 @@ export class TabsMainImpl implements TabsMain, Disposable {
     private currentActiveGroup: TabGroupDto;
 
     private tabGroupChanged: boolean = false;
+    private viewColumnService: ViewColumnService;
+
+    private readonly defaultTabGroup: TabGroupDto = {
+        groupId: 0,
+        tabs: [],
+        isActive: true,
+        viewColumn: 0
+    };
 
     constructor(
         rpc: RPCProtocol,
@@ -54,6 +64,7 @@ export class TabsMainImpl implements TabsMain, Disposable {
         this.proxy = rpc.getProxy(MAIN_RPC_CONTEXT.TABS_EXT);
 
         this.applicationShell = container.get(ApplicationShell);
+        this.viewColumnService = container.get(ViewColumnService);
         this.createTabsModel();
 
         const tabBars = this.applicationShell.mainPanel.tabBars();
@@ -100,15 +111,20 @@ export class TabsMainImpl implements TabsMain, Disposable {
     }
 
     protected createTabsModel(): void {
+        if (this.applicationShell.mainAreaTabBars.length === 0) {
+            this.proxy.$acceptEditorTabModel([this.defaultTabGroup]);
+            return;
+        }
         const newTabGroupModel = new Map<TabBar<Widget>, TabGroupDto>();
         this.tabInfoLookup.clear();
         this.disposableTabBarListeners.dispose();
-        this.applicationShell.mainAreaTabBars.forEach(tabBar => {
-            this.attachListenersToTabBar(tabBar);
-            const groupDto = this.createTabGroupDto(tabBar);
-            tabBar.titles.forEach((title, index) => this.tabInfoLookup.set(title, { group: groupDto, tab: groupDto.tabs[index], tabIndex: index }));
-            newTabGroupModel.set(tabBar, groupDto);
-        });
+        this.applicationShell.mainAreaTabBars
+            .forEach((tabBar, i) => {
+                this.attachListenersToTabBar(tabBar);
+                const groupDto = this.createTabGroupDto(tabBar, i);
+                tabBar.titles.forEach((title, index) => this.tabInfoLookup.set(title, { group: groupDto, tab: groupDto.tabs[index], tabIndex: index }));
+                newTabGroupModel.set(tabBar, groupDto);
+            });
         if (newTabGroupModel.size > 0 && Array.from(newTabGroupModel.values()).indexOf(this.currentActiveGroup) < 0) {
             this.currentActiveGroup = this.tabInfoLookup.get(this.applicationShell.mainPanel.currentTitle!)?.group ?? newTabGroupModel.values().next().value;
             this.currentActiveGroup.isActive = true;
@@ -134,15 +150,17 @@ export class TabsMainImpl implements TabsMain, Disposable {
         return `${groupId}~${tabTitle.owner.id}`;
     }
 
-    protected createTabGroupDto(tabBar: TabBar<Widget>): TabGroupDto {
-        const oldDto = this.tabGroupModel.get(tabBar);
+    protected createTabGroupDto(tabBar: TabBar<Widget>, index: number): TabGroupDto {
+        const oldDto = index === 0 ? this.defaultTabGroup : this.tabGroupModel.get(tabBar);
         const groupId = oldDto?.groupId ?? this.groupIdCounter++;
         const tabs = tabBar.titles.map(title => this.createTabDto(title, groupId));
+        const viewColumn = this.viewColumnService.getViewColumn(tabBar.id)
+            ?? this.applicationShell.allTabBars.indexOf(tabBar);
         return {
             groupId,
             tabs,
             isActive: false,
-            viewColumn: 1
+            viewColumn
         };
     }
 
@@ -182,6 +200,12 @@ export class TabsMainImpl implements TabsMain, Disposable {
             return {
                 kind: TabInputKind.TerminalEditorInput
             };
+        } else if (widget instanceof NotebookEditorWidget) {
+            return {
+                kind: TabInputKind.NotebookInput,
+                notebookType: widget.notebookType,
+                uri: toUriComponents(widget.model?.uri.toString() ?? '')
+            };
         }
 
         return { kind: TabInputKind.UnknownInput };
@@ -232,6 +256,9 @@ export class TabsMainImpl implements TabsMain, Disposable {
         }
         const oldTabDto = tabInfo.tab;
         const newTabDto = this.createTabDto(title, tabInfo.group.groupId);
+        if (!oldTabDto.isActive && newTabDto.isActive) {
+            this.currentActiveGroup.tabs.filter(tab => tab.isActive).forEach(tab => tab.isActive = false);
+        }
         if (newTabDto.isActive && !tabInfo.group.isActive) {
             tabInfo.group.isActive = true;
             this.currentActiveGroup.isActive = false;

package/src/main/browser/webviews-main.ts

@@ -23,7 +23,7 @@ import { ViewBadge, WebviewOptions, WebviewPanelOptions, WebviewPanelShowOptions
 import { ApplicationShell } from '@theia/core/lib/browser/shell/application-shell';
 import { WebviewWidget, WebviewWidgetIdentifier } from './webview/webview';
 import { Disposable, DisposableCollection } from '@theia/core/lib/common/disposable';
-import { ViewColumnService } from './view-column-service';
+import { ViewColumnService } from '@theia/core/lib/browser/shell/view-column-service';
 import { WidgetManager } from '@theia/core/lib/browser/widget-manager';
 import { JSONExt } from '@theia/core/shared/@phosphor/coreutils';
 import { Mutable } from '@theia/core/lib/common/types';