feat(core): add locale and no-translate attributes to html element on startup

[Alexander-Taran]

Modify html tag attributes on startup

What it does

• Set 'lang' attribute based on detected locale.
• Prevent auto-translation by setting 'translate="no"' and adding 'notranslate' class.

This ensures better i18n support and avoids issues with unintended UI translation.

fixes #16968

How to test

Open web application and check that html element in devtools has the right attributes respecting locale saved to localstorage via nls

Review checklist

• As an author, I have thoroughly tested my changes and carefully followed the review guidelines
• User-facing text is internationalized using the nls service (for details, please see the Internationalization/Localization section in the Coding Guidelines)

Reminder for reviewers

• As a reviewer, I agree to behave in accordance with the review guidelines

[msujew]

Thanks for the contribution!

This works well for the main window, but doesn't seem to affect the secondary-window feature - secondary windows are still using lang="en". You can test this by popping out an editor widget for example. Do you mind fixing this as well? Afterwards, this should be good to go.

[Alexander-Taran]

@msujew how would one approach this one?
inject same code somwhere here

packages/core/src/browser/secondary-window-handler.ts

   /**
     * Sets up message forwarding from the main window to secondary windows.
     * Does nothing if this service has already been initialized.
     *
     * @param shell The `ApplicationShell` that widgets will be moved out from.
     * @param dockPanelRendererFactory A factory function to create a `DockPanelRenderer` for use in secondary windows.
     */
    init(shell: ApplicationShell, dockPanelRendererFactory: (document?: Document | ShadowRoot) => DockPanelRenderer): void {
        if (this.applicationShell) {
            // Already initialized
            return;
        }
        this.applicationShell = shell;
        this.dockPanelRendererFactory = dockPanelRendererFactory;

        this.secondaryWindowService.beforeWidgetRestore(([widget, window]) => this.removeWidget(widget, window));
    }

[msujew]

Yes, somewhere here probably, where the new window is instantiated:

theia/packages/core/src/browser/secondary-window-handler.ts

Lines 176 to 189 in fea3b46

	newWindow.addEventListener('load', () => {
	this.keybindings.registerEventListeners(newWindow);
	// Use the widget's title as the window title
	// Even if the widget's label were malicious, this should be safe against XSS because the HTML standard defines this is inserted via a text node.
	// See https://html.spec.whatwg.org/multipage/dom.html#document.title
	newWindow.document.title = `${widget.title.label} — ${mainWindowTitle}`;
	const element = newWindow.document.getElementById('widget-host');
	if (!element) {
	console.error('Could not find dom element to attach to in secondary window');
	return;
	}
	this.onWillAddWidgetEmitter.fire([widget, newWindow]);

[Alexander-Taran]

@msujew
Cloned the code into secondary window..
Had to import nls there as well..
Not sure if it will share the same localStorage. It should though.
And weather something in secondary window already used it.

[msujew]

Having the nls import in the secondary window code is fine and isn't technically problematic, but I don't think we need to duplicate the code. We can do this a bit cleaner, see my comments below.

[msujew]

Suggestion: document still refers to the same main document of the application. You probably want to use newWindow.document here instead. This doesn't do anything in its current form.

[msujew]

Suggestion: Instead of duplicating the code, I think it'd be better to have a nls.setHtmlLang(element: HTMLElement) (or similar) function available on the nls namespace that sets the translate and lang attributes as well as the notranslate class on the specified element. We can call that for both the main window document as well as any secondary window documents.

[Alexander-Taran]

@msujew do I read you right? Combine both calls in respective modules into one calling a function in nls?

Or be more explicit and do 2 calls serving kinda different purposes (set right lang/prevent auto translation)
In a spirit of better overloading I'd have them called in some method of both classes

contribution->setLocaleOnHtmlElement-> nls.boo(); nls.foo()
secondaryWindow -> setLocaleOnHtmlElement -> nls.boo(); nls.foo()

[msujew]

I'm fine with having two functions for that as well 👍

[Alexander-Taran]

@msujew moved implementations to nls.

[msujew]

@ndoschek I'm currently on vacation and can't check the validity of the latest changes. The code itself looks good to me. Can you assign someone else to give this the green light? Thank you.