Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-16 23:05:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source 
--HG--
extra : commitid : Ew4cmAV6D9
extra : rebase_source : d801965d3d1f9a58c66e5d5b7815c5a32d5377ac
This commit is contained in:
Paolo Amadini 2015-08-17 14:05:29 +01:00
parent ea55cb9366
commit 414dbc0f20
3 changed files with 12 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
browser/components/privatebrowsing/content/aboutPrivateBrowsing.css
View File

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

9
browser/components/privatebrowsing/content/aboutPrivateBrowsing.xhtml
View File

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

6
browser/themes/shared/identity-block/identity-block.inc.css
View File

@ -80,9 +80,9 @@
#tracking-protection-icon { #tracking-protection-icon {
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-inline-start: 0;
margin-inline-end: 2px; margin-inline-end: 2px;
list-style-image: url(chrome://browser/skin/tracking-protection-16.svg); list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
margin-left: 0;
opacity: 1; opacity: 1;
} }
@ -91,11 +91,11 @@
} }
#tracking-protection-icon[animate] { #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]) { #tracking-protection-icon:not([state]) {
margin-left: -16px; margin-inline-start: -18px;
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
/* Only animate the shield in, when it disappears hide it immediately. */ /* Only animate the shield in, when it disappears hide it immediately. */