Bug 1735841 - Update template with hidden text that is shown on a lin…

…k click for Total Cookie Protection r=andreio

Introduce an extra expanded text with a learn more toggle button. Allow for message configuration of various sizes.

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

browser/base/content/spotlight.html

@@ -25,6 +25,10 @@ <h1 id="title" class="title"></h1>
       <button id="secondary" class="secondary text-link"></button>
     </div>
   </template>
+  <template id="extra-content-expanded">
+    <button id="learn-more-toggle" class="text-link"></button>
+    <p class="expanded" role="alert"></p>
+  </template>
   <script src="chrome://browser/content/spotlight.js"></script>
 </body>
 </html>

browser/base/content/spotlight.js

@@ -10,27 +10,66 @@ const { RemoteL10n } = ChromeUtils.import(
   "resource://activity-stream/lib/RemoteL10n.jsm"
 );
 
-function renderSpotlight() {
-  const [content, params] = window.arguments[0];
-  const template = document.querySelector(`#${content?.template}`);
-  const clone = template.content.cloneNode(true);
+function cloneTemplate(id) {
+  return document.getElementById(id).content.cloneNode(true);
+}
+
+async function renderSpotlight(ready) {
+  const [
+    { template, logo = {}, body, extra = {} },
+    params,
+  ] = window.arguments[0];
 
-  document.body.classList.add(content.template);
+  // Apply desired message template.
+  const clone = cloneTemplate(template);
+  document.body.classList.add(template);
 
+  // Render logo element.
   let imageEl = clone.querySelector(".logo");
-  imageEl.src = content.logoImageURL;
+  // Allow backwards compatibility of previous content structure.
+  imageEl.src = logo.imageURL ?? window.arguments[0][0].logoImageURL;
+  imageEl.style.height = imageEl.style.width = logo.size;
 
-  for (let textProp in content.body) {
-    let el = clone.querySelector(`.${textProp}`);
-    if (!content.body[textProp]?.label) {
+  // Set text data of an element by class name with local/remote as configured.
+  const setText = (className, config) => {
+    const el = clone.querySelector(`.${className}`);
+    if (!config.label) {
       el.remove();
-      continue;
+      return;
     }
+
     el.appendChild(
-      RemoteL10n.createElement(this.window.document, "span", {
-        content: content.body[textProp].label,
-      })
+      RemoteL10n.createElement(document, "span", { content: config.label })
     );
+    el.style.fontSize = config.size;
+  };
+
+  // Render main body text elements.
+  Object.entries(body).forEach(entry => setText(...entry));
+
+  // Optionally apply and render extra behaviors.
+  const { expanded } = extra;
+  if (expanded) {
+    // Add the expanded behavior to the main text content.
+    clone
+      .querySelector("#content")
+      .append(cloneTemplate("extra-content-expanded"));
+    setText("expanded", expanded);
+
+    // Initialize state and handle toggle events.
+    const toggleBtn = clone.querySelector("#learn-more-toggle");
+    const toggle = () => {
+      const toExpand = !!toggleBtn.dataset.l10nId?.includes("collapsed");
+      document.l10n.setAttributes(
+        toggleBtn,
+        toExpand
+          ? "spotlight-learn-more-expanded"
+          : "spotlight-learn-more-collapsed"
+      );
+      toggleBtn.setAttribute("aria-expanded", toExpand);
+    };
+    toggleBtn.addEventListener("click", toggle);
+    toggle();
   }
 
   document.body.appendChild(clone);
@@ -55,6 +94,20 @@ function renderSpotlight() {
       window.close();
     });
   }
+
+  // Wait for translations to load before getting sizing information.
+  await document.l10n.ready;
+  await document.l10n.translateElements(clone.children);
+  requestAnimationFrame(() => requestAnimationFrame(ready));
 }
 
-renderSpotlight();
+// Indicate when we're ready to show and size (async localized) content.
+document.mozSubdialogReady = new Promise(resolve =>
+  document.addEventListener(
+    "DOMContentLoaded",
+    () => renderSpotlight(resolve),
+    {
+      once: true,
+    }
+  )
+);

browser/components/newtab/content-src/asrouter/templates/OnboardingMessage/Spotlight.schema.json

@@ -1,14 +1,22 @@
 {
   "title": "Spotlight",
   "description": "A template with an image, title, content and two buttons.",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "object",
   "properties": {
     "template": {
       "type": "string",
       "description": "Specify the layout template for the Spotlight",
       "enum": ["logo-and-content"]
     },
+    "logo": {
+      "properties": {
+        "imageURL": {
+          "type": "string",
+          "description": "URL for image to use with the content"
+        }
+      }
+    },
     "logoImageURL": {
       "type": "string",
       "description": "URL for image to use with the content"
@@ -132,6 +140,36 @@
       },
       "additionalProperties": false,
       "required": ["title", "text", "primary", "secondary"]
+    },
+    "extra": {
+      "properties": {
+        "expanded": {
+          "type": "object",
+          "properties": {
+            "label": {
+              "description": "The label for the secondary button",
+              "oneOf": [
+                {
+                  "type": "string",
+                  "description": "Message shown in the button element"
+                },
+                {
+                  "type": "object",
+                  "properties": {
+                    "string_id": {
+                      "type": "string",
+                      "description": "Id of localized string for the button element"
+                    }
+                  },
+                  "required": ["string_id"]
+                }
+              ]
+            }
+          },
+          "required": ["label"]
+        }
+      },
+      "additionalProperties": false
     }
   },
   "additionalProperties": false,

browser/components/newtab/lib/PanelTestProvider.jsm

@@ -251,6 +251,56 @@ const MESSAGES = () => [
     },
     frequency: { lifetime: 3 },
   },
+  {
+    id: "TCP_SPOTLIGHT_MESSAGE_95",
+    template: "spotlight",
+    content: {
+      template: "logo-and-content",
+      logo: {
+        imageURL: "chrome://branding/content/[email protected]",
+        size: "64px",
+      },
+      body: {
+        title: {
+          label: {
+            string_id: "spotlight-total-cookie-protection-header",
+          },
+          size: "24px",
+        },
+        text: {
+          label: {
+            string_id: "spotlight-total-cookie-protection-body",
+          },
+          size: "20px",
+        },
+        primary: {
+          label: {
+            string_id: "spotlight-total-cookie-protection-primary-button",
+          },
+          action: {
+            type: "ENABLE_TOTAL_COOKIE_PROTECTION",
+          },
+        },
+        secondary: {
+          label: {
+            string_id: "spotlight-total-cookie-protection-secondary-button",
+          },
+          action: {
+            type: "CANCEL",
+          },
+        },
+      },
+      extra: {
+        expanded: {
+          label: {
+            string_id: "spotlight-total-cookie-protection-expanded",
+          },
+          size: "13px",
+        },
+      },
+    },
+    frequency: { lifetime: 3 },
+  },
 ];
 
 const PanelTestProvider = {

browser/components/newtab/test/browser/browser_asrouter_spotlight.js

@@ -182,6 +182,7 @@ add_task(async function test_remoteL10n_content() {
   let browser = BrowserWindowTracker.getTopWindow().gBrowser.selectedBrowser;
 
   await showAndWaitForDialog({ message, browser, dispatchStub }, async win => {
+    await win.document.mozSubdialogReady;
     let primaryBtn = win.document.getElementById("primary");
     let secondaryBtn = win.document.getElementById("secondary");
     Assert.ok(
@@ -208,3 +209,28 @@ add_task(async function test_remoteL10n_content() {
     win.document.getElementById("secondary").click();
   });
 });
+
+add_task(async function test_contentExpanded() {
+  let message = (await PanelTestProvider.getMessages()).find(
+    m => m.id === "TCP_SPOTLIGHT_MESSAGE_95"
+  );
+
+  let dispatchStub = sinon.stub();
+  let browser = BrowserWindowTracker.getTopWindow().gBrowser.selectedBrowser;
+
+  await showAndWaitForDialog({ message, browser, dispatchStub }, async win => {
+    const toggle = win.document.getElementById("learn-more-toggle");
+    Assert.equal(
+      toggle.getAttribute("aria-expanded"),
+      "false",
+      "Toggle initially collapsed"
+    );
+    toggle.click();
+    Assert.equal(
+      toggle.getAttribute("aria-expanded"),
+      "true",
+      "Toggle switched to expanded"
+    );
+    win.close();
+  });
+});

browser/components/newtab/test/unit/asrouter/PanelTestProvider.test.js

@@ -11,7 +11,7 @@ describe("PanelTestProvider", () => {
   it("should have a message", () => {
     // Careful: when changing this number make sure that new messages also go
     // through schema verifications.
-    assert.lengthOf(messages, 10);
+    assert.lengthOf(messages, 11);
   });
   it("should be a valid message", () => {
     const updateMessages = messages.filter(

browser/themes/shared/spotlight.css

@@ -17,16 +17,16 @@ body {
 }
 
 body {
-  width: 604px;
-  padding: 12px 30px;
+  padding: 20px 52px;
+  width: 500px;
 }
 
 #dialog-content {
-  min-height: 330px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-around;
+  text-align: center;
 }
 
 .logo {
@@ -39,27 +39,46 @@ body {
 #title {
   font-weight: 500;
   font-size: 26px;
-  line-height: 36px;
-  text-align: center;
   margin-bottom: 5px;
+  white-space: pre-wrap;
 }
 
 #content {
   font-weight: 400;
   font-size: 13px;
-  line-height: 16px;
-  max-width: 372px;
-  text-align: center;
   margin-bottom: 24px;
 }
 
+#learn-more-toggle::after {
+  background: url("chrome://global/skin/icons/arrow-right.svg") center / 12px no-repeat;
+  content: "";
+  -moz-context-properties: fill;
+  fill: currentColor;
+  padding-inline: .5em;
+}
+
+#learn-more-toggle:dir(rtl)::after {
+  background-image: url("chrome://global/skin/icons/arrow-left.svg");
+}
+
+#learn-more-toggle[aria-expanded="true"]::after {
+  background-image: url("chrome://global/skin/icons/arrow-down.svg");
+}
+
+#learn-more-toggle[aria-expanded="false"] + .expanded {
+  visibility: hidden;
+}
+
+.expanded {
+  margin-bottom: 0;
+}
+
 #primary {
   font-size: 13px;
 }
 
 #secondary {
   /* make the font look like the mock */
   font-size: 13px;
-  line-height: 16px;
   padding: 4px;
 }