Bento review updates

controllers/home.js

@@ -76,14 +76,14 @@ function getBentoStrings(req, res) {
   const localizedBentoStrings = {
     bentoButtonTitle: req.fluentFormat("bento-button-title"),
     bentoHeadline: req.fluentFormat("fx-makes-tech"),
-    bentoBottomLink: req.fluentFormat("made-by-Mozilla"),
-    mobileCloseBentoButtonTitle: req.fluentFormat("mobile-close-bento-button-title"),
+    bentoBottomLink: req.fluentFormat("made-by-mozilla"),
     fxDesktop: req.fluentFormat("fx-desktop"),
     fxLockwise: req.fluentFormat("fx-lockwise"),
     fxMobile: req.fluentFormat("fx-mobile"),
     fxMonitor: req.fluentFormat("fx-monitor"),
     pocket: req.fluentFormat("pocket"),
     fxSend: req.fluentFormat("fx-send"),
+    mobileCloseBentoButtonTitle: req.fluentFormat("mobile-close-bento-button-title"),
   };
   return res.json(localizedBentoStrings);
 }

locales/en/app.ftl

@@ -10,6 +10,10 @@
 -brand-Mozilla = Mozilla
 -brand-HIBP = Have I Been Pwned
 -brand-fxa = Firefox Account
+-brand-pocket = Pocket
+-brand-lockwise = Firefox Lockwise
+-brand-firefox-browser = Firefox Browser
+-brand-send = Firefox Send
 
 
 terms-and-privacy = Terms & Privacy

locales/en/bento.ftl

@@ -1,10 +1,22 @@
-bento-button-title = Firefox apps and services
-fx-makes-tech = Firefox is tech that fights for your online privacy.
-made-by-Mozilla = Made by Mozilla
-fx-desktop = Firefox Browser for Desktop
-fx-mobile = Firefox Browser for Mobile
-fx-lockwise = Firefox Lockwise
-pocket = Pocket
-fx-monitor = Firefox Monitor
-fx-send = Firefox Send
+fx-monitor = {-product-name}
+pocket = {-brand-pocket}
+fx-send = {-brand-send}
+fx-lockwise = {-brand-lockwise}
+
+# Title of link inside the Bento menu
+fx-desktop = {-brand-firefox-browser} for Desktop
+
+# Title of link inside the Bento menu
+fx-mobile = {-brand-firefox-browser} for Mobile
+
+# Aria label for the Bento button
+bento-button-title = {-brand-name} apps and services
+
+# Bento headline
+fx-makes-tech = {-brand-name} is tech that fights for your online privacy.
+
+# A link at the bottom of the Bento menu
+made-by-mozilla = Made by {-brand-Mozilla}
+
+# Aria label for button that closes the Bento menu
 mobile-close-bento-button-title = Close menu

public/css/fx-bento.css

@@ -133,11 +133,11 @@ a.fx-bento-app-link {
   background: url("/img/fx-bento-sprites.png");
   background-repeat: no-repeat;
   background-position: center center;
-  background-position-x: -322px;
+  background-position-x: -323px;
   background-size: cover;
-  width: 37px;
+  width: 36px;
   height: 36px;
-  max-height: 37px;
+  max-height: 36px;
   border: none;
   border-radius: 1px;
   padding: 0;

public/js/fx-bento.js

@@ -3,12 +3,12 @@
 /* global ga */
 
 function getFxAppLinkInfo(localizedBentoStrings, referringSiteURL) {
-    return [
+  return [
     [localizedBentoStrings.fxSend, "https://send.firefox.com/", "fx-send"],
     [localizedBentoStrings.fxMonitor, "https://monitor.firefox.com/", "fx-monitor"],
     [localizedBentoStrings.pocket, "https://app.adjust.com/hr2n0yz?engagement_type=fallback_click&fallback=https%3A%2F%2Fgetpocket.com%2Ffirefox_learnmore%3Fsrc%3Dff_bento&fallback_lp=https%3A%2F%2Fapps.apple.com%2Fapp%2Fpocket-save-read-grow%2Fid309601447", "pocket"],
     [localizedBentoStrings.fxDesktop, `https://www.mozilla.org/firefox/new/?utm_source=${referringSiteURL}&utm_medium=referral&utm_campaign=bento&utm_content=desktop`, "fx-desktop"],
-    [localizedBentoStrings.fxMobile, "https://www.firefox.com/", "fx-mobile"],
+    [localizedBentoStrings.fxMobile, `http://mozilla.org/firefox/mobile?utm_source=${referringSiteURL}&utm_medium=referral&utm_campaign=bento&utm_content=desktop`, "fx-mobile"],
     [localizedBentoStrings.fxLockwise, "https://lockwise.firefox.com", "fx-lockwise"],
   ];
 }
@@ -25,8 +25,9 @@ function createAndAppendEl(wrapper, tagName, className = null) {
 async function getlocalizedBentoStrings() {
   let localizedBentoStrings;
   try {
+    const serverUrl = document.body.dataset.serverUrl;
     const res = await fetch(
-      "http://localhost:6060/getBentoStrings",
+      `${serverUrl}/getBentoStrings`,
       {
         mode: "cors",
       }
@@ -62,17 +63,20 @@ class FirefoxApps extends HTMLElement {
     this._active = false; // Becomes true when the bento is opened.
 
     this._frag = document.createDocumentFragment(); // Wrapping fragment for bento button and bento content.
+
     this._bentoButton = createAndAppendEl(this._frag, "button", "fx-bento-button toggle-bento"); // Button toggles dropdown.
-    this._bentoButton.title = this._localizedBentoStrings.bentoButtonTitle;
-    this._bentoButton.addEventListener("click", this);
+    this.addTitleAndAriaLabel(this._bentoButton, this._localizedBentoStrings.bentoButtonTitle);
 
     this._bentoContent = createAndAppendEl(this._frag, "div", "fx-bento-content");
+
     this._mobileCloseBentoButton = createAndAppendEl(this._bentoContent, "button", "fx-bento-mobile-close toggle-bento");
-    this._mobileCloseBentoButton.setAttribute("title", this._localizedBentoStrings.mobileCloseBentoButtonTitle);
-    this._mobileCloseBentoButton.addEventListener("click", this);
+    this.addTitleAndAriaLabel(this._mobileCloseBentoButton, this._localizedBentoStrings.mobileCloseBentoButtonTitle);
+
+    [this._bentoButton, this._mobileCloseBentoButton].forEach(btn => {
+      btn.addEventListener("click", this);
+    });
 
     this._firefoxLogo = createAndAppendEl(this._bentoContent, "div", "fx-bento-logo");
-
     this._messageTop = createAndAppendEl(this._bentoContent, "span", "fx-bento-headline");
     this._messageTop.textContent = this._localizedBentoStrings.bentoHeadline;
 
@@ -96,8 +100,16 @@ class FirefoxApps extends HTMLElement {
     this.appendChild(this._frag);
   }
 
+  addTitleAndAriaLabel(el, localizedCopy) {
+    ["title", "aria-label"].forEach(attrName => {
+      el.setAttribute(attrName, localizedCopy);
+    });
+  }
+
   metricsSendEvent(eventAction, eventLabel) {
-    return ga("send", "event", "bento", eventAction, eventLabel);
+    if (typeof(ga) !== "undefined") {
+      return ga("send", "event", "bento", eventAction, eventLabel);
+    }
   }
 
   toggleClass(whichClass) {

views/partials/imports.hbs

@@ -1,5 +1,3 @@
-
-
 {{#ifCompare UTM_SOURCE "===" "localhost"}}
   <link rel="stylesheet" href="/css/all-breaches.css">
   <link rel="stylesheet" href="/css/app.css">