Merge pull request #31657 from Cwiiis/bug1200911-new-homescreen-butto…

…n-dismiss-dialog

Bug 1200911 - Homescreen button should dismiss dialogs. r=albertopq

apps/homescreen/js/app.js

@@ -79,24 +79,26 @@ const SETTINGS_VERSION = 0;
     this.cancelDownload = document.getElementById('cancel-download');
     this.resumeDownload = document.getElementById('resume-download');
     this.settingsDialog = document.getElementById('settings');
+    this.dialogs =
+      [this.cancelDownload, this.resumeDownload, this.settingsDialog];
 
     // XXX Working around gaia-components issue #8
-    this.cancelDownload.style.display = 'none';
-    this.resumeDownload.style.display = 'none';
-    this.settingsDialog.style.display = 'none';
+    var dialog;
+    for (dialog of this.dialogs) {
+      dialog.hide();
+    }
 
     // Change the colour of the statusbar when showing dialogs
     var dialogVisibilityCallback = () => {
-      if (this.cancelDownload.style.display !== 'none' ||
-          this.resumeDownload.style.display !== 'none' ||
-          this.settingsDialog.style.display !== 'none') {
-        this.meta.content = 'white';
-      } else {
-        this.meta.content = 'transparent';
+      for (var dialog of this.dialogs) {
+        if (dialog.opened) {
+          this.meta.content = 'white';
+          return;
+        }
       }
+      this.meta.content = 'transparent';
     };
-    for (var dialog of
-         [this.cancelDownload, this.resumeDownload, this.settingsDialog]) {
+    for (dialog of this.dialogs) {
       var observer = new MutationObserver(dialogVisibilityCallback);
       observer.observe(dialog,
         { attributes: true, attributeFilter: ['style'] });
@@ -134,7 +136,7 @@ const SETTINGS_VERSION = 0;
     this.icons.addEventListener('touchcancel', this);
     navigator.mozApps.mgmt.addEventListener('install', this);
     navigator.mozApps.mgmt.addEventListener('uninstall', this);
-    window.addEventListener('hashchange', this);
+    window.addEventListener('hashchange', this, true);
     window.addEventListener('localized', this);
     window.addEventListener('online', this);
 
@@ -809,6 +811,18 @@ const SETTINGS_VERSION = 0;
 
       case 'hashchange':
         if (!document.hidden) {
+          // If a dialog is showing, cancel the dialog
+          for (var dialog of this.dialogs) {
+            if (!dialog.opened) {
+              continue;
+            }
+
+            dialog.close();
+            e.preventDefault();
+            e.stopImmediatePropagation();
+            return;
+          }
+
           if (this.panels.scrollLeft ===
               this.scrollable.parentNode.offsetLeft) {
             this.scrollable.scrollTo({ left: 0, top: 0, behavior: 'smooth' });

apps/homescreen/test/unit/_index.html

@@ -16,23 +16,23 @@
       <div id="edit"></div>
     </div>
 
-    <div id="cancel-download">
+    <div id="cancel-download" class="dialog">
       <section>
         <p class="body">stop-download-body</p>
       </section>
       <button class="action">stop-download-action</button>
       <button>cancel-action</button>
     </div>
 
-    <div id="resume-download">
+    <div id="resume-download" class="dialog">
       <section>
         <p class="body">resume-download-body</p>
       </section>
       <button class="action">resume-download-action</button>
       <button>cancel-action</button>
     </div>
 
-    <div id="settings">
+    <div id="settings" class="dialog">
       <button class="action">homescreen-settings</button>
       <button>cancel-action</button>
     </div>

apps/homescreen/test/unit/app_test.js

@@ -69,6 +69,11 @@ suite('Homescreen app', () => {
 
     loadBodyHTML('_index.html');
     document.head.innerHTML = `<meta name="theme-color" content="transparent">`;
+    for (var dialog of document.querySelectorAll('.dialog')) {
+      dialog.hide = function() {
+        this.style.display = 'none';
+      };
+    }
     app = new App();
   });
 
@@ -639,6 +644,7 @@ suite('Homescreen app', () => {
 
   suite('hashchange', () => {
     test('should scroll to the top of the page', done => {
+      var realScrollable = app.scrollable;
       app.scrollable = {
         scrollTo: (obj) => {
           assert.equal(obj.top, 0);
@@ -651,6 +657,17 @@ suite('Homescreen app', () => {
         }
       };
       app.handleEvent(new CustomEvent('hashchange'));
+      app.scrollable = realScrollable;
+    });
+
+    test('should cancel dialogs', done => {
+      var realDialogs = app.dialogs;
+      app.dialogs = [{
+        close: () => { done(); },
+        opened: () => { return true; }
+      }];
+      app.handleEvent(new CustomEvent('hashchange'));
+      app.dialogs = realDialogs;
     });
   });
 });