Bug 1833913 - Add default private newtab content. r=pdahiya,omc-reviewers,desktop-theme-reviewers,sfoster

Synchronously render default info content on about:privatebrowsing while
waiting for ASRouter to handle messages. Update the script and
stylesheet to account for rendering happening twice now. Add a browser
test to verify the content is rendered while ASRouter is hanging.

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

browser/components/privatebrowsing/content/aboutPrivateBrowsing.js

@@ -26,7 +26,7 @@ function translateElements(items) {
 }
 
 function renderInfo({
-  infoEnabled = false,
+  infoEnabled,
   infoTitle,
   infoTitleEnabled,
   infoBody,
@@ -35,10 +35,11 @@ function renderInfo({
   infoIcon,
 } = {}) {
   const container = document.querySelector(".info");
-  if (!infoEnabled) {
-    container.remove();
+  if (infoEnabled === false) {
+    container.hidden = true;
     return;
   }
+  container.hidden = false;
 
   const titleEl = document.getElementById("info-title");
   const bodyEl = document.getElementById("info-body");
@@ -48,9 +49,7 @@ function renderInfo({
     container.style.backgroundImage = `url(${infoIcon})`;
   }
 
-  if (!infoTitleEnabled) {
-    titleEl.remove();
-  }
+  titleEl.hidden = !infoTitleEnabled;
 
   translateElements([
     [titleEl, infoTitle],
@@ -58,16 +57,9 @@ function renderInfo({
     [linkEl, infoLinkText],
   ]);
 
-  linkEl.setAttribute(
-    "href",
-    infoLinkUrl ||
-      RPMGetFormatURLPref("app.support.baseURL") + "private-browsing-myths"
-  );
-  linkEl.setAttribute("target", "_blank");
-
-  linkEl.addEventListener("click", () => {
-    window.PrivateBrowsingRecordClick("info_link");
-  });
+  if (infoLinkUrl) {
+    linkEl.setAttribute("href", infoLinkUrl);
+  }
 }
 
 async function renderPromo({
@@ -291,6 +283,17 @@ document.addEventListener("DOMContentLoaded", function () {
     .getElementById("about-private-browsing-logo")
     .toggleAttribute("legacy", !newLogoEnabled);
 
+  // The default info content is already in the markup, but we need to use JS to
+  // set up the learn more link, since it's dynamically generated.
+  const linkEl = document.getElementById("private-browsing-myths");
+  linkEl.setAttribute(
+    "href",
+    RPMGetFormatURLPref("app.support.baseURL") + "private-browsing-myths"
+  );
+  linkEl.addEventListener("click", () => {
+    window.PrivateBrowsingRecordClick("info_link");
+  });
+
   // We don't do this setup until now, because we don't want to record any impressions until we're
   // sure we're actually running a private window, not just about:privatebrowsing in a normal window.
   setupMessageConfig();