Bug 1485901 - Add localization plumbing for new about:debugging panels; r=jdescottes
authorBrian Birtles <birtles@gmail.com>
Thu, 30 Aug 2018 00:56:15 +0000
changeset 434016 8031da3e4c91cca4e32e9b5ef6e9ffba03e30eca
parent 434015 5acb0074a4b37de8fcc0d727bfc68cc9a0c6bda3
child 434017 6ba3579108f3dc4bcf014bbb1e5be1110795986c
push id34531
push usershindli@mozilla.com
push dateThu, 30 Aug 2018 09:55:01 +0000
treeherdermozilla-central@d8fc943845d6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes
bugs1485901
milestone63.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1485901 - Add localization plumbing for new about:debugging panels; r=jdescottes Differential Revision: https://phabricator.services.mozilla.com/D4503
devtools/client/aboutdebugging-new/aboutdebugging.js
devtools/client/aboutdebugging-new/src/components/App.js
devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl
devtools/client/jar.mn
--- a/devtools/client/aboutdebugging-new/aboutdebugging.js
+++ b/devtools/client/aboutdebugging-new/aboutdebugging.js
@@ -14,47 +14,77 @@ const Services = require("Services");
 
 const { bindActionCreators } = require("devtools/client/shared/vendor/redux");
 const { createFactory } =
   require("devtools/client/shared/vendor/react");
 const { render, unmountComponentAtNode } =
   require("devtools/client/shared/vendor/react-dom");
 const Provider =
   createFactory(require("devtools/client/shared/vendor/react-redux").Provider);
+const { L10nRegistry, FileSource } =
+  require("resource://gre/modules/L10nRegistry.jsm");
 
 const actions = require("./src/actions/index");
 const { configureStore } = require("./src/create-store");
 const {
   addNetworkLocationsObserver,
   getNetworkLocations,
 } = require("./src/modules/network-locations");
 
 const App = createFactory(require("./src/components/App"));
 
 const { PAGES } = require("./src/constants");
 
 const AboutDebugging = {
-  init() {
+  async init() {
     if (!Services.prefs.getBoolPref("devtools.enabled", true)) {
       // If DevTools are disabled, navigate to about:devtools.
       window.location = "about:devtools?reason=AboutDebugging";
       return;
     }
 
     this.store = configureStore();
     this.actions = bindActionCreators(actions, this.store.dispatch);
 
-    render(Provider({ store: this.store }, App()), this.mount);
+    const messageContexts = await this.createMessageContexts();
+
+    render(
+      Provider({ store: this.store }, App({ messageContexts })),
+      this.mount
+    );
 
     this.actions.selectPage(PAGES.THIS_FIREFOX);
     addNetworkLocationsObserver(() => {
       this.actions.updateNetworkLocations(getNetworkLocations());
     });
   },
 
+  async createMessageContexts() {
+    // XXX Until the strings for the updated about:debugging stabilize, we
+    // locate them outside the regular directory for locale resources so that
+    // they don't get picked up by localization tools.
+    const temporarySource = new FileSource(
+      "aboutdebugging",
+      ["en-US"],
+      "chrome://devtools/content/aboutdebugging-new/tmp-locale/{locale}/"
+    );
+    L10nRegistry.registerSource(temporarySource);
+
+    const locales = Services.locale.getAppLocalesAsBCP47();
+    const generator =
+      L10nRegistry.generateContexts(locales, ["aboutdebugging.ftl"]);
+
+    const contexts = [];
+    for await (const context of generator) {
+      contexts.push(context);
+    }
+
+    return contexts;
+  },
+
   destroy() {
     unmountComponentAtNode(this.mount);
   },
 
   get mount() {
     return document.getElementById("mount");
   },
 };
--- a/devtools/client/aboutdebugging-new/src/components/App.js
+++ b/devtools/client/aboutdebugging-new/src/components/App.js
@@ -4,29 +4,33 @@
 
 "use strict";
 
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 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 LocalizationProvider = createFactory(FluentReact.LocalizationProvider);
+
 const { PAGES } = require("../constants");
 
 const ConnectPage = createFactory(require("./ConnectPage"));
 const RuntimePage = createFactory(require("./RuntimePage"));
 const Sidebar = createFactory(require("./sidebar/Sidebar"));
 
 class App extends PureComponent {
   static get propTypes() {
     return {
       // The "dispatch" helper is forwarded to the App component via connect.
       // From that point, components are responsible for forwarding the dispatch
       // property to all components who need to dispatch actions.
       dispatch: PropTypes.func.isRequired,
+      messageContexts: PropTypes.arrayOf(PropTypes.object).isRequired,
       networkLocations: PropTypes.arrayOf(PropTypes.string).isRequired,
       selectedPage: PropTypes.string.isRequired,
     };
   }
 
   getSelectedPageComponent() {
     const { dispatch, networkLocations, selectedPage } = this.props;
 
@@ -37,24 +41,30 @@ class App extends PureComponent {
         return ConnectPage({ networkLocations });
       default:
         // Invalid page, blank.
         return null;
     }
   }
 
   render() {
-    const { dispatch, networkLocations, selectedPage } = this.props;
+    const {
+      dispatch,
+      messageContexts,
+      networkLocations,
+      selectedPage,
+    } = this.props;
 
-    return dom.div(
-      {
-        className: "app",
-      },
-      Sidebar({ dispatch, networkLocations, selectedPage }),
-      this.getSelectedPageComponent(),
+    return LocalizationProvider(
+      { messages: messageContexts },
+      dom.div(
+        { className: "app" },
+        Sidebar({ dispatch, networkLocations, selectedPage }),
+        this.getSelectedPageComponent()
+      )
     );
   }
 }
 
 const mapStateToProps = state => {
   return {
     networkLocations: state.ui.networkLocations,
     selectedPage: state.ui.selectedPage,
--- a/devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
+++ b/devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
@@ -3,16 +3,19 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 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 { PAGES } = require("../../constants");
 
 const SidebarItem = createFactory(require("./SidebarItem"));
 const FIREFOX_ICON = "chrome://devtools/skin/images/aboutdebugging-firefox-logo.svg";
 const CONNECT_ICON = "chrome://devtools/skin/images/aboutdebugging-connect-icon.svg";
 const GLOBE_ICON = "chrome://devtools/skin/images/aboutdebugging-globe-icon.svg";
 
 class Sidebar extends PureComponent {
@@ -48,32 +51,38 @@ class Sidebar extends PureComponent {
     const { dispatch, selectedPage } = this.props;
 
     return dom.aside(
       {
         className: "sidebar",
       },
       dom.ul(
         {},
-        SidebarItem({
-          id: PAGES.THIS_FIREFOX,
-          dispatch,
-          icon: FIREFOX_ICON,
-          isSelected: PAGES.THIS_FIREFOX === selectedPage,
-          name: "This Firefox",
-          selectable: true,
-        }),
-        SidebarItem({
-          id: PAGES.CONNECT,
-          dispatch,
-          icon: CONNECT_ICON,
-          isSelected: PAGES.CONNECT === selectedPage,
-          name: "Connect",
-          selectable: true,
-        }),
+        Localized(
+          { id: "about-debugging-sidebar-this-firefox", attrs: { name: true } },
+          SidebarItem({
+            id: PAGES.THIS_FIREFOX,
+            dispatch,
+            icon: FIREFOX_ICON,
+            isSelected: PAGES.THIS_FIREFOX === selectedPage,
+            name: "This Firefox",
+            selectable: true,
+          })
+        ),
+        Localized(
+          { id: "about-debugging-sidebar-connect", attrs: { name: true } },
+          SidebarItem({
+            id: PAGES.CONNECT,
+            dispatch,
+            icon: CONNECT_ICON,
+            isSelected: PAGES.CONNECT === selectedPage,
+            name: "Connect",
+            selectable: true,
+          })
+        ),
         dom.hr(),
         this.renderDevices()
       )
     );
   }
 }
 
 module.exports = Sidebar;
new file mode 100644
--- /dev/null
+++ b/devtools/client/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl
@@ -0,0 +1,14 @@
+# 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/.
+
+### These strings are used inside the about:debugging panel which is available
+### by setting the preference `devtools.aboutdebugging.new-enabled` to true.
+
+# Sidebar heading for selecting the currently running instance of Firefox
+about-debugging-sidebar-this-firefox =
+  .name = This Firefox
+
+# Sidebar heading for connecting to some remote source
+about-debugging-sidebar-connect =
+  .name = Connect
--- a/devtools/client/jar.mn
+++ b/devtools/client/jar.mn
@@ -87,16 +87,19 @@ devtools.jar:
     content/shared/widgets/cubic-bezier.css (shared/widgets/cubic-bezier.css)
     content/shared/widgets/filter-widget.css (shared/widgets/filter-widget.css)
     content/shared/widgets/spectrum.css (shared/widgets/spectrum.css)
     content/aboutdebugging/aboutdebugging.xhtml (aboutdebugging/aboutdebugging.xhtml)
     content/aboutdebugging/aboutdebugging.css (aboutdebugging/aboutdebugging.css)
     content/aboutdebugging-new/index.html (aboutdebugging-new/index.html)
     content/aboutdebugging-new/aboutdebugging.css (aboutdebugging-new/aboutdebugging.css)
     content/aboutdebugging-new/aboutdebugging.js (aboutdebugging-new/aboutdebugging.js)
+    # The following line is temporary until the strings for the new
+    # about:debugging feature stabilize.
+    content/aboutdebugging-new/tmp-locale/en-US/aboutdebugging.ftl (aboutdebugging-new/tmp-locale/en-US/aboutdebugging.notftl)
     content/responsive.html/index.xhtml (responsive.html/index.xhtml)
     content/dom/index.html (dom/index.html)
     content/dom/main.js (dom/main.js)
     content/accessibility/index.html (accessibility/index.html)
     content/accessibility/main.js (accessibility/main.js)
 %   skin devtools classic/1.0 %skin/
     skin/devtools-browser.css (themes/devtools-browser.css)
     skin/dark-theme.css (themes/dark-theme.css)