Backed out changeset a12870608bdf (bug 1780849) for causing failures at browser_contentSearchUI_default.js. CLOSED TREE
authorButkovits Atila <abutkovits@mozilla.com>
Tue, 26 Jul 2022 23:10:06 +0300
changeset 625231 43cacfb8eaabb401ca6d218d4eed944692af40c3
parent 625230 0fb8d54e23717677068c71f34186291725071812
child 625232 96d4d5ce81a65ababcae146396984c99ffb3647d
push id166853
push userabutkovits@mozilla.com
push dateTue, 26 Jul 2022 20:10:43 +0000
treeherderautoland@43cacfb8eaab [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
bugs1780849
milestone105.0a1
backs outa12870608bdfff0ccd36a89f54552e44c815e349
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
Backed out changeset a12870608bdf (bug 1780849) for causing failures at browser_contentSearchUI_default.js. CLOSED TREE
browser/components/newtab/content-src/components/CustomizeMenu/ContentSection/ContentSection.jsx
browser/components/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss
browser/components/newtab/css/activity-stream-linux.css
browser/components/newtab/css/activity-stream-mac.css
browser/components/newtab/css/activity-stream-windows.css
browser/components/newtab/data/content/activity-stream.bundle.js
--- a/browser/components/newtab/content-src/components/CustomizeMenu/ContentSection/ContentSection.jsx
+++ b/browser/components/newtab/content-src/components/CustomizeMenu/ContentSection/ContentSection.jsx
@@ -4,86 +4,43 @@
 
 import React from "react";
 import { actionCreators as ac } from "common/Actions.jsm";
 
 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) {
     this.props.dispatch(
       ac.UserEvent({
         event: "PREF_CHANGED",
         source: eventSource,
         value: { status, menu_source: "CUSTOMIZE_MENU" },
       })
     );
   }
 
   onPreferenceSelect(e) {
     let prefName = e.target.getAttribute("preference");
-    const eventSource = e.target.getAttribute("eventSource"); // TOP_SITES, TOP_STORIES, HIGHLIGHTS
+    const eventSource = e.target.getAttribute("eventSource");
     let value;
     if (e.target.nodeName === "SELECT") {
       value = parseInt(e.target.value, 10);
     } else if (e.target.nodeName === "INPUT") {
       value = e.target.checked;
       if (eventSource) {
         this.inputUserEvent(eventSource, value);
       }
     }
     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 = parseFloat(getComputedStyle(drawerRef, null).height);
-
-    if (isOpen) {
-      drawerRef.style.marginTop = `0`;
-    } else {
-      drawerRef.style.marginTop = `-${drawerHeight}px`;
-    }
-  }
-
   render() {
     const {
       enabledSections,
       mayHaveSponsoredTopSites,
       pocketRegion,
       mayHaveSponsoredStories,
       mayHaveRecentSaves,
       openPreferences,
@@ -121,18 +78,26 @@ export class ContentSection extends Reac
                 data-l10n-id="newtab-custom-shortcuts-title"
               ></label>
             </h2>
             <p
               id="custom-shortcuts-subtitle"
               className="subtitle"
               data-l10n-id="newtab-custom-shortcuts-subtitle"
             ></p>
-            <div className="more-info-top-wrapper">
-              <div className="more-information" ref={this.topSitesDrawerRef}>
+            <div
+              className={`more-info-top-wrapper ${
+                topSitesEnabled ? "" : "shrink"
+              }`}
+            >
+              <div
+                className={`more-information ${
+                  topSitesEnabled ? "expand" : "shrink"
+                }`}
+              >
                 <select
                   id="row-selector"
                   className="selector"
                   name="row-count"
                   preference="topSitesRows"
                   value={topSitesRowsCount}
                   onChange={this.onPreferenceSelect}
                   disabled={!topSitesEnabled}
@@ -206,18 +171,26 @@ export class ContentSection extends Reac
                 ></label>
               </h2>
               <p
                 id="custom-pocket-subtitle"
                 className="subtitle"
                 data-l10n-id="newtab-custom-pocket-subtitle"
               />
               {(mayHaveSponsoredStories || mayHaveRecentSaves) && (
-                <div className="more-info-pocket-wrapper">
-                  <div className="more-information" ref={this.pocketDrawerRef}>
+                <div
+                  className={`more-info-pocket-wrapper ${
+                    pocketEnabled ? "" : "shrink"
+                  }`}
+                >
+                  <div
+                    className={`more-information ${
+                      pocketEnabled ? "expand" : "shrink"
+                    }`}
+                  >
                     {mayHaveSponsoredStories && (
                       <div className="check-wrapper" role="presentation">
                         <input
                           id="sponsored-pocket"
                           className="sponsored-checkbox"
                           disabled={!pocketEnabled}
                           checked={showSponsoredPocketEnabled}
                           type="checkbox"
--- a/browser/components/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss
+++ b/browser/components/newtab/content-src/components/CustomizeMenu/_CustomizeMenu.scss
@@ -244,29 +244,49 @@
     input:checked + .slider:dir(rtl)::before {
       transform: translateX(-10px);
     }
 
     .more-info-top-wrapper,
     .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: margin-top 250ms $customize-menu-expand-bezier;
+        transition: top 250ms $customize-menu-expand-bezier;
+      }
+
+      .more-information.expand {
+        top: 0;
       }
     }
 
     .more-info-top-wrapper {
+      .more-information {
+        top: -77px;
+      }
+
       .check-wrapper {
         margin-top: 10px;
       }
     }
+
+    .more-info-pocket-wrapper {
+      .more-information {
+        top: -35px;
+      }
+    }
   }
 
   .divider {
     border-top: 1px var(--newtab-border-color) solid;
     margin: 0 -16px;
   }
 
   .external-link {
--- a/browser/components/newtab/css/activity-stream-linux.css
+++ b/browser/components/newtab/css/activity-stream-linux.css
@@ -1819,26 +1819,42 @@ main.has-snippet {
 }
 .home-section .section input:checked + .slider:dir(rtl)::before {
   transform: translateX(-10px);
 }
 .home-section .section .more-info-top-wrapper,
 .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: margin-top 250ms cubic-bezier(0.82, 0.085, 0.395, 0.895);
+  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;
 }
 .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;
 }
 .home-section .external-link {
   font-size: 14px;
   cursor: pointer;
   border: 1px solid transparent;
--- a/browser/components/newtab/css/activity-stream-mac.css
+++ b/browser/components/newtab/css/activity-stream-mac.css
@@ -1823,26 +1823,42 @@ main.has-snippet {
 }
 .home-section .section input:checked + .slider:dir(rtl)::before {
   transform: translateX(-10px);
 }
 .home-section .section .more-info-top-wrapper,
 .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: margin-top 250ms cubic-bezier(0.82, 0.085, 0.395, 0.895);
+  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;
 }
 .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;
 }
 .home-section .external-link {
   font-size: 14px;
   cursor: pointer;
   border: 1px solid transparent;
--- a/browser/components/newtab/css/activity-stream-windows.css
+++ b/browser/components/newtab/css/activity-stream-windows.css
@@ -1819,26 +1819,42 @@ main.has-snippet {
 }
 .home-section .section input:checked + .slider:dir(rtl)::before {
   transform: translateX(-10px);
 }
 .home-section .section .more-info-top-wrapper,
 .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: margin-top 250ms cubic-bezier(0.82, 0.085, 0.395, 0.895);
+  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;
 }
 .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;
 }
 .home-section .external-link {
   font-size: 14px;
   cursor: pointer;
   border: 1px solid transparent;
--- a/browser/components/newtab/data/content/activity-stream.bundle.js
+++ b/browser/components/newtab/data/content/activity-stream.bundle.js
@@ -13806,85 +13806,48 @@ class BackgroundsSection extends (extern
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 
 class ContentSection extends (external_React_default()).PureComponent {
   constructor(props) {
     super(props);
-    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();
+    this.onPreferenceSelect = this.onPreferenceSelect.bind(this);
   }
 
   inputUserEvent(eventSource, status) {
     this.props.dispatch(actionCreators.UserEvent({
       event: "PREF_CHANGED",
       source: eventSource,
       value: {
         status,
         menu_source: "CUSTOMIZE_MENU"
       }
     }));
   }
 
   onPreferenceSelect(e) {
     let prefName = e.target.getAttribute("preference");
-    const eventSource = e.target.getAttribute("eventSource"); // TOP_SITES, TOP_STORIES, HIGHLIGHTS
-
+    const eventSource = e.target.getAttribute("eventSource");
     let value;
 
     if (e.target.nodeName === "SELECT") {
       value = parseInt(e.target.value, 10);
     } else if (e.target.nodeName === "INPUT") {
       value = e.target.checked;
 
       if (eventSource) {
         this.inputUserEvent(eventSource, value);
       }
     }
 
     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 = parseFloat(getComputedStyle(drawerRef, null).height);
-
-    if (isOpen) {
-      drawerRef.style.marginTop = `0`;
-    } else {
-      drawerRef.style.marginTop = `-${drawerHeight}px`;
-    }
-  }
-
   render() {
     const {
       enabledSections,
       mayHaveSponsoredTopSites,
       pocketRegion,
       mayHaveSponsoredStories,
       mayHaveRecentSaves,
       openPreferences
@@ -13923,20 +13886,19 @@ class ContentSection extends (external_R
     }, /*#__PURE__*/external_React_default().createElement("label", {
       htmlFor: "shortcuts-toggle",
       "data-l10n-id": "newtab-custom-shortcuts-title"
     })), /*#__PURE__*/external_React_default().createElement("p", {
       id: "custom-shortcuts-subtitle",
       className: "subtitle",
       "data-l10n-id": "newtab-custom-shortcuts-subtitle"
     }), /*#__PURE__*/external_React_default().createElement("div", {
-      className: "more-info-top-wrapper"
+      className: `more-info-top-wrapper ${topSitesEnabled ? "" : "shrink"}`
     }, /*#__PURE__*/external_React_default().createElement("div", {
-      className: "more-information",
-      ref: this.topSitesDrawerRef
+      className: `more-information ${topSitesEnabled ? "expand" : "shrink"}`
     }, /*#__PURE__*/external_React_default().createElement("select", {
       id: "row-selector",
       className: "selector",
       name: "row-count",
       preference: "topSitesRows",
       value: topSitesRowsCount,
       onChange: this.onPreferenceSelect,
       disabled: !topSitesEnabled,
@@ -13996,20 +13958,19 @@ class ContentSection extends (external_R
     }, /*#__PURE__*/external_React_default().createElement("label", {
       htmlFor: "pocket-toggle",
       "data-l10n-id": "newtab-custom-pocket-title"
     })), /*#__PURE__*/external_React_default().createElement("p", {
       id: "custom-pocket-subtitle",
       className: "subtitle",
       "data-l10n-id": "newtab-custom-pocket-subtitle"
     }), (mayHaveSponsoredStories || mayHaveRecentSaves) && /*#__PURE__*/external_React_default().createElement("div", {
-      className: "more-info-pocket-wrapper"
+      className: `more-info-pocket-wrapper ${pocketEnabled ? "" : "shrink"}`
     }, /*#__PURE__*/external_React_default().createElement("div", {
-      className: "more-information",
-      ref: this.pocketDrawerRef
+      className: `more-information ${pocketEnabled ? "expand" : "shrink"}`
     }, mayHaveSponsoredStories && /*#__PURE__*/external_React_default().createElement("div", {
       className: "check-wrapper",
       role: "presentation"
     }, /*#__PURE__*/external_React_default().createElement("input", {
       id: "sponsored-pocket",
       className: "sponsored-checkbox",
       disabled: !pocketEnabled,
       checked: showSponsoredPocketEnabled,