Bug 1748240 - Add impressions counting and dismiss functionality to PB messaging r=desktop-theme-reviewers,barret,fluent-reviewers,Itiel

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

browser/components/privatebrowsing/content/aboutPrivateBrowsing.html

@@ -74,6 +74,7 @@
           </div>
         </div>
       </div>
+      <button data-l10n-id="about-private-browsing-dismiss-button" id="dismiss-btn" class="promo-dismiss"></button>
     </div>
   </body>
 </html>

browser/components/privatebrowsing/content/aboutPrivateBrowsing.js

@@ -31,7 +31,7 @@ async function translateElements(container, items) {
 }
 
 async function renderInfo({
-  infoEnabled,
+  infoEnabled = false,
   infoTitle,
   infoTitleEnabled,
   infoBody,
@@ -75,6 +75,7 @@ async function renderInfo({
 }
 
 async function renderPromo({
+  messageId = null,
   promoEnabled = false,
   promoTitle,
   promoTitleEnabled,
@@ -89,22 +90,16 @@ async function renderPromo({
   const container = document.querySelector(".promo");
   if (promoEnabled === false) {
     container.remove();
-    return;
+    return false;
   }
 
-  // Check the current geo and remove if we're in the wrong one.
-  RPMSendQuery("ShouldShowVPNPromo", {}).then(shouldShow => {
-    if (!shouldShow) {
-      container.remove();
-    }
-  });
-
   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");
+  const dismissBtn = document.querySelector("#dismiss-btn");
 
   // Setup the private browsing VPN link.
   const vpnPromoUrl =
@@ -122,7 +117,19 @@ async function renderPromo({
   } else {
     // If the link is undefined, remove the promo completely
     container.remove();
-    return;
+    return false;
+  }
+
+  const onDismissBtnClick = () => {
+    window.ASRouterMessage({
+      type: "BLOCK_MESSAGE_BY_ID",
+      data: { id: messageId },
+    });
+    container.remove();
+  };
+
+  if (dismissBtn && messageId) {
+    dismissBtn.addEventListener("click", onDismissBtnClick, { once: true });
   }
 
   if (promoSectionStyle) {
@@ -168,10 +175,38 @@ async function renderPromo({
   // Only make promo section visible after adding content
   // and translations to prevent layout shifting in page
   container.classList.add("promo-visible");
+  return true;
+}
+
+/**
+ * For every PB newtab loaded a second is pre-rendered in the background.
+ * We need to guard against invalid impressions by checking visibility state.
+ * If visible record otherwise listen for visibility change and record later.
+ */
+function recordOnceVisible(message) {
+  const recordImpression = () => {
+    if (document.visibilityState === "visible") {
+      window.ASRouterMessage({
+        type: "IMPRESSION",
+        data: message,
+      });
+      document.removeEventListener("visibilitychange", recordImpression);
+    }
+  };
+
+  if (document.visibilityState === "visible") {
+    window.ASRouterMessage({
+      type: "IMPRESSION",
+      data: message,
+    });
+  } else {
+    document.addEventListener("visibilitychange", recordImpression);
+  }
 }
 
 async function setupFeatureConfig() {
   let config = null;
+  let message = null;
   try {
     config = window.PrivateBrowsingFeatureConfig();
   } catch (e) {}
@@ -181,13 +216,21 @@ async function setupFeatureConfig() {
         type: "PBNEWTAB_MESSAGE_REQUEST",
         data: {},
       });
-      config = response?.message?.content;
+      message = response?.message;
+      config = message?.content;
+      config.messageId = message?.id;
     } catch (e) {}
   }
 
   await renderInfo(config);
-  await renderPromo(config);
-
+  // Check the current geo and don't render if we're in the wrong one.
+  const shouldShow = await RPMSendQuery("ShouldShowVPNPromo", {});
+  if (shouldShow) {
+    let hasRendered = await renderPromo(config);
+    if (hasRendered && message) {
+      recordOnceVisible(message);
+    }
+  }
   // For tests
   document.documentElement.setAttribute("PrivateBrowsingRenderComplete", true);
 }