electron: [Bug]: UTF-8 productName is interpreted as latin1 on Gnome Shell App Menu

Preflight Checklist

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

Electron Version

16.2.2

What operating system are you using?

Other Linux

Operating System Version

Linux fedora 5.14.10-300.fc35.aarch64 #1 SMP Thu Oct 7 20:32:40 UTC 2021 aarch64 aarch64 aarch64 GNU/Linux

What arch are you using?

arm64 (including Apple Silicon)

Last Known Working Electron version

No response

Expected Behavior

Electron app can correctly show UTF-8 productName on Gnome Shell app menu.

Actual Behavior

This issue is specific to Gnome Shell (41) app menu. Can be reproduced with Electron 17 or 18.

I develop an Electron app: https://github.com/MrMYHuang/cbetar2

This app can be run in dev mode by:

git clone --recursive https://github.com/MrMYHuang/cbetar2
npm i
npm run start

# In another terminal, run
npm run start-electron

The app specifies a Chinese productName “電子佛典” in UTF-8 in package.json. The Electron app correctly shows the productName on the window title bar but not on the Gnome Shell app menu as shown in here:

However, if you change productName to any English words and restart the app, both the Gnome Shell app menu and the window title bar display correctly.

By my study this is an issue of displaying UTF-8 string as latin1: try to open a new file by vscode and copy the string “電子佛典” to it and SAVE it with UTF-8, like this: Then, click the UTF-8 button on vscode and click “Reopen with encoding” and “Western (ISO 8859-1)” (latin1), you will get this: The misinterpreted text is the same as the Chinese one shown in the Gnome Shell app menu. Thus, it’s an issue of UTF-8 strings misinterpreted as latin1.

This app is also packed as flatpak and available on Flathub:

flatpak remote-modify --no-filter flathub
flatpak install flathub io.github.mrmyhuang.cbetar2
flatpak run io.github.mrmyhuang.cbetar2

(You can also pack it by yourself by running npm run dist-flatpak-dev.) Surprisingly, I have no idea why this one correctly displays the Chinese name on the Gnome Shell app menu:

Furthermore, if you run the app directly without using flatpak run, the Chinese name will display incorrectly again:

/var/lib/flatpak/app/io.github.mrmyhuang.cbetar2/current/active/files/main/cbetar2

Testcase Gist URL

No response

Additional Information

No response

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 15 (2 by maintainers)

Most upvoted comments

Here is my workaround for wmclass, maybe productName needn’t remove from package.json?

Thank you. It works.

I use the latin1-encoding name (e.g. foo) in package.json to make all Linux app having a latin1-encoding wmclass value. Run these before new BrowserWindow.

if (process.platform === 'linux') {
  app.setName(PackageInfos.name);
}

Then, packing foo.desktop to Linux package, so that after installing it, foo.desktop will be in one of $XDG_DATA_DIRS.

MrMYHuang on Apr 29, 2022

Use ${nameInPackageJson}.desktop and remove productName in package.json: (works!)

Sorry, I updated the 4th method a little bit in the original comment. It needs to remove productName in package.json so an Electron app will use name in package.json as wmclass. Gnome Shell selects a desktop file for one app based on wmclass value from one of $XDG_DATA_DIRS. For example, name in package.json is foo. A launched Electron app with the package.json has a wmclass value foo. Gnome Shell loads foo.desktop from one of $XDG_DATA_DIRS for the app and use Name in foo.desktop as menu bar name. Fortunately, we can use UTF-8 Name in .desktop file.

If a package.json contains productName, it seems the Electron app will use productName as wmclass value. But unfortunately, productName with non-latin1 characters doesn’t work with desktop file.

If one uses electron-builder to build packages, I provide electron-builder configs for Windows, macOS, and Linux to workaround the non-latin1 prodcutName problem without using it in package.json: https://github.com/MrMYHuang/cbetar2/tree/master/electronBuilderConfigs

Here is my workaround for wmclass, maybe productName needn’t remove from package.json?

  // StartupWMClass does not support unicode.
  // according to Electron's source code, WM_CLASS is set to app.name as ASCII codec.
  // temporary set app.name to non unicode before creating new BrowserWindow
  // and restore it back after BrowserWindow was created.
  const originalAppName = Electron.app.name;
  if (process.platform === 'linux' && originalAppName !== LINUX_WM_CLASS_NAME) {
    Electron.app.setName(LINUX_WM_CLASS_NAME);
  }
  const window = new Electron.BrowserWindow(composedOptions);
  if (process.platform === 'linux' && Electron.app.name !== originalAppName) {
    Electron.app.setName(originalAppName);
  }

sohobloo on Apr 29, 2022