Bug 1189704 - Fix shield icon animation margins and handle the right-to-left direction. r=bgrins, a=sledru
authorPaolo Amadini <paolo.mozmail@amadzone.org>
Mon, 17 Aug 2015 14:05:29 +0100
changeset 288860 7c4f341f35f1b549a0753a50c062f92662ce81f0
parent 288859 96cdc9bfc6512fc7db6b2748e38dc6bacf273971
child 288861 5da240e25d30052604756ba3c49d325c4a0eb491
push id5067
push userraliiev@mozilla.com
push dateMon, 21 Sep 2015 14:04:52 +0000
treeherdermozilla-beta@14221ffe5b2f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins, sledru
bugs1189704
milestone42.0a2
Bug 1189704 - Fix shield icon animation margins and handle the right-to-left direction. r=bgrins, a=sledru
browser/themes/shared/identity-block/identity-block.inc.css
--- a/browser/themes/shared/identity-block/identity-block.inc.css
+++ b/browser/themes/shared/identity-block/identity-block.inc.css
@@ -75,32 +75,32 @@
   padding-inline-start: calc(var(--backbutton-urlbar-overlap) + 4.01px);
 }
 
 /* TRACKING PROTECTION ICON */
 
 #tracking-protection-icon {
   width: 16px;
   height: 16px;
+  margin-inline-start: 0;
   margin-inline-end: 2px;
   list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
-  margin-left: 0;
   opacity: 1;
 }
 
 #tracking-protection-icon[state="loaded-tracking-content"] {
   list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg);
 }
 
 #tracking-protection-icon[animate] {
-  transition: margin-left 200ms ease-out;
+  transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
 }
 
 #tracking-protection-icon:not([state]) {
-  margin-left: -16px;
+  margin-inline-start: -18px;
   pointer-events: none;
   opacity: 0;
   /* Only animate the shield in, when it disappears hide it immediately. */
   transition: none;
 }
 
 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icons > #tracking-protection-icon {
   visibility: collapse;