remove async, add mini browser, add spinner, fix spelling, jslint pass (bug 672560)

apps/addons/templates/addons/contributions_lightbox.html

@@ -8,19 +8,19 @@
           {% trans %}
             Help support the continued development of
             <strong>{{ addon_name }}</strong> by making a small contribution
-            through <a href="{{ paypal_url }}">Paypal</a>.
+            through <a href="{{ paypal_url }}">PayPal</a>.
           {% endtrans %}
         {% elif addon.charity_id == amo.FOUNDATION_ORG %}
           {% trans %}
             To show your support for <b>{{ addon_name }}</b>, the developer asks
             that you make a donation to the <a href="{{ charity_url }}">{{ charity_name }}</a>
-            through <a href="{{ paypal_url }}">Paypal</a>.
+            through <a href="{{ paypal_url }}">PayPal</a>.
           {% endtrans %}
         {% else %}
           {% trans %}
             To show your support for <b>{{ addon_name }}</b>, the developer asks
             that you make a small contribution to <a href="{{ charity_url }}">{{ charity_name }}</a>
-            through <a href="{{ paypal_url }}">Paypal</a>.
+            through <a href="{{ paypal_url }}">PayPal</a>.
           {% endtrans %}
         {% endif %}
       {% endwith %}
@@ -40,7 +40,7 @@
         {{ _('Contribution amount must be a number.') }}
     </div>
     <div class="error" id="paypal-error">
-        {{ _('There was an error communicating with Paypal. Please try again later.') }}
+        {{ _('There was an error communicating with PayPal. Please try again later.') }}
     </div>
     <ul>
       {% if has_suggested %}
@@ -75,9 +75,12 @@
     <textarea name="comment" id="contrib-comment"></textarea>
     <span class="commentlen"></span>
 
-    <button id="contribute-confirm" type="submit" class="prominent">
-      {{ _('Make Contribution') }}
-    </button>
-    <span class="cancel"><a href="#">{{ _('No Thanks') }}</a></span>
+    <div id="contribute-actions">
+        <button id="contribute-confirm" type="submit" class="prominent">
+          {{ _('Make Contribution') }}
+        </button>
+        <span class="js-hidden ajax-loading">{{ _('Contacting PayPal') }}</span>
+        <span class="cancel"><a href="#">{{ _('No Thanks') }}</a></span>
+    </div>
   </form>
 </div>{# /contribute-box #}

media/css/zamboni/zamboni.css

@@ -3361,6 +3361,19 @@ input.ui-autocomplete-loading {
     background-position: right center;
 }
 
+.suggested-amount.ajax-loading,
+#contribute-box .ajax-loading {
+    background-image: url(../../img/zamboni/loading-white.gif);
+    background-repeat: no-repeat;
+    background-position: right center;
+    padding-right: 30px;
+}
+
+#contribute-box .ajax-loading {
+    margin-left: 0px;
+    font-weight: bold;
+}
+
 #popup-staging .popup {
     display: none;
 }

media/js/zamboni/contributions.js

@@ -4,10 +4,18 @@ $(document).ready(function() {
     });
     $('div.contribute a.suggested-amount').live('click', function(event) {
         var el = this;
-        $.getJSON($(this).attr('href') + '&result_type=json',
-            function(json) {
+        $(el).addClass('ajax-loading');
+        $.ajax({
+            url: $(this).attr('href') + '&result_type=json',
+            dataType: 'json',
+            /* false so that the action is considered within bounds of
+             * user interaction and does not trigger the Firefox popup blocker.
+             */
+            async: false,
+            success: function(json) {
                 if (json.paykey) {
-                    dgFlow = new PAYPAL.apps.DGFlow({clicked: el.id});
+                    /* This is supposed to be a global */
+                    dgFlow = new PAYPAL.apps.DGFlow({expType:'mini'});
                     dgFlow.startFlow(json.url);
                 } else {
                     if (!$('#paypal-error').length) {
@@ -16,7 +24,8 @@ $(document).ready(function() {
                     $('#paypal-error').text(json.error).popup(el, {pointTo:el}).render();
                 }
             }
-        );
+        });
+        $(el).removeClass('ajax-loading');
         return false;
     });
     if ($('#paypal-result').length) {
@@ -81,12 +90,16 @@ var contributions = {
                 }
             }
             var $self = $(this);
+            $self.find('#contribute-actions').children().toggleClass('js-hidden');
             $.ajax({type: 'GET',
                 url: $(this).attr('action') + '?result_type=json',
                 data: $(this).serialize(),
+                /* So popup blocker doesn't fire */
+                async: false,
                 success: function(json) {
                     if (json.paykey) {
-                        dgFlow = new PAYPAL.apps.DGFlow({clicked: 'contribute-box'});
+                        /* This is supposed to be a global */
+                        dgFlow = new PAYPAL.apps.DGFlow({expType:'mini'});
                         dgFlow.startFlow(json.url);
                         $self.find('span.cancel a').click();
                     } else {
@@ -94,6 +107,7 @@ var contributions = {
                     }
                 }
             });
+            $self.find('#contribute-actions').children().toggleClass('js-hidden');
             return false;
         });
 
@@ -106,9 +120,11 @@ var contributions = {
                 overlayClass: 'contrib-overlay',
                 onShow: function(hash) {
                     // avoid bleeding-through form elements
-                    if ($.browser.opera) this.inputs = $(':input:visible').css('visibility', 'hidden');
+                    if ($.browser.opera) {
+                        this.inputs = $(':input:visible').css('visibility', 'hidden');
+                    }
                     // clean up, then show box
-                    hash.w.find('.error').hide()
+                    hash.w.find('.error').hide();
                     hash.w
                         .find('input:text').val('').end()
                         .find('textarea').val('').keyup().end()
@@ -117,7 +133,9 @@ var contributions = {
 
                 },
                 onHide: function(hash) {
-                    if ($.browser.opera) this.inputs.css('visibility', 'visible');
+                    if ($.browser.opera) {
+                        this.inputs.css('visibility', 'visible');
+                    }
                     hash.w.find('.error').hide();
                     hash.w.fadeOut();
                     hash.o.remove();
@@ -132,4 +150,4 @@ var contributions = {
         }
     }
 
-}
+};