No support for Page Translation in Google Chrome

[lukaszpolowczyk]

Steps to reproduce

I notice that matrix.org (element.io) is not translated by the site translator.

The element.io page does not translate in Google Chrome.

Just go to any chat on element.io, and try to translate it in Google Chrome, using the built-in translator. It won't work.

Outcome

The content of chat messages, but also perhaps titles and descriptions, should easily be translated by Google Chrome's built-in page translator.

For example, Discord can be translated using this translator.

Operating system

Arch Linux

Browser information

Wersja 114.0.5735.106 (Oficjalna wersja) (64-bitowa)

URL for webapp

develop.element.io, app.element.io

Application version

No response

Homeserver

No response

Will you send logs?

Yes

[pydeveloperashish]

its getting translated using google builtin translator. Check again

[t3chguy]

This is an upstream issue between React & Chrome

facebook/react#11538 (comment)
https://bugs.chromium.org/p/chromium/issues/detail?id=872770

[lukaszpolowczyk]

@t3chguy Definitely projects in React can somehow handle this. Maybe not perfectly, but they can.
Even Facebook can handle it.
So perhaps there is a fault on the vector-im side after all?

[t3chguy]

@lukaszpolowczyk the "fault" is we specify notranslate because without it React would crash when translation was done. #13557 (comment)

[lukaszpolowczyk]

@t3chguy So please, at least for individual chat messages add class "translate" - Chrome supports this.

Then the whole page is not translated, but this particular element with text is.
Mastodon, which is in vue, copes via class "translate", see for yourself - https://toot.cafe/@rich_harris/with_replies
It can be done, React can also handle it.

I know that React can also play in the message, for example, if someone edits their post, but that should already work.
But even if something breaks, I can refresh the web.element.io page, - that's not a bad thing!

[t3chguy]

that's not a bad thing!

It is though, as it looks like the app is broken, there's zero indication it was broken by your browser doing unexpected things.

Contributions are welcome here, it isn't something that the web app team is likely to have any time to work on any time soon.

[lukaszpolowczyk]

In web.element.io, just add class "translate" to an element that has class "mx_EventTile_body markdown-body" - then Google Chrome translates only those elements.

I could make a dynamic UserScript that adds such a class to a chat message, and then Google Translator in Chrome would detect it for itself and translate the messages. :D

[t3chguy]

Be my guest.

Contributions are welcome here

[lukaszpolowczyk]

@t3chguy I can't even find this element in the source code. I would need help, direction.

[t3chguy]

Pretty much all the timeline code is in https://github.com/matrix-org/matrix-react-sdk

[richvdh]

I notice that matrix.org (element.io) is not translated by the site translator.

The element.io page does not translate in Google Chrome.

I think/assume this is talking about the Element webapp, rather than https://element.io