Switching the menu bar causes the custom title to be misplaced

[fly-bue]

Bug Description:

Switching the menu bar causes the custom title to be misplaced.I found that there is no listening for switching menu bar events in the 'electron-menu-contribution.ts' file.I tried to solve this problem (see below), but cannot completely fix the issue.

// packages\core\src\electron-browser\menu\electron-menu-contribution.ts

this.preferenceService.onPreferenceChanged(e => {
        if (e.preferenceName === 'window.menuBarVisibility') {
            setTimeout(() => {
                this.adjustTitleToCenter();
                // Waiting for menu bar generation
            }, 100);
        }
});

Steps to Reproduce:

20240125-093408.mp4

Additional Information

• Operating System: Windows 11 家庭中文版
• Theia Version: master

[JonasHelming]

"but cannot completely fix the issue." => could you describe what is missing in the fix?

[fly-bue]

The problem occurs when reopening the IDE, an event should be listened to when the menu bar has finished rendering, I don't know if this event exists.

20240125-163258.mp4

[msujew]

Hey @fly-bue, I can confirm the main issue (i.e. the incorrect behavior when changing the preference), but cannot reproduce the startup rendering issue:

2024-01-25.13-44-12.mp4

Does it occur consistently? I cannot seem to reproduce it at all.

[fly-bue]

Hey @msujew,It continues to occur on my computer. And we can find that clientWidth is incorrect. I think it is related to menu bar rendering.

The following code can solve my problem.

 this.windowTitleService.onDidChangeTitle(title => {
    animationFrame(10).then(() => this.updateTitle(title));
});

[msujew]

@fly-bue Does the fix also work if you run animationFrame().then(() => this.updateTitle(title));, or do you need more than one animation frame? If so, just waiting for a specific number of animationframes won't fix the issue.