Bug 1561586 - Align message header with dismiss button for CFR bookmark panel message r=r1cky
authorAndrei Oprea <andrei.br92@gmail.com>
Mon, 01 Jul 2019 09:39:29 +0000
changeset 543627 921c89bebafeba5c44cb5bc0dc97d8ebc7541f6f
parent 543626 ef154e1221d66e844a1854ca00f984c771e9b36d
child 543628 bc899c83d978817615d08b3162528ea6ef8b9ea3
push id2131
push userffxbld-merge
push dateMon, 26 Aug 2019 18:30:20 +0000
treeherdermozilla-release@b19ffb3ca153 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersr1cky
bugs1561586
milestone69.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1561586 - Align message header with dismiss button for CFR bookmark panel message r=r1cky Differential Revision: https://phabricator.services.mozilla.com/D36006
browser/components/newtab/lib/BookmarkPanelHub.jsm
browser/components/newtab/test/browser/browser_asrouter_bookmarkpanel.js
browser/themes/shared/places/editBookmarkPanel.inc.css
--- a/browser/components/newtab/lib/BookmarkPanelHub.jsm
+++ b/browser/components/newtab/lib/BookmarkPanelHub.jsm
@@ -110,16 +110,18 @@ class _BookmarkPanelHub {
       this.toggleRecommendation(false);
       return;
     }
 
     const createElement = elem => target.document.createElementNS("http://www.w3.org/1999/xhtml", elem);
 
     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();
         const url = await FxAccounts.config.promiseEmailFirstURI("bookmark");
         win.ownerGlobal.openLinkIn(url, "tabshifted", {
           private: false,
           triggeringPrincipal: Services.scriptSecurityManager.createNullPrincipal({}),
           csp: null,
@@ -152,18 +154,19 @@ class _BookmarkPanelHub {
         this._l10n.setAttributes(cta, message.cta.string_id);
       } else {
         close.setAttribute("title", message.close_button.tooltiptext);
         title.textContent = message.title;
         content.textContent = message.text;
         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);
     }
 
     this.toggleRecommendation(true);
   }
 
--- a/browser/components/newtab/test/browser/browser_asrouter_bookmarkpanel.js
+++ b/browser/components/newtab/test/browser/browser_asrouter_bookmarkpanel.js
@@ -33,18 +33,23 @@ add_task(async function test_fxa_message
   await BrowserTestUtils.waitForCondition(() => BookmarkingUI.status !== BookmarkingUI.STATUS_UPDATING);
 
   BookmarkingUI.star.click();
 
   await popupShownPromise;
 
   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" ||
       l.getAttribute("href") === "browser/branding/sync-brand.ftl");
 
   Assert.equal(ftlFiles.length, 2, "Two fluent files required for translating the message");
 
   const popupHiddenPromise = BrowserTestUtils.waitForEvent(StarUI.panel, "popuphidden");
--- a/browser/themes/shared/places/editBookmarkPanel.inc.css
+++ b/browser/themes/shared/places/editBookmarkPanel.inc.css
@@ -63,26 +63,21 @@
   position: relative;
   padding: 0 16px;
 }
 
 #editBookmarkPanelRecommendation > div::-moz-focus-inner {
   border: none;
 }
 
-#editBookmarkPanelRecommendation > div h1 {
-  max-width: 215px;
-}
-
 #editBookmarkPanelRecommendationTitle {
   font-size: 16px;
   font-weight: 400;
   line-height: 1.25;
-  margin-bottom: 6px;
-  padding-top: 2px;
+  margin: 0;
 }
 
 #editBookmarkPanelRecommendationContent {
   font-size: 11px;
   line-height: 1.5;
   margin: 0;
 }
 
@@ -98,21 +93,27 @@
   padding: 0;
   text-align: start;
 }
 
 #editBookmarkPanelRecommendationCta:hover {
   text-decoration: underline;
 }
 
+#editBookmarkPanelRecommendation .cfrMessageHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: start;
+  margin-bottom: 6px;
+  margin-top: 10px;
+  padding-top: 2px;
+}
+
 #editBookmarkPanelRecommendation #cfrClose {
-  position: absolute;
   padding: 10px;
-  inset-inline-end: 8px;
-  top: 15px;
   width: 12px;
   height: 12px;
   border: none;
   border-radius: var(--toolbarbutton-border-radius);
   background-color: transparent;
   background-image: url(chrome://browser/skin/stop.svg);
   background-size: 12px;
   background-repeat: no-repeat;