Backed out changeset a421fd8b9897 (bug 1682311) for causing failures on browser_customize_menu_content.js . CLOSED TREE

browser/components/newtab/content-src/components/Base/Base.jsx

@@ -258,10 +258,11 @@ export class BaseContent extends React.PureComponent {
           </main>
         </div>
         <CSSTransition
-          timeout={0}
+          timeout={250}
           classNames="customize-animate"
           in={showCustomizationMenu}
           appear={true}
+          unmountOnExit={true}
         >
           <CustomizeMenu
             onClose={this.closeCustomizationMenu}

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

@@ -1,4 +1,33 @@
 
+.customize-animate-appear,
+.customize-animate-enter {
+  transform: translateX(435px);
+
+  &:dir(rtl) {
+    transform: translateX(-435px);
+  }
+}
+
+.customize-animate-appear-active,
+.customize-animate-enter-active {
+  transform: translateX(0);
+  transition: transform $customize-menu-slide-bezier;
+}
+
+.customize-animate-exit {
+  transform: translateX(0);
+}
+
+.customize-animate-exit-active,
+.customize-animate-exit-done {
+  transform: translateX(435px);
+  transition: transform $customize-menu-slide-bezier;
+
+  &:dir(rtl) {
+    transform: translateX(-435px);
+  }
+}
+
 .customize-menu {
   color: var(--customize-menu-primary-text-color);
   background-color: var(--customize-menu-background);
@@ -8,32 +37,10 @@
   inset-block: 0;
   inset-inline-end: 0;
   z-index: 1001;
+  box-shadow: 0 0 64px var(--customize-menu-first-shadow), 0 0 24px var(--customize-menu-second-shadow);
   padding: 16px;
-  transition: transform 250ms $customize-menu-slide-bezier;
+  transition: 250ms $customize-menu-slide-bezier;
   overflow: auto;
-  transform: translateX(435px);
-
-  &:dir(rtl) {
-    transform: translateX(-435px);
-  }
-
-  &.customize-animate-enter-done {
-    transform: translateX(0);
-  }
-
-  &.customize-animate-enter-done,
-  &.customize-animate-enter-active,
-  &.customize-animate-exit-active {
-    box-shadow: 0 0 64px var(--customize-menu-first-shadow), 0 0 24px var(--customize-menu-second-shadow);
-  }
-
-  &.customize-animate-exit-done {
-    transform: translateX(435px);
-
-    &:dir(rtl) {
-      transform: translateX(-435px);
-    }
-  }
 
   .close-button {
     margin-inline-start: auto;

browser/components/newtab/content-src/styles/_variables.scss

@@ -109,7 +109,7 @@ $newtab-card-tint: rgba(0, 0, 0, 0.15);
 $newtab-card-firstshadow: rgba(9, 32, 77, 0.12);
 $newtab-card-darktheme-firstshadow: rgba(21, 20, 26, 0.5);
 $newtab-card-secondshadow: rgba(29, 17, 51, 0.12);
-$newtab-darktheme-card-secondshadow: rgba(21, 20, 26, 0.75);
+$newtab-darktheme-card-secondshadow: gba(21, 20, 26, 0.75);
 $newtab-focus-outline: rgba(0, 96, 223, 0.25);
 $newtab-darktheme-focus-outline: rgba(80, 145, 241, 0.5);
 $newtab-darktheme-focus-border: #B5D3FF;

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

@@ -162,7 +162,7 @@ body {
     --customize-menu-secondary-action-background-active: #6F6F74;
     --customize-menu-seperator-line-color: #53515F;
     --customize-menu-first-shadow: rgba(21, 20, 26, 0.5);
-    --customize-menu-second-shadow: rgba(21, 20, 26, 0.75);
+    --customize-menu-second-shadow: gba(21, 20, 26, 0.75);
     --customize-menu-primary-action-text: #E0E0E6;
     --customize-menu-line-color: #B9B7CC; }
 
@@ -1416,6 +1416,29 @@ main {
   font-size: 15px;
   z-index: 11002; }
 
+.customize-animate-appear,
+.customize-animate-enter {
+  transform: translateX(435px); }
+  .customize-animate-appear:dir(rtl),
+  .customize-animate-enter:dir(rtl) {
+    transform: translateX(-435px); }
+
+.customize-animate-appear-active,
+.customize-animate-enter-active {
+  transform: translateX(0);
+  transition: transform cubic-bezier(0.46, 0.03, 0.52, 0.96); }
+
+.customize-animate-exit {
+  transform: translateX(0); }
+
+.customize-animate-exit-active,
+.customize-animate-exit-done {
+  transform: translateX(435px);
+  transition: transform cubic-bezier(0.46, 0.03, 0.52, 0.96); }
+  .customize-animate-exit-active:dir(rtl),
+  .customize-animate-exit-done:dir(rtl) {
+    transform: translateX(-435px); }
+
 .customize-menu {
   color: var(--customize-menu-primary-text-color);
   background-color: var(--customize-menu-background);
@@ -1425,20 +1448,10 @@ main {
   inset-block: 0;
   inset-inline-end: 0;
   z-index: 1001;
+  box-shadow: 0 0 64px var(--customize-menu-first-shadow), 0 0 24px var(--customize-menu-second-shadow);
   padding: 16px;
-  transition: transform 250ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
-  overflow: auto;
-  transform: translateX(435px); }
-  .customize-menu:dir(rtl) {
-    transform: translateX(-435px); }
-  .customize-menu.customize-animate-enter-done {
-    transform: translateX(0); }
-  .customize-menu.customize-animate-enter-done, .customize-menu.customize-animate-enter-active, .customize-menu.customize-animate-exit-active {
-    box-shadow: 0 0 64px var(--customize-menu-first-shadow), 0 0 24px var(--customize-menu-second-shadow); }
-  .customize-menu.customize-animate-exit-done {
-    transform: translateX(435px); }
-    .customize-menu.customize-animate-exit-done:dir(rtl) {
-      transform: translateX(-435px); }
+  transition: 250ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
+  overflow: auto; }
   .customize-menu .close-button {
     margin-inline-start: auto;
     margin-bottom: 28px;

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

@@ -165,7 +165,7 @@ body {
     --customize-menu-secondary-action-background-active: #6F6F74;
     --customize-menu-seperator-line-color: #53515F;
     --customize-menu-first-shadow: rgba(21, 20, 26, 0.5);
-    --customize-menu-second-shadow: rgba(21, 20, 26, 0.75);
+    --customize-menu-second-shadow: gba(21, 20, 26, 0.75);
     --customize-menu-primary-action-text: #E0E0E6;
     --customize-menu-line-color: #B9B7CC; }
 
@@ -1419,6 +1419,29 @@ main {
   font-size: 15px;
   z-index: 11002; }
 
+.customize-animate-appear,
+.customize-animate-enter {
+  transform: translateX(435px); }
+  .customize-animate-appear:dir(rtl),
+  .customize-animate-enter:dir(rtl) {
+    transform: translateX(-435px); }
+
+.customize-animate-appear-active,
+.customize-animate-enter-active {
+  transform: translateX(0);
+  transition: transform cubic-bezier(0.46, 0.03, 0.52, 0.96); }
+
+.customize-animate-exit {
+  transform: translateX(0); }
+
+.customize-animate-exit-active,
+.customize-animate-exit-done {
+  transform: translateX(435px);
+  transition: transform cubic-bezier(0.46, 0.03, 0.52, 0.96); }
+  .customize-animate-exit-active:dir(rtl),
+  .customize-animate-exit-done:dir(rtl) {
+    transform: translateX(-435px); }
+
 .customize-menu {
   color: var(--customize-menu-primary-text-color);
   background-color: var(--customize-menu-background);
@@ -1428,20 +1451,10 @@ main {
   inset-block: 0;
   inset-inline-end: 0;
   z-index: 1001;
+  box-shadow: 0 0 64px var(--customize-menu-first-shadow), 0 0 24px var(--customize-menu-second-shadow);
   padding: 16px;
-  transition: transform 250ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
-  overflow: auto;
-  transform: translateX(435px); }
-  .customize-menu:dir(rtl) {
-    transform: translateX(-435px); }
-  .customize-menu.customize-animate-enter-done {
-    transform: translateX(0); }
-  .customize-menu.customize-animate-enter-done, .customize-menu.customize-animate-enter-active, .customize-menu.customize-animate-exit-active {
-    box-shadow: 0 0 64px var(--customize-menu-first-shadow), 0 0 24px var(--customize-menu-second-shadow); }
-  .customize-menu.customize-animate-exit-done {
-    transform: translateX(435px); }
-    .customize-menu.customize-animate-exit-done:dir(rtl) {
-      transform: translateX(-435px); }
+  transition: 250ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
+  overflow: auto; }
   .customize-menu .close-button {
     margin-inline-start: auto;
     margin-bottom: 28px;

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

@@ -162,7 +162,7 @@ body {
     --customize-menu-secondary-action-background-active: #6F6F74;
     --customize-menu-seperator-line-color: #53515F;
     --customize-menu-first-shadow: rgba(21, 20, 26, 0.5);
-    --customize-menu-second-shadow: rgba(21, 20, 26, 0.75);
+    --customize-menu-second-shadow: gba(21, 20, 26, 0.75);
     --customize-menu-primary-action-text: #E0E0E6;
     --customize-menu-line-color: #B9B7CC; }
 
@@ -1416,6 +1416,29 @@ main {
   font-size: 15px;
   z-index: 11002; }
 
+.customize-animate-appear,
+.customize-animate-enter {
+  transform: translateX(435px); }
+  .customize-animate-appear:dir(rtl),
+  .customize-animate-enter:dir(rtl) {
+    transform: translateX(-435px); }
+
+.customize-animate-appear-active,
+.customize-animate-enter-active {
+  transform: translateX(0);
+  transition: transform cubic-bezier(0.46, 0.03, 0.52, 0.96); }
+
+.customize-animate-exit {
+  transform: translateX(0); }
+
+.customize-animate-exit-active,
+.customize-animate-exit-done {
+  transform: translateX(435px);
+  transition: transform cubic-bezier(0.46, 0.03, 0.52, 0.96); }
+  .customize-animate-exit-active:dir(rtl),
+  .customize-animate-exit-done:dir(rtl) {
+    transform: translateX(-435px); }
+
 .customize-menu {
   color: var(--customize-menu-primary-text-color);
   background-color: var(--customize-menu-background);
@@ -1425,20 +1448,10 @@ main {
   inset-block: 0;
   inset-inline-end: 0;
   z-index: 1001;
+  box-shadow: 0 0 64px var(--customize-menu-first-shadow), 0 0 24px var(--customize-menu-second-shadow);
   padding: 16px;
-  transition: transform 250ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
-  overflow: auto;
-  transform: translateX(435px); }
-  .customize-menu:dir(rtl) {
-    transform: translateX(-435px); }
-  .customize-menu.customize-animate-enter-done {
-    transform: translateX(0); }
-  .customize-menu.customize-animate-enter-done, .customize-menu.customize-animate-enter-active, .customize-menu.customize-animate-exit-active {
-    box-shadow: 0 0 64px var(--customize-menu-first-shadow), 0 0 24px var(--customize-menu-second-shadow); }
-  .customize-menu.customize-animate-exit-done {
-    transform: translateX(435px); }
-    .customize-menu.customize-animate-exit-done:dir(rtl) {
-      transform: translateX(-435px); }
+  transition: 250ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
+  overflow: auto; }
   .customize-menu .close-button {
     margin-inline-start: auto;
     margin-bottom: 28px;

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

@@ -794,10 +794,11 @@ class BaseContent extends react__WEBPACK_IMPORTED_MODULE_8___default.a.PureCompo
     }, react__WEBPACK_IMPORTED_MODULE_8___default.a.createElement(content_src_components_DiscoveryStreamBase_DiscoveryStreamBase__WEBPACK_IMPORTED_MODULE_5__["DiscoveryStreamBase"], {
       locale: props.App.locale
     })) : react__WEBPACK_IMPORTED_MODULE_8___default.a.createElement(content_src_components_Sections_Sections__WEBPACK_IMPORTED_MODULE_10__["Sections"], null)), react__WEBPACK_IMPORTED_MODULE_8___default.a.createElement(content_src_components_ConfirmDialog_ConfirmDialog__WEBPACK_IMPORTED_MODULE_3__["ConfirmDialog"], null))), react__WEBPACK_IMPORTED_MODULE_8___default.a.createElement(react_transition_group__WEBPACK_IMPORTED_MODULE_11__["CSSTransition"], {
-      timeout: 0,
+      timeout: 250,
       classNames: "customize-animate",
       in: showCustomizationMenu,
-      appear: true
+      appear: true,
+      unmountOnExit: true
     }, react__WEBPACK_IMPORTED_MODULE_8___default.a.createElement(content_src_components_CustomizeMenu_CustomizeMenu__WEBPACK_IMPORTED_MODULE_7__["CustomizeMenu"], {
       onClose: this.closeCustomizationMenu,
       openPreferences: this.openPreferences,