Commit c8ec31a1 authored by Arthur Edelstein's avatar Arthur Edelstein Committed by Georg Koppen
Browse files

Bug 20414.2: Tor Donation Banner 2016

parent 595b0145
......@@ -21,6 +21,8 @@
<title>&aboutTor.title;</title>
<link rel="stylesheet" type="text/css" media="all"
href="chrome://torbutton/skin/aboutTor.css"/>
<link rel="stylesheet" type="text/css" media="all"
href="chrome://torbutton/skin/donation_banner.css"/>
<script type="text/javascript;version=1.7">
<![CDATA[
function onLoad()
......@@ -164,6 +166,28 @@ window.addEventListener("pageshow", function() {
</script>
</head>
<body dir="&locale.dir;" onload="onLoad();">
<div id="banner" class="onions-bg">
<div id="banner-contents-container">
<div id="banner-logo-container">
<img id="banner-logo" alt="Tor Onion-Heart Logo"
src="chrome://torbutton/content/aboutTor/onion-heart.svg"/>
</div>
<div id="banner-text">
<div id="banner-tagline"><span></span></div>
<div id="banner-heart"><span></span></div>
</div>
<a id="banner-donate-button-link"
href="https://www.torproject.org/donate/donate-tbb">
<div id="banner-donate-button-container">
<div id="banner-donate-button">
<div id="banner-donate-button-text"></div>
<div id="banner-donate-button-arrow"></div>
</div>
</div>
</a>
</div>
</div>
<div id="banner-spacer"></div>
<div id="torstatus" class="top">
<div id="torstatus-version"/>
<div id="torstatus-image"/>
......@@ -237,6 +261,6 @@ window.addEventListener("pageshow", function() {
<p>&aboutTor.footer.label;
<a href="&aboutTor.learnMore.link;">&aboutTor.learnMore.label;</a></p>
</div>
<script src="chrome://torbutton/content/aboutTor/donation_banner.js"></script>
</body>
</html>
/* jshint esnext:true */
// A list of locales for which the banner has been translated.
let kBannerLocales = [
"de",
"en",
"es",
"fa",
"it",
"nl",
"vi",
"zh",
];
// A list of donation page locales (at least redirects should exist).
let kDonationPageLocales = [
"ar",
"de",
"en",
"es",
"fa",
"fr",
"it",
"ja",
"ko",
"nl",
"pl",
"pt",
"ru",
"tr",
"vi",
"zh",
];
let kPropertiesURL = "chrome://torbutton/locale/aboutTor.properties";
Components.utils.import("resource://gre/modules/Services.jsm");
let gStringBundle = Services.strings.createBundle(kPropertiesURL);
let kBrowserLocale = Services.prefs.getCharPref("general.useragent.locale");
let kBrowserLocaleShort = kBrowserLocale.match(/[a-zA-Z]+/)[0].toLowerCase();
let sel = selector => document.querySelector(selector);
// Check if we should show the banner, depends on
// browser locale, current date, and how many times
// we have already shown the banner.
let shouldShowBanner = function () {
try {
// Don't show a banner if update is needed.
let updateNeeded = Services.prefs.getBoolPref("extensions.torbutton.updateNeeded");
if (updateNeeded) {
return false;
}
// Only show banner when we have that locale and if a donation redirect exists.
if (kBannerLocales.indexOf(kBrowserLocaleShort) === -1 ||
kDonationPageLocales.indexOf(kBrowserLocaleShort) === -1) {
return false;
}
// Only show banner between 2016 Nov 15 and 2017 Jan 25.
let now = new Date();
let start = new Date(2016, 10, 15);
let end = new Date(2017, 0, 26);
let shownCountPref = "extensions.torbutton.donation_banner2016.shown_count";
if (now < start || now > end) {
// Clean up pref if not in use.
Services.prefs.clearUserPref(shownCountPref);
return false;
}
// Only show banner 10 times.
let count = 0;
if (Services.prefs.prefHasUserValue(shownCountPref)) {
count = Services.prefs.getIntPref(shownCountPref);
}
if (count >= 10) {
return false;
}
Services.prefs.setIntPref(shownCountPref, count+1);
return true;
} catch (e) {
return false;
}
};
// Shrink the font size if the text in the given element is overflowing.
let fitTextInElement = function (element) {
element.style.fontSize = "8px";
let defaultWidth = element.scrollWidth,
defaultHeight = element.scrollHeight;
for (let testSize = 8; testSize <= 40; testSize += 0.5) {
element.style.fontSize = `${testSize}px`;
if (element.scrollWidth <= defaultWidth &&
element.scrollHeight <= defaultHeight) {
bestSize = testSize;
} else {
break;
}
}
element.style.fontSize = `${bestSize}px`;
};
// Increase padding at left and right to "squeeze" text, until it gets
// squeezed so much that it gets longer vertically.
let avoidWidows = function (element) {
element.style.paddingLeft = "0px";
element.style.paddingRight = "0px";
let originalWidth = element.scrollWidth;
let originalHeight = element.scrollHeight;
for (let testPadding = 0; testPadding < originalWidth / 2; testPadding += 0.5) {
element.style.paddingLeft = element.style.paddingRight = `${testPadding}px`;
if (element.scrollHeight <= originalHeight) {
bestPadding = testPadding;
} else {
break;
}
}
element.style.paddingLeft = element.style.paddingRight = `${bestPadding}px`;
};
// Resize the text inside banner to fit.
let updateTextSizes = function () {
fitTextInElement(sel("#banner-tagline"));
fitTextInElement(sel("#banner-heart"));
fitTextInElement(sel("#banner-donate-button"));
avoidWidows(sel("#banner-tagline span"));
};
// Read the tagline with the given index.
let getTagline = index => gStringBundle.GetStringFromName(
"aboutTor.donationBanner.tagline" + (index + 1));
// Returns a random integer x, such that 0 <= x < max
let randomInteger = max => Math.floor(max * Math.random());
// The main donation banner function.
let runDonationBanner = function () {
try {
if (!shouldShowBanner()) {
return;
}
sel("#banner-tagline span").innerText = getTagline(randomInteger(4));
sel("#banner-heart span").innerText =
gStringBundle.GetStringFromName("aboutTor.donationBanner.heart");
sel("#banner-donate-button-text").innerHTML =
gStringBundle.GetStringFromName("aboutTor.donationBanner.donate");
sel("#banner-donate-button-arrow").innerHTML = "&#9654;";
sel("#banner").style.display = "flex";
sel("#banner-spacer").style.display = "block";
addEventListener("resize", updateTextSizes);
updateTextSizes();
// Add a suffix corresponding to locale so we can send user
// to a correctly-localized donation page via redirect.
sel("#banner-donate-button-link").href += "-" + kBrowserLocaleShort;
sel("#torstatus-image").style.display = "none";
} catch (e) {
// Something went wrong.
console.error(e.message);
sel("#banner").style.display = "none";
sel("#bannerSpacer").style.display = "none";
sel("#torstatus-image").style.display = "block";
}
};
// Calls callback(attributeValue) when the specified attribute changes on
// target. Returns a zero-arg function that stops observing.
let observeAttribute = function (target, attributeName, callback) {
let observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
if (mutation.type === "attributes" &&
mutation.attributeName === attributeName) {
callback(target.getAttribute(attributeName));
}
});
});
observer.observe(document.body, { attributes: true });
return () => observer.disconnect();
};
// Start the donation banner if "toron" has been set to "yes".
let stopObserving = observeAttribute(document.body, "toron", value => {
stopObserving();
if (value === "yes") {
runDonationBanner();
}
});
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="svg3004"
version="1.1"
inkscape:version="0.48.5 r10040"
width="399.96011"
height="574.18964"
xml:space="preserve"
sodipodi:docname="tor_onion-heart-no-roots.svg"><metadata
id="metadata3010"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
id="defs3008"><clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath3730"><path
d="M 0,936 936,936 936,0 0,0 0,936 z"
id="path3732"
inkscape:connector-curvature="0" /></clipPath><linearGradient
x1="0"
y1="0"
x2="1"
y2="0"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(48.064392,308.5928,-308.5928,48.064392,538.70312,416.25879)"
spreadMethod="pad"
id="linearGradient4548"><stop
style="stop-opacity:1;stop-color:#533c5f"
offset="0"
id="stop4550" /><stop
style="stop-opacity:1;stop-color:#c3a1cc"
offset="1"
id="stop4552" /></linearGradient><clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath4560"><path
d="M 0,936 936,936 936,0 0,0 0,936 z"
id="path4562"
inkscape:connector-curvature="0" /></clipPath></defs><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="640"
inkscape:window-height="480"
id="namedview3006"
showgrid="false"
inkscape:zoom="0.20512821"
inkscape:cx="191.66224"
inkscape:cy="225.57375"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="0"
inkscape:current-layer="g3012"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" /><g
id="g3012"
inkscape:groupmode="layer"
inkscape:label="tor_onion-heart-tat_k"
transform="matrix(1.25,0,0,-1.25,-393.33776,933.61587)"><g
id="g5498"><g
transform="translate(467.2668,636.4615)"
id="g4534"><path
inkscape:connector-curvature="0"
id="path4536"
style="fill:#fefbde;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 0,0 38.336,-23.387 c -1.623,-10.421 -7.42,-42.074 -2.365,-52.467 54.488,-98.402 15.611,-272.581 -55.594,-266.116 -107.359,16.723 -136.943,96.034 -126.502,163.069 9.521,61.129 89.133,90.349 138.523,119.652 C 5.023,-51.257 6.441,-29.463 0,0" /></g><g
transform="translate(-11.7,-132.6)"
id="g4538"><g
id="g4540"><g
id="g4546"><path
inkscape:connector-curvature="0"
id="path4554"
style="fill:url(#linearGradient4548);stroke:none"
d="m 515.125,691.615 c 14.398,-33.193 21.002,-61.614 23.349,-92.216 l 0,0 c 5.282,-78.024 -18.683,-145.076 -69.431,-171.68 l 0,0 c 82.295,-22.068 194.019,58 153.076,169.678 l 0,0 c -11.436,31.663 -47.526,67.164 -86.427,100.616 l 0,0 c -8.858,7.069 -7.588,28.931 -4.684,38.436 l 0,0 -13.594,9.835 c -2.5,-20.602 -8.252,-38.547 -2.289,-54.669" /></g></g></g><g
transform="translate(539.4914,722.0167)"
id="g4564"><path
inkscape:connector-curvature="0"
id="path4566"
style="fill:#acce45;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="M 0,0 -20.238,-47.718 C 2.938,-15.399 35.18,6.613 71.105,24.853 43.215,1.096 17.408,-22.991 -0.063,-48.373 27.033,-20.575 59.609,-7.864 95.082,-1.648 44.057,-34.611 1.818,-71.932 -31.735,-110.53 l -20.071,12.731 C -42.881,-64.259 -24.406,-31.065 0,0" /></g><g
transform="translate(610.6633,746.8927)"
id="g4568"><path
inkscape:connector-curvature="0"
id="path4570"
style="fill:#4f7944;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 0,0 c -18.732,-14.643 -51.215,-40.396 -70.211,-64.362 -16.199,-20.443 -28.023,-39.03 -34.963,-51.689 -4.435,-8.1 -16.986,-6.057 -11.148,7.569 0.06,0.134 0.131,0.231 0.189,0.368 6.617,10.675 16.436,25.483 25.996,38.372 l 18.924,44.909 c -8.81,-18.827 -19.836,-35.509 -28.074,-55.15 0.006,0 -12.072,-19.051 -15.252,-23.871 -1.08,-1.638 -2.02,-3.232 -2.857,-4.727 -0.055,-0.094 -0.12,-0.144 -0.17,-0.239 -1.356,-2.085 -2.416,-4.43 -3.268,-6.515 -0.141,-0.342 -0.145,-0.56 -0.27,-0.887 -1.146,-2.966 -1.884,-5.274 -1.884,-5.274 3.131,-3.687 19.793,-14.219 19.793,-14.219 33.797,38.847 76.142,76.218 127.17,109.18 C -11.502,-32.75 -44.096,-45.426 -71.191,-73.223 -53.719,-47.841 -27.889,-23.757 0,0" /></g><g
transform="translate(504.0246,614.7198)"
id="g4572"><path
inkscape:connector-curvature="0"
id="path4574"
style="fill:#364733;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="M 0,0 3.443,-3.542 C 37.24,35.305 79.586,72.676 130.613,105.638 101.641,88.618 62.617,65.032 45.039,48.176 22.799,26.855 37.211,47.893 37.211,47.893 c 0,0 13.723,23.78 33.42,36.975 C 59.879,81.646 39.172,62.772 35.447,58.95 35.447,58.95 18.482,35.696 7.662,13.96 4.756,8.131 0,0 0,0" /></g><g
transform="translate(495.4396,619.3077)"
id="g4576"><path
inkscape:connector-curvature="0"
id="path4578"
style="fill:#f3ecac;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 0,0 -50.606,-324.234 c 1.214,-0.211 1.599,-0.373 2.834,-0.564 71.205,-6.467 110.13,167.744 55.642,266.146 -5.057,10.391 0.705,41.975 2.328,52.398 L 0,0 z" /></g><g
transform="translate(496.173,618.858)"
id="g4580"><path
inkscape:connector-curvature="0"
id="path4582"
style="fill:#292929;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 0,0 32.734,-10.453 c -13.681,-28.463 9.821,-53.468 17.739,-59.683 17.775,-13.799 34.8,-27.831 47.625,-43.702 24.132,-30.084 34.48,-68.694 28.527,-106.9 -5.895,-37.853 -28.941,-71.615 -61.904,-91.384 -31.006,-18.65 -70.377,-22.477 -107.196,-16.742 -22.92,3.57 -43.251,7.801 -64.341,18.556 -48.054,24.922 -79.152,74.228 -74.163,126.815 3.549,41.068 17.397,70.575 54.035,97.952 18.971,14.475 54.997,28.784 80.01,40.897 12.305,5.91 27.467,25.606 11.219,69.755 l 5.057,2.771 30.42,-27.723 -26.887,16.145 c 1.891,-3.854 6.055,-20.512 6.742,-25.242 1.125,-13.337 -2.211,-25.627 -5.855,-30.748 -18.242,-23.485 -43.637,-26.643 -63.619,-38.471 -35.263,-20.832 -72.493,-36.022 -79.655,-107.122 -3.672,-35 16.819,-81.593 54.367,-107.718 21.193,-14.688 46.887,-23.316 73.415,-28.867 23.8,-4.774 71.867,2.324 100.117,19.265 30.201,18.063 50.386,49.427 55.742,83.807 5.41,34.736 -3.344,69.895 -25.768,97.222 C 75.537,-105.7 53.42,-85.534 39.496,-74.471 25.564,-63.407 10.248,-36.12 20.123,-13.825 L 0,0 z" /></g><g
transform="translate(504.3195,604.0934)"
id="g4584"><path
inkscape:connector-curvature="0"
id="path4586"
style="fill:#292929;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 0,0 c -3.924,-18.399 -5.262,-25.191 -3.904,-39.278 1.494,-15.528 17.593,-40.092 21.738,-65.995 7.926,-49.617 -5.521,-110.842 -24.156,-157.384 -6.819,-16.368 -30.459,-37.95 -51.5,-42.849 l 14.047,-5.748 c 8.041,-0.892 31.505,15.016 42.904,35.65 18.207,32.385 27.021,72.987 28.521,116.866 0.299,4.223 -0.861,42.469 -5.025,59.125 C 16.871,-74.884 3.447,-51.447 2.414,-46.666 0.484,-38.538 -3.91,-21.602 0,0" /></g><g
transform="translate(495.4807,619.3595)"
id="g4588"><path
inkscape:connector-curvature="0"
id="path4590"
style="fill:#292929;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="M 0,0 C 0.155,-0.008 -49.259,-320.493 -50.456,-319.838 L -0.062,-0.032 C -0.062,0.16 -0.009,-0.035 0,0 c 0.003,0.037 0.231,-0.25 1.218,-0.73 0,0 -43.223,-281.344 -49.418,-321.118 -0.852,0.131 -1.707,0.265 -2.559,0.396 C -44.276,-279.334 -0.148,0.039 0,0" /></g><g
transform="translate(453.0549,350.485)"
id="g4592"><path
inkscape:connector-curvature="0"
id="path4594"
style="fill:#df3441;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 0,0 c 0,0 -89.234,63.608 -79.039,129.324 3.929,25.318 23.153,43.156 51.53,38.994 38.91,-5.709 47.481,-43.043 47.481,-43.043 L 0,0 z" /></g><g
transform="translate(473.216,476.2032)"
id="g4596"><path
inkscape:connector-curvature="0"
id="path4598"
style="fill:#bc303a;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 0,0 c 0,0 15.029,38.665 32.414,24.385 10.727,-8.813 7.828,-36.448 3.953,-51.406 -12.875,-49.717 -56.528,-98.697 -56.528,-98.697 L 0,0 z" /></g></g></g></svg>
\ No newline at end of file
This source diff could not be displayed because it is too large. You can view the blob instead.
#banner {
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
background-color: #406;
background-opacity: 10%;
background-size: cover;
background: radial-gradient(circle, #406 90%, #203 100%);
border-bottom: 6px solid #305;
border-top: 5px solid #305;
display: none;
height: 120px;
justify-content: center;
left: 0px;
margin-top: 40px;
min-width: 900px;
opacity: 1;
position: absolute;
user-select: none;
width: 100%;
z-index: 1;
}
#banner:before {
background-image: url('chrome://torbutton/content/aboutTor/tor-roots-only.svg');
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
content: ' ';
display: block;
height: 100%;
left: 0;
opacity: 0.20;
position: absolute;
top: 0;
width: 100%;
}
#banner-contents-container {
align-items: center;
display: flex;
flex-direction: row;
height: 100%;
max-width: 700px;
position: relative;
width: 700px;
}
#banner-text {
align-self: stretch;
color: white;
display: flex;
flex-direction: column;
flex: 1 1 auto;
font-family: sans-serif;
font-size: 8px;
margin: 10px 20px 10px 20px;
max-height: 100%;
}
#banner-tagline {
align-items: center;
display: flex;
flex: 2 2 67%;
font-weight: bold;
justify-content: center;
text-align: center;
}
#banner-heart {
align-items: center;
color: #f8f8a0;
display: flex;
flex: 1 1 33%;
justify-content: center;
text-align: center;
white-space: nowrap;
}
#banner-logo-container {
display: inline-block;
flex: 0 0 auto;
margin: 0px;
position: relative;
}
#banner-logo {
height: 155px;
position: relative;
padding-bottom: 40px;
width: 108px;
}
#banner-donate-button-container {
background-color: #FFD;
border: 4px solid #204;
color: #A20;
display: block;
flex-grow: 0.0;
flex: 0;
height: 50px;
letter-spacing: -0.00em;
opacity: 100%;
padding-bottom: 5px;
padding-left: 15px;
padding-right: 15px;
padding-top: 5px;
width: 80px;
}
#banner-donate-button-container:hover {
border-color: #610;
}
#banner-donate-button-container:active {
border-color: #A20;
}
#banner-donate-button {
align-items: center;
display: flex;
font-family: sans-serif;
font-size: 12px;
font-weight: bold;
height: 100%;
text-align: start;
width: 100%;
}
#banner-donate-button-arrow {
font-size: 14px;
margin-inline-start: 5px;
}
#banner-donate-button-arrow:-moz-dir(rtl) {
transform: scaleX(-1);
}
#banner-donate-button-link {
flex: 0 0 auto;
text-decoration: none;
}
#banner-donate-button-link:link {
color: #A20;
}
#banner-donate-button-link:hover {
color: #C40;
}
#banner-donate-button-link:visited {
color: #408;
}
#banner-donate-button-linka:active {
color: black;
}
#banner-spacer {
display: none;
height: 150px;
position: relative;
top: 0;
};
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment