From 959351337dd931508c1dae3ab2885bb49d806b54 Mon Sep 17 00:00:00 2001 From: Martin Hradil Date: Mon, 30 Jan 2023 03:30:08 +0100 Subject: [PATCH] Support `?pseudolocalization=true|false` to enable/disable pseudolocalization; `?lang=` to force language (#3225) * Support `?pseudolocalization=true|false` to enable/disable pseudolocalization Pseudlocalization (>>marking<< strings marked for translation, instead of actually translating them), is supported since #810 by setting `localStorage.test_l10n = true` in the browser console and reloading the page. > Note: the current lingui implementation needs `npm run gettext:extract; npm run gettext:compile` for any new strings before they appear as marked. We should try to remove that limitation during the i18next switch. This PR makes it easier to enable/disable by setting a `?pseudolocalization=true/false` URL param, which gets used to set/unset `localStorage.test_l10n`. (Thus, after using `?pseudolocalization=true` once, you will see it until you explicitly set `?pseudolocalization=false`, even when visiting URLs without the param.) No-Issue (but really AAP-4750) * Allow ?lang=ja to override detected language, ?lang= to unset it Visiting the UI with `?pseudolocalization=true` sets `localStorage.test_l10n = true`, and `?pseudolocalization=false` does `delete localStorage.test_l10n`. Now, also `?lang=ja` sets `localStorage.override_l10n = 'ja'`, and `?lang=` does `delete localStorage.override_l10n`. This allows the user to override the language by adding an URL param, and the UI will remember the choice until unset. Also adding two `console.debug` messages when pseudolocalization or langugage override are enabled, with URLs to disable again. (cherry picked from commit 6ba2b97ad6d2696d2a6ee535076a6b235c057c7d) --- src/l10n.ts | 59 +++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 50 insertions(+), 9 deletions(-) diff --git a/src/l10n.ts b/src/l10n.ts index e2bd502829..417b3b4ea8 100644 --- a/src/l10n.ts +++ b/src/l10n.ts @@ -5,16 +5,10 @@ import * as moment from 'moment'; // remember to update .linguirc as well const availableLanguages = ['en', 'es', 'fr', 'ko', 'nl', 'ja', 'zh']; -// Accept-Language -export const userLanguage = - navigator.languages - .map((lang) => lang.replace(/[-_].*/, '')) - .filter((lang) => availableLanguages.includes(lang))[0] || 'en'; - -async function activate(locale: string) { +async function activate(locale: string, pseudolocalization = false) { const { messages } = await import(`src/../locale/${locale}.js`); - if (window.localStorage.test_l10n === 'true') { + if (pseudolocalization) { Object.keys(messages).forEach((key) => { if (Array.isArray(messages[key])) { // t`Foo ${param}` -> ["Foo ", ['param']] => [">>", "Foo ", ['param'], "<<"] @@ -33,4 +27,51 @@ async function activate(locale: string) { moment.locale(locale); } -activate(userLanguage); +// Accept-Language +const userLanguage = navigator.languages + .map((lang) => lang.replace(/[-_].*/, '')) + .filter((lang) => availableLanguages.includes(lang))[0]; + +const searchParams = Object.fromEntries( + new URLSearchParams(window.location.search), +); + +if (searchParams.pseudolocalization === 'true') { + window.localStorage.test_l10n = 'true'; +} +if (searchParams.pseudolocalization === 'false') { + delete window.localStorage.test_l10n; +} + +if (searchParams.lang) { + window.localStorage.override_l10n = searchParams.lang; +} +if (searchParams.lang === '') { + delete window.localStorage.override_l10n; +} + +const overrideLanguage = + window.localStorage.override_l10n && + availableLanguages.includes(window.localStorage.override_l10n) && + window.localStorage.override_l10n; +const language = overrideLanguage || userLanguage || 'en'; +const pseudolocalization = window.localStorage.test_l10n === 'true'; + +if (overrideLanguage) { + console.debug( + `language autodetection overriden to: ${overrideLanguage}, unset by visiting ${ + window.location.origin + window.location.pathname + '?lang=' + }`, + ); +} +if (pseudolocalization) { + console.debug( + `pseudolocalization enabled, unset by visiting ${ + window.location.origin + + window.location.pathname + + '?pseudolocalization=false' + }`, + ); +} + +activate(language, pseudolocalization);