Bug 1485418 - Land CFR UI Strings r=flod,k88hudson

Land UI strings that are not part of the messages

UI Spec https://mozilla.invisionapp.com/share/YWLSGDZGUSF#/screens

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

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

browser/components/newtab/lib/CFRPageActions.jsm

@@ -3,6 +3,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 "use strict";
 
+const { Localization } = ChromeUtils.import("resource://gre/modules/Localization.jsm", {});
+
 const POPUP_NOTIFICATION_ID = "contextual-feature-recommendation";
 
 const DELAY_BEFORE_EXPAND_MS = 1000;
@@ -43,16 +45,20 @@ class PageAction {
     this._handleClick = this._handleClick.bind(this);
     this.dispatchUserAction = this.dispatchUserAction.bind(this);
 
+    this._l10n = new Localization([
+      "browser/newtab/asrouter.ftl"
+    ]);
+
     // Saved timeout IDs for scheduled state changes, so they can be cancelled
     this.stateTransitionTimeoutIDs = [];
 
     this.container.onclick = this._handleClick;
   }
 
-  async show(notificationText, shouldExpand = false) {
+  async show(notification_text, shouldExpand = false) {
     this.container.hidden = false;
 
-    this.label.value = notificationText;
+    this.label.value = await this.getStrings({string: notification_text});
 
     // Wait for layout to flush to avoid a synchronous reflow then calculate the
     // label width. We can safely get the width even though the recommendation is
@@ -128,11 +134,39 @@ class PageAction {
     }
   }
 
+  /**
+   * getStrings - Handles getting the localized strings vs message overrides.
+   *              If string_id is not defined it assumes you passed in an override
+   *              message and it just returns it.
+   *              If hasAttributes is true it will try to fetch and reduce them
+   *              into an object with key and value.
+   */
+  async getStrings({string, hasAttributes}) {
+    if (!string.string_id) {
+      return string;
+    }
+
+    const [localeStrings] = await this._l10n.formatMessages([{id: string.string_id}]);
+
+    if (hasAttributes && localeStrings.attributes) {
+      const attributes = localeStrings.attributes.reduce((acc, attribute) => {
+        acc[attribute.name] = attribute.value;
+        return acc;
+      }, {});
+      return {
+        value: localeStrings.value,
+        attributes
+      };
+    } else {
+      return localeStrings.value;
+    }
+  }
+
   /**
    * Respond to a user click on the recommendation by showing a doorhanger/
    * popup notification
    */
-  _handleClick(event) {
+  async _handleClick(event) {
     const browser = this.window.gBrowser.selectedBrowser;
     if (!RecommendationMap.has(browser)) {
       // There's no recommendation for this browser, so the user shouldn't have
@@ -151,16 +185,18 @@ class PageAction {
     browser.cfrpopupnotificationanchor = this.container;
 
     const {primary, secondary} = content.buttons;
+    const primaryBtnStrings = await this.getStrings({string: primary.label, hasAttributes: true});
+    const secondaryBtnStrings = await this.getStrings({string: secondary.label, hasAttributes: true});
 
     const mainAction = {
-      label: primary.label,
-      accessKey: primary.accessKey,
+      label: primaryBtnStrings.value,
+      accessKey: primaryBtnStrings.attributes.accesskey,
       callback: () => this.dispatchUserAction(primary.action)
     };
 
     const secondaryActions = [{
-      label: secondary.label,
-      accessKey: secondary.accessKey,
+      label: secondaryBtnStrings.value,
+      accessKey: secondaryBtnStrings.attributes.accesskey,
       callback: this._collapse
     }];
 
@@ -173,7 +209,7 @@ class PageAction {
     this.window.PopupNotifications.show(
       browser,
       POPUP_NOTIFICATION_ID,
-      content.text,
+      await this.getStrings({string: content.text}),
       "cfr",
       mainAction,
       secondaryActions,
@@ -207,7 +243,7 @@ const CFRPageActions = {
       if (isHostMatch(browser, host)) {
         // The browser has a recommendation specified with this host, so show
         // the page action
-        pageAction.show(content.notification_text);
+        pageAction.show(this.getStrings({string: content.notification_text}));
       } else {
         // The user has navigated away from the specified host in the given
         // browser, so the recommendation is no longer valid and should be removed
@@ -235,7 +271,7 @@ const CFRPageActions = {
     if (!PageActionMap.has(win)) {
       PageActionMap.set(win, new PageAction(win, dispatchToASRouter));
     }
-    await PageActionMap.get(win).show(recommendation.content.notification_text, true);
+    await PageActionMap.get(win).show(this.getStrings({string: recommendation.content.notification_text}), true);
     return true;
   },
 

browser/locales/en-US/browser/newtab/asrouter.ftl

@@ -0,0 +1,45 @@
+# 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/.
+
+cfr-doorhanger-extension-heading = Recommended Extension
+
+cfr-doorhanger-extension-sumo-link =
+  .tooltiptext = Why am I seeing this
+
+cfr-doorhanger-extension-cancel-button = Not Now
+  .accesskey = N
+
+cfr-doorhanger-extension-ok-button = Add Now
+  .accesskey = A
+
+cfr-doorhanger-extension-learn-more-link = Learn more
+
+# This string is used on a new line below the add-on name
+# Variables:
+#   $name (String) - Add-on author name
+cfr-doorhanger-extension-author = by { $name }
+
+# This is a notification displayed in the address bar.
+# When clicked it opens a panel with a message for the user.
+cfr-doorhanger-extension-notification = Recommendation
+
+## Add-on statistics
+## These strings are used to display the total number of
+## users and rating for an add-on. They are shown next to each other.
+
+# Variables:
+#   $total (Number) - The rating of the add-on from 1 to 5
+cfr-doorhanger-extension-rating =
+  .tooltiptext =
+    { $total ->
+        [one] { $total } star
+       *[other] { $total } stars
+    }
+# Variables:
+#   $total (Number) - The total number of users using the add-on
+cfr-doorhanger-extension-total-users =
+  { $total ->
+      [one] { $total } user
+     *[other] { $total } users
+  }