Added version info to buttons for non-supported add-ons (bug 733089)

Author: Rob Hudson

apps/addons/templates/addons/button.html

@@ -7,6 +7,7 @@
      data-addon="{{ addon.id }}"
      data-icon="{{ addon.icon_url }}"
      data-developers="{{ addon.meet_the_dev_url() }}"
+     data-versions="{{ url('addons.versions', addon.id) }}"
      data-name="{{ addon.name }}"
      {{ b.attrs()|xmlattr }}
   {% if compat %}

apps/addons/templates/addons/includes/button_data_attributes.html

@@ -4,6 +4,7 @@
   data-addon="{{ addon.id }}"
   data-icon="{{ addon.icon_url }}"
   data-developers="{{ addon.meet_the_dev_url() }}"
+  data-versions="{{ url('addons.versions', addon.id) }}"
   data-name="{{ addon.name }}"
   {{ b.attrs()|xmlattr }}
 {# TODO: Fix this when we move purchases logic into mkt/. #}

apps/addons/tests/test_buttons.py

@@ -434,7 +434,7 @@ class TestButtonHtml(ButtonTest):
 
     def test_basics(self):
         a = self.addon
-        a.id = 'addon id'
+        a.id = '12345'
         a.icon_url = 'icon url'
         a.meet_the_dev_url.return_value = 'meet.dev'
         a.name = 'addon name'
@@ -448,9 +448,11 @@ def test_basics(self):
         eq_(doc('.button').length, 1)
 
         install = doc('.install')
-        eq_('addon id', install.attr('data-addon'))
+        eq_('12345', install.attr('data-addon'))
         eq_('icon url', install.attr('data-icon'))
         eq_('meet.dev', install.attr('data-developers'))
+        eq_(reverse('addons.versions', args=[a.id]),
+            install.attr('data-versions'))
         eq_('addon name', install.attr('data-name'))
         eq_(None, install.attr('data-min'))
         eq_(None, install.attr('data-max'))

media/css/impala/buttons.less

@@ -230,15 +230,33 @@ button.bad, .button.bad, .button.developer, .button.scary { // Red
     .extra {
         margin-top: 8px;
     }
-    .notavail {
+    .notavail,
+    .notsupported {
         color: @error-red;
         display: block;
         font-size: 11px;
         margin: 0 0 4px;
     }
-    .acr-incompat {
+    .acr-incompat,
+    .notsupported {
         color: @note-gray;
     }
+    .notsupported span:before {
+        content: "\0B7";
+        padding: 0 4px;
+    }
+}
+
+.listing .notsupported span {
+    display: block;
+    margin-top: 4px;
+    &:before {
+        content: "";
+    }
+}
+
+.versions .notsupported {
+    display: none;
 }
 
 .listing-grid {

media/js/zamboni/buttons.js

@@ -19,6 +19,7 @@ z.button.after = {'contrib': function(xpi_url, status) {
 
 var notavail = '<div class="extra"><span class="notavail">{0}</span></div>',
     incompat = '<div class="extra"><span class="notavail acr-incompat">{0}</span></div>',
+    noappsupport = '<div class="extra"><span class="notsupported">{0}</span></div>',
     download_re = new RegExp('(/downloads/(?:latest|file)/\\d+)');
 
 
@@ -100,6 +101,7 @@ var installButton = function() {
         compatible = $this.attr('data-is-compatible') == 'true',
         waffle_d2c_buttons = $this.hasattr('data-waffle-d2c-buttons'),
         has_overrides = $this.hasattr('data-compat-overrides'),
+        versions_url = $this.attr('data-versions'),
         // L10n: {0} is an app name like Firefox.
         _s = accept_eula ? gettext('Accept and Install') : gettext('Add to {0}'),
         addto = format(_s, [z.appName]),
@@ -309,6 +311,14 @@ var installButton = function() {
             // Good version, good platform.
             $button.addClass('installer');
             $button.closest('div').attr('data-version-supported', true);
+        } else if (!appSupported) {
+            var tpl = template('Works with {app} {min} - {max}' +
+                '<span class="more-versions"><a href="{versions_url}">' +
+                '{versions_link}</a></span>');
+            var context = {'app': z.appName, 'min': min, 'max': max,
+                'versions_url': versions_url,
+                'versions_link': gettext('View other versions')};
+            addWarning(tpl(context), noappsupport);
         }
         return false;
     };