Bug 1451256 - Use block display for the animation boxes in the toolbar and the off-screen view stack. r=Gijs draft
authorPaolo Amadini <paolo.mozmail@amadzone.org>
Mon, 21 May 2018 17:59:06 +0100
changeset 797793 3e52ded55dd668367619edfddff38396f9d72898
parent 797566 000309d44abb81084276c9fa977c57aee7126053
push id110571
push userpaolo.mozmail@amadzone.org
push dateMon, 21 May 2018 17:02:39 +0000
reviewersGijs
bugs1451256
milestone62.0a1
Bug 1451256 - Use block display for the animation boxes in the toolbar and the off-screen view stack. r=Gijs This is required since the platform code doesn't blockify -moz-box anymore. MozReview-Commit-ID: 53iYxZTHliF
browser/base/content/browser.css
browser/themes/shared/toolbarbutton-icons.inc.css
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -116,16 +116,17 @@ panelview[mainview] > .panel-header {
 .panel-viewcontainer[panelopen] {
   transition-property: height;
   transition-timing-function: var(--animation-easing-function);
   transition-duration: var(--panelui-subview-transition-duration);
   will-change: height;
 }
 
 .panel-viewcontainer.offscreen {
+  display: block;
   position: absolute;
 }
 
 .panel-viewstack {
   overflow: visible;
   transition: height var(--panelui-subview-transition-duration);
 }
 
--- a/browser/themes/shared/toolbarbutton-icons.inc.css
+++ b/browser/themes/shared/toolbarbutton-icons.inc.css
@@ -43,17 +43,17 @@ toolbar[brighttext] {
 }
 
 /* The animations for the reload-button and stop-button are disabled
    outside of the nav-bar due to bug 1382894. */
 :-moz-any(#reload-button, #stop-button) > .toolbarbutton-animatable-box {
   display: none;
 }
 #nav-bar-customization-target > #stop-reload-button > :-moz-any(#reload-button, #stop-button) > .toolbarbutton-animatable-box {
-  display: -moz-box;
+  display: block;
 }
 
 #stop-reload-button[animate] > #reload-button > .toolbarbutton-icon,
 #stop-reload-button[animate] > #reload-button[displaystop] + #stop-button > .toolbarbutton-icon {
   fill: transparent;
 }
 
 @keyframes reload-to-stop {
@@ -457,16 +457,20 @@ toolbar[brighttext] {
     fill: inherit;
   }
 }
 
 #library-button[animate] > .toolbarbutton-icon {
   fill: transparent;
 }
 
+.toolbarbutton-animatable-box {
+  display: block;
+}
+
 .toolbarbutton-animatable-box[animate] {
   position: absolute;
   overflow: hidden;
   /* Position the sprite at the y-position of the library-button, then adjust
      based on the size difference between half of the button height and half
      of the sprite height. The titlebar may have padding from -moz-appearance
      that needs to be accounted for. */
   top: calc(var(--library-button-y) + var(--library-button-height) / 2 - 27px - var(--toolbox-y));