Bug 1590446 - Implement reduced animation r=nhnt11
authorErica Wright <ewright@mozilla.com>
Wed, 13 Nov 2019 20:39:39 +0000
changeset 501842 7284aee6b994ea181160cecee018ce30506988de
parent 501841 0e1844d65a2504f02679253ae9a536887cddc720
child 501843 5127c3b7168486c70e084bc45c324c9443cffc92
push id100455
push userewright@mozilla.com
push dateWed, 13 Nov 2019 22:45:40 +0000
treeherderautoland@7284aee6b994 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnhnt11
bugs1590446
milestone72.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 1590446 - Implement reduced animation r=nhnt11 Differential Revision: https://phabricator.services.mozilla.com/D52405
browser/themes/shared/customizableui/panelUI.inc.css
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -1820,45 +1820,49 @@ 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: height .25s;
+  transition: margin-bottom .25s;
   border-top: 1px solid var(--panel-separator-color);
 }
 
 #protections-popup #messaging-system-message-container[disabled] {
-  height: 0;
+   /* 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;
+  pointer-events: none;
 }
 
 #protections-popup #messaging-system-message-container[disabled] #protections-popup-message {
-  /* height + margins */
-  transform: translateY(calc(-100% - 10px));
+  opacity: 0;
 }
 
 #protections-popup-message {
   display: flex;
   align-items: flex-end;
-  transition: transform .25s;
-  font-size: 1rem;
-}
-
-#protections-popup-message.whatsNew-hero-message {
+  height: calc(100% - 20px);
+  margin: 10px;
+  transition: opacity .25s;
+  opacity: 1; 
   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;
   color: white;
 }
 
+#protections-popup-message > .whatsNew-message-body > .text-link {
+  text-decoration: underline;
+}
+
 panelview[mainview] #PanelUI-whatsNew-content {
   height: 43em;
 }
 
 #PanelUI-whatsNew .panel-subview-body {
   padding-top: 0;
 }