Bug 1685061 - [devtools] Localize new perf panel onboarding UI. r=julienw,flod.
☠☠ backed out by 7d089aec8ffc ☠ ☠
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Wed, 10 Feb 2021 15:36:20 +0000
changeset 566849 2443341cb2526439e5708b7d8443f714115602b0
parent 566848 ffd5979ffbd642edf036d1826c698f403c155535
child 566850 7dcb92850f2201721f997658ef72ee51bf513909
push id136155
push usernchevobbe@mozilla.com
push dateWed, 10 Feb 2021 15:40:09 +0000
treeherderautoland@7dcb92850f22 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjulienw, flod
bugs1685061
milestone87.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 1685061 - [devtools] Localize new perf panel onboarding UI. r=julienw,flod. We add a few localized string in perftools.ftl to replace to hardcoded labels in the component. This allows us to simplify the structure of the component. We take this opportunity to re-use the localized string we have to link to the advanced section of the settings panel. Differential Revision: https://phabricator.services.mozilla.com/D104155
devtools/client/locales/en-US/perftools.ftl
devtools/client/locales/en-US/toolbox-options.ftl
devtools/client/performance-new/components/OnboardingMessage.js
devtools/client/performance-new/initializer.js
--- a/devtools/client/locales/en-US/perftools.ftl
+++ b/devtools/client/locales/en-US/perftools.ftl
@@ -101,8 +101,22 @@ perftools-thread-js-helper =
 
 ##
 
 perftools-record-all-registered-threads =
   Bypass selections above and record all registered threads
 
 perftools-tools-threads-input-label =
   .title = These thread names are a comma separated list that is used to enable profiling of the threads in the profiler. The name needs to be only a partial match of the thread name to be included. It is whitespace sensitive.
+
+## Onboarding UI labels. These labels are displayed in the new performance panel UI, when 
+## both devtools.performance.new-panel-onboarding & devtools.performance.new-panel-enabled
+## preferences are true.
+
+-profiler-brand-name = Firefox Profiler
+
+perftools-onboarding-message = <b>New</b>: { -profiler-brand-name } is now integrated into Developer Tools. <a>Learn more</a> about this powerful new tool.
+
+# `options-context-advanced-settings` is defined in toolbox-options.ftl
+perftools-onboarding-reenable-old-panel = (For a limited time, you can access the original Performance panel via <a>{ options-context-advanced-settings }</a>)
+
+perftools-onboarding-close-button =
+  .aria-label = Close the onboarding message
--- a/devtools/client/locales/en-US/toolbox-options.ftl
+++ b/devtools/client/locales/en-US/toolbox-options.ftl
@@ -88,17 +88,17 @@ options-sourceeditor-expandtab-tooltip =
     .title = Use spaces instead of the tab character
 options-sourceeditor-expandtab-label = Indent using spaces
 options-sourceeditor-tabsize-label = Tab size
 options-sourceeditor-keybinding-label = Keybindings
 options-sourceeditor-keybinding-default-label = Default
 
 ## Advanced section
 
-# The heading
+# The heading (this item is also used in perftools.ftl)
 options-context-advanced-settings = Advanced settings
 
 # The label for the checkbox that toggles the HTTP cache on or off
 options-disable-http-cache-label = Disable HTTP Cache (when toolbox is open)
 options-disable-http-cache-tooltip =
     .title = Turning this option on will disable the HTTP cache for all tabs that have the toolbox open. Service Workers are not affected by this option.
 
 # The label for checkbox that toggles JavaScript on or off
--- a/devtools/client/performance-new/components/OnboardingMessage.js
+++ b/devtools/client/performance-new/components/OnboardingMessage.js
@@ -13,23 +13,29 @@
  */
 
 /**
  * @typedef {import("../@types/perf").PanelWindow} PanelWindow
  */
 
 "use strict";
 
-const { PureComponent } = require("devtools/client/shared/vendor/react");
+const {
+  PureComponent,
+  createFactory,
+} = require("devtools/client/shared/vendor/react");
 const {
   b,
   button,
   div,
   p,
 } = require("devtools/client/shared/vendor/react-dom-factories");
+const Localized = createFactory(
+  require("devtools/client/shared/vendor/fluent-react").Localized
+);
 
 const Services = require("Services");
 const { openDocLink } = require("devtools/client/shared/link");
 
 const LEARN_MORE_URL =
   "https://developer.mozilla.org/docs/Mozilla/Performance/Profiling_with_the_Built-in_Profiler";
 const ONBOARDING_PREF = "devtools.performance.new-panel-onboarding";
 
@@ -90,55 +96,56 @@ class OnboardingMessage extends PureComp
   };
 
   render() {
     const { isOnboardingEnabled } = this.state;
     if (!isOnboardingEnabled) {
       return null;
     }
 
-    const learnMoreLink = button(
-      {
-        className: "perf-external-link",
-        onClick: this.handleLearnMoreClick,
-      },
-      "Learn more"
-    );
+    const learnMoreLink = button({
+      className: "perf-external-link",
+      onClick: this.handleLearnMoreClick,
+    });
 
-    const settingsLink = button(
+    const settingsLink = button({
+      className: "perf-external-link",
+      onClick: this.handleSettingsClick,
+    });
+
+    const closeButton = Localized(
       {
-        className: "perf-external-link",
-        onClick: this.handleSettingsClick,
+        id: "perftools-onboarding-close-button",
+        attrs: { "aria-label": true },
       },
-      "Settings > Advanced"
+      button({
+        className:
+          "perf-onboarding-close-button perf-photon-button perf-photon-button-ghost",
+        onClick: this.handleCloseIconClick,
+      })
     );
 
-    const closeButton = button({
-      "aria-label": "Close the onboarding message",
-      className:
-        "perf-onboarding-close-button perf-photon-button perf-photon-button-ghost",
-      onClick: this.handleCloseIconClick,
-    });
-
     return div(
       { className: "perf-onboarding" },
       div(
         { className: "perf-onboarding-message" },
-        p(
-          { className: "perf-onboarding-message-row" },
-          b({}, "New"),
-          ": Firefox Profiler is now integrated into Developer Tools. ",
-          learnMoreLink,
-          " about this powerful new tool."
+        Localized(
+          {
+            id: "perftools-onboarding-message",
+            b: b(),
+            a: learnMoreLink,
+          },
+          p({ className: "perf-onboarding-message-row" })
         ),
-        p(
-          { className: "perf-onboarding-message-row" },
-          "(For a limited time, you can access the original Performance panel via ",
-          settingsLink,
-          ")"
+        Localized(
+          {
+            id: "perftools-onboarding-reenable-old-panel",
+            a: settingsLink,
+          },
+          p({ className: "perf-onboarding-message-row" })
         )
       ),
       closeButton
     );
   }
 }
 
 module.exports = OnboardingMessage;
--- a/devtools/client/performance-new/initializer.js
+++ b/devtools/client/performance-new/initializer.js
@@ -102,17 +102,21 @@ async function gInit(perfFront, pageCont
     const panelWindow = /** @type {PanelWindow} */ (anyWindow);
     // The store variable is a `ReduxStore`, not our `Store` type, as defined
     // in perf.d.ts. Coerce it into the `Store` type.
     const anyStore = /** @type {any} */ (store);
     panelWindow.gStore = anyStore;
   }
 
   const l10n = new FluentL10n();
-  await l10n.init(["devtools/client/perftools.ftl"]);
+  await l10n.init([
+    "devtools/client/perftools.ftl",
+    // Needed for the onboarding UI
+    "devtools/client/toolbox-options.ftl",
+  ]);
 
   // Do some initialization, especially with privileged things that are part of the
   // the browser.
   store.dispatch(
     actions.initializeStore({
       perfFront,
       receiveProfile,
       recordingPreferences: getRecordingPreferences(