[tbb-commits] [torbutton/master] fixup! Bug 40051: Implement 2021 Year End Campaign look in about:tor

20 Oct 2021

commit 38bb5a997a599a2888ac276dac89507bcf8611cf
Author: Richard Pospesel richard@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>

    

2024

2023

2022

2021

2020

2019

2018

2017

2016

2015

2014

[tbb-commits] [torbutton/master] fixup! Bug 40051: Implement 2021 Year End Campaign look in about:tor