Backed out changeset 13fa4cea337f (Bug 1724019) on request from emcminn because of change of plans. r=emcminn

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

Depends on D124828

browser/components/privatebrowsing/content/aboutPrivateBrowsing.html

@@ -59,10 +59,17 @@
     </div>
 
     <div class="promo">
+      <div class="promo-image-large">
+        <img src="" alt="" />
+      </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>
         <div class="promo-cta">
           <a id="private-browsing-vpn-link" class="vpn-promo button" data-l10n-id="about-private-browsing-prominent-cta"></a>
+          <div class="promo-image-small">
+            <img src="" alt="" />
+          </div>
         </div>
       </div>
     </div>

browser/components/privatebrowsing/content/aboutPrivateBrowsing.js

@@ -101,13 +101,17 @@ async function renderPromo({
 
   const titleEl = document.getElementById("private-browsing-vpn-text");
   let linkEl = document.getElementById("private-browsing-vpn-link");
+  const promoHeaderEl = document.getElementById("promo-header");
   const infoContainerEl = document.querySelector(".info");
+  const promoImageLargeEl = document.querySelector(".promo-image-large img");
+  const promoImageSmallEl = document.querySelector(".promo-image-small img");
+
   // Setup the private browsing VPN link.
   const vpnPromoUrl =
     promoLinkUrl || RPMGetFormatURLPref("browser.privatebrowsing.vpnpromourl");
 
-  if (promoLinkType === "link") {
-    linkEl.classList.remove("button");
+  if (promoLinkType === "button") {
+    linkEl.classList.add("button");
   }
 
   if (vpnPromoUrl) {
@@ -135,6 +139,22 @@ async function renderPromo({
     }
   }
 
+  if (promoHeader) {
+    promoHeaderEl.innerText = promoHeader;
+  }
+
+  if (promoImageLarge) {
+    promoImageLargeEl.src = promoImageLarge;
+  } else {
+    promoImageLargeEl.parentNode.remove();
+  }
+
+  if (promoImageSmall) {
+    promoImageSmallEl.src = promoImageSmall;
+  } else {
+    promoImageSmallEl.parentNode.remove();
+  }
+
   if (!promoTitleEnabled) {
     titleEl.remove();
   }