Bug 1548784 - Bookmark Panel message requires variable height r=k88hudson

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

--HG--
extra : moz-landing-system : lando

browser/components/newtab/lib/BookmarkPanelHub.jsm

@@ -127,9 +127,9 @@ class _BookmarkPanelHub {
 
     const createElement = elem =>
       target.document.createElementNS("http://www.w3.org/1999/xhtml", elem);
-
-    if (!target.container.querySelector("#cfrMessageContainer")) {
-      const recommendation = createElement("div");
+    let recommendation = target.container.querySelector("#cfrMessageContainer");
+    if (!recommendation) {
+      recommendation = createElement("div");
       const headerContainer = createElement("div");
       headerContainer.classList.add("cfrMessageHeader");
       recommendation.setAttribute("id", "cfrMessageContainer");
@@ -190,6 +190,41 @@ class _BookmarkPanelHub {
     }
 
     this.toggleRecommendation(true);
+    this._adjustPanelHeight(win, recommendation);
+  }
+
+  /**
+   * Adjust the size of the container for locales where the message is
+   * longer than the fixed 150px set for height
+   */
+  async _adjustPanelHeight(window, messageContainer) {
+    const { document } = window;
+    // Contains the screenshot of the page we are bookmarking
+    const screenshotContainer = document.getElementById(
+      "editBookmarkPanelImage"
+    );
+    // Wait for strings to be added which can change element height
+    await document.l10n.translateElements([messageContainer]);
+    window.requestAnimationFrame(() => {
+      let { height } = messageContainer.getBoundingClientRect();
+      if (height > 150) {
+        messageContainer.classList.add("longMessagePadding");
+        // Get the new value with the added padding
+        height = messageContainer.getBoundingClientRect().height;
+        // Needs to be adjusted to match the message height
+        screenshotContainer.style.height = `${height}px`;
+      }
+    });
+  }
+
+  /**
+   * Restore the panel back to the original size so the slide in
+   * animation can run again
+   */
+  _restorePanelHeight(window) {
+    const { document } = window;
+    // Contains the screenshot of the page we are bookmarking
+    document.getElementById("editBookmarkPanelImage").style.height = "";
   }
 
   toggleRecommendation(visible) {
@@ -224,6 +259,7 @@ class _BookmarkPanelHub {
         target || this._response.target
       ).container.querySelector("#cfrMessageContainer");
       if (container) {
+        this._restorePanelHeight(this._response.win);
         container.remove();
       }
     }
@@ -250,7 +286,7 @@ class _BookmarkPanelHub {
     // Remove any existing message
     this.hideMessage(panelTarget);
     // Reset the reference to the panel elements
-    this._response = { target: panelTarget };
+    this._response = { target: panelTarget, win };
     // Required if we want to preview messages that include fluent strings
     win.MozXULElement.insertFTLIfNeeded("browser/newtab/asrouter.ftl");
     win.MozXULElement.insertFTLIfNeeded("browser/branding/sync-brand.ftl");

browser/themes/shared/places/editBookmarkPanel.inc.css

@@ -47,23 +47,27 @@
   position: absolute;
   height: 100%;
   width: 100%;
-  transition: all 0.25s cubic-bezier(0.07, 0.95, 0, 1);
+  transition: transform 0.25s cubic-bezier(0.07, 0.95, 0, 1);
 }
 
 #editBookmarkPanelRecommendation[disabled] {
   transform: translateY(-100%);
 }
 
-#editBookmarkPanelRecommendation > div {
+#editBookmarkPanelRecommendation #cfrMessageContainer {
   border-radius: 2px;
   display: flex;
   flex-direction: column;
-  height: 150px;
+  min-height: 150px;
   cursor: pointer;
   position: relative;
   padding: 0 16px;
 }
 
+#editBookmarkPanelRecommendation #cfrMessageContainer.longMessagePadding {
+  padding-bottom: 10px;
+}
+
 #editBookmarkPanelRecommendation > div::-moz-focus-inner {
   border: none;
 }
@@ -158,6 +162,11 @@ html|img#editBookmarkPanelFavicon[src] {
   background-repeat: no-repeat;
   background-size: cover;
   margin: 0 2px;
+  /* When adjusting the height for long CFR messages we want the animations
+   * to align. The delay is used to force the animation to start when the
+   * panel message has finished sliding down. */
+  transition: height 0.28s cubic-bezier(0.07, 0.95, 0, 1);
+  transition-delay: 10ms;
 }
 
 #editBookmarkPanelRows,