Bug 1548784 - Bookmark Panel message requires variable height r=k88hudson
authorAndrei Oprea <andrei.br92@gmail.com>
Mon, 08 Jul 2019 10:35:17 +0000
changeset 481624 bd1d6fea6587e52b618cf9f9fe7a64ea01645dfb
parent 481623 c3c853745453f187d60d195a04c5d877f04de896
child 481625 41619cdd1d641527f41284243bba5b7cd600c3e3
push id36261
push usernbeleuzu@mozilla.com
push dateTue, 09 Jul 2019 03:44:14 +0000
treeherdermozilla-central@b782ed36b2e8 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersk88hudson
bugs1548784
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 1548784 - Bookmark Panel message requires variable height r=k88hudson Differential Revision: https://phabricator.services.mozilla.com/D36892
browser/components/newtab/lib/BookmarkPanelHub.jsm
browser/themes/shared/places/editBookmarkPanel.inc.css
--- a/browser/components/newtab/lib/BookmarkPanelHub.jsm
+++ b/browser/components/newtab/lib/BookmarkPanelHub.jsm
@@ -122,19 +122,19 @@ class _BookmarkPanelHub {
   showMessage(message, target, win) {
     if (this._response && this._response.collapsed) {
       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");
+    let recommendation = target.container.querySelector("#cfrMessageContainer");
+    if (!recommendation) {
+      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,
@@ -185,16 +185,51 @@ class _BookmarkPanelHub {
       headerContainer.appendChild(close);
       recommendation.appendChild(headerContainer);
       recommendation.appendChild(content);
       recommendation.appendChild(cta);
       target.container.appendChild(recommendation);
     }
 
     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) {
     if (!this._response) {
       return;
     }
 
     const { target } = this._response;
@@ -219,16 +254,17 @@ class _BookmarkPanelHub {
   }
 
   _removeContainer(target) {
     if (target || (this._response && this._response.target)) {
       const container = (
         target || this._response.target
       ).container.querySelector("#cfrMessageContainer");
       if (container) {
+        this._restorePanelHeight(this._response.win);
         container.remove();
       }
     }
   }
 
   hideMessage(target) {
     this._removeContainer(target);
     this.toggleRecommendation(false);
@@ -245,17 +281,17 @@ class _BookmarkPanelHub {
       close: e => {
         e.stopPropagation();
         this.toggleRecommendation(false);
       },
     };
     // 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");
     this.showMessage(message.content, panelTarget, win);
   }
 
   sendImpression() {
     this._addImpression(this._response);
--- a/browser/themes/shared/places/editBookmarkPanel.inc.css
+++ b/browser/themes/shared/places/editBookmarkPanel.inc.css
@@ -42,33 +42,37 @@
   position: relative;
   margin: 6px 8px 0 8px;
 }
 
 #editBookmarkPanelRecommendation {
   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;
 }
 
 #editBookmarkPanelRecommendationTitle {
   font-size: 16px;
   font-weight: 400;
   line-height: 1.25;
@@ -153,16 +157,21 @@ html|img#editBookmarkPanelFavicon[src] {
 
 #editBookmarkPanelImage {
   border-radius: 2px;
   height: 150px;
   background-image: -moz-element(#editBookmarkPanelImageCanvas);
   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,
 #editBookmarkPanelBottomContent {
   padding: var(--arrowpanel-padding);
 }
 
 #editBookmarkPanelRows {