How can I use the preference value when I try to "registerMenus"

[CarlosSun]

The current Theia didn't support I18N now, all the menus's label is hard coded in English. I want to register a new menu item without hard code in Theia.

The following is what I did:

1. Implemented the own Preference which save the language setting.
2. In my own xxxMenuContribution, fetch the preference language setting first, then set the menu item label accordingly.

The question is, before the "registerMenus" executed, the retrieved preference always showing null or default value, not the value in setting file. I guess, the Theia inital the project preferece kind of service is behind the others. After the Theia initial phase, the PrefereceService can get the correct value, seems in this situation, I lost the chance to register the menu with correct label.

Any hint how should I get the correct preference setting before "registerMenus"?
Or do we have any API to update the menu label after preferenceService.onPreferenceChanged occurs?

Following is the sample code. Thank you.

@Injectable()
export class TheiaHelloWorldExtensionMenuContribution implements MenuContribution {

constructor(@inject (PreferenceService) protected readonly preferencesService: PreferenceService)
{
    var settingLanguage = this.preferencesService.get('studio.language');
    // The settingLanguage always fetching null
    if (settingLanguage !== null)
    {
        intl.init({
            currentLocale: settingLanguage as string,
            locales,
        })
    }
}

registerMenus(menus: MenuModelRegistry): void {  
    menus.unregisterMenuAction(TheiaHelloWorldExtensionCommand.id);
    menus.registerMenuAction(CommonMenus.EDIT_FIND, {
        commandId: TheiaHelloWorldExtensionCommand.id,
        label: intl.get("CHANGE_LANGUAGE") // Get the I10N label value
    });
}

}

[kittaakos]

I did not try it (you can expect better support and faster response time if you prepare a public repository with your changes) but there is a PreferenceService#ready, once the promise resolved, you do the menu registry modifications. Note, you won't be able to use the registerMenus hooks, as they're sync.

Can you try something like this:

class YourFrontentContribution implements FrontendApplicationContributions {

  @inject (PreferenceService) protected readonly ps: PreferenceService;
  @inject (MenuModelRegistry) protected readonly mr: MenuModelRegisytr;

  onStart(): Promise<void> {
    await this.ps.ready;
    //  get the preference values
   this.mr.unregister
   this.mr.register
  }
}

[CarlosSun]

@kittaakos Thanks for your suggestion. Even though the preferenceService can retrieve the DEFAULT value when Theia Extension started, it always getting the DEFAULT value, not the user setting value (user set the language as en-US, but it will return default value zh-CN), the Menu lable still display as DEFAULT setting, not the CORRECT one. Maybe this is the Theia mechanism.

Maybe, I need try @akosyakov approach, using "onPreferenceChanged" event to monitor the preference value change, then find a way to update the Menu lable, or re-register the menu again. I am a new for Theia, thanks again. Have a good day.

[kittaakos]

it always getting the DEFAULT value, not the user setting value

I have tried it again, and it works. First, you will get the default value ('zh-CN'), then when the preference is initialized, you will get the user-defined value ('en-US') onPreferenceChanged.

Create a ./theia/settings.json file in your workspace root, and add a user-defined preference:

{
  "studio.language": "en-US"
}

Then the app picks up the preference change.

You can read the documentation here.

[CarlosSun]

You wil have a method like updateMenus which first will remove all previously registered contributions and then add new. You can achieve it by using DisposableCollection and disposing it on each call to updateMenus. After that you add new disposable objects to it returned by MenuModelRegistry.register method.

Hi @akosyakov , thanks for your suggestion, according to your suggestion, I made a big progress, based on your approach: when the onPreferenceChanged event occures, the newly added method updateMenus try to dispose previous menu then register a new one with I10N lable.

As following screenshot shown, in the code level, the new menu with correct language lable (with user preferece setting) is added into "menu" object, seems everything goes well, but in the Browser client, the newly added Menu didn't be displayed. I guess, maybe this is a Api can help to refresh or some action need to take. Could you give me some hints about the last step? Thanks.

I commit what I did into the example repro.

https://github.com/CarlosSun/TheiaPreferenceQuestionDemo/blob/9595f88cebb9986c943c4225bcb97e7876f88906/theia-hello-world-extension/theia-hello-world-extension/src/browser/theia-hello-world-extension-contribution.ts#L87

[kittaakos]

From here:

For the browser env, I bet you have to explicitly refresh them.

Menu actions cannot be registered on the fly, it's not dynamic by default. I did some changes, I do not know why it shows the other way around, but you can put a breakpoint and try to figure it out.

Diff:

diff --git a/theia-hello-world-extension/theia-hello-world-extension/src/browser/theia-hello-world-extension-contribution.ts b/theia-hello-world-extension/theia-hello-world-extension/src/browser/theia-hello-world-extension-contribution.ts
index eddc256..ae1525c 100644
--- a/theia-hello-world-extension/theia-hello-world-extension/src/browser/theia-hello-world-extension-contribution.ts
+++ b/theia-hello-world-extension/theia-hello-world-extension/src/browser/theia-hello-world-extension-contribution.ts
@@ -1,8 +1,9 @@
 import { injectable, inject, postConstruct } from "inversify";
 import { CommandContribution, CommandRegistry, MenuContribution, MenuModelRegistry, MessageService, DisposableCollection } from "@theia/core/lib/common";
-import { CommonMenus, PreferenceService, PreferenceScope } from "@theia/core/lib/browser";
+import { CommonMenus, PreferenceService, PreferenceScope, FrontendApplication } from "@theia/core/lib/browser";
 import * as intl from 'react-intl-universal';
 import { StudioLanguagePreferences } from "./studio-language-preference";
+import { BrowserMenuBarContribution } from '@theia/core/lib/browser/menu/browser-menu-plugin';
 
 const locales = {
     "en-US": require('../common/i18n/en.json'),
@@ -19,6 +20,27 @@ export var TheiaHelloWorldExtensionCommand = {
     label: intl.get("CHANGE_LANGUAGE")
 };
 
+@injectable()
+export class DynamicBrowserMenuBarContribution extends BrowserMenuBarContribution {
+
+    protected app: FrontendApplication;
+
+    onStart(app: FrontendApplication): void {
+        this.app = app;
+        super.onStart(app);
+    }
+
+    update(): void {
+        const menuBar = this.menuBar;
+        if (menuBar) {
+            menuBar.dispose();
+        }
+        const menu = this.factory.createMenuBar();
+        this.app.shell.addWidget(menu, { area: 'top' });
+    }
+
+}
+
 @injectable()
 export class TheiaHelloWorldExtensionCommandContribution implements CommandContribution {
 
@@ -94,6 +116,9 @@ export class TheiaHelloWorldExtensionMenuContribution implements MenuContributio
     @inject(MenuModelRegistry)
     protected readonly menuProvider: MenuModelRegistry;
 
+    @inject(DynamicBrowserMenuBarContribution)
+    protected readonly menuBarContribution: DynamicBrowserMenuBarContribution;
+
     @postConstruct()
     protected init(): void {
         this.studioLanguagePreference.onPreferenceChanged(e => {
@@ -109,6 +134,7 @@ export class TheiaHelloWorldExtensionMenuContribution implements MenuContributio
     }
     
     registerMenus(menus: MenuModelRegistry): void {  
+
     }
 
     updateMenus(menus: MenuModelRegistry) {
@@ -120,5 +146,7 @@ export class TheiaHelloWorldExtensionMenuContribution implements MenuContributio
                 label: intl.get("CHANGE_LANGUAGE") // Get the I10N label value
             })
         );
+        this.menuBarContribution.update();
+        
     }
 }
diff --git a/theia-hello-world-extension/theia-hello-world-extension/src/browser/theia-hello-world-extension-frontend-module.ts b/theia-hello-world-extension/theia-hello-world-extension/src/browser/theia-hello-world-extension-frontend-module.ts
index a2a29c4..819ada8 100644
--- a/theia-hello-world-extension/theia-hello-world-extension/src/browser/theia-hello-world-extension-frontend-module.ts
+++ b/theia-hello-world-extension/theia-hello-world-extension/src/browser/theia-hello-world-extension-frontend-module.ts
@@ -1,17 +1,20 @@
 /**
  * Generated using theia-extension-generator
  */
-import { TheiaHelloWorldExtensionCommandContribution, TheiaHelloWorldExtensionMenuContribution } from './theia-hello-world-extension-contribution';
+import { TheiaHelloWorldExtensionCommandContribution, TheiaHelloWorldExtensionMenuContribution, DynamicBrowserMenuBarContribution } from './theia-hello-world-extension-contribution';
 import {bindStudioLanguagePreferences} from './studio-language-preference';
 import {
     CommandContribution,
     MenuContribution
 } from "@theia/core/lib/common";
 import { ContainerModule } from "inversify";
+import { BrowserMenuBarContribution } from '@theia/core/lib/browser/menu/browser-menu-plugin';
 
-export default new ContainerModule(bind => {
+export default new ContainerModule((bind, unbind, isBound, rebind) => {
     // add your contribution bindings here
     bindStudioLanguagePreferences(bind);
     bind(MenuContribution).to(TheiaHelloWorldExtensionMenuContribution);
     bind(CommandContribution).to(TheiaHelloWorldExtensionCommandContribution);
+    bind(DynamicBrowserMenuBarContribution).toSelf().inSingletonScope();
+    rebind(BrowserMenuBarContribution).toService(DynamicBrowserMenuBarContribution);
 });

In action:

[CarlosSun]

@kittaakos @akosyakov Thanks a lot. 👍 Have a pleasant workday to all.

[CarlosSun]

@kittaakos Thanks for your reply, I am trying your solution. Here is my testing project. Thanks. Will keep update once I got something.
https://github.com/CarlosSun/TheiaPreferenceQuestionDemo

[kittaakos]

Thanks for the example repo, @CarlosSun. I see you want to change the labels at runtime too. The other approach is the one you should use then. Keep in mind, I do not know if changing the main menu labels (File, Edit, etc) is supported; they're treated differently. For the browser env, I bet you have to explicitly refresh them. For the electron env, there is a workaround.