Bug 1537754 - The same doorhanger animation as the one from LTR builds is displayed on the RTL Firefox builds r=andreio
authorRicky Rosario <rickyrosario@gmail.com>
Mon, 08 Apr 2019 15:23:28 +0000
changeset 468360 cb98b130573d272d2f3ba4fd6a33499137f381ba
parent 468359 ac6e176b391c4003109e0e3d286d021fbf891c22
child 468361 7ae898cd5fa7d588df0042cd12a42dcecb4cc4ba
push id35835
push useraciure@mozilla.com
push dateMon, 08 Apr 2019 19:00:29 +0000
treeherdermozilla-central@40456af7da1c [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersandreio
bugs1537754
milestone68.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 1537754 - The same doorhanger animation as the one from LTR builds is displayed on the RTL Firefox builds r=andreio MozReview-Commit-ID: 9uvCbIpQ4fa Differential Revision: https://phabricator.services.mozilla.com/D26366
browser/themes/shared/browser.inc.css
--- a/browser/themes/shared/browser.inc.css
+++ b/browser/themes/shared/browser.inc.css
@@ -334,68 +334,84 @@
   opacity: 0.7;
 }
 
 #cfr-notification-footer-spacer {
   flex-grow: 1;
 }
 
 #cfr-notification-footer-pintab-animation-container {
+  height: 173px;
+  padding-top: 129px;
+  position: relative;
+  width: 343px;
+}
+
+#cfr-notification-footer-pintab-animation-container:before {
+  content: "";
   background-image: url("resource://activity-stream/data/content/assets/cfr_pinnedtab_animated.png");
   background-position: top center;
   background-repeat: no-repeat;
   background-size: cover;
-  height: 173px;
-  padding-top: 129px;
-  width: 343px;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+#cfr-notification-footer-pintab-animation-container:-moz-locale-dir(rtl):before {
+  transform: scaleX(-1);
 }
 
 @media (min-resolution: 2dppx) {
-  #cfr-notification-footer-pintab-animation-container {
+  #cfr-notification-footer-pintab-animation-container:before {
     background-image: url("resource://activity-stream/data/content/assets/cfr_pinnedtab_animated@2x.png");
   }
 }
 
 #contextual-feature-recommendation-notification[data-notification-category="cfrAddons"] #cfr-notification-footer-pintab-animation-container {
   display: none;
 }
 
-#cfr-notification-footer-pintab-animation-container:not([animate]),
-#cfr-notification-footer-pintab-animation-container[paused],
-:root[lwt-popup-brighttext] #cfr-notification-footer-pintab-animation-container:not([animate]),
-:root[lwt-popup-brighttext] #cfr-notification-footer-pintab-animation-container[paused] {
+#cfr-notification-footer-pintab-animation-container:not([animate]):before,
+#cfr-notification-footer-pintab-animation-container[paused]:before,
+:root[lwt-popup-brighttext] #cfr-notification-footer-pintab-animation-container:not([animate]):before,
+:root[lwt-popup-brighttext] #cfr-notification-footer-pintab-animation-container[paused]:before {
   background-image: url("resource://activity-stream/data/content/assets/cfr_pinnedtab_static.png");
 }
 
 @media (min-resolution: 2dppx) {
-  #cfr-notification-footer-pintab-animation-container:not([animate]),
-  #cfr-notification-footer-pintab-animation-container[paused],
-  :root[lwt-popup-brighttext] #cfr-notification-footer-pintab-animation-container:not([animate]),
-  :root[lwt-popup-brighttext] #cfr-notification-footer-pintab-animation-container[paused] {
+  #cfr-notification-footer-pintab-animation-container:not([animate]):before,
+  #cfr-notification-footer-pintab-animation-container[paused]:before,
+  :root[lwt-popup-brighttext] #cfr-notification-footer-pintab-animation-container:not([animate]):before,
+  :root[lwt-popup-brighttext] #cfr-notification-footer-pintab-animation-container[paused]:before {
     background-image: url("resource://activity-stream/data/content/assets/cfr_pinnedtab_static@2x.png");
   }
 }
 
-:root[lwt-popup-brighttext] #cfr-notification-footer-pintab-animation-container {
+:root[lwt-popup-brighttext] #cfr-notification-footer-pintab-animation-container:before {
   background-image: url("resource://activity-stream/data/content/assets/cfr_pinnedtab_animated_darktheme.png");
 }
 
 @media (min-resolution: 2dppx) {
-  :root[lwt-popup-brighttext] #cfr-notification-footer-pintab-animation-container {
+  :root[lwt-popup-brighttext] #cfr-notification-footer-pintab-animation-container:before {
     background-image: url("resource://activity-stream/data/content/assets/cfr_pinnedtab_animated_darktheme@2x.png");
   }
 }
 
 #cfr-notification-footer-animation-controls {
   background: linear-gradient(transparent 0%, rgba(255, 255, 255, 0.95) 35%);
   padding: 20px var(--arrowpanel-padding) 10px;
+  position: relative;
+  z-index: 1;
 }
 
 :root[lwt-popup-brighttext] #cfr-notification-footer-animation-controls {
-  margin-left: 13px;
+  margin-inline-start: 13px;
 }
 
 #cfr-notification-footer-pintab-animation-container:not([animate]) #cfr-notification-footer-animation-controls {
   visibility: hidden;
 }
 
 #cfr-notification-footer-animation-button {
   background-image: url("resource://activity-stream/data/content/assets/glyph-pause-12.svg");