Update Configure Display Language command (eclipse-theia#11289)

dev-packages/ovsx-client/src/ovsx-types.ts

@@ -76,6 +76,7 @@ export interface VSXSearchEntry {
     readonly url: string;
     readonly files: {
         download: string
+        manifest?: string
         readme?: string
         license?: string
         icon?: string

packages/core/src/browser/common-frontend-contribution.ts

@@ -64,6 +64,7 @@ import { isPinned, Title, togglePinned, Widget } from './widgets';
 import { SaveResourceService } from './save-resource-service';
 import { UserWorkingDirectoryProvider } from './user-working-directory-provider';
 import { createUntitledURI } from '../common';
+import { LanguageQuickPickService } from './i18n/language-quick-pick-service';
 
 export namespace CommonMenus {
 
@@ -400,6 +401,9 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
     @inject(UserWorkingDirectoryProvider)
     protected readonly workingDirProvider: UserWorkingDirectoryProvider;
 
+    @inject(LanguageQuickPickService)
+    protected readonly languageQuickPickService: LanguageQuickPickService;
+
     protected pinnedKey: ContextKey<boolean>;
 
     async configure(app: FrontendApplication): Promise<void> {
@@ -1142,27 +1146,12 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
     }
 
     protected async configureDisplayLanguage(): Promise<void> {
-        const availableLanguages = await this.localizationProvider.getAvailableLanguages();
-        const items: QuickPickItem[] = [];
-        for (const languageId of ['en', ...availableLanguages.map(e => e.languageId)]) {
-            if (typeof languageId === 'string') {
-                items.push({
-                    label: languageId,
-                    execute: async () => {
-                        if (languageId !== nls.locale && await this.confirmRestart()) {
-                            this.windowService.setSafeToShutDown();
-                            window.localStorage.setItem(nls.localeId, languageId);
-                            this.windowService.reload();
-                        }
-                    }
-                });
-            }
+        const languageId = await this.languageQuickPickService.pickDisplayLanguage();
+        if (languageId && !nls.isSelectedLocale(languageId) && await this.confirmRestart()) {
+            nls.setLocale(languageId);
+            this.windowService.setSafeToShutDown();
+            this.windowService.reload();
         }
-        this.quickInputService?.showQuickPick(items,
-            {
-                placeholder: CommonCommands.CONFIGURE_DISPLAY_LANGUAGE.label,
-                activeItem: items.find(item => item.label === (nls.locale || 'en'))
-            });
     }
 
     protected async confirmRestart(): Promise<boolean> {

packages/core/src/browser/i18n/i18n-frontend-module.ts

@@ -17,9 +17,11 @@
 import { ContainerModule } from 'inversify';
 import { AsyncLocalizationProvider, localizationPath } from '../../common/i18n/localization';
 import { WebSocketConnectionProvider } from '../messaging/ws-connection-provider';
+import { LanguageQuickPickService } from './language-quick-pick-service';
 
 export default new ContainerModule(bind => {
     bind(AsyncLocalizationProvider).toDynamicValue(
         ctx => ctx.container.get(WebSocketConnectionProvider).createProxy(localizationPath)
     ).inSingletonScope();
+    bind(LanguageQuickPickService).toSelf().inSingletonScope();
 });

packages/core/src/browser/i18n/language-quick-pick-service.ts

@@ -0,0 +1,128 @@
+// *****************************************************************************
+// Copyright (C) 2022 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 { inject, injectable } from 'inversify';
+import { nls } from '../../common/nls';
+import { AsyncLocalizationProvider, LanguageInfo } from '../../common/i18n/localization';
+import { QuickInputService, QuickPickItem, QuickPickSeparator } from '../quick-input';
+import { WindowService } from '../window/window-service';
+
+export interface LanguageQuickPickItem extends QuickPickItem {
+    languageId: string
+    execute?(): Promise<void>
+}
+
+@injectable()
+export class LanguageQuickPickService {
+
+    @inject(QuickInputService) protected readonly quickInputService: QuickInputService;
+    @inject(AsyncLocalizationProvider) protected readonly localizationProvider: AsyncLocalizationProvider;
+    @inject(WindowService) protected readonly windowService: WindowService;
+
+    async pickDisplayLanguage(): Promise<string | undefined> {
+        const quickInput = this.quickInputService.createQuickPick<LanguageQuickPickItem>();
+        const installedItems = await this.getInstalledLanguages();
+        const quickInputItems: (LanguageQuickPickItem | QuickPickSeparator)[] = [
+            {
+                type: 'separator',
+                label: nls.localize('theia/core/installedLanguages', 'Installed languages')
+            },
+            ...installedItems
+        ];
+        quickInput.items = quickInputItems;
+        quickInput.busy = true;
+        const selected = installedItems.find(item => nls.isSelectedLocale(item.languageId));
+        if (selected) {
+            quickInput.activeItems = [selected];
+        }
+        quickInput.placeholder = nls.localizeByDefault('Configure Display Language');
+        quickInput.show();
+
+        this.getAvailableLanguages().then(availableItems => {
+            if (availableItems.length > 0) {
+                quickInputItems.push({
+                    type: 'separator',
+                    label: nls.localize('theia/core/availableLanguages', 'Available languages')
+                });
+                const installed = new Set(installedItems.map(e => e.languageId));
+                for (const available of availableItems) {
+                    // Exclude already installed languages
+                    if (!installed.has(available.languageId)) {
+                        quickInputItems.push(available);
+                    }
+                }
+                quickInput.items = quickInputItems;
+            }
+        }).finally(() => {
+            quickInput.busy = false;
+        });
+
+        return new Promise(resolve => {
+            quickInput.onDidAccept(async () => {
+                const selectedItem = quickInput.selectedItems[0];
+                if (selectedItem) {
+                    // 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);
+                } else {
+                    resolve(undefined);
+                }
+            });
+            quickInput.onDidHide(() => {
+                resolve(undefined);
+            });
+        });
+    }
+
+    protected async getInstalledLanguages(): Promise<LanguageQuickPickItem[]> {
+        const languageInfos = await this.localizationProvider.getAvailableLanguages();
+        const items: LanguageQuickPickItem[] = [];
+        const en: LanguageInfo = {
+            languageId: 'en',
+            languageName: 'English',
+            localizedLanguageName: 'English'
+        };
+        languageInfos.push(en);
+        for (const language of languageInfos.filter(e => !!e.languageId)) {
+            items.push(this.createLanguageQuickPickItem(language));
+        }
+        return items;
+    }
+
+    protected async getAvailableLanguages(): Promise<LanguageQuickPickItem[]> {
+        return [];
+    }
+
+    protected createLanguageQuickPickItem(language: LanguageInfo): LanguageQuickPickItem {
+        let label: string;
+        let description: string | undefined;
+        const languageName = language.localizedLanguageName || language.languageName;
+        const id = language.languageId;
+        const idLabel = id + (nls.isSelectedLocale(id) ? ` (${nls.localizeByDefault('Current')})` : '');
+        if (languageName) {
+            label = languageName;
+            description = idLabel;
+        } else {
+            label = idLabel;
+        }
+        return {
+            label,
+            description,
+            languageId: id
+        };
+    }
+}

packages/core/src/common/nls.ts

@@ -55,6 +55,17 @@ export namespace nls {
     export function localize(key: string, defaultValue: string, ...args: FormatType[]): string {
         return Localization.localize(localization, key, defaultValue, ...args);
     }
+
+    export function isSelectedLocale(id: string): boolean {
+        if (locale === undefined && id === 'en') {
+            return true;
+        }
+        return locale === id;
+    }
+
+    export function setLocale(id: string): void {
+        window.localStorage.setItem(localeId, id);
+    }
 }
 
 interface NlsKeys {

packages/messages/src/browser/style/notifications.css

@@ -242,24 +242,10 @@
 }
 
 .theia-notification-item-progressbar.indeterminate {
+    /* `progress-animation` is defined in `packages/core/src/browser/style/progress-bar.css` */
     animation: progress-animation 1.3s 0s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 
-@keyframes progress-animation {
-    0% {
-        margin-left: 0%;
-        width: 3%;
-    }
-    60% {
-        margin-left: 45%;
-        width: 20%;
-    }
-    100% {
-        margin-left: 99%;
-        width: 1%;
-    }
-}
-
 /* Perfect scrollbar */
 
 .theia-notification-list-scroll-container .ps__rail-y {

packages/monaco/src/browser/monaco-quick-input-service.ts

@@ -488,19 +488,25 @@ class MonacoQuickPick<T extends QuickPickItem> extends MonacoQuickInput implemen
     }
 
     set items(itms: readonly (T | QuickPickSeparator)[]) {
+        // We need to store and apply the currently selected active items.
+        // Since monaco compares these items by reference equality, creating new wrapped items will unmark any active items.
+        // Assigning the `activeItems` again will restore all active items even after the items array has changed.
+        // See also the `findMonacoItemReferences` method.
+        const active = this.activeItems;
         this.wrapped.items = itms.map(item => QuickPickSeparator.is(item) ? item : new MonacoQuickPickItem<T>(item, this.keybindingRegistry));
+        this.activeItems = active;
     }
 
     set activeItems(itms: readonly T[]) {
-        this.wrapped.activeItems = itms.map(item => new MonacoQuickPickItem<T>(item, this.keybindingRegistry));
+        this.wrapped.activeItems = this.findMonacoItemReferences(this.wrapped.items, itms);
     }
 
     get activeItems(): readonly (T)[] {
         return this.wrapped.activeItems.map(item => item.item);
     }
 
     set selectedItems(itms: readonly T[]) {
-        this.wrapped.selectedItems = itms.map(item => new MonacoQuickPickItem<T>(item, this.keybindingRegistry));
+        this.wrapped.selectedItems = this.findMonacoItemReferences(this.wrapped.items, itms);
     }
 
     get selectedItems(): readonly (T)[] {
@@ -520,6 +526,22 @@ class MonacoQuickPick<T extends QuickPickItem> extends MonacoQuickInput implemen
         (items: MonacoQuickPickItem<T>[]) => items.map(item => item.item));
     readonly onDidChangeSelection: Event<T[]> = Event.map(
         this.wrapped.onDidChangeSelection, (items: MonacoQuickPickItem<T>[]) => items.map(item => item.item));
+
+    /**
+     * Monaco doesn't check for deep equality when setting the `activeItems` or `selectedItems`.
+     * Instead we have to find the references of the monaco wrappers that contain the selected/active items
+     */
+    protected findMonacoItemReferences(source: readonly (MonacoQuickPickItem<T> | IQuickPickSeparator)[], items: readonly QuickPickItem[]): MonacoQuickPickItem<T>[] {
+        const monacoReferences: MonacoQuickPickItem<T>[] = [];
+        for (const item of items) {
+            for (const wrappedItem of source) {
+                if (!QuickPickSeparator.is(wrappedItem) && wrappedItem.item === item) {
+                    monacoReferences.push(wrappedItem);
+                }
+            }
+        }
+        return monacoReferences;
+    }
 }
 
 export class MonacoQuickPickItem<T extends QuickPickItem> implements IQuickPickItem {

packages/monaco/src/browser/style/index.css

@@ -227,6 +227,13 @@
   cursor: pointer !important;
 }
 
+.quick-input-progress.active.infinite {
+    background-color: var(--theia-progressBar-background);
+    width: 3%;
+    /* `progress-animation` is defined in `packages/core/src/browser/style/progress-bar.css` */
+    animation: progress-animation 1.3s 0s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
 .monaco-list:not(.drop-target) .monaco-list-row:hover:not(.selected):not(.focused) {
   background: var(--theia-list-hoverBackground);
 }

packages/plugin-ext-vscode/src/common/plugin-vscode-uri.ts

@@ -29,8 +29,14 @@ export namespace VSCodeExtensionUri {
     export function toVsxExtensionUriString(id: string): string {
         return `${VSCODE_PREFIX}${id}`;
     }
-    export function toUri(id: string): URI {
-        return new URI(toVsxExtensionUriString(id));
+    export function toUri(name: string, namespace: string): URI;
+    export function toUri(id: string): URI;
+    export function toUri(idOrName: string, namespace?: string): URI {
+        if (typeof namespace === 'string') {
+            return new URI(toVsxExtensionUriString(`${namespace}.${idOrName}`));
+        } else {
+            return new URI(toVsxExtensionUriString(idOrName));
+        }
     }
     export function toId(uri: URI): string | undefined {
         if (uri.scheme === 'vscode' && uri.path.dir.toString() === 'extension') {