@theia/core 1.34.0 → 1.35.0

package/src/browser/dialogs.ts

@@ -401,6 +401,78 @@ export async function confirmExit(): Promise<boolean> {
     return safeToExit === true;
 }
 
+export class ConfirmSaveDialogProps extends ConfirmDialogProps {
+    readonly save: string;
+    performSave: () => Promise<void>;
+}
+
+export class ConfirmSaveDialog extends ConfirmDialog {
+
+    protected saveButton: HTMLButtonElement | undefined;
+    constructor(
+        @inject(ConfirmSaveDialogProps) protected override readonly props: ConfirmSaveDialogProps
+    ) {
+        super(props);
+        this.contentNode.appendChild(this.createMessageNode(this.props.msg));
+        // reorder buttons
+        this.controlPanel.childNodes.forEach(child => this.controlPanel.removeChild(child));
+        [this.acceptButton, this.closeButton].forEach(child => {
+            if (typeof child !== 'undefined') {
+                this.controlPanel.appendChild(child);
+            }
+        });
+        this.appendSaveButton(props.save).addEventListener('click', async () => {
+            await props.performSave();
+            this.acceptButton?.click();
+        });
+    }
+
+    protected appendSaveButton(text: string = Dialog.OK): HTMLButtonElement {
+        this.saveButton = this.createButton(text);
+        this.controlPanel.appendChild(this.saveButton);
+        this.saveButton.classList.add('main');
+        return this.saveButton;
+    }
+
+    protected override onActivateRequest(msg: Message): void {
+        super.onActivateRequest(msg);
+        if (this.saveButton) {
+            this.saveButton.focus();
+        }
+    }
+
+}
+
+export async function confirmExitWithOrWithoutSaving(captionsToSave: string[], performSave: () => Promise<void>): Promise<boolean> {
+    const div: HTMLElement = document.createElement('div');
+    div.innerText = nls.localizeByDefault("Your changes will be lost if you don't save them.");
+
+    if (captionsToSave.length > 0) {
+        const span = document.createElement('span');
+        span.appendChild(document.createElement('br'));
+        captionsToSave.forEach(cap => {
+            const b = document.createElement('b');
+            b.innerText = cap;
+            span.appendChild(b);
+            span.appendChild(document.createElement('br'));
+        });
+        span.appendChild(document.createElement('br'));
+        div.appendChild(span);
+        const safeToExit = await new ConfirmSaveDialog({
+            title: nls.localizeByDefault('Do you want to save the changes to the following {0} files?', captionsToSave.length),
+            msg: div,
+            ok: nls.localizeByDefault("Don't Save"),
+            save: nls.localizeByDefault('Save All'),
+            cancel: Dialog.CANCEL,
+            performSave: performSave
+        }).open();
+        return safeToExit === true;
+    } else {
+        // fallback if not passed with an empty caption-list.
+        return confirmExit();
+    }
+
+}
 @injectable()
 export class SingleTextInputDialogProps extends DialogProps {
     readonly confirmButtonLabel?: string;

package/src/browser/i18n/language-quick-pick-service.ts

@@ -20,8 +20,7 @@ import { AsyncLocalizationProvider, LanguageInfo } from '../../common/i18n/local
 import { QuickInputService, QuickPickItem, QuickPickSeparator } from '../quick-input';
 import { WindowService } from '../window/window-service';
 
-export interface LanguageQuickPickItem extends QuickPickItem {
-    languageId: string
+export interface LanguageQuickPickItem extends QuickPickItem, LanguageInfo {
     execute?(): Promise<void>
 }
 
@@ -32,13 +31,13 @@ export class LanguageQuickPickService {
     @inject(AsyncLocalizationProvider) protected readonly localizationProvider: AsyncLocalizationProvider;
     @inject(WindowService) protected readonly windowService: WindowService;
 
-    async pickDisplayLanguage(): Promise<string | undefined> {
+    async pickDisplayLanguage(): Promise<LanguageInfo | undefined> {
         const quickInput = this.quickInputService.createQuickPick<LanguageQuickPickItem>();
         const installedItems = await this.getInstalledLanguages();
         const quickInputItems: (LanguageQuickPickItem | QuickPickSeparator)[] = [
             {
                 type: 'separator',
-                label: nls.localizeByDefault('Installed languages')
+                label: nls.localizeByDefault('Installed')
             },
             ...installedItems
         ];
@@ -55,7 +54,7 @@ export class LanguageQuickPickService {
             if (availableItems.length > 0) {
                 quickInputItems.push({
                     type: 'separator',
-                    label: nls.localizeByDefault('Available languages')
+                    label: nls.localizeByDefault('Available')
                 });
                 const installed = new Set(installedItems.map(e => e.languageId));
                 for (const available of availableItems) {
@@ -77,7 +76,7 @@ export class LanguageQuickPickService {
                     // Some language quick pick items want to install additional languages
                     // We have to await that before returning the selected locale
                     await selectedItem.execute?.();
-                    resolve(selectedItem.languageId);
+                    resolve(selectedItem);
                 } else {
                     resolve(undefined);
                 }
@@ -122,7 +121,9 @@ export class LanguageQuickPickService {
         return {
             label,
             description,
-            languageId: id
+            languageId: id,
+            languageName: language.languageName,
+            localizedLanguageName: language.localizedLanguageName
         };
     }
 }

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

@@ -89,6 +89,8 @@ export class DockPanelRenderer implements DockLayout.IRenderer {
 
     readonly tabBarClasses: string[] = [];
 
+    private readonly onDidCreateTabBarEmitter = new Emitter<TabBar<Widget>>();
+
     constructor(
         @inject(TabBarRendererFactory) protected readonly tabBarRendererFactory: TabBarRendererFactory,
         @inject(TabBarToolbarRegistry) protected readonly tabBarToolbarRegistry: TabBarToolbarRegistry,
@@ -96,6 +98,10 @@ export class DockPanelRenderer implements DockLayout.IRenderer {
         @inject(BreadcrumbsRendererFactory) protected readonly breadcrumbsRendererFactory: BreadcrumbsRendererFactory,
     ) { }
 
+    get onDidCreateTabBar(): CommonEvent<TabBar<Widget>> {
+        return this.onDidCreateTabBarEmitter.event;
+    }
+
     createTabBar(): TabBar<Widget> {
         const renderer = this.tabBarRendererFactory();
         const tabBar = new ToolbarAwareTabBar(
@@ -115,6 +121,7 @@ export class DockPanelRenderer implements DockLayout.IRenderer {
         tabBar.disposed.connect(() => renderer.dispose());
         renderer.contextMenuPath = SHELL_TABBAR_CONTEXT_MENU;
         tabBar.currentChanged.connect(this.onCurrentTabChanged, this);
+        this.onDidCreateTabBarEmitter.fire(tabBar);
         return tabBar;
     }
 
@@ -221,6 +228,11 @@ export class ApplicationShell extends Widget {
     @inject(TheiaDockPanel.Factory)
     protected readonly dockPanelFactory: TheiaDockPanel.Factory;
 
+    private _mainPanelRenderer: DockPanelRenderer;
+    get mainPanelRenderer(): DockPanelRenderer {
+        return this._mainPanelRenderer;
+    }
+
     /**
      * Construct a new application shell.
      */
@@ -496,6 +508,7 @@ export class ApplicationShell extends Widget {
         const renderer = this.dockPanelRendererFactory();
         renderer.tabBarClasses.push(MAIN_BOTTOM_AREA_CLASS);
         renderer.tabBarClasses.push(MAIN_AREA_CLASS);
+        this._mainPanelRenderer = renderer;
         const dockPanel = this.dockPanelFactory({
             mode: 'multiple-document',
             renderer,

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

@@ -16,6 +16,7 @@
 
 import { inject, injectable } from 'inversify';
 import * as React from 'react';
+import { ContextKeyService } from '../../context-key-service';
 import { CommandRegistry, Disposable, DisposableCollection, MenuCommandExecutor, MenuModelRegistry, MenuPath, nls } from '../../../common';
 import { Anchor, ContextMenuAccess, ContextMenuRenderer } from '../../context-menu-renderer';
 import { LabelIcon, LabelParser } from '../../label-parser';
@@ -41,12 +42,15 @@ export class TabBarToolbar extends ReactWidget {
     protected inline = new Map<string, TabBarToolbarItem | ReactTabBarToolbarItem>();
     protected more = new Map<string, TabBarToolbarItem>();
 
+    protected contextKeyListener: Disposable | undefined;
+
     @inject(CommandRegistry) protected readonly commands: CommandRegistry;
     @inject(LabelParser) protected readonly labelParser: LabelParser;
     @inject(MenuModelRegistry) protected readonly menus: MenuModelRegistry;
     @inject(MenuCommandExecutor) protected readonly menuCommandExecutor: MenuCommandExecutor;
     @inject(ContextMenuRenderer) protected readonly contextMenuRenderer: ContextMenuRenderer;
     @inject(TabBarToolbarRegistry) protected readonly toolbarRegistry: TabBarToolbarRegistry;
+    @inject(ContextKeyService) protected readonly contextKeyService: ContextKeyService;
 
     constructor() {
         super();
@@ -60,13 +64,22 @@ export class TabBarToolbar extends ReactWidget {
     updateItems(items: Array<TabBarToolbarItem | ReactTabBarToolbarItem>, current: Widget | undefined): void {
         this.inline.clear();
         this.more.clear();
+
+        const contextKeys = new Set<string>();
         for (const item of items.sort(TabBarToolbarItem.PRIORITY_COMPARATOR).reverse()) {
             if ('render' in item || item.group === undefined || item.group === 'navigation') {
                 this.inline.set(item.id, item);
             } else {
                 this.more.set(item.id, item);
             }
+
+            if (item.when) {
+                this.contextKeyService.parseKeys(item.when)?.forEach(key => contextKeys.add(key));
+            }
         }
+
+        this.updateContextKeyListener(contextKeys);
+
         this.setCurrent(current);
         if (!items.length) {
             this.hide();
@@ -97,6 +110,17 @@ export class TabBarToolbar extends ReactWidget {
         }
     }
 
+    protected updateContextKeyListener(contextKeys: Set<string>): void {
+        this.contextKeyListener?.dispose();
+        if (contextKeys.size > 0) {
+            this.contextKeyListener = this.contextKeyService.onDidChange(event => {
+                if (event.affects(contextKeys)) {
+                    this.update();
+                }
+            });
+        }
+    }
+
     protected render(): React.ReactNode {
         return <React.Fragment>
             {this.renderMore()}
@@ -124,7 +148,8 @@ export class TabBarToolbar extends ReactWidget {
             classNames.push(iconClass);
         }
         const tooltip = item.tooltip || (command && command.label);
-        const toolbarItemClassNames = this.getToolbarItemClassNames(command?.id ?? item.command);
+
+        const toolbarItemClassNames = this.getToolbarItemClassNames(item);
         if (item.menuPath && !item.command) { toolbarItemClassNames.push('enabled'); }
         return <div key={item.id}
             ref={this.onRender}
@@ -139,13 +164,13 @@ export class TabBarToolbar extends ReactWidget {
         </div>;
     }
 
-    protected getToolbarItemClassNames(commandId: string | undefined): string[] {
+    protected getToolbarItemClassNames(item: AnyToolbarItem): string[] {
         const classNames = [TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM];
-        if (commandId) {
-            if (this.commandIsEnabled(commandId)) {
+        if (item.command) {
+            if (this.commandIsEnabled(item.command) && this.evaluateWhenClause(item.when)) {
                 classNames.push('enabled');
             }
-            if (this.commandIsToggled(commandId)) {
+            if (this.commandIsToggled(item.command)) {
                 classNames.push('toggled');
             }
         }
@@ -221,11 +246,20 @@ export class TabBarToolbar extends ReactWidget {
         return this.commands.isToggled(command, this.current);
     }
 
+    protected evaluateWhenClause(whenClause: string | undefined): boolean {
+        return whenClause ? this.contextKeyService.match(whenClause) : true;
+    }
+
     protected executeCommand = (e: React.MouseEvent<HTMLElement>) => {
         e.preventDefault();
         e.stopPropagation();
 
         const item: AnyToolbarItem | undefined = this.inline.get(e.currentTarget.id);
+
+        if (!this.evaluateWhenClause(item?.when)) {
+            return;
+        }
+
         if (item?.command && item.menuPath) {
             this.menuCommandExecutor.executeCommand(item.menuPath, item.command, this.current);
         } else if (item?.command) {
@@ -245,7 +279,6 @@ export class TabBarToolbar extends ReactWidget {
     protected onMouseUpEvent = (e: React.MouseEvent<HTMLElement>) => {
         e.currentTarget.classList.remove('active');
     };
-
 }
 
 export namespace TabBarToolbar {

package/src/browser/style/select-component.css

@@ -54,7 +54,8 @@
     text-overflow: ellipsis;
     overflow: hidden;
     display: flex;
-    padding: 2px 5px;
+    padding: 0px 5px;
+    line-height: 22px;
 }
 
 .theia-select-component-dropdown .theia-select-component-description {
@@ -87,8 +88,6 @@
     color: var(--theia-list-activeSelectionForeground);
     cursor: pointer;
     background: var(--theia-list-activeSelectionBackground);
-    outline: var(--theia-focusBorder) solid 1px;
-    outline-offset: -1px;
 }
 
 .theia-select-component-dropdown .theia-select-component-separator {

package/src/browser/style/sidepanel.css

@@ -318,6 +318,7 @@
     margin-left: 14px;
     text-transform: uppercase;
     font-size: var(--theia-ui-font-size0);
+    min-width: 1rem;
 }
 
 .theia-sidepanel-toolbar .p-TabBar-toolbar .item {

package/src/browser/style/tree.css

@@ -100,6 +100,8 @@
 .theia-Tree:focus-within .theia-TreeNode.theia-mod-selected {
     background: var(--theia-list-activeSelectionBackground);
     color: var(--theia-list-activeSelectionForeground) !important;
+    outline: var(--theia-focusBorder) solid 1px;
+    outline-offset: -1px;
 }
 
 .theia-Tree:focus-within .theia-TreeNode.theia-mod-selected .theia-TreeNodeTail,

package/src/browser/tree/search-box.ts

@@ -254,7 +254,7 @@ export class SearchBox extends BaseWidget {
                 SearchBox.Styles.BUTTON,
                 ...SearchBox.Styles.FILTER,
             );
-            filter.title = nls.localizeByDefault('Enable Filter on Type');
+            filter.title = nls.localizeByDefault('Filter on Type');
             buttons.appendChild(filter);
             filter.onclick = this.fireFilterToggle.bind(this);
         }