Bug 1591307: Introduce basic localization mechanism. r=jdescottes,stas

Differential Revision: https://phabricator.services.mozilla.com/D79803

devtools/client/inspector/compatibility/CompatibilityView.js

@@ -10,6 +10,9 @@ const {
 } = require("devtools/client/shared/vendor/react");
 const { Provider } = require("devtools/client/shared/vendor/react-redux");
 
+const FluentReact = require("devtools/client/shared/vendor/fluent-react");
+const LocalizationProvider = createFactory(FluentReact.LocalizationProvider);
+
 const compatibilityReducer = require("devtools/client/inspector/compatibility/reducers/compatibility");
 const {
   initUserSettings,
@@ -28,6 +31,7 @@ class CompatibilityView {
 
     this.inspector.store.injectReducer("compatibility", compatibilityReducer);
 
+    this._parseMarkup = this._parseMarkup.bind(this);
     this._onChangeAdded = this._onChangeAdded.bind(this);
     this._onPanelSelected = this._onPanelSelected.bind(this);
     this._onSelectedNodeChanged = this._onSelectedNodeChanged.bind(this);
@@ -85,7 +89,13 @@ class CompatibilityView {
         id: "compatibilityview",
         store: this.inspector.store,
       },
-      compatibilityApp
+      LocalizationProvider(
+        {
+          bundles: this.inspector.fluentL10n.getBundles(),
+          parseMarkup: this._parseMarkup,
+        },
+        compatibilityApp
+      )
     );
 
     this.inspector.store.dispatch(initUserSettings());
@@ -118,6 +128,14 @@ class CompatibilityView {
     );
   }
 
+  _parseMarkup(str) {
+    // Using a BrowserLoader for the inspector is currently blocked on performance regressions,
+    // see Bug 1471853.
+    throw new Error(
+      "The inspector cannot use tags in ftl strings because it does not run in a BrowserLoader"
+    );
+  }
+
   _onChangeAdded({ selector }) {
     if (!this._isAvailable()) {
       // In order to update this panel if a change is added while hiding this panel.

devtools/client/inspector/inspector.js

@@ -78,6 +78,9 @@ const { LocalizationHelper, localizeMarkup } = require("devtools/shared/l10n");
 const INSPECTOR_L10N = new LocalizationHelper(
   "devtools/client/locales/inspector.properties"
 );
+const {
+  FluentL10n,
+} = require("devtools/client/shared/fluent-l10n/fluent-l10n");
 
 // Sidebar dimensions
 const INITIAL_SIDEBAR_SIZE = 350;
@@ -190,6 +193,9 @@ Inspector.prototype = {
     // Localize all the nodes containing a data-localization attribute.
     localizeMarkup(this.panelDoc);
 
+    this._fluentL10n = new FluentL10n();
+    await this._fluentL10n.init(["devtools/client/compatibility.ftl"]);
+
     // The markup view will be initialized in onRootNodeAvailable, which will be
     // called through watchTargets and _onTargetAvailable, when a root node is
     // available for the top-level target.
@@ -332,6 +338,10 @@ Inspector.prototype = {
     return this._cssProperties.cssProperties;
   },
 
+  get fluentL10n() {
+    return this._fluentL10n;
+  },
+
   /**
    * Handle promise rejections for various asynchronous actions, and only log errors if
    * the inspector panel still exists.

devtools/client/locales/en-US/compatibility.ftl

@@ -0,0 +1,3 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.