Preserve modals in case of app install errors (bug 708362)

Author: kumar303

media/css/impala/apps.less

@@ -98,3 +98,14 @@
 #myappsTrustedIFrame {
     z-index: 2002 !important;
 }
+
+.inner-modal-error {
+    h2, p {
+        color: @error-red;
+    }
+    p {
+        padding-bottom: 0.5em;
+        border-bottom: 1px solid @light-gray;
+        margin-bottom: 1em;
+    }
+}

media/js/zamboni/apps.js

@@ -84,22 +84,35 @@ exports.install = function(manifestUrl, opt) {
 };
 
 exports._showError = function(errSummary, errMessage, opt) {
-    var $errTarget = $('<a>');
+    var $errTarget = $('<a>'),
+        $visibleModals,
+        $innerErr,
+        win = opt.window || window;
     if (opt.mobile) {
-        var $errBox = $('.apps-error-msg h2', opt.domContext);
         $('.apps-error-msg h2', opt.domContext).text(errSummary);
         $('.apps-error-msg p', opt.domContext).text(errMessage);
         $('.apps-error-msg', opt.domContext).show();
         $(opt.domContext).trigger('mobile_error_shown.apps');
     } else {
-        var $modal = $('.apps-error-msg:first', opt.domContext).modal(
-                                                $errTarget,
-                                                {width: '400px', close: true,
-                                                 callback: opt.errModalCallback
-                                             });
-        $errTarget.trigger('click');  // show the modal
-        $('.apps-error-msg h2', opt.domContext).text(errSummary);
-        $('.apps-error-msg p', opt.domContext).text(errMessage);
+        $visibleModals = $('.modal:visible', opt.domContext);
+        if ($visibleModals.length) {
+            $innerErr = $('.inner-modal-error', $visibleModals);
+            if (!$innerErr.length) {
+                $innerErr = $('<div class="inner-modal-error"><h2></h2><p></p></div>');
+                $('.modal-inside', $visibleModals).prepend($innerErr);
+            }
+            $('h2', $innerErr).text(errSummary);
+            $('p', $innerErr).text(errMessage);
+            $(win).trigger('resize');
+        } else {
+            // Create a new modal:
+            $('.apps-error-msg:first', opt.domContext).modal($errTarget,
+                                                             {width: '400px', close: true,
+                                                              callback: opt.errModalCallback});
+            $errTarget.trigger('click');  // show the modal
+            $('.apps-error-msg h2', opt.domContext).text(errSummary);
+            $('.apps-error-msg p', opt.domContext).text(errMessage);
+        }
         $(opt.domContext).trigger('error_shown.apps');
     }
 

media/js/zamboni/tests/apps_tests.js

@@ -4,6 +4,7 @@ $(document).ready(function(){
 module('apps errors', {
     setup: function() {
         this.sandbox = tests.createSandbox('#apps-error-msg');
+        $('.modal', this.sandbox).hide();
     },
     teardown: function() {
         this.sandbox.remove();
@@ -88,9 +89,27 @@ test('test successful app install', function() {
 });
 
 
+asyncTest('test append to visible modal', function() {
+    var $sb = $(this.sandbox);
+    // Simulate a popup:
+    $sb.append('<div class="existing modal"><div class="modal-inside"></div></div>');
+    $sb.one('error_shown.apps', function() {
+        equals($('.existing .inner-modal-error h2', $sb).text(),
+               'App installation not allowed');
+        equals($('.existing .inner-modal-error p', $sb).text(),
+               'detailed message');
+        start();
+    });
+    this.installAppWithError('http://nice.com/nice.webapp',
+                             {code: 'permissionDenied',
+                              message: "detailed message"});
+});
+
+
 module('apps as wrapper', {
     setup: function() {
         this.sandbox = tests.createSandbox('#apps-error-msg');
+        $('.modal', this.sandbox).hide();
     },
     teardown: function() {
         this.sandbox.remove();