Port 1561586 - Align message header with dismiss button for CFR bookmark panel message r=r1cky

lib/BookmarkPanelHub.jsm

@@ -115,6 +115,8 @@ class _BookmarkPanelHub {
 
     if (!target.container.querySelector("#cfrMessageContainer")) {
       const recommendation = createElement("div");
+      const headerContainer = createElement("div");
+      headerContainer.classList.add("cfrMessageHeader");
       recommendation.setAttribute("id", "cfrMessageContainer");
       recommendation.addEventListener("click", async e => {
         target.hidePopup();
@@ -157,8 +159,9 @@ class _BookmarkPanelHub {
         cta.textContent = message.cta;
       }
 
-      recommendation.appendChild(close);
-      recommendation.appendChild(title);
+      headerContainer.appendChild(title);
+      headerContainer.appendChild(close);
+      recommendation.appendChild(headerContainer);
       recommendation.appendChild(content);
       recommendation.appendChild(cta);
       target.container.appendChild(recommendation);

test/browser/browser_asrouter_bookmarkpanel.js

@@ -38,8 +38,13 @@ add_task(async function test_fxa_message_shown() {
 
   await BrowserTestUtils.waitForCondition(() => document.getElementById("cfrMessageContainer"), `Should create a
     container for the message`);
-  Assert.equal(document.getElementById("cfrMessageContainer").childElementCount, 4,
-    `Should attach 4 children elements`);
+  for (const selector of ["#cfrClose",
+      "#editBookmarkPanelRecommendationTitle",
+      "#editBookmarkPanelRecommendationContent",
+      "#editBookmarkPanelRecommendationCta"]) {
+    Assert.ok(document.getElementById("cfrMessageContainer").querySelector(selector),
+      `Should contain ${selector}`);
+  }
 
   const ftlFiles = Array.from(document.querySelectorAll("link"))
     .filter(l => l.getAttribute("href") === "browser/newtab/asrouter.ftl" ||

test/unit/lib/BookmarkPanelHub.test.js

@@ -189,7 +189,7 @@ describe("BookmarkPanelHub", () => {
 
       instance.showMessage(fakeMessage, fakeTarget);
 
-      assert.equal(fakeTarget.document.createElementNS.callCount, 5);
+      assert.equal(fakeTarget.document.createElementNS.callCount, 6);
       assert.calledOnce(fakeTarget.container.appendChild);
       assert.notCalled(fakeL10n.setAttributes);
     });
@@ -198,7 +198,7 @@ describe("BookmarkPanelHub", () => {
 
       instance.showMessage(fakeMessageFluent, fakeTarget);
 
-      assert.equal(fakeTarget.document.createElementNS.callCount, 5);
+      assert.equal(fakeTarget.document.createElementNS.callCount, 6);
       assert.calledOnce(fakeTarget.container.appendChild);
     });
     it("should set l10n attributes", () => {