Bug 802583 [Apps] App Install Cancellation Prompt r=etiennesegonzac

apps/system/index.html

@@ -599,6 +599,21 @@ <h1>
         </section>
       </form>
 
+      <form id="app-install-cancel-dialog" data-type="confirm" role="dialog" data-z-index-level="app-install-dialog">
+        <section>
+          <h1 data-l10n-id="cancel-install">Cancel Install</h1>
+          <p>
+            <small data-l10n-id="cancelling-will-not-refund">Cancelling will not refund a purchase. Refunds for paid content are provided by the original seller.</small>
+            <small data-l10n-id="apps-can-be-installed-later">Apps can be installed later from the original installation source.</small>
+          </p>
+          <p data-l10n-id="are-you-sure-you-want-to-cancel">Are you sure you want to cancel this install?</p>
+          <menu>
+            <button id="app-install-confirm-cancel-button" type="reset" data-l10n-id="cancel-install">Cancel Install</button>
+            <button id="app-install-resume-button" type="submit" data-l10n-id="resume">Resume</button>
+          </menu>
+        </section>
+      </form>
+
       <div id="lockscreen-camera" data-z-index-level="lockscreen-camera"></div>
 
       <div id="lockscreen" class="uninit" data-panel="main" data-z-index-level="lockscreen">

apps/system/js/app_install_manager.js

@@ -10,6 +10,10 @@ var AppInstallManager = {
     this.authorUrl = document.getElementById('app-install-author-url');
     this.installButton = document.getElementById('app-install-install-button');
     this.cancelButton = document.getElementById('app-install-cancel-button');
+    this.cancelDialog = document.getElementById('app-install-cancel-dialog');
+    this.confirmCancelButton =
+      document.getElementById('app-install-confirm-cancel-button');
+    this.resumeButton = document.getElementById('app-install-resume-button');
 
     window.addEventListener('mozChromeEvent',
       (function ai_handleChromeEvent(e) {
@@ -19,10 +23,13 @@ var AppInstallManager = {
     }).bind(this));
 
     window.addEventListener('applicationinstall',
-                            this.handleApplicationInstall.bind(this));
+      this.handleApplicationInstall.bind(this));
+
 
     this.installButton.onclick = this.handleInstall.bind(this);
-    this.cancelButton.onclick = this.handleCancel.bind(this);
+    this.cancelButton.onclick = this.showCancelDialog.bind(this);
+    this.confirmCancelButton.onclick = this.handleCancel.bind(this);
+    this.resumeButton.onclick = this.hideCancelDialog.bind(this);
   },
 
   handleAppInstallPrompt: function ai_handleInstallPrompt(detail) {
@@ -72,19 +79,12 @@ var AppInstallManager = {
   },
 
   handleInstall: function ai_handleInstall(evt) {
+    if (evt)
+      evt.preventDefault();
     if (this.installCallback)
       this.installCallback();
     this.installCallback = null;
     this.dialog.classList.remove('visible');
-
-    evt.preventDefault();
-  },
-
-  handleCancel: function ai_handleCancel() {
-    if (this.cancelCallback)
-      this.cancelCallback();
-    this.cancelCallback = null;
-    this.dialog.classList.remove('visible');
   },
 
   handleApplicationInstall: function ai_handleApplicationInstall(e) {
@@ -142,6 +142,27 @@ var AppInstallManager = {
     var e = Math.floor(Math.log(bytes) / Math.log(1024));
     return (bytes / Math.pow(1024, Math.floor(e))).toFixed(2) + ' ' +
       _(units[e]);
+  },
+
+  showCancelDialog: function ai_showCancelDialog(evt) {
+    if (evt)
+      evt.preventDefault();
+    this.cancelDialog.classList.add('visible');
+    this.dialog.classList.remove('visible');
+  },
+
+  hideCancelDialog: function ai_hideCancelDialog(evt) {
+    if (evt)
+      evt.preventDefault();
+    this.dialog.classList.add('visible');
+    this.cancelDialog.classList.remove('visible');
+  },
+
+  handleCancel: function ai_handleCancel() {
+    if (this.cancelCallback)
+      this.cancelCallback();
+    this.cancelCallback = null;
+    this.cancelDialog.classList.remove('visible');
   }
 
 };

apps/system/locales/system.en-US.properties

@@ -63,6 +63,11 @@ GB=GB
 TB=TB
 PB=PB
 download-stopped=download stopped
+cancelling-will-not-refund=Cancelling will not refund a purchase. Refunds for paid content are provided by the original seller.
+apps-can-be-installed-later=Apps can be installed later from the original installation source.
+are-you-sure-you-want-to-cancel=Are you sure you want to cancel this install?
+cancel-install=Cancel Install
+resume=Resume
 
 # update manager
 later=Later

apps/system/style/app_install_manager/app_install_manager.css

@@ -1,4 +1,4 @@
-#app-install-dialog {
+#app-install-dialog, #app-install-cancel-dialog {
   display: none;
   position: absolute;
   top: 20px;
@@ -8,16 +8,16 @@
   pointer-events: none;
 }
 
-#app-install-dialog.visible {
+#app-install-dialog.visible, #app-install-cancel-dialog.visible {
   display: inline-block;
   pointer-events: auto;
 }
 
-#app-install-dialog section {
+#app-install-dialog section, #app-install-cancel-dialog section {
   height: auto;
 }
 
-#app-install-dialog h1 {
+#app-install-dialog h1, #app-install-cancel-dialog h1 {
   border-bottom: none;
   background: none;
 }
@@ -40,3 +40,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+#app-install-cancel-dialog small:first-child {
+  margin-bottom: 1rem;
+}

apps/system/style/zindex.css

@@ -192,7 +192,8 @@
 #screen:-moz-full-screen-ancestor > [data-z-index-level="notification-toaster"],
 #screen:-moz-full-screen-ancestor > [data-z-index-level="cards-view"],
 #screen:-moz-full-screen-ancestor > [data-z-index-level="attention-screen"],
-#screen:-moz-full-screen-ancestor > [data-z-index-level="permission-screen"] {
+#screen:-moz-full-screen-ancestor > [data-z-index-level="permission-screen"],
+#screen:-moz-full-screen-ancestor > [data-z-index-level="app-install-dialog"] {
   z-index: 2147483647;
 }
 

apps/system/test/unit/app_install_manager_test.js

@@ -1,5 +1,4 @@
 requireApp('system/js/app_install_manager.js');
-requireApp('system/js/system_banner.js');
 requireApp('system/test/unit/mock_app.js');
 requireApp('system/test/unit/mock_chrome_event.js');
 requireApp('system/test/unit/mock_statusbar.js');
@@ -11,13 +10,18 @@ if (!window.StatusBar) {
   window.StatusBar = null;
 }
 
+if (!window.SystemBanner) {
+  window.SystemBanner = null;
+}
+
 suite('system/AppInstallManager', function() {
   var realL10n;
   var realDispatchResponse;
   var realStatusBar;
   var realSystemBanner;
 
   var fakeDialog;
+  var fakeCancelDialog;
 
   var lastL10nParams = null;
   var lastDispatchedResponse = null;
@@ -41,6 +45,9 @@ suite('system/AppInstallManager', function() {
 
     realStatusBar = window.StatusBar;
     window.StatusBar = MockStatusBar;
+
+    realSystemBanner = window.SystemBanner;
+    window.SystemBanner = MockSystemBanner;
   });
 
   suiteTeardown(function() {
@@ -59,6 +66,9 @@ suite('system/AppInstallManager', function() {
 
     window.StatusBar = realStatusBar;
     realStatusBar = null;
+
+    window.SystemBanner = realSystemBanner;
+    realSystemBanner = null;
   });
 
   setup(function() {
@@ -89,12 +99,40 @@ suite('system/AppInstallManager', function() {
       '</section>'
     ].join('');
 
+    fakeCancelDialog = document.createElement('form');
+    fakeCancelDialog.id = 'app-install-cancel-dialog';
+    fakeCancelDialog.innerHTML = [
+      '<form id="app-install-cancel-dialog" data-type="confirm" ' +
+      'role="dialog" data-z-index-level="app-install-dialog">',
+        '<section>',
+          '<h1 data-l10n-id="cancel-install">Cancel Install</h1>',
+          '<p>',
+            '<small data-l10n-id="cancelling-will-not-refund">Cancelling ' +
+            'will not refund a purchase. Refunds for paid content are ' +
+            'provided by the original seller.</small>',
+            '<small data-l10n-id="apps-can-be-installed-later">Apps can be ' +
+            'installed later from the original installation source.</small>',
+          '</p>',
+          '<p data-l10n-id="are-you-sure-you-want-to-cancel">' +
+          'Are you sure you want to cancel this install?</p>',
+          '<menu>',
+            '<button id="app-install-confirm-cancel-button" type="reset" ' +
+            'data-l10n-id="cancel-install">Cancel Install</button>',
+            '<button id="app-install-resume-button" type="submit" ' +
+            'data-l10n-id="resume">Resume</button>',
+          '</menu>',
+        '</section>',
+      '</form>'
+    ].join('');
+
     document.body.appendChild(fakeDialog);
+    document.body.appendChild(fakeCancelDialog);
     AppInstallManager.init();
   });
 
   teardown(function() {
     fakeDialog.parentNode.removeChild(fakeDialog);
+    fakeCancelDialog.parentNode.removeChild(fakeCancelDialog);
     lastDispatchedResponse = null;
     lastL10nParams = null;
 
@@ -112,13 +150,23 @@ suite('system/AppInstallManager', function() {
         AppInstallManager.installButton.id);
       assert.equal('app-install-cancel-button',
         AppInstallManager.cancelButton.id);
+      assert.equal('app-install-cancel-dialog',
+        AppInstallManager.cancelDialog.id);
+      assert.equal('app-install-confirm-cancel-button',
+        AppInstallManager.confirmCancelButton.id);
+      assert.equal('app-install-resume-button',
+        AppInstallManager.resumeButton.id);
     });
 
     test('should bind to the click event', function() {
       assert.equal(AppInstallManager.handleInstall.name,
                    AppInstallManager.installButton.onclick.name);
-      assert.equal(AppInstallManager.handleCancel.name,
+      assert.equal(AppInstallManager.showCancelDialog.name,
                    AppInstallManager.cancelButton.onclick.name);
+      assert.equal(AppInstallManager.handleCancel.name,
+                   AppInstallManager.confirmCancelButton.onclick.name);
+      assert.equal(AppInstallManager.hideCancelDialog.name,
+                   AppInstallManager.resumeButton.onclick.name);
     });
   });
 
@@ -252,7 +300,29 @@ suite('system/AppInstallManager', function() {
           });
         });
 
-        suite('cancel', function() {
+        suite('show cancel dialog', function() {
+          setup(function() {
+            AppInstallManager.showCancelDialog();
+          });
+
+          test('should show cancel dialog and hide dialog', function() {
+            assert.equal('visible', AppInstallManager.cancelDialog.className);
+            assert.equal('', AppInstallManager.dialog.className);
+          });
+        });
+
+        suite('hide cancel dialog', function() {
+          setup(function() {
+            AppInstallManager.hideCancelDialog();
+          });
+
+          test('should hide cancel dialog and show dialog', function() {
+            assert.equal('', AppInstallManager.cancelDialog.className);
+            assert.equal('visible', AppInstallManager.dialog.className);
+          });
+        });
+
+        suite('confirm cancel', function() {
           setup(function() {
             AppInstallManager.handleCancel();
           });
@@ -263,7 +333,7 @@ suite('system/AppInstallManager', function() {
           });
 
           test('should hide the dialog', function() {
-            assert.equal('', AppInstallManager.dialog.className);
+            assert.equal('', AppInstallManager.cancelDialog.className);
           });
 
           test('should remove the callback', function() {
@@ -344,7 +414,7 @@ suite('system/AppInstallManager', function() {
       test('should remove the icon and display error if we get downloaderror', function() {
         mockApp.mTriggerDownloadError();
         assert.ok(MockStatusBar.wasMethodCalled['decSystemDownloads']);
-        assert.equal(SystemBanner.mMessage, 'Fake hosted app with cache download-stopped');
+        assert.equal(MockSystemBanner.mMessage, 'Fake hosted app with cache download-stopped');
       });
     });
 
@@ -378,7 +448,7 @@ suite('system/AppInstallManager', function() {
       test('should remove the icon and display error if we get downloaderror', function() {
         mockApp.mTriggerDownloadError();
         assert.ok(MockStatusBar.wasMethodCalled['decSystemDownloads']);
-        assert.equal(SystemBanner.mMessage, 'Fake packaged app download-stopped');
+        assert.equal(MockSystemBanner.mMessage, 'Fake packaged app download-stopped');
       });
     });
   });