Bug 1489426 - Add i18n for TemporaryExtensionInstaller component;

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

--HG--
extra : moz-landing-system : lando

devtools/client/aboutdebugging-new/src/actions/debug-targets.js

@@ -75,9 +75,8 @@ function inspectDebugTarget(type, id) {
   };
 }
 
-function installTemporaryExtension() {
+function installTemporaryExtension(message) {
   return async (dispatch, getState) => {
-    const message = "Select Manifest File or Package (.xpi)";
     const file = await openTemporaryExtension(window, message);
     try {
       await AddonManager.installTemporaryAddon(file);

devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionInstaller.js

@@ -4,10 +4,13 @@
 
 "use strict";
 
-const { PureComponent } = require("devtools/client/shared/vendor/react");
+const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
+const FluentReact = require("devtools/client/shared/vendor/fluent-react");
+const Localized = createFactory(FluentReact.Localized);
+
 const Actions = require("../../actions/index");
 
 /**
@@ -17,22 +20,30 @@ class TemporaryExtensionInstaller extends PureComponent {
   static get propTypes() {
     return {
       dispatch: PropTypes.func.isRequired,
+      // Provided by wrapping the component with FluentReact.withLocalization.
+      getString: PropTypes.func.isRequired,
     };
   }
 
   install() {
-    this.props.dispatch(Actions.installTemporaryExtension());
+    const message = this.props.getString("about-debugging-tmp-extension-install-message");
+    this.props.dispatch(Actions.installTemporaryExtension(message));
   }
 
   render() {
-    return dom.button(
+    return Localized(
       {
-        className: "aboutdebugging-button",
-        onClick: e => this.install()
+        id: "about-debugging-tmp-extension-install-button"
       },
-      "Load Temporary Add-on…"
+      dom.button(
+        {
+          className: "aboutdebugging-button",
+          onClick: e => this.install()
+        },
+        "Load Temporary Add-on…"
+      )
     );
   }
 }
 
-module.exports = TemporaryExtensionInstaller;
+module.exports = FluentReact.withLocalization(TemporaryExtensionInstaller);

devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl

@@ -30,3 +30,13 @@ about-debugging-runtime-service-workers = Service Workers
 about-debugging-runtime-shared-workers = Shared Workers
 # Title of the other workers category.
 about-debugging-runtime-other-workers = Other Workers
+
+# Text of a button displayed in the "This Firefox" page, in the Temporary Extension
+# section. Clicking on the button will open a file picker to load a temporary extension
+about-debugging-tmp-extension-install-button = Load Temporary Add-on…
+
+# Message displayed in the file picker that opens to select a temporary extension to load
+# (triggered by the button using "about-debugging-tmp-extension-install-button")
+# manifest.json .xpi and .zip should not be localized.
+# Note: this message is only displayed in Windows and Linux platforms.
+about-debugging-tmp-extension-install-message = Select manifest.json file or .xpi/.zip archive