Bug 615315 - Add a small close button to all doorhanger notifications and panels. r=gavin, a=blocking-final

browser/base/content/test/browser_popupNotification.js

@@ -566,6 +566,23 @@ var tests = [
       ok(this.notifyObj.removedCallbackTriggered, "removed callback triggered");
     }
   },
+  // Test notification close button
+  { // Test #18
+    run: function () {
+      this.notifyObj = new basicNotification(),
+      this.notification = showNotification(this.notifyObj);
+    },
+    onShown: function (popup) {
+      checkPopup(popup, this.notifyObj);
+      let notification = popup.childNodes[0];
+      EventUtils.synthesizeMouseAtCenter(notification.closebutton, {});
+    },
+    onHidden: function (popup) {
+      ok(this.notifyObj.dismissalCallbackTriggered, "dismissal callback triggered");
+      this.notification.remove();
+      ok(this.notifyObj.removedCallbackTriggered, "removed callback triggered");
+    }
+  },
 ];
 
 function showNotification(notifyObj) {

browser/base/content/urlbarBindings.xml

@@ -1063,6 +1063,12 @@
           </xul:button>
         </xul:hbox>
       </xul:vbox>
+      <xul:vbox pack="start">
+        <xul:toolbarbutton anonid="closebutton"
+                           class="messageCloseButton popup-notification-closebutton"
+                           xbl:inherits="oncommand=closebuttoncommand"
+                           tooltiptext="&closeNotification.tooltip;"/>
+      </xul:vbox>
     </content>
     <implementation>  
       <constructor><![CDATA[
@@ -1103,6 +1109,12 @@
           </xul:button>
         </xul:hbox>
       </xul:vbox>
+      <xul:vbox pack="start">
+        <xul:toolbarbutton anonid="closebutton"
+                           class="messageCloseButton popup-notification-closebutton"
+                           xbl:inherits="oncommand=closebuttoncommand"
+                           tooltiptext="&closeNotification.tooltip;"/>
+      </xul:vbox>
     </content>
     <implementation>
       <constructor><![CDATA[

toolkit/content/PopupNotifications.jsm

@@ -374,6 +374,7 @@ PopupNotifications.prototype = {
       // in the document.
       popupnotification.setAttribute("id", n.id + "-notification");
       popupnotification.setAttribute("popupid", n.id);
+      popupnotification.setAttribute("closebuttoncommand", "PopupNotifications._dismiss();");
       if (n.mainAction) {
         popupnotification.setAttribute("buttonlabel", n.mainAction.label);
         popupnotification.setAttribute("buttonaccesskey", n.mainAction.accessKey);

toolkit/content/widgets/notification.xml

@@ -441,11 +441,20 @@
           </xul:button>
         </xul:hbox>
       </xul:vbox>
+      <xul:vbox pack="start">
+        <xul:toolbarbutton anonid="closebutton"
+                           class="messageCloseButton popup-notification-closebutton"
+                           xbl:inherits="oncommand=closebuttoncommand"
+                           tooltiptext="&closeNotification.tooltip;"/>
+      </xul:vbox>
     </content>
     <resources>
       <stylesheet src="chrome://global/skin/notification.css"/>
     </resources>
     <implementation>
+      <field name="closebutton" readonly="true">
+        document.getAnonymousElementByAttribute(this, "anonid", "closebutton");
+      </field>
       <field name="button" readonly="true">
         document.getAnonymousElementByAttribute(this, "anonid", "button");
       </field>

toolkit/themes/pinstripe/global/notification.css

@@ -155,6 +155,11 @@ notification[type="critical"] .messageImage {
               0 1px 0 rgba(255,255,255,.1);
 }
 
+.popup-notification-closebutton {
+  -moz-margin-end: -12px;
+  margin-top: -13px;
+}
+
 .popup-notification-closeitem > .menu-iconic-left {
   display: none;
 }

toolkit/themes/winstripe/global/notification.css

@@ -148,6 +148,11 @@ notification[type="critical"] .messageImage {
 }
 %endif
 
+.popup-notification-closebutton {
+  -moz-margin-end: -14px;
+  margin-top: -10px;
+}
+
 .popup-notification-closeitem {
   list-style-image: url("chrome://global/skin/icons/close.png");
   -moz-image-region: rect(0, 16px, 16px, 0);