change button status depending on purchased/installed states (bug 740…

…262, bug 710062, bug 744432)

media/css/mkt/buttons.less

@@ -23,14 +23,6 @@
     text-align: center;
     text-decoration: none;
     text-shadow: 0 1px 0 rgba(0,0,0,.25);
-    &.install, &.premium {
-        .gradient-two-color(@btn-b, @btn-b-dark);
-        &:hover {
-            .box-shadow(0 2px 0 0 rgba(0,0,0,.1),
-                        inset 0 -2px 0 0 rgba(0,0,0,.2),
-                        inset 0 12px 24px 2px @btn-b-lite);
-        }
-    }
     &.delete {
         .gradient-two-color(@btn-r, @btn-r-dark);
         &:hover {
@@ -44,7 +36,62 @@
                     inset 0 -2px 0 0 rgba(0,0,0,.2),
                     inset 0 12px 24px 2px @btn-b-lite);
     }
-    &:link:active {
+}
+
+.button {
+    &.install, &.premium {
+        .gradient-two-color(@btn-b, @btn-b-dark);
+        &:hover {
+            .box-shadow(0 2px 0 0 rgba(0,0,0,.1),
+                        inset 0 -2px 0 0 rgba(0,0,0,.2),
+                        inset 0 12px 24px 2px @btn-b-lite);
+        }
+    }
+}
+
+button[disabled],
+.button.disabled,
+.button.purchasing,
+.button.purchased,
+.button.installing,
+.button.installed {
+    color: #919497;
+    text-shadow: 0 1px 0 rgba(255,255,255,.5);
+}
+
+button[disabled],
+.button.disabled {
+    .gradient-two-color(#ddd, @light-gray);
+    pointer-events: none;
+}
+
+.button {
+    &.install, &.premium {
+        &.purchasing, &.purchased, &.installing, &.installed {
+            .gradient-two-color(#ddd, @light-gray);
+            &:hover {
+                .box-shadow(0 2px 0 0 rgba(0,0,0,.1),
+                            inset 0 -2px 0 0 rgba(0,0,0,.2),
+                            inset 0 12px 24px 2px @light-gray);
+                color: @medium-gray;
+            }
+        }
+        &.error {
+            .gradient-two-color(@btn-r, @btn-r-dark);
+            color: @white;
+            &:hover {
+                .box-shadow(0 2px 0 0 rgba(0,0,0,.1),
+                            inset 0 -2px 0 0 rgba(0,0,0,.2),
+                            inset 0 12px 24px 2px @btn-r-lite);
+            }
+        }
+    }
+    &:link:active,
+    &.purchasing,
+    &:link:active.purchased,
+    &.installing,
+    &:link:active.installed {
+        /* I'm so depressed. */
         .box-shadow(inset 0 2px 0 0 rgba(0,0,0,.2),
                     inset 0 12px 24px 6px rgba(0,0,0,.2),
                     inset 0 0 2px 2px rgba(0,0,0,.2));

media/css/mkt/detail.less

@@ -24,9 +24,8 @@
         margin-bottom: 16px;
         .button {
             display: block;
-            line-height: 32px;
-            color: @white;
             font-size: 18px;
+            line-height: 32px;
             padding-bottom: 2px;
         }
     }

media/css/mkt/forms.less

@@ -107,7 +107,7 @@ label.choice {
 .errorlist,
 .error,
 .error label {
-    color: @red !important;
+    color: @red;
 }
 
 .error {

media/js/mkt/buttons.js

@@ -1 +1,54 @@
-// This page intentionally left blank.
+(function() {
+    function getButton(product) {
+        // Look up button by its manifest URL.
+        return $button = $(format('.button[data-manifestUrl="{0}"]',
+                                 product.manifestUrl));
+    }
+
+    function setButton($button, text, cls) {
+        if (cls == 'purchasing' || cls == 'installing') {
+            // Save the old text of the button if we know we may revert later.
+            $button.data('old-text', $button.html());
+        }
+        $button.html(text);
+        if (cls == 'purchasing' || cls == 'installing') {
+            // The text has changed, so do another linefit.
+            $button.css('font-size', 14).linefit();
+        } else {
+            $button.removeClass('purchasing installing');
+        }
+        $button.addClass(cls);
+    }
+
+    function revertButton($button) {
+        // Cancelled install/purchase. Roll back button to its previous state.
+        $button.html($button.data('old-text'))
+               .removeClass('purchasing');
+        // The text has changed, so do another linefit.
+        $button.css('font-size', 14).linefit();
+    }
+
+    $(window).bind('app_purchase_start', function(e, product) {
+        setButton(getButton(product), gettext('Purchasing…'), 'purchasing');
+    }).bind('app_purchase_success', function(e, product) {
+        setButton(getButton(product), gettext('Purchased'), 'purchased');
+    }).bind('app_install_start', function(e, product) {
+        var $button = getButton(product);
+        setButton(getButton(product), gettext('Installing…'), 'installing');
+    }).bind('app_install_success', function(e, product) {
+        setButton(getButton(product), gettext('Installed'), 'installed');
+    }).bind('app_purchase_error app_install_error', function(e, product, msg) {
+        var $button = getButton(product);
+        if (msg) {
+            setButton($button, gettext('Error'), 'error');
+            alert(msg);
+        } else {
+            // Cancelled install. Roll back.
+            revertButton($button);
+        }
+    });
+})();
+
+
+// Shrink text in buttons so everything fits on one line.
+$('.button').linefit();

media/js/mkt/init.js

@@ -17,6 +17,19 @@ $(document).ready(function() {
             .before(gettext('This feature is temporarily disabled while we ' +
                             'perform website maintenance. Please check back ' +
                             'a little later.'))
-            .find('button, input, select, textarea').attr('disabled', true).addClass('disabled');
+            .find('button, input, select, textarea').attr('disabled', true)
+            .addClass('disabled');
     }
 });
+
+
+$(function() {
+    // Get list of installed apps and mark as such.
+    r = window.navigator.mozApps.getInstalled();
+    r.onsuccess = function() {
+        _.each(r.result, function(val) {
+            $(window).trigger('app_install_success',
+                             {'manifestUrl': val.manifestURL});
+        });
+    };
+});

media/js/mkt/install.js

@@ -26,6 +26,7 @@
     }
 
     function purchase(product) {
+        $(window).trigger('app_purchase_start', product);
         $.when(z.payments.purchase(product))
          .done(purchaseSuccess)
          .fail(purchaseError);
@@ -39,10 +40,12 @@
     }
 
     function purchaseError(product, msg) {
+        $(window).trigger('app_purchase_error', product, msg);
     }
 
     function install(product, receipt) {
         var data = {};
+        $(window).trigger('app_install_start', product);
         $.post(product.recordUrl).success(function(response) {
             if (response.receipt) {
                 data.receipt = response.receipt;
@@ -51,22 +54,25 @@
              .done(installSuccess)
              .fail(installError);
         }).error(function(response) {
-            throw 'Could not record generate receipt!';
+            // Could not record/generate receipt!
+            installError(product);
         });
     }
 
     function installSuccess(product) {
-        $(window).trigger('appinstall', product);
+        $(window).trigger('app_install_success', product);
     }
 
-    function installError(product) {
-        $(window).trigger('appinstallerror', product);
+    function installError(product, msg) {
+        $(window).trigger('app_install_error', product, msg);
     }
 
-    if (localStorage.getItem('toInstall')) {
-        var lsVal = localStorage.getItem('toInstall');
-        localStorage.removeItem('toInstall');
-        var product = JSON.parse(lsVal);
-        startInstall(product);
-    }
+    $(function() {
+        if (localStorage.getItem('toInstall')) {
+            var lsVal = localStorage.getItem('toInstall');
+            localStorage.removeItem('toInstall');
+            var product = JSON.parse(lsVal);
+            startInstall(product);
+        }
+    });
 })();

mkt/asset_bundles.py

@@ -214,13 +214,15 @@
         'js/mkt/init.js',
         'js/mkt/utils.js',
         'js/mkt/browserid.js',
+        'js/zamboni/truncation.js',
         'js/common/keys.js',
         'js/mkt/capabilities.js',
         'js/mkt/fragments.js',
         'js/mkt/slider.js',
         'js/mkt/login.js',
         'js/mkt/install.js',
         'js/mkt/payments.js',
+        'js/mkt/buttons.js',
         'js/mkt/search.js',
         'js/mkt/apps.js',
         'js/zamboni/outgoing_links.js',

mkt/site/helpers.py

@@ -32,18 +32,17 @@ def market_button(context, product):
         label = price_label(product)
         product_dict = product_as_dict(request, product)
         data_attrs = {
-            'product': json.dumps(product_dict, cls=JSONEncoder)
+            'product': json.dumps(product_dict, cls=JSONEncoder),
+            'manifestUrl': product.manifest_url,
         }
         if product.is_premium() and product.premium:
             classes.append('premium')
-            data_attrs.update({
-                'purchase': product.get_purchase_url() + '?',
-                #'start-purchase': product.get_detail_url('purchase.start'),
-                'cost': product.premium.get_price(),
-            })
-        if not product.is_premium() or product.has_purchased(request.amo_user):
+        if not product.is_premium():
             classes.append('install')
             label = _('Install')
+        elif product.has_purchased(request.amo_user):
+            classes.append('install purchased')
+            label = _('Purchased')
         # TODO: Show inline BroswerID login popup for non-authenticated users.
         c = dict(product=product, label=label,
                  data_attrs=data_attrs, classes=' '.join(classes))