[Bug]: Tray menu item is not centered in windows10

[WangleJiu]

Preflight Checklist

• [X] I have read the Contributing Guidelines for this project.
• [X] I agree to follow the Code of Conduct that this project adheres to.
• [X] I have searched the issue tracker for a bug report that matches the one I want to file, without success.

Electron Version

27.0.3

What operating system are you using?

Windows

Operating System Version

windows 10

What arch are you using?

x64

Last Known Working Electron version

No response

Expected Behavior

I try to set Tray's Menu for my app with Electron version 27.0.3, I hope Menu item is Centered, but the text is right-aligned.

my code is:

    const contextMenu = Menu.buildFromTemplate([
      { label: 'Item1', type: 'normal' },
      { label: 'Item2', type: 'normal' },
      { label: 'Item4', type: 'normal' }
    ]);
    tray.setToolTip('This is my application.');
    tray.setContextMenu(contextMenu);

the screenshot is:

Actual Behavior

I also try Electron by version 25.4.0, It's acting correctly.

Testcase Gist URL

https://gist.github.com/WangleJiu/64e11575334f6c38f886b672703c42f2

Additional Information

No response

[electron-issue-triage[bot]]

Hello @WangleJiu. Thanks for reporting this and helping to make Electron better!

Would it be possible for you to make a standalone testcase with only the code necessary to reproduce the issue? For example, Electron Fiddle is a great tool for making small test cases and makes it easy to publish your test case to a gist that Electron maintainers can use.

Stand-alone test cases make fixing issues go more smoothly: it ensure everyone's looking at the same issue, it removes all unnecessary variables from the equation, and it can also provide the basis for automated regression tests.

Now adding the https://github.com/electron/electron/labels/blocked%2Fneed-repro label for this reason. After you make a test case, please link to it in a followup comment. This issue will be closed in 10 days if the above is not addressed.

[WangleJiu]

this is gist for my problem https://gist.github.com/WangleJiu/64e11575334f6c38f886b672703c42f2

[codebytere]

I'm not able to reproduce this behavior; it looks as expected on 27.0.3:

[WangleJiu]

This problem occurs on win10，on win11 it works fine. Your system looks to be win11. @codebytere

[Veiintc]

I have the same problem in 28.2.0

[mlaurencin]

I'm able to repro this but only on Windows 10. As mentioned above, it works fine on Windows 11.

[mlaurencin]

After doing some bisecting, it looks like all through v26 and v27 the menu was going from being centered to left aligned to centered to right aligned. This continued at least up through the 29 nightlies. With v30.0.0-alpha.2 however there is a distinct change in the UI and the text is centered. Unfortunately, after doing a comparison it looks like the commit that probably fixed things was a Chromium bump https://github.com/electron/electron/compare/v30.0.0-alpha.1...v30.0.0-alpha.2 .

@WangleJiu If you test on v30.0.0-alpha.2 or v30.0.0 is the issue resolved for you?

[WangleJiu]

@mlaurencin I have tried v30.0.0-alpha.2 and it works normal, thanks a lot!