tell users all the silly reasons why app installs are disabled (bug 793801)

Author: cvan

media/css/mkt/tile.less

@@ -393,7 +393,7 @@
     display: none;
 }
 
-.bad-platform {
+.bad-app {
     color: @maroon;
     font-size: 11px;
     line-height: 12px;

media/js/mkt/init.js

@@ -22,20 +22,15 @@ var z = {
 
 z.prefixUpper = z.prefix[0].toUpperCase() + z.prefix.substr(1);
 
-(function() {
-    _.extend(z, {'nav': BrowserUtils()});
-    if (!z.nav.browser.firefox ||
-        z.nav.browser.mobile || z.nav.os.maemo ||
-        VersionCompare.compareVersions(z.nav.browserVersion, '16.0') < 0 ||
-        (z.nav.os.android && VersionCompare.compareVersions(z.nav.browserVersion, '17.0') < 0)) {
-        z.canInstallApps = false;
-    }
-})();
-
 // Initialize webtrends tracking.
 z.page.on('fragmentloaded', webtrendsAsyncInit);
 
 (function() {
+    _.extend(z, {
+        nav: BrowserUtils(),
+        canInstallApps: z.body.data('installs')
+    });
+
     function trigger() {
         $(window).trigger('saferesize');
     }
@@ -77,8 +72,6 @@ $(document).ready(function() {
 
 
 z.page.on('fragmentloaded', function() {
-    var badPlatform = '<div class="bad-platform">' + gettext('This app is unavailable for your platform.') + '</div>';
-
     z.apps = {};
     if (z.capabilities.webApps) {
         // Get list of installed apps and mark as such.
@@ -90,17 +83,10 @@ z.page.on('fragmentloaded', function() {
                                   [val, {'manifest_url': val.manifestURL}, false]);
             });
         };
-        if (!z.capabilities.gaia) {
-            // Only Firefox OS currently supports packaged apps.
-            // (The 'bad' class ensures we append the message only once.)
-            $('.listing .product[data-is_packaged="true"]').addClass('disabled')
-                .closest('.mkt-tile:not(.bad)').addClass('bad').append(badPlatform);
-        }
     }
 
     if (!z.canInstallApps) {
         $(window).trigger('app_install_disabled');
-        $('.listing .mkt-tile:not(.bad)').addClass('bad').append(badPlatform);
     }
 
     // Navigation toggle.

media/js/zamboni/browser.js

@@ -8,7 +8,7 @@ function BrowserUtils() {
     var userAgentStrings = {
             'firefox' : /Mozilla.*(Firefox|Minefield|Namoroka|Shiretoko|GranParadiso|BonEcho|Iceweasel|Fennec|MozillaDeveloperPreview)\/([^\s]*).*$/,
             'seamonkey': /Mozilla.*(SeaMonkey|Iceape)\/([^\s]*).*$/,
-            'mobile': /Mozilla.*(Fennec)\/([^\s]*)$/,
+            'mobile': /Mozilla.*(Fennec|Mobile)\/([^\s]*)$/,
             'thunderbird': /Mozilla.*(Thunderbird|Shredder|Lanikai)\/([^\s*]*).*$/
         },
         osStrings = {

mkt/__init__.py

@@ -1,4 +1,4 @@
-from mkt.constants import ratingsbodies, regions
+from mkt.constants import platforms, ratingsbodies, regions
 from mkt.constants.submit import *
 
 MKT_CUT = .70

mkt/constants/platforms.py

@@ -0,0 +1,24 @@
+import re
+
+from versions.compare import version_int as vint
+
+
+# These are the minimum versions required for `navigator.mozApps` support.
+APP_PLATFORMS = [
+    # Firefox for Desktop.
+    (
+        [
+            re.compile('Firefox/([\d.]+)')
+        ],
+        vint('16.0')
+    ),
+    # Firefox for Android.
+    (
+        [
+            re.compile('Fennec/([\d.]+)'),
+            re.compile('Android; Mobile; rv:([\d.]+)'),
+            re.compile('Mobile; rv:([\d.]+)')
+        ],
+        vint('17.0')
+    )
+]

mkt/site/helpers.py

@@ -2,17 +2,21 @@
 
 from django.conf import settings
 
+import caching.base as caching
+import jinja2
+import waffle
 from jingo import register, env
 from jingo_minify import helpers as jingo_minify_helpers
-import jinja2
 from tower import ugettext as _
-import waffle
 
 from access import acl
 from amo.helpers import urlparams
 from amo.urlresolvers import reverse, get_outgoing_url
 from amo.utils import JSONEncoder
 from translations.helpers import truncate
+from versions.compare import version_int as vint
+
+import mkt
 
 
 @jinja2.contextfunction
@@ -56,11 +60,11 @@ def no_results():
 
 @jinja2.contextfunction
 @register.function
-def market_button(context, product, receipt_type=None):
+def market_button(context, product, receipt_type=None, classes=None):
     request = context['request']
     if product.is_webapp():
         purchased = False
-        classes = ['button', 'product']
+        classes = (classes or []) + ['button', 'product']
         data_attrs = {'manifest_url': product.get_manifest_url(),
                       'is_packaged': json.dumps(product.is_packaged)}
 
@@ -75,13 +79,6 @@ def market_button(context, product, receipt_type=None):
                     request.check_ownership(product, require_author=True)):
                 purchased = True
 
-            classes.append('premium')
-            if waffle.switch_is_active('disabled-payments') or not request.GAIA:
-                classes.append('disabled')
-
-        if not request.MOBILE and not 'disabled' in classes:
-            classes.append('disabled')
-
         if purchased:
             label = _('Install')
         else:
@@ -185,7 +182,8 @@ def product_as_dict_theme(request, product):
 def market_tile(context, product, link=True, src=''):
     request = context['request']
     if product.is_webapp():
-        classes = ['product', 'mkt-tile']
+        classes = []
+        notices = []
         purchased = (request.amo_user and
                      product.pk in request.amo_user.purchase_ids())
 
@@ -202,10 +200,47 @@ def market_tile(context, product, link=True, src=''):
             'manifest_url': product.get_manifest_url(),
             'src': src
         }
+
+        ua = request.META.get('HTTP_USER_AGENT', '')
+        need_firefox, need_upgrade = check_firefox(ua)
+
         if product.is_premium() and product.premium:
             classes.append('premium')
+
+            if waffle.switch_is_active('disabled-payments'):
+                notices.append(_('This app is temporarily unavailable for '
+                                 'purchase.'))
+            elif not request.GAIA:
+                notices.append(_('This app is available for purchase only '
+                                 'on Firefox OS.'))
+
+        if product.is_packaged and not request.GAIA:
+            notices.append(_('This app is available only on Firefox OS.'))
+
+        if not request.MOBILE:
+            notices.append(_('This app is available only on Firefox for '
+                             'Android and Firefox OS.'))
+        if need_firefox:
+            if request.MOBILE:
+                url = ('https://www.mozilla.org/en-US/mobile/android-download'
+                       '.html')
+                notices.append(_('To use this app, <a href="{url}" '
+                                 'target="_blank">download and install '
+                                 'Firefox for Android</a>.').format(url=url))
+            # TODO: Enable when we allow installs on desktop again.
+            #else:
+            #    url = 'https://www.mozilla.org/en-US/firefox/'
+            #    notices.append(_('To use this app, <a href="{url}" '
+            #                     'target="_blank">download and install '
+            #                     'Firefox</a>.').format(url=url))
+        elif need_upgrade:
+            notices.append(_('To use this app, upgrade Firefox.'))
+
+        if notices:
+            classes += ['bad', 'disabled']
+
         c = dict(request=request, product=product, data_attrs=data_attrs,
-                 classes=' '.join(classes), link=link)
+                 classes=classes, link=link, notices=notices[:1])
         t = env.get_template('site/tiles/app.html')
         return jinja2.Markup(t.render(c))
 
@@ -354,3 +389,37 @@ def get_login_link(context, to=None):
     if to == url:
         to = None
     return urlparams(url, to=to)
+
+
+@register.function
+def check_firefox(ua):
+    return caching.cached(lambda: _check_firefox(ua), 'check_firefox:%s' % ua)
+
+
+def _check_firefox(ua):
+    need_firefox, need_upgrade = True, True
+
+    for ua_res, min_version in mkt.platforms.APP_PLATFORMS:
+        for ua_re in ua_res:
+            match = ua_re.search(ua)
+            if match:
+                v = match.groups()[0]
+
+                # If we found a version at all, then this is Firefox.
+                need_firefox = False
+
+                # If we found a matching version, then we can install apps!
+                need_upgrade = vint(v) < min_version
+
+    return need_firefox, need_upgrade
+
+
+@register.function
+@jinja2.contextfunction
+def allow_installs(context):
+    """
+    This will return of a boolean of whether we're on a version of
+    Firefox that supports `navigator.mozApps`.
+    """
+    ua = context['request'].META.get('HTTP_USER_AGENT', '')
+    return check_firefox(ua) == (False, False)

mkt/site/templates/site/helpers/webapp_button.html

@@ -1,6 +1,4 @@
-<button
-    {% for k, v in data_attrs.items() -%}
-        data-{{ k }}="{{ v }}" {% endfor %}
-    class="{{ classes }}">
-        {{ label }}
+<button class="{{ classes }}"
+{%- for k, v in data_attrs.items() -%} data-{{ k }}="{{ v }}" {% endfor %}>
+  {{ label }}
 </button>

mkt/site/templates/site/tiles/app.html

@@ -4,7 +4,7 @@
                    previews[0].thumbnail_url %}
 {% endif %}
 {% set tag = 'a' if link else 'div' %}
-<{{ tag }} class="{{ classes }}"
+<{{ tag }} class="product mkt-tile {{ classes|join(' ') }}"
   {% if link %}href="{{ product.get_url_path()|urlparams(src=data_attrs.src) }}"{% endif %}
   {% for k, v in data_attrs.items() %} data-{{ k }}="{{ v }}"{% endfor %}>
   <div class="icon featured_tile" style="background-image:url({{ product.get_image_asset_url('featured_tile', 16) }})"></div>
@@ -16,7 +16,7 @@
     <h3>{{ product.name }}</h3>
     {# `current_version` won't show versions with invalid statuses #}
     {% if product.current_version %}
-      {{ market_button(product) }}
+      {{ market_button(product, classes=classes) }}
     {% endif %}
     {% if product.listed_authors %}
       <div class="author lineclamp vital">{{ product.listed_authors[0].name }}</div>
@@ -40,6 +40,9 @@ <h3>{{ product.name }}</h3>
       </div>
     {% endif %}
   </div>
+  {% for notice in notices %}
+    <div class="bad-app">{{ notice|safe }}</div>
+  {% endfor %}
 </{{ tag }}>
 <div class="tray previews full">
 </div>

mkt/site/tests/test_helpers.py

@@ -33,7 +33,10 @@ def setUp(self):
         request.check_ownership.return_value = False
         request.GET = {'src': 'foo'}
         request.groups = ()
-        request.GAIA = True
+        request.GAIA = False
+        request.MOBILE = True
+        request.META = {'HTTP_USER_AGENT': 'Mozilla/5.0 (Mobile; rv:17.0) '
+                                           'Gecko/17.0 Firefox/17.0'}
         self.context = {'request': request}
 
     def test_not_webapp(self):
@@ -68,6 +71,21 @@ def test_is_premium_webapp(self):
         eq_(data['purchase'], self.webapp.get_purchase_url())
         eq_(data['isPurchased'], False)
 
+        cls = doc('button').attr('class')
+        assert 'disabled' in cls, 'Unexpected: %r' % cls
+        eq_(doc('.bad-app').text(),
+            'This app is available for purchase only on Firefox OS.')
+
+    def test_is_premium_webapp_gaia(self):
+        self.context['request'].GAIA = True
+        self.make_premium(self.webapp)
+        doc = pq(market_tile(self.context, self.webapp))
+        eq_(doc('.price').text(), '$1.00')
+
+        cls = doc('button').attr('class')
+        assert 'disabled' not in cls, 'Unexpected: %r' % cls
+        eq_(doc('.bad-app').length, 0)
+
     def test_is_premium_webapp_foreign(self):
         self.make_premium(self.webapp)
         with self.activate('fr'):
@@ -89,24 +107,59 @@ def test_is_premium_disabled(self):
         doc = pq(market_tile(self.context, self.webapp))
         cls = doc('button').attr('class')
         assert 'disabled' in cls, 'Unexpected: %r' % cls
+        eq_(doc('.bad-app').text(),
+            'This app is temporarily unavailable for purchase.')
 
     def test_is_desktop_disabled(self):
         self.context['request'].MOBILE = False
+        self.context['request'].META['HTTP_USER_AGENT'] = (
+            'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:18.0) Gecko/18.0 '
+            'Firefox/18.0')
+        doc = pq(market_tile(self.context, self.webapp))
+        cls = doc('button').attr('class')
+        assert 'disabled' in cls, 'Unexpected: %r' % cls
+        eq_(doc('.bad-app').text(),
+            'This app is available only on Firefox for Android and Firefox '
+            'OS.')
+
+    def test_needs_firefox_for_android(self):
+        self.context['request'].META['HTTP_USER_AGENT'] = (
+            'Mozilla/5.0 (Linux; U; Android 2.3.3; en-au; GT-I9100 Build)')
         doc = pq(market_tile(self.context, self.webapp))
         cls = doc('button').attr('class')
         assert 'disabled' in cls, 'Unexpected: %r' % cls
+        eq_(doc('.bad-app').text(),
+            'To use this app, download and install Firefox for Android .')
+
+    def test_needs_firefox_for_android_upgrade(self):
+        # Only Firefox for Android 17.0+ has support for `navigator.mozApps`.
+        self.context['request'].META['HTTP_USER_AGENT'] = (
+            'Mozilla/5.0 (Mobile; rv:16.0) Gecko/16.0 Firefox/16.0')
+        doc = pq(market_tile(self.context, self.webapp))
+        cls = doc('button').attr('class')
+        assert 'disabled' in cls, 'Unexpected: %r' % cls
+        eq_(doc('.bad-app').text(), 'To use this app, upgrade Firefox.')
 
     def test_is_premium_android_disabled(self):
-        self.context['request'].GAIA = False
         self.make_premium(self.webapp)
         doc = pq(market_tile(self.context, self.webapp))
         cls = doc('button').attr('class')
         assert 'disabled' in cls, 'Unexpected: %r' % cls
+        eq_(doc('.bad-app').text(),
+            'This app is available for purchase only on Firefox OS.')
+
+    def test_is_free_enabled_android(self):
+        doc = pq(market_tile(self.context, self.webapp))
+        cls = doc('button').attr('class')
+        assert 'disabled' not in cls, 'Unexpected: %r' % cls
+        eq_(doc('.bad-app').length, 0)
 
-    def test_is_free_android_enabled(self):
+    def test_is_free_enabled_gaia(self):
+        self.context['request'].GAIA = True
         doc = pq(market_tile(self.context, self.webapp))
         cls = doc('button').attr('class')
         assert 'disabled' not in cls, 'Unexpected: %r' % cls
+        eq_(doc('.bad-app').length, 0)
 
     def test_xss(self):
         nasty = '<script>'

mkt/templates/mkt/base.html

@@ -37,6 +37,7 @@
   </head>
   <body class="html-{{ DIR }} {{ CARRIER }} {{ FORCE_MOBILE }} {{ bodyclass }}"
         {% if waffle.switch('anonymous-free-installs') %}data-allow-anon-installs="true"{% endif %}
+        data-allow-installs="{{ allow_installs()|json }}"
         data-user="{{ user_data(amo_user)|json }}"
         data-readonly="{{ settings.READ_ONLY|json }}"
         data-media-url="{{ MEDIA_URL }}"