Implement The Web We Want promo on Tabzilla, Bug 993129

bedrock/tabzilla/templates/tabzilla/tabzilla.js

@@ -603,12 +603,21 @@ var Tabzilla = (function (Tabzilla) {
       '<div id="tabzilla-panel" class="tabzilla-closed" tabindex="-1">'
     + '  <div id="tabzilla-contents">'
     + '    <div id="tabzilla-promo">'
-    +'      <div class="snippet" id="tabzilla-promo-fxos">'
+{% if l10n_has_tag('promo_webwewant') or settings.DEV %}
+    + '      <div class="snippet" id="tabzilla-promo-webwewant">'
+    + '        <a href="https://webwewant.mozilla.org/?icn=tabz">'
+    + '          <h4>{{ _('What kind of Web do you want?')|js_escape }}</h4>'
+    + '          <p>{{ _('Share your vision')|js_escape }}</p>'
+    + '        </a>'
+    + '      </div>'
+{% else %}
+    + '      <div class="snippet" id="tabzilla-promo-fxos">'
     + '        <a href="https://www.mozilla.org/firefox/os/?icn=tabz">'
     + '          <h4>{{ _('Look ahead')|js_escape }}</h4>'
     + '          <p>{{ _('Learn all about Firefox OS')|js_escape }} »</p>'
     + '        </a>'
     + '      </div>'
+{% endif %}
     + '    </div>'
     + '    <div id="tabzilla-nav">'
     + '      <ul>'

lib/l10n_utils/helpers.py

@@ -64,7 +64,7 @@ _ = gettext
 @jingo.register.filter
 def js_escape(string):
     import json
-    return json.dumps(string)[1:-1]
+    return json.dumps(string)[1:-1].replace(' ', '\\u00A0')
 
 
 @jingo.register.function

media/css/tabzilla/tabzilla.less

@@ -1,3 +1,5 @@
+@import "../sandstone/lib.less";
+
 // IE does not like file-relative (e.g. '../fonts/*') URLs due to our
 // redirects. Always use domain-relative urls like the font URLs below.
 
@@ -559,6 +561,127 @@ html[lang|='zh'] {
     }
 }
 
+// The Web We Want Promo
+
+#tabzilla-promo .snippet#tabzilla-promo-webwewant a {
+    padding: 25px 20px;
+    width: 260px;
+    height: 160px;
+    color: #fff;
+    background-color: #1c7aab;
+    background-image: url("/media/img/tabzilla/promo-webwewant.jpg");
+    background-position: 0 0;
+    text-shadow: 0 0 2px #000;
+    font-size: 12px;
+    line-height: 20px;
+    h4 {
+        margin-bottom: 10px;
+        color: #fff;
+        text-shadow: inherit;
+        font-size: 36px;
+        line-height: 1;
+        .open-sans-light;
+        font-weight: normal;
+        text-transform: uppercase;
+        letter-spacing: -.1ex;
+    }
+    p {
+        margin: 0 80px 0 0;
+        font-size: 18px;
+        &:after {
+            content: "\00A0\00BB"; /* nbsp raquo */
+        }
+    }
+}
+
+html[lang="ar"],
+html[lang="de"],
+html[lang="gd"],
+html[lang="he"],
+html[lang="id"],
+html[lang="kk"],
+html[lang="ml"],
+html[lang="vi"],
+html[lang="xh"] {
+    #tabzilla-promo .snippet#tabzilla-promo-webwewant a h4 {
+        font-size: 32px;
+    }
+}
+
+html[lang="be"],
+html[lang="cs"],
+html[lang="eo"],
+html[lang="es-AR"],
+html[lang="es-ES"],
+html[lang="et"],
+html[lang="eu"],
+html[lang="fy-NL"],
+html[lang="gl"],
+html[lang="hu"],
+html[lang="it"],
+html[lang="ko"],
+html[lang="lt"],
+html[lang="nl"],
+html[lang="pa-IN"],
+html[lang="pt-PT"],
+html[lang="rm"],
+html[lang="sl"],
+html[lang="te"],
+html[lang="uk"],
+html[lang="zh-CN"] {
+    #tabzilla-promo .snippet#tabzilla-promo-webwewant a h4 {
+        font-size: 40px;
+    }
+}
+
+html[lang="as"],
+html[lang="hr"],
+html[lang="pl"],
+html[lang="ro"],
+html[lang="sk"],
+html[lang="sq"],
+html[lang="sr"],
+html[lang="zh-TW"] {
+    #tabzilla-promo .snippet#tabzilla-promo-webwewant a h4 {
+        font-size: 44px;
+    }
+}
+
+html[lang="ar"],
+html[lang="fa"] {
+    #tabzilla-promo .snippet#tabzilla-promo-webwewant a h4 {
+        line-height: 1.2;
+    }
+}
+
+html[lang="km"],
+html[lang="mr"] {
+    #tabzilla-promo .snippet#tabzilla-promo-webwewant a h4 {
+        line-height: 1.4;
+    }
+}
+
+html[lang="kk"] {
+    #tabzilla-promo .snippet#tabzilla-promo-webwewant a p {
+        font-size: 16px;
+    }
+}
+
+html[lang="te"] {
+    #tabzilla-promo .snippet#tabzilla-promo-webwewant a p {
+        line-height: 1.4;
+    }
+}
+
+html[dir="rtl"] {
+    #tabzilla-promo .snippet#tabzilla-promo-webwewant a {
+        background-image: url("/media/img/tabzilla/promo-webwewant-reversed.jpg");
+        p {
+            margin: 0 0 0 80px;
+        }
+    }
+}
+
 @media (-webkit-min-device-pixel-ratio: 1.5),
        (                min-resolution: 1.5dppx),
        (                min-resolution: 144dpi) {