Bug 1780849 - refactoring pref drawer animation r=thecount

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

browser/components/newtab/content-src/components/CustomizeMenu/ContentSection/ContentSection.jsx

@@ -9,6 +9,10 @@ export class ContentSection extends React.PureComponent {
   constructor(props) {
     super(props);
     this.onPreferenceSelect = this.onPreferenceSelect.bind(this);
+
+    // Refs are necessary for dynamically measuring drawer heights for slide animations
+    this.topSitesDrawerRef = React.createRef();
+    this.pocketDrawerRef = React.createRef();
   }
 
   inputUserEvent(eventSource, status) {
@@ -23,7 +27,7 @@ export class ContentSection extends React.PureComponent {
 
   onPreferenceSelect(e) {
     let prefName = e.target.getAttribute("preference");
-    const eventSource = e.target.getAttribute("eventSource");
+    const eventSource = e.target.getAttribute("eventSource"); // TOP_SITES, TOP_STORIES, HIGHLIGHTS
     let value;
     if (e.target.nodeName === "SELECT") {
       value = parseInt(e.target.value, 10);
@@ -36,6 +40,49 @@ export class ContentSection extends React.PureComponent {
     this.props.setPref(prefName, value);
   }
 
+  componentDidMount() {
+    this.setDrawerMargins();
+  }
+
+  componentDidUpdate() {
+    this.setDrawerMargins();
+  }
+
+  setDrawerMargins() {
+    this.setDrawerMargin(
+      `TOP_SITES`,
+      this.props.enabledSections.topSitesEnabled
+    );
+    this.setDrawerMargin(
+      `TOP_STORIES`,
+      this.props.enabledSections.pocketEnabled
+    );
+  }
+
+  setDrawerMargin(drawerID, isOpen) {
+    let drawerRef;
+
+    if (drawerID === `TOP_SITES`) {
+      drawerRef = this.topSitesDrawerRef.current;
+    } else if (drawerID === `TOP_STORIES`) {
+      drawerRef = this.pocketDrawerRef.current;
+    } else {
+      return;
+    }
+
+    let drawerHeight;
+
+    if (drawerRef) {
+      drawerHeight = parseFloat(window.getComputedStyle(drawerRef)?.height);
+
+      if (isOpen) {
+        drawerRef.style.marginTop = `0`;
+      } else {
+        drawerRef.style.marginTop = `-${drawerHeight}px`;
+      }
+    }
+  }
+
   render() {
     const {
       enabledSections,
@@ -83,16 +130,8 @@ export class ContentSection extends React.PureComponent {
               className="subtitle"
               data-l10n-id="newtab-custom-shortcuts-subtitle"
             ></p>
-            <div
-              className={`more-info-top-wrapper ${
-                topSitesEnabled ? "" : "shrink"
-              }`}
-            >
-              <div
-                className={`more-information ${
-                  topSitesEnabled ? "expand" : "shrink"
-                }`}
-              >
+            <div className="more-info-top-wrapper">
+              <div className="more-information" ref={this.topSitesDrawerRef}>
                 <select
                   id="row-selector"
                   className="selector"
@@ -176,16 +215,8 @@ export class ContentSection extends React.PureComponent {
                 data-l10n-id="newtab-custom-pocket-subtitle"
               />
               {(mayHaveSponsoredStories || mayHaveRecentSaves) && (
-                <div
-                  className={`more-info-pocket-wrapper ${
-                    pocketEnabled ? "" : "shrink"
-                  }`}
-                >
-                  <div
-                    className={`more-information ${
-                      pocketEnabled ? "expand" : "shrink"
-                    }`}
-                  >
+                <div className="more-info-pocket-wrapper">
+                  <div className="more-information" ref={this.pocketDrawerRef}>
                     {mayHaveSponsoredStories && (
                       <div className="check-wrapper" role="presentation">
                         <input

browser/components/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss

@@ -249,39 +249,19 @@
     .more-info-pocket-wrapper {
       margin-inline-start: -2px;
       overflow: hidden;
-      transition: height 250ms $customize-menu-expand-bezier;
-      height: 100%;
-
-      &.shrink {
-        height: 0;
-      }
 
       .more-information {
         padding-top: 12px;
         position: relative;
-        transition: top 250ms $customize-menu-expand-bezier;
-      }
-
-      .more-information.expand {
-        top: 0;
+        transition: margin-top 250ms $customize-menu-expand-bezier;
       }
     }
 
     .more-info-top-wrapper {
-      .more-information {
-        top: -77px;
-      }
-
       .check-wrapper {
         margin-top: 10px;
       }
     }
-
-    .more-info-pocket-wrapper {
-      .more-information {
-        top: -35px;
-      }
-    }
   }
 
   .divider {

browser/components/newtab/css/activity-stream-linux.css

@@ -1824,32 +1824,16 @@ main.has-snippet {
 .home-section .section .more-info-pocket-wrapper {
   margin-inline-start: -2px;
   overflow: hidden;
-  transition: height 250ms cubic-bezier(0.82, 0.085, 0.395, 0.895);
-  height: 100%;
-}
-.home-section .section .more-info-top-wrapper.shrink,
-.home-section .section .more-info-pocket-wrapper.shrink {
-  height: 0;
 }
 .home-section .section .more-info-top-wrapper .more-information,
 .home-section .section .more-info-pocket-wrapper .more-information {
   padding-top: 12px;
   position: relative;
-  transition: top 250ms cubic-bezier(0.82, 0.085, 0.395, 0.895);
-}
-.home-section .section .more-info-top-wrapper .more-information.expand,
-.home-section .section .more-info-pocket-wrapper .more-information.expand {
-  top: 0;
-}
-.home-section .section .more-info-top-wrapper .more-information {
-  top: -77px;
+  transition: margin-top 250ms cubic-bezier(0.82, 0.085, 0.395, 0.895);
 }
 .home-section .section .more-info-top-wrapper .check-wrapper {
   margin-top: 10px;
 }
-.home-section .section .more-info-pocket-wrapper .more-information {
-  top: -35px;
-}
 .home-section .divider {
   border-top: 1px var(--newtab-border-color) solid;
   margin: 0 -16px;

browser/components/newtab/css/activity-stream-mac.css

@@ -1828,32 +1828,16 @@ main.has-snippet {
 .home-section .section .more-info-pocket-wrapper {
   margin-inline-start: -2px;
   overflow: hidden;
-  transition: height 250ms cubic-bezier(0.82, 0.085, 0.395, 0.895);
-  height: 100%;
-}
-.home-section .section .more-info-top-wrapper.shrink,
-.home-section .section .more-info-pocket-wrapper.shrink {
-  height: 0;
 }
 .home-section .section .more-info-top-wrapper .more-information,
 .home-section .section .more-info-pocket-wrapper .more-information {
   padding-top: 12px;
   position: relative;
-  transition: top 250ms cubic-bezier(0.82, 0.085, 0.395, 0.895);
-}
-.home-section .section .more-info-top-wrapper .more-information.expand,
-.home-section .section .more-info-pocket-wrapper .more-information.expand {
-  top: 0;
-}
-.home-section .section .more-info-top-wrapper .more-information {
-  top: -77px;
+  transition: margin-top 250ms cubic-bezier(0.82, 0.085, 0.395, 0.895);
 }
 .home-section .section .more-info-top-wrapper .check-wrapper {
   margin-top: 10px;
 }
-.home-section .section .more-info-pocket-wrapper .more-information {
-  top: -35px;
-}
 .home-section .divider {
   border-top: 1px var(--newtab-border-color) solid;
   margin: 0 -16px;

browser/components/newtab/css/activity-stream-windows.css

@@ -1824,32 +1824,16 @@ main.has-snippet {
 .home-section .section .more-info-pocket-wrapper {
   margin-inline-start: -2px;
   overflow: hidden;
-  transition: height 250ms cubic-bezier(0.82, 0.085, 0.395, 0.895);
-  height: 100%;
-}
-.home-section .section .more-info-top-wrapper.shrink,
-.home-section .section .more-info-pocket-wrapper.shrink {
-  height: 0;
 }
 .home-section .section .more-info-top-wrapper .more-information,
 .home-section .section .more-info-pocket-wrapper .more-information {
   padding-top: 12px;
   position: relative;
-  transition: top 250ms cubic-bezier(0.82, 0.085, 0.395, 0.895);
-}
-.home-section .section .more-info-top-wrapper .more-information.expand,
-.home-section .section .more-info-pocket-wrapper .more-information.expand {
-  top: 0;
-}
-.home-section .section .more-info-top-wrapper .more-information {
-  top: -77px;
+  transition: margin-top 250ms cubic-bezier(0.82, 0.085, 0.395, 0.895);
 }
 .home-section .section .more-info-top-wrapper .check-wrapper {
   margin-top: 10px;
 }
-.home-section .section .more-info-pocket-wrapper .more-information {
-  top: -35px;
-}
 .home-section .divider {
   border-top: 1px var(--newtab-border-color) solid;
   margin: 0 -16px;

browser/components/newtab/data/content/activity-stream.bundle.js

@@ -13819,7 +13819,10 @@ class BackgroundsSection extends (external_React_default()).PureComponent {
 class ContentSection extends (external_React_default()).PureComponent {
   constructor(props) {
     super(props);
-    this.onPreferenceSelect = this.onPreferenceSelect.bind(this);
+    this.onPreferenceSelect = this.onPreferenceSelect.bind(this); // Refs are necessary for dynamically measuring drawer heights for slide animations
+
+    this.topSitesDrawerRef = /*#__PURE__*/external_React_default().createRef();
+    this.pocketDrawerRef = /*#__PURE__*/external_React_default().createRef();
   }
 
   inputUserEvent(eventSource, status) {
@@ -13835,7 +13838,8 @@ class ContentSection extends (external_React_default()).PureComponent {
 
   onPreferenceSelect(e) {
     let prefName = e.target.getAttribute("preference");
-    const eventSource = e.target.getAttribute("eventSource");
+    const eventSource = e.target.getAttribute("eventSource"); // TOP_SITES, TOP_STORIES, HIGHLIGHTS
+
     let value;
 
     if (e.target.nodeName === "SELECT") {
@@ -13851,6 +13855,45 @@ class ContentSection extends (external_React_default()).PureComponent {
     this.props.setPref(prefName, value);
   }
 
+  componentDidMount() {
+    this.setDrawerMargins();
+  }
+
+  componentDidUpdate() {
+    this.setDrawerMargins();
+  }
+
+  setDrawerMargins() {
+    this.setDrawerMargin(`TOP_SITES`, this.props.enabledSections.topSitesEnabled);
+    this.setDrawerMargin(`TOP_STORIES`, this.props.enabledSections.pocketEnabled);
+  }
+
+  setDrawerMargin(drawerID, isOpen) {
+    let drawerRef;
+
+    if (drawerID === `TOP_SITES`) {
+      drawerRef = this.topSitesDrawerRef.current;
+    } else if (drawerID === `TOP_STORIES`) {
+      drawerRef = this.pocketDrawerRef.current;
+    } else {
+      return;
+    }
+
+    let drawerHeight;
+
+    if (drawerRef) {
+      var _window$getComputedSt;
+
+      drawerHeight = parseFloat((_window$getComputedSt = window.getComputedStyle(drawerRef)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.height);
+
+      if (isOpen) {
+        drawerRef.style.marginTop = `0`;
+      } else {
+        drawerRef.style.marginTop = `-${drawerHeight}px`;
+      }
+    }
+  }
+
   render() {
     const {
       enabledSections,
@@ -13899,9 +13942,10 @@ class ContentSection extends (external_React_default()).PureComponent {
       className: "subtitle",
       "data-l10n-id": "newtab-custom-shortcuts-subtitle"
     }), /*#__PURE__*/external_React_default().createElement("div", {
-      className: `more-info-top-wrapper ${topSitesEnabled ? "" : "shrink"}`
+      className: "more-info-top-wrapper"
     }, /*#__PURE__*/external_React_default().createElement("div", {
-      className: `more-information ${topSitesEnabled ? "expand" : "shrink"}`
+      className: "more-information",
+      ref: this.topSitesDrawerRef
     }, /*#__PURE__*/external_React_default().createElement("select", {
       id: "row-selector",
       className: "selector",
@@ -13971,9 +14015,10 @@ class ContentSection extends (external_React_default()).PureComponent {
       className: "subtitle",
       "data-l10n-id": "newtab-custom-pocket-subtitle"
     }), (mayHaveSponsoredStories || mayHaveRecentSaves) && /*#__PURE__*/external_React_default().createElement("div", {
-      className: `more-info-pocket-wrapper ${pocketEnabled ? "" : "shrink"}`
+      className: "more-info-pocket-wrapper"
     }, /*#__PURE__*/external_React_default().createElement("div", {
-      className: `more-information ${pocketEnabled ? "expand" : "shrink"}`
+      className: "more-information",
+      ref: this.pocketDrawerRef
     }, mayHaveSponsoredStories && /*#__PURE__*/external_React_default().createElement("div", {
       className: "check-wrapper",
       role: "presentation"