Bug 1729766 - Update about:privatebrowsing with VPN promo r=Mardak,fluent-reviewers,flod

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

browser/actors/AboutPrivateBrowsingChild.jsm

@@ -46,8 +46,11 @@ class AboutPrivateBrowsingChild extends RemotePageChild {
     }
   }
 
-  PrivateBrowsingFeatureConfig() {
-    const config = NimbusFeatures.privatebrowsing.getAllVariables();
+  PrivateBrowsingFeatureConfig(defaultValues) {
+    const config = NimbusFeatures.privatebrowsing.getAllVariables({
+      defaultValues,
+    });
+
     NimbusFeatures.privatebrowsing.recordExposureEvent();
 
     // Format urls if any are defined

browser/app/profile/firefox.js

@@ -554,19 +554,6 @@ pref("browser.search.separatePrivateDefault.ui.banner.max", 0);
 // Enables the display of the Mozilla VPN banner in private browsing windows
 pref("browser.privatebrowsing.vpnpromourl", "https://vpn.mozilla.org/?utm_source=firefox-browser&utm_medium=firefox-%CHANNEL%-browser&utm_campaign=private-browsing-vpn-link");
 
-pref("browser.privatebrowsing.infoEnabled", true);
-pref("browser.privatebrowsing.infoIcon", "");
-pref("browser.privatebrowsing.infoTitle", "");
-pref("browser.privatebrowsing.infoBody","");
-pref("browser.privatebrowsing.infoLinkText", "");
-pref("browser.privatebrowsing.infoLinkUrl", "");
-pref("browser.privatebrowsing.promoEnabled", true);
-pref("browser.privatebrowsing.promoTitle", "");
-pref("browser.privatebrowsing.promoLinkText", "");
-pref("browser.privatebrowsing.promoLinkUrl", "");
-pref("browser.privatebrowsing.infoTitleEnabled", true);
-pref("browser.privatebrowsing.promoTitleEnabled", true);
-
 pref("browser.sessionhistory.max_entries", 50);
 
 // Built-in default permissions.

browser/components/privatebrowsing/content/aboutPrivateBrowsing.html

@@ -52,9 +52,9 @@
         </button>
       </div>
       <div class="info">
-        <h1 id="info-title" data-l10n-id="about-private-browsing-info-title"></h1>
-        <p id="info-body" data-l10n-id="about-private-browsing-info-description-simplified"></p>
-        <a id="private-browsing-myths" data-l10n-id="about-private-browsing-learn-more-link"></a>
+        <h1 id="info-title"></h1>
+        <p id="info-body"></p>
+        <a id="private-browsing-myths"></a>
       </div>
     </div>
 
@@ -64,9 +64,9 @@
       </div>
       <div class="promo-content">
         <h1 id="promo-header"></h1>
-        <p id="private-browsing-vpn-text" class="vpn-promo" data-l10n-id="about-private-browsing-hide-activity"></p>
+        <p id="private-browsing-vpn-text" class="vpn-promo"></p>
         <div class="promo-cta">
-          <a id="private-browsing-vpn-link" class="vpn-promo button" data-l10n-id="about-private-browsing-prominent-cta"></a>
+          <a id="private-browsing-vpn-link" class="vpn-promo button"></a>
           <div class="promo-image-small">
             <img src="" alt="" />
           </div>

browser/components/privatebrowsing/content/aboutPrivateBrowsing.js

@@ -131,7 +131,7 @@ async function renderPromo({
     switch (promoSectionStyle) {
       case "below-search":
         container.remove();
-        infoContainerEl.insertAdjacentElement("beforebegin", container);
+        infoContainerEl?.insertAdjacentElement("beforebegin", container);
         break;
       case "top":
         container.remove();
@@ -139,10 +139,6 @@ async function renderPromo({
     }
   }
 
-  if (promoHeader) {
-    promoHeaderEl.innerText = promoHeader;
-  }
-
   if (promoImageLarge) {
     promoImageLargeEl.src = promoImageLarge;
   } else {
@@ -159,17 +155,41 @@ async function renderPromo({
     titleEl.remove();
   }
 
+  if (!promoHeader) {
+    promoHeaderEl.remove();
+  }
+
   await translateElements(container, [
     [titleEl, promoTitle],
     [linkEl, promoLinkText],
+    [promoHeaderEl, promoHeader],
   ]);
 }
 
+const DEFAULT_PRIVATE_BROWSING_CONTENT = {
+  promoEnabled: true,
+  infoEnabled: true,
+  infoIcon: "",
+  infoTitle: "",
+  infoBody: "fluent:about-private-browsing-info-description-private-window",
+  infoLinkText: "fluent:about-private-browsing-learn-more-link",
+  infoTitleEnabled: false,
+  promoLinkType: "button",
+  promoLinkText: "fluent:about-private-browsing-prominent-cta",
+  promoSectionStyle: "below-search",
+  promoHeader: "fluent:about-private-browsing-get-privacy",
+  promoTitle: "fluent:about-private-browsing-hide-activity-1",
+  promoTitleEnabled: true,
+  promoImageLarge: "chrome://browser/content/assets/moz-vpn.svg",
+};
+
 async function setupFeatureConfig() {
   // Setup experiment data
   let config = {};
   try {
-    config = window.PrivateBrowsingFeatureConfig();
+    config = window.PrivateBrowsingFeatureConfig(
+      DEFAULT_PRIVATE_BROWSING_CONTENT
+    );
   } catch (e) {}
 
   await renderInfo(config);

browser/components/privatebrowsing/test/browser/browser_privatebrowsing_about_nimbus.js

@@ -51,6 +51,7 @@ add_task(async function test_experiment_plain_text() {
     enabled: true,
     value: {
       infoTitle: "Hello world",
+      infoTitleEnabled: true,
       infoBody: "This is some text",
       infoLinkText: "This is a link",
       infoIcon: "chrome://branding/content/about-logo.png",
@@ -98,7 +99,7 @@ add_task(async function test_experiment_fluent() {
     enabled: true,
     value: {
       infoBody: "fluent:about-private-browsing-info-title",
-      promoLinkText: "fluent:about-private-browsing-need-more-privacy",
+      promoLinkText: "fluent:about-private-browsing-prominent-cta",
     },
   });
 
@@ -269,6 +270,7 @@ add_task(async function test_experiment_bottom_promo() {
       promoLinkType: "button",
       promoSectionStyle: "bottom",
       promoHeader: "Need more privacy?",
+      infoTitleEnabled: true,
       promoTitleEnabled: false,
       promoImageLarge: "",
       promoImageSmall: "chrome://browser/content/assets/vpn-logo.svg",
@@ -294,10 +296,6 @@ add_task(async function test_experiment_bottom_promo() {
       content.document.querySelector(".promo.bottom"),
       "Should have .bottom for the promo section"
     );
-    ok(
-      content.document.querySelector("#info-title"),
-      "Should render info title if infoTitleEnabled is true"
-    );
     ok(
       !content.document.querySelector("#private-browsing-vpn-text"),
       "Should not render promo title if promoTitleEnabled is true"

browser/locales/en-US/browser/aboutPrivateBrowsing.ftl

@@ -19,10 +19,13 @@ about-private-browsing-handoff-no-engine =
 about-private-browsing-handoff-text = Search with { $engine } or enter address
 about-private-browsing-handoff-text-no-engine = Search or enter address
 about-private-browsing-not-private = You are currently not in a private window.
+about-private-browsing-info-description-private-window = Private window: { -brand-short-name } clears your search and browsing history when you close all private windows. This doesn’t make you anonymous.
 about-private-browsing-info-description-simplified = { -brand-short-name } clears your search and browsing history when you close all private windows, but this doesn’t make you anonymous.
 about-private-browsing-learn-more-link = Learn more
 
 about-private-browsing-hide-activity = Hide your activity and location, everywhere you browse
+about-private-browsing-get-privacy = Get privacy protections everywhere you browse
+about-private-browsing-hide-activity-1 = Hide browsing activity and location with { -mozilla-vpn-brand-name }. One click creates a secure connection, even on public Wi-Fi.
 about-private-browsing-prominent-cta = Stay private with { -mozilla-vpn-brand-name }
 
 # This string is the title for the banner for search engine selection

toolkit/components/nimbus/FeatureManifest.js

@@ -200,43 +200,35 @@ const FeatureManifest = {
     variables: {
       infoEnabled: {
         type: "boolean",
-        fallbackPref: "browser.privatebrowsing.infoEnabled",
         description: "Should we show the info section.",
       },
       infoIcon: {
         type: "string",
-        fallbackPref: "browser.privatebrowsing.infoIcon",
         description:
           "Icon shown in the left side of the info section. Default is the private browsing icon.",
       },
       infoTitle: {
         type: "string",
-        fallbackPref: "browser.privatebrowsing.infoTitle",
         description: "Is the title in the info section enabled.",
       },
       infoTitleEnabled: {
         type: "boolean",
-        fallbackPref: "browser.privatebrowsing.infoTitleEnabled",
         description: "Is the title in the info section enabled.",
       },
       infoBody: {
         type: "string",
-        fallbackPref: "browser.privatebrowsing.infoBody",
         description: "Text content in the info section.",
       },
       infoLinkText: {
         type: "string",
-        fallbackPref: "browser.privatebrowsing.infoLinkText",
         description: "Text for the link in the info section.",
       },
       infoLinkUrl: {
         type: "string",
-        fallbackPref: "browser.privatebrowsing.infoLinkUrl",
         description: "URL for the info section link.",
       },
       promoEnabled: {
         type: "boolean",
-        fallbackPref: "browser.privatebrowsing.promoEnabled",
         description: "Should we show the promo section.",
       },
       promoSectionStyle: {
@@ -247,17 +239,14 @@ const FeatureManifest = {
       },
       promoTitle: {
         type: "string",
-        fallbackPref: "browser.privatebrowsing.promoTitle",
         description: "The text content of the promo section.",
       },
       promoTitleEnabled: {
         type: "boolean",
-        fallbackPref: "browser.privatebrowsing.promoTitleEnabled",
         description: "Should we show text content in the promo section.",
       },
       promoLinkText: {
         type: "string",
-        fallbackPref: "browser.privatebrowsing.promoLinkText",
         description: "The text of the link in the promo box.",
       },
       promoHeader: {
@@ -266,7 +255,6 @@ const FeatureManifest = {
       },
       promoLinkUrl: {
         type: "string",
-        fallbackPref: "browser.privatebrowsing.promoLinkUrl",
         description: "URL for link in the promo box.",
       },
       promoLinkType: {