Bug 1189704 - Fix shield icon animation margins and handle the right-to-left direction. r=bgrins
☠☠ backed out by 20bb10eb27e4 ☠ ☠
authorPaolo Amadini <paolo.mozmail@amadzone.org>
Mon, 17 Aug 2015 14:05:29 +0100
changeset 258180 d334d7d67fa0770ce6bbe713b56ab55bd7ef9fdd
parent 258179 58f0dc56ac34ff4ee9e39409e75fb447dd964bdf
child 258181 20bb10eb27e4c1068c418a087bec1fe60060330a
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/components/privatebrowsing/content/aboutPrivateBrowsing.css
browser/components/privatebrowsing/content/aboutPrivateBrowsing.xhtml
browser/themes/shared/identity-block/identity-block.inc.css
--- a/browser/components/privatebrowsing/content/aboutPrivateBrowsing.css
+++ b/browser/components/privatebrowsing/content/aboutPrivateBrowsing.css
@@ -30,32 +30,33 @@ body:not([tpEnabled]) .showTpEnabled {
 
 #bar {
   align-self: stretch;
   background: url("chrome://browser/skin/privatebrowsing/mask.svg") no-repeat 22px 50%,
               #8d20ae;
   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 {
   padding: 0 2em;
   flex: 1;
   display: flex;
   flex-flow: row wrap;
   align-items: center;
   justify-content: center;
 }
 
 .sectionHeader {
   font-size: 1.75em;
+  white-space: nowrap;
 }
 
 /* PRIVATE BROWSING SECTION */
 
 #privateBrowsingSection {
   margin: 1em;
   padding: 0 1em;
 }
@@ -150,18 +151,17 @@ li {
   }
 }
 
 #tpStartTour {
   margin-bottom: 0;
 }
 
 #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);
   padding: 0.1em 0.3em;
   line-height: 2.25em;
   text-decoration: none;
 }
 
--- a/browser/components/privatebrowsing/content/aboutPrivateBrowsing.xhtml
+++ b/browser/components/privatebrowsing/content/aboutPrivateBrowsing.xhtml
@@ -54,34 +54,35 @@
               <li>&aboutPrivateBrowsing.info.bookmarks;</li>
             </ul>
           </div>
         </div>
         <p>&aboutPrivateBrowsing.note1;</p>
         <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>
           <span id="tpDisabled"
                 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"
                class="text-link showTpEnabled"
                value="&trackingProtection.disable;"/>
         <label xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
                id="enableTrackingProtection"
                class="text-link showTpDisabled"
                value="&trackingProtection.enable;"/>
         <p id="tpStartTour"
            class="showTpEnabled"><a id="startTour">&trackingProtection.startTour1;</a></p>
-      </div>
+      </div></div>
     </div>
   </body>
 </html>
--- 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;