Bug 1216161 - XUL notifications on Linux can't be closed. r=MattN

browser/base/content/test/alerts/browser.ini

@@ -2,6 +2,7 @@
 support-files =
   file_dom_notifications.html
 
+[browser_notification_close.js]
 [browser_notification_do_not_disturb.js]
 [browser_notification_open_settings.js]
 [browser_notification_remove_permission.js]

browser/base/content/test/alerts/browser_notification_close.js

@@ -0,0 +1,48 @@
+"use strict";
+
+let tab;
+let notification;
+let notificationURL = "http://example.org/browser/browser/base/content/test/alerts/file_dom_notifications.html";
+
+add_task(function* test_notificationClose() {
+  let pm = Services.perms;
+  pm.add(makeURI(notificationURL), "desktop-notification", pm.ALLOW_ACTION);
+
+  yield BrowserTestUtils.withNewTab({
+    gBrowser,
+    url: notificationURL
+  }, function* dummyTabTask(aBrowser) {
+    let win = aBrowser.contentWindow.wrappedJSObject;
+    notification = win.showNotification2();
+    yield BrowserTestUtils.waitForEvent(notification, "show");
+
+    info("Notification alert showing");
+
+    let alertWindow = Services.wm.getMostRecentWindow("alert:alert");
+    if (!alertWindow) {
+      ok(true, "Notifications don't use XUL windows on all platforms.");
+      notification.close();
+      return;
+    }
+
+    let alertCloseButton = alertWindow.document.querySelector(".alertCloseButton");
+    is(alertCloseButton.localName, "toolbarbutton", "close button found");
+    let promiseBeforeUnloadEvent =
+      BrowserTestUtils.waitForEvent(alertWindow, "beforeunload");
+    let closedTime = alertWindow.Date.now();
+    alertCloseButton.click();
+    info("Clicked on close button");
+    let beforeUnloadEvent = yield promiseBeforeUnloadEvent;
+
+    ok(true, "Alert should close when the close button is clicked");
+    let currentTime = alertWindow.Date.now();
+    // The notification will self-close at 12 seconds, so this checks
+    // that the notification closed before the timeout.
+    ok(currentTime - closedTime < 5000,
+       "Close requested at " + closedTime + ", actually closed at " + currentTime);
+  });
+});
+
+add_task(function* cleanup() {
+  Services.perms.remove(makeURI(notificationURL), "desktop-notification");
+});

browser/base/content/test/alerts/browser_notification_do_not_disturb.js

@@ -64,7 +64,7 @@ function onAlertShowing() {
   is(doNotDisturbMenuItem.localName, "menuitem", "menuitem found");
   alertWindow.addEventListener("beforeunload", onAlertClosing);
   doNotDisturbMenuItem.click();
-  info("Clicked on do-not-disturb menuitem")
+  info("Clicked on do-not-disturb menuitem");
 }
 
 function onAlertClosing(event) {

toolkit/components/alerts/resources/content/alert.js

@@ -131,8 +131,8 @@ function onAlertLoad() {
     let alertBox = document.getElementById("alertBox");
     alertBox.addEventListener("animationend", function hideAlert(event) {
       if (event.animationName == "alert-animation" ||
-          event.animationName == "alert-zoom-animation" ||
-          event.animationName == "alert-fadeout-animation") {
+          event.animationName == "alert-clicked-animation" ||
+          event.animationName == "alert-closing-animation") {
         alertBox.removeEventListener("animationend", hideAlert, false);
         window.close();
       }

toolkit/themes/osx/global/alerts/alert.css

@@ -22,53 +22,6 @@
   color: -moz-DialogText;
 }
 
-#alertBox[animate] {
-  animation-timing-function: cubic-bezier(.12,1.23,.48,1.09);
-}
-
-#alertBox[animate][clicked] {
-  animation-duration: .6s;
-  animation-name: alert-zoom-animation;
-}
-
-/* This is used if the close button is clicked
-   before the animation has finished. */
-#alertBox[animate][closing] {
-  animation-duration: .6s;
-  animation-name: alert-fadeout-animation;
-}
-
-@keyframes alert-animation {
-  from {
-    transform: translate(110%, 0) rotate(-20deg);
-  }
-  5% {
-    transform: none;
-  }
-  95% {
-    transform: none;
-    opacity: 1;
-  }
-  to {
-    transform: translate(0, 60px) rotate(15deg);
-    opacity: 0;
-  }
-}
-
-@keyframes alert-zoom-animation {
-  to {
-    transform: scale(1.5);
-    opacity: 0;
-  }
-}
-
-@keyframes alert-fadeout-animation {
-  to {
-    transform: translate(0, 60px) rotate(15deg);
-    opacity: 0;
-  }
-}
-
 .alertCloseButton {
   -moz-appearance: none;
   padding: 0;

toolkit/themes/shared/alert-common.css

@@ -20,6 +20,53 @@
   border-bottom: 1px solid ThreeDShadow;
 }
 
+#alertBox[animate] {
+  animation-timing-function: cubic-bezier(.12,1.23,.48,1.09);
+}
+
+#alertBox[animate][clicked] {
+  animation-duration: .6s;
+  animation-name: alert-clicked-animation;
+}
+
+/* This is used if the close button is clicked
+   before the animation has finished. */
+#alertBox[animate][closing] {
+  animation-duration: .6s;
+  animation-name: alert-closing-animation;
+}
+
+@keyframes alert-animation {
+  from {
+    transform: translate(110%, 0) rotate(-20deg);
+  }
+  5% {
+    transform: none;
+  }
+  95% {
+    transform: none;
+    opacity: 1;
+  }
+  to {
+    transform: translate(0, 60px) rotate(15deg);
+    opacity: 0;
+  }
+}
+
+@keyframes alert-clicked-animation {
+  to {
+    transform: scale(1.5);
+    opacity: 0;
+  }
+}
+
+@keyframes alert-closing-animation {
+  to {
+    transform: translate(0, 60px) rotate(15deg);
+    opacity: 0;
+  }
+}
+
 #alertImage {
   margin: 8px 0;
   width: 64px;

toolkit/themes/windows/global/alerts/alert.css

@@ -17,53 +17,6 @@
   color: -moz-DialogText;
 }
 
-#alertBox[animate] {
-  animation-timing-function: cubic-bezier(.12,1.23,.48,1.09);
-}
-
-#alertBox[animate][clicked] {
-  animation-duration: .6s;
-  animation-name: alert-zoom-animation;
-}
-
-/* This is used if the close button is clicked
-   before the animation has finished. */
-#alertBox[animate][closing] {
-  animation-duration: .6s;
-  animation-name: alert-fadeout-animation;
-}
-
-@keyframes alert-animation {
-  from {
-    transform: translate(110%, 0) rotate(-20deg);
-  }
-  5% {
-    transform: none;
-  }
-  95% {
-    transform: none;
-    opacity: 1;
-  }
-  to {
-    transform: translate(0, 60px) rotate(15deg);
-    opacity: 0;
-  }
-}
-
-@keyframes alert-zoom-animation {
-  to {
-    transform: scale(1.5);
-    opacity: 0;
-  }
-}
-
-@keyframes alert-fadeout-animation {
-  to {
-    transform: translate(0, 60px) rotate(15deg);
-    opacity: 0;
-  }
-}
-
 .alertCloseButton {
   -moz-appearance: none;
   padding: 4px 2px;