add app install button for reviewers (bug 753385)

media/css/mkt/reviewers.less

@@ -1,5 +1,7 @@
 @import '../devreg/lib';
 
+@maroon: #800;
+
 h2, h3 {
     margin: 10px 0 0;
 }
@@ -52,7 +54,6 @@ header {
         float: right;
         margin-top: 15px;
         li {
-            display: inline-block;
             margin-left: 10px;
         }
     }
@@ -998,6 +999,7 @@ div.editor-stats-table > div.editor-stats-dark {
     border-bottom: 1px dotted #ccc;
     margin-bottom: 2em;
     padding-bottom: 1em;
+    text-align: center;
 }
 
 #editor-motd textarea {
@@ -1044,3 +1046,65 @@ span.currently_viewing_warning {
         color: @dark-gray;
     }
 }
+
+#actions {
+    li {
+        display: inline-block;
+        max-width: 264px;
+        min-width: 192px;
+        margin-bottom: 20px;
+    }
+    .button {
+        position: relative;
+        z-index: 1;
+        display: block;
+    }
+    .faked-purchase,
+    .approval {
+        .border-radius(0 0 5px 5px);
+        display: block;
+        margin-top: -5px;
+        padding: 15px 15px 10px;
+        position: relative;
+        z-index: 0;
+    }
+    .noApps {
+        text-align: center;
+        margin-top: 10px;
+        line-height: 20px;
+        display: none;
+        a {
+            background: url(../../img/mkt/icons/nightly.png) 5px 0 no-repeat;
+            padding: 0 5px 0 30px;
+            display: inline-block;
+        }
+    }
+    .faked-purchase {
+        .border-radius(0 0 5px 5px);
+        background: fadeOut(@red, 90%);
+        font-size: 12px;
+        text-align: center;
+        b {
+            color: @maroon;
+            display: block;
+            text-transform: uppercase;
+        }
+    }
+    .approval {
+        background: fadeOut(@green, 90%);
+    }
+    .faked-purchase + .approval {
+        margin-top: -15px;
+    }
+    .approval-pitch {
+        display: block;
+        color: @dark-gray;
+        font-size: 12px;
+        font-weight: bold;
+        padding-top: 8px;
+        text-align: center;
+        &:hover {
+            color: @medium-gray;
+        }
+    }
+}

media/js/devreg/init.js

@@ -1,4 +1,15 @@
-var z = {};
+var z = {
+    page: $('#page'),
+    canInstallApps: true
+};
+
+(function() {
+    _.extend(z, {'nav': BrowserUtils()});
+    if (!z.nav.browser.firefox || z.nav.browser.mobile ||
+        VersionCompare.compareVersions(z.nav.browserVersion, '15.0a1') < 0) {
+        z.canInstallApps = false;
+    }
+})();
 
 $(document).ready(function() {
     // Initialize email links.
@@ -26,6 +37,10 @@ $(document).ready(function() {
         anonymous: data_user.anonymous,
         pre_auth: data_user.pre_auth
     });
+
+    if (!z.canInstallApps) {
+        $(window).trigger('app_install_disabled');
+    }
 });
 
 

media/js/mkt/buttons.js

@@ -106,8 +106,15 @@
         revertButton($('.button.error'));
     }).bind('app_install_disabled', function(e, product) {
         // You're not using a compatible browser.
-        var $button = $('.button.product');
+        var $button = $('.button.product'),
+            $noApps = $('.noApps'); // Reviewers page.
+
         setButton($button, $button.html(), 'disabled');
+
+        if ($noApps.length) {
+            $noApps.show();
+        } else {
             $button.parent().append($('#noApps').html());
+        }
     });
 })();

mkt/asset_bundles.py

@@ -66,6 +66,7 @@ CSS = {
         'css/devreg-legacy/developers.less',  # Legacy galore.
     ),
     'mkt/reviewers': (
+        'css/mkt/buttons.less',
         'css/mkt/reviewers.less',
     ),
     'mkt/consumer': (
@@ -113,7 +114,7 @@ CSS = {
 
 JS = {
     'mkt/devreg': (
-        'js/lib/jquery-1.6.4.js',
+        'js/lib/jquery-1.7.1.js',
         'js/lib/webtrends.js',
         'js/lib/underscore.js',
         'js/zamboni/browser.js',
@@ -210,6 +211,11 @@ JS = {
         # Stick.
         'js/lib/stick.js',
     ),
+    'mkt/reviewers': (
+        'js/mkt/apps.js',
+        'js/mkt/install.js',
+        'js/mkt/buttons.js',
+    ),
     'mkt/stats': (
         'js/zamboni/storage.js',
         'js/mkt/modal.js',

mkt/reviewers/templates/reviewers/review.html

@@ -13,14 +13,6 @@
 {% block content %}
 
 <header class="c">
-  <ul id="actions">
-    <li><a href="{{ product.get_url_path() }}" class="button">
-        {{ _('View Listing / Install') }}</a></li>
-    {% if is_admin %}
-      <li><a href="{{ product.get_dev_url() }}" class="button manage">
-        {{ _('Edit') }}</a></li>
-    {% endif %}
-  </ul>
   <h1 class="addon"{{ product.name|locale_html }}>
     <img src="{{ product.icon_url }}" class="icon">
     <span>{{ product.name }}</span>
@@ -41,6 +33,19 @@
       {% if paging.next %} &nbsp; <a href="{{ paging.next_url }}" class="button concealed">&raquo;</a>{% endif %}
     </div>
     {% endif %}
+    <ul id="actions">
+      <li>
+        {{ market_button(product) }}
+        <div class="noApps">You need to be using<br>
+          <a href="https://wiki.mozilla.org/Marketplace/Mozillian_Preview">
+          Firefox Nightly</a><br>to install this app.
+        </div>
+      </li>
+      {% if is_admin %}
+        <li><a href="{{ product.get_dev_url() }}" class="button manage">
+          {{ _('Edit') }}</a></li>
+      {% endif %}
+    </ul>
     <strong>{{ _('Review This App') }}</strong>
     <ul>
       <li><a href="#more-about">{{ _('More Information') }}</a></li>
@@ -234,3 +239,8 @@
 </div> {# /#primary #}
 
 {% endblock %}
+
+{% block js %}
+  {{ js('zamboni/editors') }}
+  {{ js('mkt/reviewers') }}
+{% endblock %}