Bug 1587316 - Revert info message animation change. r=timhuang
authorNihanth Subramanya <nhnt11@gmail.com>
Wed, 09 Oct 2019 08:16:26 +0000
changeset 496971 4d96e957ce0e78258c0b42e18573df9e21bf5e4b
parent 496970 73358909161395b3908d402b0357aacaa2973f5a
child 496972 2f0d54bc905136d1cb6e8802d67193bb07d7cf5c
push id36673
push userbtara@mozilla.com
push dateWed, 09 Oct 2019 21:39:14 +0000
treeherdermozilla-central@cad27f93a986 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstimhuang
bugs1587316
milestone71.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 1587316 - Revert info message animation change. r=timhuang Differential Revision: https://phabricator.services.mozilla.com/D48641
browser/themes/shared/customizableui/panelUI.inc.css
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -1820,35 +1820,33 @@ toolbarpaletteitem[place="menu-panel"] >
 #protections-popup-main-header-label {
   margin-inline-start: 30px;
   text-align: center;
 }
 
 #protections-popup #messaging-system-message-container {
   height: 260px;
   overflow: hidden;
-  transition: margin-bottom .25s;
+  transition: height .25s;
   border-top: 1px solid var(--panel-separator-color);
 }
 
 #protections-popup #messaging-system-message-container[disabled] {
-  /* Offset the height when hidden. This makes the panel content
-   * cover the info message and reveal it as it slides down, rather
-   * than the info message growing in height. */
-  margin-bottom: -260px;
+  height: 0;
 }
 
 #protections-popup #messaging-system-message-container[disabled] #protections-popup-message {
-  opacity: 0;
+  /* height + margins */
+  transform: translateY(calc(-100% - 10px));
 }
 
 #protections-popup-message {
   display: flex;
   align-items: flex-end;
-  transition: opacity .25s;
+  transition: transform .25s;
 }
 
 #protections-popup-message.whatsNew-hero-message {
   background-image: url(chrome://browser/skin/controlcenter/hero-message-background.svg);
   background-repeat: no-repeat;
   background-position: top right;
   height: calc(100% - 20px);
   margin: 10px;