Merge pull request #2775 from kyoshino/bug-1136660-hires-wordmarks

Fix Bug 1136660 - Make product wordmarks high resolution

bedrock/base/templates/base-resp.html

@@ -111,7 +111,7 @@
         {% endblock %}
 
         {% block site_header_logo %}
-        <h2><a href="{{ url('mozorg.home') }}"><img src="{{ static('img/sandstone/header-mozilla-stone.png') }}" alt="mozilla"></a></h2>
+        <h2><a href="{{ url('mozorg.home') }}">{{ high_res_img('img/sandstone/header-mozilla-stone.png', {'alt': 'Mozilla', 'width': '170', 'height': '45'}) }}</a></h2>
         {% endblock %}
 
         {% block alt_header %}{% endblock %}

bedrock/base/templates/base.html

@@ -105,7 +105,7 @@
         {% endblock %}
 
         {% block site_header_logo %}
-        <h2><a href="{{ url('mozorg.home') }}"><img src="{{ static('img/sandstone/header-mozilla-stone.png') }}" alt="mozilla"></a></h2>
+        <h2><a href="{{ url('mozorg.home') }}">{{ high_res_img('img/sandstone/header-mozilla-stone.png', {'alt': 'Mozilla', 'width': '170', 'height': '45'}) }}</a></h2>
         {% endblock %}
 
         {% block breadcrumbs %}{% endblock %}

bedrock/firefox/templates/firefox/base-resp.html

@@ -26,7 +26,7 @@
 {% endblock %}
 
 {% block site_header_logo %}
-<h2><a href="{{ url('firefox') }}"><img src="{{ static('img/firefox/template/header-logo.png') }}" alt="Mozilla Firefox" height="70" width="185" data-inverse-src="{{ static('img/firefox/template/header-logo-inverse.png') }}"></a></h2>
+<h2><a href="{{ url('firefox') }}">{{ high_res_img('img/firefox/template/header-logo.png', {'alt': 'Mozilla Firefox', 'width': '185', 'height': '70'}) }}</a></h2>
 {% endblock %}
 
 {% block site_js %}

bedrock/firefox/templates/firefox/base.html

@@ -24,7 +24,7 @@
 {% endblock %}
 
 {% block site_header_logo %}
-<h2><a href="{{ url('firefox') }}"><img src="{{ static('img/firefox/template/header-logo.png') }}" alt="Mozilla Firefox" height="70" width="185" data-inverse-src="{{ static('img/firefox/template/header-logo-inverse.png') }}"></a></h2>
+<h2><a href="{{ url('firefox') }}">{{ high_res_img('img/firefox/template/header-logo.png', {'alt': 'Mozilla Firefox', 'width': '185', 'height': '70'}) }}</a></h2>
 {% endblock %}
 
 {% block site_js %}

bedrock/firefox/templates/firefox/channel.html

@@ -44,7 +44,7 @@
   <div class="pager-content">
 
     <div id="beta" class="pager-page">
-      <h2 class="channel-title channel-title-beta"><img src="{{ static('img/firefox/channel/title-beta.png') }}" alt="Firefox Beta" /></h2>
+      <h2 class="channel-title channel-title-beta">{{ high_res_img('img/firefox/channel/title-beta.png', {'alt': 'Firefox Beta', 'width': '441', 'height': '74'}) }}</h2>
       {# L10n: This description applies to Firefox Beta #}
       <h3>{{_('The latest features in a more stable environment')}}</h3>
       <div class="download-box" id="beta-desktop">
@@ -68,7 +68,7 @@ <h3>{{_('The latest features in a more stable environment')}}</h3>
     </div>
 
     <div id="firefox" class="pager-page">
-      <h2 class="channel-title channel-title-firefox"><img src="{{ static('img/firefox/channel/title-firefox.png') }}" alt="Firefox" /></h2>
+      <h2 class="channel-title channel-title-firefox">{{ high_res_img('img/firefox/channel/title-firefox.png', {'alt': 'Firefox', 'width': '258', 'height': '74'}) }}</h2>
       {# L10n: This description applies to Firefox on the Release channel #}
       <h3>{{_('Tried, tested and used by millions around the world')}}</h3>
       <div class="download-box" id="firefox-desktop">

bedrock/firefox/templates/firefox/desktop/desktop-base.html

@@ -21,7 +21,7 @@
 
       <div id="masthead-logo-nav">
       {% block site_header_logo %}
-        <a id="site-header-logo" href="{{ url('firefox.desktop.index') }}"><img src="{{ static('img/firefox/desktop/firefox-header.png') }}" alt="Firefox"></a>
+        <a id="site-header-logo" href="{{ url('firefox.desktop.index') }}">{{ high_res_img('img/firefox/desktop/firefox-header.png', {'alt': 'Firefox', 'width': '132', 'height': '49'}) }}</a>
       {% endblock %}
       {% block site_header_nav %}
         <nav id="nav-main" role="navigation">

bedrock/firefox/templates/firefox/new.html

@@ -30,7 +30,7 @@
 
 {% block site_header_nav %}{% endblock %}
 {% block site_header_logo %}
-  <h2><img src="{{ static('img/firefox/new/header-firefox.png') }}" alt="{{_('Firefox for desktop')}}"></h2>
+  <h2>{{ high_res_img('img/firefox/new/header-firefox.png', {'alt': _('Firefox for desktop'), 'width': '223', 'height': '84'}) }}</h2>
 {% endblock %}
 
 {% block site_css %}{% endblock %}

bedrock/firefox/templates/firefox/organizations/faq.html

@@ -9,7 +9,7 @@
 {% block body_id %}organizations-faq{% endblock %}
 
 {% block site_header_logo %}
-<h1><a href="{{ url('firefox.organizations.organizations') }}"><img src="{{ static('img/firefox/organizations/title.png') }}" alt="{{ _('Firefox ESR') }}" height="68" width="299"></a></h1>
+<h1><a href="{{ url('firefox.organizations.organizations') }}">{{ high_res_img('img/firefox/organizations/title.png', {'alt': _('Firefox ESR'), 'width': '253', 'height': '70'}) }}</a></h1>
 {% endblock %}
 
 {% block main_feature %}

bedrock/firefox/templates/firefox/organizations/organizations.html

@@ -17,7 +17,7 @@
 {% endblock %}
 
 {% block site_header_logo %}
-<h2><a href="{{ url('firefox.organizations.organizations') }}"><img src="{{ static('img/firefox/organizations/title.png') }}" alt="{{ _('Firefox ESR') }}" height="68" width="299"></a></h2>
+<h2><a href="{{ url('firefox.organizations.organizations') }}">{{ high_res_img('img/firefox/organizations/title.png', {'alt': _('Firefox ESR'), 'width': '253', 'height': '70'}) }}</a></h2>
 {% endblock %}
 
 

bedrock/firefox/templates/firefox/releases/aurora-notes.html

@@ -9,7 +9,7 @@
 {% set channel_name = 'Aurora' %}
 
 {% block site_header_logo %}
-    <h2><a href="{{ url('firefox') }}"><img alt="Mozilla Firefox" height="70" width="185" src="{{ static('img/firefox/template/header-logo-inverse.png') }}"></a></h2>
+    <h2><a href="{{ url('firefox') }}">{{ high_res_img('img/firefox/template/header-logo-inverse.png', {'alt': 'Mozilla Firefox', 'width': '185', 'height': '70'}) }}</a></h2>
 {% endblock %}
 
 {% block platform_switch %}

bedrock/firefox/templates/firefox/releases/os-notes.html

@@ -9,7 +9,7 @@
 {% set channel_name = 'Firefox OS' %}
 
 {% block site_header_logo %}
-<h2><a href="{{ url('firefox.os.index') }}"><img src="{{ static('img/firefox/os/template/header-logo.png') }}" alt="Mozilla Firefox OS" height="70" width="220" data-inverse-src="{{ static('img/firefox/os/template/header-logo-inverse.png') }}"></a></h2>
+<h2><a href="{{ url('firefox.os.index') }}">{{ high_res_img('img/firefox/os/template/header-logo.png', {'alt': 'Firefox OS', 'width': '220', 'height': '70'}) }}</a></h2>
 {% endblock %}
 
 {% block notes_header %}

bedrock/mozorg/helpers/misc.py

@@ -232,20 +232,22 @@ def high_res_img(ctx, url, optional_attributes=None):
         url_high_res = static(url_high_res)
 
     if optional_attributes:
+        class_name = optional_attributes.pop('class', '')
         attrs = ' ' + ' '.join('%s="%s"' % (attr, val)
                                for attr, val in optional_attributes.items())
     else:
+        class_name = ''
         attrs = ''
 
     # Don't download any image until the javascript sets it based on
     # data-src so we can do high-dpi detection. If no js, show the
     # normal-res version.
-    markup = ('<img class="js" src="" data-processed="false" '
+    markup = ('<img class="js {class_name}" src="" data-processed="false" '
               'data-src="{url}" data-high-res="true" '
               'data-high-res-src="{url_high_res}"{attrs}><noscript>'
-              '<img src="{url}"{attrs}></noscript>').format(url=url,
-                                                            url_high_res=url_high_res,
-                                                            attrs=attrs)
+              '<img class="{class_name}" src="{url}"{attrs}>'
+              '</noscript>').format(url=url, url_high_res=url_high_res,
+                                    attrs=attrs, class_name=class_name)
 
     return jinja2.Markup(markup)
 

bedrock/mozorg/templates/mozorg/home/home-new.html

@@ -269,7 +269,7 @@ <h3>{{ _('Help millions <br>get the most from their <br>favorite browser.') }}</
     <div class="container">
       <header>
         <a href="{{ url('firefox') }}" id="firefox-promo-link">
-          <h3><img src="{{ static('img/home/voices/firefox-logo-wordmark-white.png') }}" alt="Firefox"></h3>
+          <h3>{{ high_res_img('img/home/voices/firefox-logo-wordmark-white.png', {'alt': 'Firefox'}) }}</h3>
           {# L10n: <strong> tags below are for visual formatting only. #}
           <h4>{{_('Committed to <strong>you, your privacy</strong> and an <strong>open Web</strong>')}}</h4>
         </a>

bedrock/mozorg/tests/test_helper_misc.py

@@ -462,19 +462,19 @@ def test_high_res_img_no_optional_attributes(self):
         """Should return expected markup without optional attributes"""
         markup = self._render('test.png')
         expected = (
-            u'<img class="js" src="" data-processed="false" data-src="/media/test.png" '
+            u'<img class="js " src="" data-processed="false" data-src="/media/test.png" '
             u'data-high-res="true" data-high-res-src="/media/test-high-res.png">'
-            u'<noscript><img src="/media/test.png"></noscript>')
+            u'<noscript><img class="" src="/media/test.png"></noscript>')
         self.assertEqual(markup, expected)
 
     def test_high_res_img_with_optional_attributes(self):
         """Should return expected markup with optional attributes"""
-        markup = self._render('test.png', {'data-test-attr': 'test'})
+        markup = self._render('test.png', {'data-test-attr': 'test', 'class': 'logo'})
         expected = (
-            u'<img class="js" src="" data-processed="false" data-src="/media/test.png" '
+            u'<img class="js logo" src="" data-processed="false" data-src="/media/test.png" '
             u'data-high-res="true" data-high-res-src="/media/test-high-res.png" '
             u'data-test-attr="test"><noscript>'
-            u'<img src="/media/test.png" data-test-attr="test"></noscript>')
+            u'<img class="logo" src="/media/test.png" data-test-attr="test"></noscript>')
         self.assertEqual(markup, expected)
 
     def test_high_res_img_with_l10n(self):
@@ -483,9 +483,9 @@ def test_high_res_img_with_l10n(self):
         l10n_hr_url = convert_to_high_res(l10n_url)
         markup = self._render('test.png', {'l10n': True})
         expected = (
-            u'<img class="js" src="" data-processed="false" data-src="' + l10n_url + '" '
+            u'<img class="js " src="" data-processed="false" data-src="' + l10n_url + '" '
             u'data-high-res="true" data-high-res-src="' + l10n_hr_url + '">'
-            u'<noscript><img src="' + l10n_url + '"></noscript>')
+            u'<noscript><img class="" src="' + l10n_url + '"></noscript>')
         self.assertEqual(markup, expected)
 
     def test_high_res_img_with_l10n_and_optional_attributes(self):
@@ -494,9 +494,9 @@ def test_high_res_img_with_l10n_and_optional_attributes(self):
         l10n_hr_url = convert_to_high_res(l10n_url)
         markup = self._render('test.png', {'l10n': True, 'data-test-attr': 'test'})
         expected = (
-            u'<img class="js" src="" data-processed="false" data-src="' + l10n_url + '" '
+            u'<img class="js " src="" data-processed="false" data-src="' + l10n_url + '" '
             u'data-high-res="true" data-high-res-src="' + l10n_hr_url + '" data-test-attr="test">'
-            u'<noscript><img src="' + l10n_url + '" data-test-attr="test">'
+            u'<noscript><img class="" src="' + l10n_url + '" data-test-attr="test">'
             u'</noscript>')
         self.assertEqual(markup, expected)
 

bedrock/thunderbird/templates/thunderbird/base-resp.html

@@ -76,14 +76,7 @@
 {% endblock email_form %}
 
 {% block site_header_logo %}
-<h2>
-  <a href="/thunderbird/">
-    <img src="{{ static('img/thunderbird/template/thunderbird.png') }}"
-         alt="Mozilla Thunderbird"
-         height="70"
-         width="260">
-  </a>
-</h2>
+<h2><a href="/thunderbird/">{{ high_res_img('img/thunderbird/template/logo-wordmark.png', {'alt': 'Thunderbird', 'width': '260', 'height': '72'}) }}</a></h2>
 {% endblock %}
 
 {% block site_js %}

media/css/firefox/desktop/tips.less

@@ -35,7 +35,7 @@
     background: #dfe6eb;
 
     .logo a {
-        background: url(/media/img/sandstone/footer-mozilla-dark.png);
+        .at2x('/media/img/sandstone/footer-mozilla-dark.png', 93px, 24px);
     }
 }
 

media/css/mozorg/home/home.less

@@ -786,11 +786,7 @@ h1, h2, h3, h4, h5, h6 {
     }
 
     .logo a {
-        display: block;
-        width: 88px;
-        height: 24px;
-        background-image: url(/media/img/sandstone/footer-mozilla-white.png);
-        .image-replaced();
+        .at2x('/media/img/sandstone/footer-mozilla-white.png', 93px, 24px);
     }
 }
 

media/css/privacy/privacy-day.less

@@ -38,7 +38,7 @@
     background: #dfe6eb;
 
     .logo a {
-        background: url(/media/img/sandstone/footer-mozilla-dark.png);
+        .at2x('/media/img/sandstone/footer-mozilla-dark.png', 93px, 24px);
     }
 }
 

media/css/sandstone/sandstone-resp.less

@@ -968,7 +968,7 @@ nav.menu-bar {
     .logo a {
         .image-replaced();
         display: inline-block;
-        background: url(/media/img/sandstone/footer-mozilla.png) left top no-repeat;
+        .at2x('/media/img/sandstone/footer-mozilla.png', 93px, 24px);
         width: 93px;
         height: 24px;
     }

media/css/sandstone/sandstone.less

@@ -735,7 +735,7 @@ nav.menu-bar {
     .logo a {
         .image-replaced();
         display: inline-block;
-        background: url(/media/img/sandstone/footer-mozilla.png) left top no-repeat;
+        .at2x('/media/img/sandstone/footer-mozilla.png', 93px, 24px);
         width: 93px;
         height: 24px;
     }

media/css/tabzilla/tabzilla.less

@@ -621,6 +621,12 @@ html[dir="rtl"] {
        (                min-resolution: 1.5dppx),
        (                min-resolution: 144dpi) {
 
+    // high res tab
+    #tabzilla {
+        background-image: url('/media/img/tabzilla/tab-high-res.png');
+        .background-size(150px, 90px);
+    }
+
     // high res heart icon
     #tabzilla-panel #tabzilla-nav a.donate:after {
         background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAUCAYAAAERuZaYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyNjYxRDI1MTRFNDIxMUUzQkU5RkQyMkVEMjBCMTNBMSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyNjYxRDI1MjRFNDIxMUUzQkU5RkQyMkVEMjBCMTNBMSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjI2NjFEMjRGNEU0MjExRTNCRTlGRDIyRUQyMEIxM0ExIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjI2NjFEMjUwNEU0MjExRTNCRTlGRDIyRUQyMEIxM0ExIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+75uWVQAAAX5JREFUeNpiXG9kxAAFoSxAwhiIz4B4TEB8FooZAQKIEahMCci4B5IBKbsL0wRSxghlMwIEEEhZKJCxigENgFStBuL3aOKMAAHECLU/FKoABMAWgSz5z4AJwpgYsIN7yC6BAZB9Z2E6YJIgHwmBGAABBLP8HRALIunqhNLlaCYJgRzVgaYYXSEMgNR0gKyuwOJvbACkpgLmViGoe9/jUMgI8wMLmqQQlD4DpU3QdQMEECNyjEOj9CySvDE0BlbDTDdGMo0BKSjRY8eECYtCBhzReIaJgQRAsmIhItUKMUHD04SAQpD8eyakBGSCR+FZdDeDBJRxKcQWi/egfngHpVGSAUCAIcegMTRFuqAZsAeIZyHlKVhsp+FQWwFzDcwld6HJABtwQTLkHh51MLVnoOqUmaCuVSIyekhR18FEZD4jB4CjvhMtPKkBQOZ1wpJKGCyhUepaqDlh2NKhEJmWwAwVQk632DImKZZgNZSYXA+zBJtGfHIkFSnIruskJegAGb9TY9kNOFkAAAAASUVORK5CYII=');

media/js/firefox/channel.js

@@ -16,7 +16,7 @@ $(document).ready(function() {
     pager.$container.bind('changePage', function(e, tab) {
         if (pager.currentPage.id == 'developer') {
             $('body').removeClass('sky').addClass('blueprint');
-            $logo.attr('src', $logo.attr('data-inverse-src'));
+            $logo.attr('src', logoOriginalSrc.replace('header-logo', 'header-logo-inverse'));
         } else {
             $('body').removeClass('blueprint').addClass('sky');
             $logo.attr('src', logoOriginalSrc);
@@ -41,7 +41,7 @@ $(document).ready(function() {
     // init
     if (pager.currentPage.id == 'developer') {
         $('body').removeClass('sky').addClass('blueprint');
-        $logo.attr('src', $logo.attr('data-inverse-src'));
+        $logo.attr('src', logoOriginalSrc.replace('header-logo', 'header-logo-inverse'));
     } else {
         $('body').removeClass('blueprint').addClass('sky');
         $logo.attr('src', logoOriginalSrc);