[tbb-commits] [torbutton/master] fixup! Bug 40051: Implement 2021 Year End Campaign look in about:tor
sysrqb at torproject.org
sysrqb at torproject.org
Wed Oct 20 00:18:25 UTC 2021
commit 38bb5a997a599a2888ac276dac89507bcf8611cf
Author: Richard Pospesel <richard at torproject.org>
Date: Thu Oct 14 18:03:42 2021 +0200
fixup! Bug 40051: Implement 2021 Year End Campaign look in about:tor
---
chrome/content/aboutTor/aboutTor-content.js | 15 +-
chrome/content/aboutTor/aboutTor.xhtml | 2 +-
chrome/skin/yec-placard.svg | 406 ++++++++++++++++++----------
3 files changed, 270 insertions(+), 153 deletions(-)
diff --git a/chrome/content/aboutTor/aboutTor-content.js b/chrome/content/aboutTor/aboutTor-content.js
index 3b26317f..c4b3506a 100644
--- a/chrome/content/aboutTor/aboutTor-content.js
+++ b/chrome/content/aboutTor/aboutTor-content.js
@@ -70,12 +70,6 @@ var AboutTorListener = {
addEventListener("resize", this, false);
sendAsyncMessage(this.kAboutTorLoadedMessage);
-
- // debug hook to set locale in the about:tor YEC header image
- const debugLocale = Services.prefs.getStringPref("abouttor.debug_locale", "");
- if (debugLocale) {
- content.document.getElementById("slogan-layer").src = "resource://torbutton-assets/yec-placard.svg#" + debugLocale;
- }
},
onPageHide: function() {
@@ -122,11 +116,10 @@ var AboutTorListener = {
"https://tb-manual.torproject.org/" + aLocale;
content.document.getElementById("getInvolvedLink").href =
"https://community.torproject.org/" + aLocale;
- const sloganLayer = content.document.getElementById("slogan-layer");
- // don't overwrite if already set by the debug hook
- if (!sloganLayer.src) {
- sloganLayer.src = "resource://torbutton-assets/yec-placard.svg#" + aLocale;
- }
+ content.document.getElementById("slogan-layer").src =
+ "resource://torbutton-assets/yec-placard.svg#" + aLocale;
+ content.document.getElementById("donateButton").href =
+ "https://www.torproject.org/donate/donate-phr-bp1-" + aLocale;
// Display the Tor Browser product name and version.
try {
diff --git a/chrome/content/aboutTor/aboutTor.xhtml b/chrome/content/aboutTor/aboutTor.xhtml
index 11d64d04..5765fd58 100644
--- a/chrome/content/aboutTor/aboutTor.xhtml
+++ b/chrome/content/aboutTor/aboutTor.xhtml
@@ -24,7 +24,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>&aboutTor.title;</title>
<link rel="stylesheet" href="chrome://browser/skin/onionPattern.css" type="text/css" media="all" />
- <link rel="stylesheet" href="chrome://browser/skin/corben-font.css" type="text/css" media="all" />
+ <link rel="stylesheet" href="resource://torbutton-assets/corben-font.css" type="text/css" media="all" />
<link rel="stylesheet" href="resource://torbutton-assets/aboutTor.css" type="text/css" media="all" />
<script type="text/javascript" src="resource://torbutton-abouttor/aboutTor.js"></script>
</head>
diff --git a/chrome/skin/yec-placard.svg b/chrome/skin/yec-placard.svg
index 39602c85..5d5637f2 100644
--- a/chrome/skin/yec-placard.svg
+++ b/chrome/skin/yec-placard.svg
@@ -1,8 +1,11 @@
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" height="427" viewBox="0 0 714 427" width="714">
<style>
- use:not(:target) {
- /* disables unused use nodes */
+ /* disables unused use nodes wit a _text suffix in the href attribute
+ we don't want to blank disable all use nodes because the background
+ placard path is included via use nodes in each locale group
+ */
+ use[href$="_text"]:not(:target) {
display: none;
}
@@ -17,7 +20,7 @@
/* Don't touch this block */
text {
/* set font to 'Sniglet' and fallback to firefox builtin sans-serif'd font */
- font-family: "Sniglet", sans;
+ font-family: "Sniglet", sans-serif;
/* set font-size to 0 to prevent hidden whitespace between tspan
nodes from messing up the layout geometry */
font-size: 0px;
@@ -32,197 +35,318 @@
}
tspan {
- /* default text height */
- font-size: 36px;
+ /* default text size */
+ font-size: 32px;
}
- /*
- Some example CSS for per-language rules affecting ex_text example node
- */
+ /* 30px font override */
+ text.font30 > tspan { font-size: 30px; }
- /* smaller font than default */
- text#ex_text > tspan {
- font-size: 20px;
- }
+ /* 28px font override */
+ text.font28 > tspan { font-size: 28px; }
- /* reduce font size of 1st line */
- text#ex_text > tspan:nth-child(1) {
- font-size: 24px;
- }
+ /* 26px font override */
+ text.font26 > tspan { font-size: 26px; }
- /* make 3rd line text bold */
- text#ex_text > tspan:nth-child(3) {
- font-weight: bold;
- }
+ /* 24px font override */
+ text.font24 > tspan { font-size: 24px; }
+
+ /* 22px font override */
+ text.font22 > tspan { font-size: 22px; }
</style>
- <!-- placard is 190px tall, 150px widel; remove this path node from final asset -->
- <path fill="#faf5df" stroke-width="2px" stroke="black" d="M479,22 L629,46 L592,240 L441,216 L479,22"/>
+
+ <!-- Fallback English (US)-->
+ <g id="en_US_text">
+ <text>
+ <tspan x="0" y="50px">HANDS</tspan>
+ <tspan x="0" dy="50px">OFF MY</tspan>
+ <tspan x="0" dy="50px">DATA</tspan>
+ </text>
+ </g>
<defs>
- <!-- an example node -->
- <text id="ex_text">
- <!-- y attribute sets the offset from the top of the placard -->
- <tspan x="0" y="29px">Lorem ipsum </tspan>
- <!-- dy attribute sets the offset from the previous tspan y coordinate -->
- <tspan x="0" dy="44px">dolor sit amet</tspan>
- <tspan x="0" dy="44px">consectetur</tspan>
- <tspan x="0" dy="44px">adipiscing elit</tspan>
- </text>
- <!-- English (US)-->
- <text id="en_US_text">
- <tspan x="0" y="39.5px">HANDS</tspan>
- <tspan x="0" y="95.5px">OFF MY</tspan>
- <tspan x="0" y="151.5px">DATA</tspan>
- </text>
+ <!-- We use this to overlay over the fallback en-US text above when a specfic locale is selected -->
+ <path id="placard" fill="#faf5df" stroke-width="0px" d="M482,26 L625,48 L588,235 L445,212 L482,26"/>
<!-- Arabic (right-to-left) -->
- <text id="ar_text">
- <tspan x="0" y="39.5px">ارÙعوا</tspan>
- <tspan x="0" y="95.5px">أيديكم عن</tspan>
- <tspan x="0" y="151.5px">بياناتي</tspan>
- </text>
+ <g id="ar_text">
+ <use href="#placard"/>
+ <text>
+ </text>
+ </g>
<!-- Catalan -->
- <text id="ca_text">
- </text>
+ <g id="ca_text">
+ <use href="#placard"/>
+ <text>
+ </text>
+ </g>
<!-- Czech -->
- <text id="cs_text">
- </text>
+ <g id="cs_text">
+ <use href="#placard"/>
+ <text>
+ </text>
+ </g>
<!-- Danish -->
- <text id="da_text">
- </text>
+ <g id="da_text">
+ <use href="#placard"/>
+ <text>
+ </text>
+ </g>
<!-- German -->
- <text id="de_text">
- </text>
+ <g id="de_text">
+ <use href="#placard"/>
+ <text>
+ </text>
+ </g>
<!-- Greek -->
- <text id="el_text">
- </text>
+ <g id="el_text">
+ <use href="#placard"/>
+ <text>
+ </text>
+ </g>
<!-- Spanish-Argentina -->
- <text id="es_AR_text">
- </text>
+ <g id="es_AR_text">
+ <use href="#placard"/>
+ <text class="font30">
+ <tspan x="0" y="35px">NO</tspan>
+ <tspan x="0" dy="40px">TOQUÉS</tspan>
+ <tspan x="0" dy="40px">MIS</tspan>
+ <tspan x="0" dy="40px">DATOS</tspan>
+ </text>
+ </g>
+
<!-- Spanish-Spain -->
- <text id="es_ES_text">
- </text>
+ <g id="es_ES_text">
+ <use href="#placard"/>
+ <text class="font30">
+ <tspan x="0" y="35px">NO</tspan>
+ <tspan x="0" dy="40px">TOQUES</tspan>
+ <tspan x="0" dy="40px">MIS</tspan>
+ <tspan x="0" dy="40px">DATOS</tspan>
+ </text>
+ </g>
+
<!-- Farsi (right-to-left) -->
- <text id="fa_text">
- </text>
+ <g id="fa_text">
+ <use href="#placard"/>
+ <text>
+ </text>
+ </g>
<!-- French -->
- <text id="fr_text">
- </text>
+ <g id="fr_text">
+ <use href="#placard"/>
+ <text class="font26">
+ <tspan x="0" y="35px">NE</tspan>
+ <tspan x="0" dy="40px">TOUCHEZ</tspan>
+ <tspan x="0" dy="40px">PAS À MES</tspan>
+ <tspan x="0" dy="40px">DONNÉES</tspan>
+ </text>
+ </g>
<!-- Irish -->
- <text id="ga_IE_text">
- </text>
+ <g id="ga_IE_text">
+ <use href="#placard"/>
+ <text>
+ </text>
+ </g>
<!-- Hebrew (right-to-left) -->
- <text id="he_text">
- </text>
+ <g id="he_text">
+ <use href="#placard"/>
+ <text>
+ </text>
+ </g>
<!-- Hungarian -->
- <text id="hu_text">
- </text>
+ <g id="hu_text">
+ <use href="#placard"/>
+ <text class="font22">
+ <tspan x="0" y="55px">EL A</tspan>
+ <tspan x="0" dy="35px">KEZEKKEL AZ</tspan>
+ <tspan x="0" dy="35px">ADATAIMTÓL</tspan>
+ </text>
+ </g>
<!-- Indonesian -->
- <text id="id_text">
- </text>
+ <g id="id_text">
+ <use href="#placard"/>
+ <text>
+ </text>
+ </g>
<!-- Icelandic -->
- <text id="is_text">
- </text>
+ <g id="is_text">
+ <use href="#placard"/>
+ <text>
+ </text>
+ </g>
<!-- Italian -->
- <text id="it_text">
- </text>
+ <g id="it_text">
+ <use href="#placard"/>
+ <text>
+ </text>
+ </g>
<!-- Japanese -->
- <text id="ja_text">
- </text>
+ <g id="ja_text">
+ <use href="#placard"/>
+ <text>
+ </text>
+ </g>
<!-- Georgian -->
- <text id="ka_text">
- </text>
+ <g id="ka_text">
+ <use href="#placard"/>
+ <text>
+ </text>
+ </g>
<!-- Korean -->
- <text id="ko_text">
- </text>
+ <g id="ko_text">
+ <use href="#placard"/>
+ <text>
+ </text>
+ </g>
<!-- Lithuanian -->
- <text id="lt_text">
- </text>
+ <g id="lt_text">
+ <use href="#placard"/>
+ <text>
+ </text>
+ </g>
<!-- Macedonian -->
- <text id="mk_text">
- </text>
+ <g id="mk_text">
+ <use href="#placard"/>
+ <text>
+ </text>
+ </g>
<!-- Malay -->
- <text id="ms_text">
- </text>
+ <g id="ms_text">
+ <use href="#placard"/>
+ <text>
+ </text>
+ </g>
<!-- Burmese -->
- <text id="my_text">
- </text>
+ <g id="my_text">
+ <use href="#placard"/>
+ <text>
+ </text>
+ </g>
<!-- Norwegian -->
- <text id="nb_NO_text">
- </text>
+ <g id="nb_NO_text">
+ <use href="#placard"/>
+ <text>
+ </text>
+ </g>
<!-- Dutch -->
- <text id="nl_text">
- </text>
+ <g id="nl_text">
+ <use href="#placard"/>
+ <text>
+ </text>
+ </g>
<!-- Polish -->
- <text id="pl_text">
- </text>
+ <g id="pl_text">
+ <use href="#placard"/>
+ <text>
+ </text>
+ </g>
<!-- Portugese-Brazil -->
- <text id="pt_BR_text">
- </text>
+ <g id="pt_BR_text">
+ <use href="#placard"/>
+ <text class="font26">
+ <tspan x="0" y="40px">TIREM AS</tspan>
+ <tspan x="0" dy="40px">MÃOS</tspan>
+ <tspan x="0" dy="40px">DOS MEUS</tspan>
+ <tspan x="0" dy="40px">DADOS</tspan>
+ </text>
+ </g>
<!-- Romanian -->
- <text id="ro_text">
- </text>
+ <g id="ro_text">
+ <use href="#placard"/>
+ <text>
+ </text>
+ </g>
<!-- Russian -->
- <text id="ru_text">
- </text>
+ <g id="ru_text">
+ <use href="#placard"/>
+ <text class="font26">
+ <tspan x="0" y="35px">РУКИ</tspan>
+ <tspan x="0" dy="40px">ПРОЧЬ</tspan>
+ <tspan x="0" dy="40px">ОТ МОИХ</tspan>
+ <tspan x="0" dy="40px">ДÐÐÐЫХ</tspan>
+ </text>
+ </g>
<!-- Swedish -->
- <text id="sv_SE_text">
- </text>
+ <g id="sv_SE_text">
+ <use href="#placard"/>
+ <text class="font28">
+ <tspan x="0" y="50px">HÄNDERNA</tspan>
+ <tspan x="0" dy="45px">BORT FRÃ…N</tspan>
+ <tspan x="0" dy="45px">MINA DATA</tspan>
+ </text>
+ </g>
<!-- Thai -->
- <text id="th_text">
- </text>
+ <g id="th_text">
+ <use href="#placard"/>
+ <text>
+ </text>
+ </g>
<!-- Turkish -->
- <text id="tr_text">
- </text>
+ <g id="tr_text">
+ <use href="#placard"/>
+ <text class="font24">
+ <tspan x="0" y="80px">VERÄ°LERÄ°ME</tspan>
+ <tspan x="0" dy="40px">DOKUNMA</tspan>
+ </text>
+ </g>
<!-- Vietnamese -->
- <text id="vi_text">
- </text>
+ <g id="vi_text">
+ <use href="#placard"/>
+ <text>
+ </text>
+ </g>
<!-- Chinese Simplified/PRC -->
- <text id="zh_CN_text">
- </text>
+ <g id="zh_CN_text">
+ <use href="#placard"/>
+ <text>
+ <tspan x="0" y="50px">别碰</tspan>
+ <tspan x="0" dy="50px">我的</tspan>
+ <tspan x="0" dy="50px">éšç§</tspan>
+ </text>
+ </g>
<!-- Chinese Traditional/Taiwan -->
- <text id="zh_TW_text">
- </text>
+ <g id="zh_TW_text">
+ <use href="#placard"/>
+ <text>
+ </text>
+ </g>
</defs>
- <!-- example text -->
- <use id="example" href="#ex_text"/>
- <!-- en_US -->
- <use id="en-US" href="#en_US_text"/>
- <!-- remaining locales -->
- <use id="ar" href="#ar_text"/>
- <use id="ca" href="#ca_text"/>
- <use id="cs" href="#cs_text"/>
- <use id="da" href="#da_text"/>
- <use id="de" href="#de_text"/>
- <use id="el" href="#el_text"/>
+ <!-- non en-US locales -->
+ <!-- <use id="ar" href="#ar_text"/> -->
+ <!-- <use id="ca" href="#ca_text"/> -->
+ <!-- <use id="cs" href="#cs_text"/> -->
+ <!-- <use id="da" href="#da_text"/> -->
+ <!-- <use id="de" href="#de_text"/> -->
+ <!-- <use id="el" href="#el_text"/> -->
<use id="es-AR" href="#es_AR_text"/>
<use id="es-ES" href="#es_ES_text"/>
- <use id="fa" href="#fa_text"/>
+ <!-- <use id="fa" href="#fa_text"/> -->
<use id="fr" href="#fr_text"/>
- <use id="ga-IE" href="#ga_IE_text"/>
- <use id="he" href="#he_text"/>
+ <!-- <use id="ga-IE" href="#ga_IE_text"/> -->
+ <!-- <use id="he" href="#he_text"/> -->
<use id="hu" href="#hu_text"/>
- <use id="id" href="#id_text"/>
- <use id="is" href="#is_text"/>
- <use id="it" href="#it_text"/>
- <use id="ja" href="#ja_text"/>
- <use id="ka" href="#ka_text"/>
- <use id="ko" href="#ko_text"/>
- <use id="lt" href="#lt_text"/>
- <use id="mk" href="#mk_text"/>
- <use id="ms" href="#ms_text"/>
- <use id="my" href="#my_text"/>
- <use id="nb-NO" href="#nb_NO_text"/>
- <use id="nl" href="#nl_text"/>
- <use id="pl" href="#pl_text"/>
+ <!-- <use id="id" href="#id_text"/> -->
+ <!-- <use id="is" href="#is_text"/> -->
+ <!-- <use id="it" href="#it_text"/> -->
+ <!-- <use id="ja" href="#ja_text"/> -->
+ <!-- <use id="ka" href="#ka_text"/> -->
+ <!-- <use id="ko" href="#ko_text"/> -->
+ <!-- <use id="lt" href="#lt_text"/> -->
+ <!-- <use id="mk" href="#mk_text"/> -->
+ <!-- <use id="ms" href="#ms_text"/> -->
+ <!-- <use id="my" href="#my_text"/> -->
+ <!-- <use id="nb-NO" href="#nb_NO_text"/> -->
+ <!-- <use id="nl" href="#nl_text"/> -->
+ <!-- <use id="pl" href="#pl_text"/> -->
<use id="pt-BR" href="#pt_BR_text"/>
- <use id="ro" href="#ro_text"/>
+ <!-- <use id="ro" href="#ro_text"/> -->
<use id="ru" href="#ru_text"/>
<use id="sv-SE" href="#sv_SE_text"/>
- <use id="th" href="#th_text"/>
+ <!-- <use id="th" href="#th_text"/> -->
<use id="tr" href="#tr_text"/>
- <use id="vi" href="#vi_text"/>
+ <!-- <use id="vi" href="#vi_text"/> -->
<use id="zh-CN" href="#zh_CN_text"/>
- <use id="zh-TW" href="#zh_TW_text"/>
+ <!-- <use id="zh-TW" href="#zh_TW_text"/> -->
</svg>
More information about the tbb-commits
mailing list