Bug 1189704 - Fix shield icon animation margins and handle the right-to-left direction. r=bgrins
authorPaolo Amadini <paolo.mozmail@amadzone.org>
Mon, 17 Aug 2015 14:05:29 +0100
changeset 258182 b220196bb58d0803666bb53aa46d9a1552cd3491
parent 258181 20bb10eb27e4c1068c418a087bec1fe60060330a
child 258183 746ac829b15af5cd065d6866de6a7e074ad34a47
push id63843
push userryanvm@gmail.com
push dateTue, 18 Aug 2015 14:58:06 +0000
treeherdermozilla-inbound@d55e24c983aa [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersbgrins
bugs1189704
milestone43.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 1189704 - Fix shield icon animation margins and handle the right-to-left direction. r=bgrins
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;