Bug 1189704 - Fix shield icon animation margins and handle the right-to-left direction. r=bgrins

--HG--
extra : commitid : Ew4cmAV6D9
extra : rebase_source : d801965d3d1f9a58c66e5d5b7815c5a32d5377ac

browser/components/privatebrowsing/content/aboutPrivateBrowsing.css

@@ -35,9 +35,9 @@ body:not([tpEnabled]) .showTpEnabled {
   background-size: 47px 26px;
   padding-inline-start: 87px;
   color: white;
-  font-size: 24pt;
+  font-size: 1.5em;
   font-weight: 200;
-  line-height: 60pt;
+  line-height: 2.5em;
 }
 
 #main {
@@ -51,6 +51,7 @@ body:not([tpEnabled]) .showTpEnabled {
 
 .sectionHeader {
   font-size: 1.75em;
+  white-space: nowrap;
 }
 
 /* PRIVATE BROWSING SECTION */
@@ -155,8 +156,7 @@ li {
 }
 
 #startTour {
-  display: inline-block;
-  width: 16em;
+  display: block;
   border-radius: 2px;
   background-color: var(--in-content-primary-button-background);
   color: var(--in-content-selected-text);

browser/components/privatebrowsing/content/aboutPrivateBrowsing.xhtml

@@ -59,8 +59,8 @@
         <a id="learnMore" target="_blank">&aboutPrivateBrowsing.learnMore;</a>
       </div>
       <div id="trackingProtectionSection"
-           style="width: &trackingProtection.width;">
-        <div class="sectionHeader">&trackingProtection.title;
+           style="display: table-cell;">
+        <div class="sectionHeader" style="display: table-row;width:1px;">Tracking Protection Feature
           <span id="tpEnabled"
                 style="width: &trackingProtection.state.width;"
                 class="showTpEnabled">&trackingProtection.state.enabled;</span>
@@ -68,8 +68,9 @@
                 style="width: &trackingProtection.state.width;"
                 class="showTpDisabled">&trackingProtection.state.disabled;</span>
         </div>
+        <div style="display: table-cell;width:1px;">
         <p id="tpDiagram"/>
-        <p>&trackingProtection.description1;</p>
+        <p style="min-width:18em;">&trackingProtection.description1;</p>
         <!-- Use text links to implement plain styled buttons without an href. -->
         <label xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
                id="disableTrackingProtection"
@@ -81,7 +82,7 @@
                value="&trackingProtection.enable;"/>
         <p id="tpStartTour"
            class="showTpEnabled"><a id="startTour">&trackingProtection.startTour1;</a></p>
-      </div>
+      </div></div>
     </div>
   </body>
 </html>

browser/themes/shared/identity-block/identity-block.inc.css

@@ -80,9 +80,9 @@
 #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;
 }
 
@@ -91,11 +91,11 @@
 }
 
 #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. */