Bug 1393870 - Panels anchored to bottom have weird animation. r=sfoster
authorErica Wright <ewright@mozilla.com>
Thu, 31 Aug 2017 15:41:02 -0400
changeset 428692 a4ba970fd7ba3baa2aa3fcee824c1b71a8c71ccc
parent 428691 5b1c1b8223bfee3d43039df59a428f3029bd2171
child 428693 e37dfd5884b7684c5a174c5c2cae41281f45d775
push id7761
push userjlund@mozilla.com
push dateFri, 15 Sep 2017 00:19:52 +0000
treeherdermozilla-beta@c38455951db4 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerssfoster
bugs1393870
milestone57.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 1393870 - Panels anchored to bottom have weird animation. r=sfoster MozReview-Commit-ID: LH3vRWJeYbU
toolkit/content/xul.css
--- a/toolkit/content/xul.css
+++ b/toolkit/content/xul.css
@@ -446,17 +446,17 @@ panel[type="arrow"] {
 /* On Mac, use the properties "-moz-window-transform" and "-moz-window-opacity"
    instead of "transform" and "opacity" for these animations.
    The -moz-window* properties apply to the whole window including the window's
    shadow, and they don't affect the window's "shape", so the system doesn't
    have to recompute the shadow shape during the animation. This makes them a
    lot faster. In fact, Gecko no longer triggers shadow shape recomputations
    for repaints.
    These properties are not implemented on other platforms. */
-panel[type="arrow"]:not([animate="false"]) {
+panel[type="arrow"][side]:not([animate="false"]) {
   -moz-window-opacity: 0;
   -moz-window-transform: translateY(-70px);
   transition-property: -moz-window-transform, -moz-window-opacity;
   transition-duration: 0.18s, 0.18s;
   transition-timing-function:
     var(--animation-easing-function), ease-out;
 }
 
@@ -467,23 +467,23 @@ panel[type="arrow"][side="bottom"]:not([
 panel[type="arrow"][side][animate="open"] {
   -moz-window-opacity: 1.0;
   transition-duration: 0.18s, 0.18s;
   -moz-window-transform: none;
   transition-timing-function:
     var(--animation-easing-function), ease-in-out;
 }
 
-panel[type="arrow"][animate="cancel"] {
+panel[type="arrow"][side][animate="cancel"] {
   -moz-window-transform: none;
 }
 
 %elifndef MOZ_WIDGET_GTK
 
-panel[type="arrow"]:not([animate="false"]) {
+panel[type="arrow"][side]:not([animate="false"]) {
   opacity: 0;
   transform: translateY(-70px);
   transition-property: transform, opacity;
   transition-duration: 0.18s, 0.18s;
   transition-timing-function:
     var(--animation-easing-function), ease-out;
 }
 
@@ -494,17 +494,17 @@ panel[type="arrow"][side="bottom"]:not([
 panel[type="arrow"][side][animate="open"] {
   opacity: 1.0;
   transition-duration: 0.18s, 0.18s;
   transform: none;
   transition-timing-function:
     var(--animation-easing-function), ease-in-out;
 }
 
-panel[type="arrow"][animate="cancel"] {
+panel[type="arrow"][side][animate="cancel"] {
   transform: none;
 }
 
 %endif
 panel[type="arrow"][animating] {
   pointer-events: none;
 }