i18n: fall back to en-US for simple strings

This CL fixes an edge case where a UIString has had a placeholder
removed. On Canary (where we do not have up to date translations in all
locales), this caused an error.

With this CL we will now catch this error and fall back to en-US.

Bug: none
Change-Id: Idfb05255227c3006dd5dd4b5c200073864b7bf25
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6054628
Reviewed-by: Simon Zünd <szuend@chromium.org>
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>

Author: jackfranklin

front_end/core/i18n/i18n.test.ts

@@ -79,6 +79,14 @@ describe('getLocalizedLanguageRegion', () => {
 describe('getFormatLocalizedString', () => {
   let i18nInstance: i18nRaw.I18n.I18n;
   beforeEach(() => {
+    i18n.DevToolsLocale.DevToolsLocale.instance({
+      create: true,
+      data: {
+        navigatorLanguage: 'en-US',
+        settingLanguage: 'en-US',
+        lookupClosestDevToolsLocale: () => 'en-US',
+      },
+    });
     i18nInstance = new i18nRaw.I18n.I18n(['en-US'], 'en-US');
     i18nInstance.registerLocaleData('en-US', {});  // Always fall back to UIStrings.
   });
@@ -118,6 +126,43 @@ describe('getFormatLocalizedString', () => {
   });
 });
 
+describe('falling back when a locale errors', () => {
+  it('reverts to using the UIStrings directly', async () => {
+    i18n.DevToolsLocale.DevToolsLocale.instance({
+      create: true,
+      data: {
+        // Create the locale and set en-GB to default. This test is going to
+        // assert that when there is an error with the en-GB string that we
+        // fallback.
+        navigatorLanguage: 'en-GB',
+        settingLanguage: 'en-GB',
+        lookupClosestDevToolsLocale: () => 'en-GB',
+      },
+    });
+    const i18nInstance = new i18nRaw.I18n.I18n(['en-GB', 'en-US'], 'en-US');
+
+    // Recreate the bug that can happen in Canary: the en-US translation is up
+    // to date (no PH1 placeholder), but the en-GB translation is out of date.
+    // We expect that in this instance we should fallback to en-US.
+    i18nInstance.registerLocaleData('en-US', {
+      'test.ts | placeholder': {message: 'US: hello world'},
+    });
+    // Register the (outdated) en-GB string.
+    i18nInstance.registerLocaleData('en-GB', {
+      'test.ts | placeholder': {message: 'GB: hello {PH1}'},
+    });
+
+    const uiStrings = {placeholder: 'US: hello world'};
+    const registeredStrings = i18nInstance.registerFileStrings('test.ts', uiStrings);
+
+    // We should see "hello world" because we don't pass the placeholder value,
+    // and that means the en-GB translations are invalid, and we fallback to
+    // the UIStrings.
+    const output = i18n.i18n.getLocalizedString(registeredStrings, uiStrings.placeholder);
+    assert.strictEqual(output, 'US: hello world');
+  });
+});
+
 describe('fetchAndRegisterLocaleData', () => {
   let fetchStub: sinon.SinonStub;
 

front_end/third_party/i18n/localized-string-set.ts

@@ -94,9 +94,19 @@ export class LocalizedStringSet {
     }
 
     const formatter = this.getMessageFormatterFor(message);
-    const translatedString = formatter.format() as string;
-    this.cachedSimpleStrings.set(message, translatedString);
-    return translatedString;
+    try {
+      const translatedString = formatter.format() as string;
+      this.cachedSimpleStrings.set(message, translatedString);
+      return translatedString;
+    } catch (e) {
+      // The message could have been updated and use different placeholders then
+      // the translation. This is a rare edge case so it's fine to create a temporary
+      // IntlMessageFormat and fall back to the UIStrings message.
+      const formatter = new IntlMessageFormat.IntlMessageFormat(message, this.localeForFormatter, undefined, {ignoreTag: true});
+      const translatedString = formatter.format() as string;
+      this.cachedSimpleStrings.set(message, translatedString);
+      return translatedString;
+    }
   }
 
   private getFormattedLocalizedString(message: string, values: Values): string {