Bug 1702603, use command event for buttons in notificationbar, r=mstriemer
authorNeil Deakin <neil@mozilla.com>
Fri, 09 Apr 2021 16:14:39 +0000
changeset 575281 89a6a6b7c07ec789f30ce12ef6a36aef2ad0c995
parent 575280 45b6eccfb1744b7bb16379ba7e18acd1e3a53b71
child 575282 e2241700c420dcd4f4420a7cc61a352e6abc1ed9
push id140629
push userneil@mozilla.com
push dateFri, 09 Apr 2021 17:48:36 +0000
treeherderautoland@89a6a6b7c07e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmstriemer
bugs1702603
milestone89.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1702603, use command event for buttons in notificationbar, r=mstriemer Differential Revision: https://phabricator.services.mozilla.com/D110875
toolkit/content/tests/chrome/test_notificationbox.xhtml
toolkit/content/widgets/notificationbox.js
--- a/toolkit/content/tests/chrome/test_notificationbox.xhtml
+++ b/toolkit/content/tests/chrome/test_notificationbox.xhtml
@@ -2,16 +2,17 @@
 <?xml-stylesheet href="chrome://global/skin" type="text/css"?>
 <?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?>
 <!--
   XUL Widget Test for notificationbox
   -->
 <window title="Notification Box" width="500" height="600"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>  
+  <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>  
 
   <vbox id="nb"/>
   <menupopup id="menupopup" onpopupshown="this.hidePopup()" onpopuphidden="checkPopupClosed()">
     <menuitem label="One"/>
   </menupopup>
 
   <!-- test results are displayed in the html:body -->
   <body xmlns="http://www.w3.org/1999/xhtml" style="height: 300px; overflow: auto;"/>
@@ -27,16 +28,29 @@ var testtag_notificationbox_buttons = [
   {
     label: "Button 1",
     accesskey: "u",
     callback: testtag_notificationbox_buttonpressed,
     popup: "menupopup"
   }
 ];
 
+var testtag_notificationbox_buttons_nopopup = [
+  {
+    label: "Button 1 No Popup",
+    accesskey: "u",
+    callback: testtag_notificationbox_button1pressed,
+  },
+  {
+    label: "Button 2 No Popup",
+    accesskey: "u",
+    callback: testtag_notificationbox_button2pressed,
+  }
+];
+
 var testtag_notificationbox_links = [
   {
     label: "Link 1",
     callback: testtag_notificationbox_buttonpressed,
     link: "about:mozilla"
   },
   {
     label: "Button 2",
@@ -56,16 +70,20 @@ var testtag_notificationbox_supportpage 
 ];
 
 function testtag_notificationbox_buttonpressed(notification, button)
 {
   SimpleTest.is(button.localName, "button");
   return false;
 }
 
+let buttonsPressedLog = "";
+function testtag_notificationbox_button1pressed(notification, button) { buttonsPressedLog += "button1"; return true; }
+function testtag_notificationbox_button2pressed(notification, button) { buttonsPressedLog += "button2"; return true; }
+
 function testtag_notificationbox(nb)
 {
   testtag_notificationbox_State(nb, "initial", null, 0);
 
   SimpleTest.is(nb.removeAllNotifications(false), undefined, "initial removeAllNotifications");
   testtag_notificationbox_State(nb, "initial removeAllNotifications", null, 0);
   SimpleTest.is(nb.removeAllNotifications(true), undefined, "initial removeAllNotifications immediate");
   testtag_notificationbox_State(nb, "initial removeAllNotifications immediate", null, 0);
@@ -327,16 +345,41 @@ var tests =
       SimpleTest.is(link.localName, "label", "link is a label");
       SimpleTest.is(link.href, "about:mozilla", "link href is correct");
 
       SimpleTest.is(nb.removeAllNotifications(false), undefined, "removeAllNotifications");
     }
   },
   {
     test(nb, ntf) {
+      // append a new notification
+      ntf = nb.appendNotification("Notification", "note", "happy.png",
+                                  nb.PRIORITY_INFO_LOW, testtag_notificationbox_buttons_nopopup);
+      return ntf;
+    },
+    result(nb, ntf) {
+      let buttons = nb.currentNotification.buttonContainer.querySelectorAll("* button");
+
+      buttons[0].focus();
+      synthesizeKey(" ", {});
+      SimpleTest.is(buttonsPressedLog, "button1", "button 1 with keyboard");
+      buttons[1].focus();
+      synthesizeKey(" ", {});
+      SimpleTest.is(buttonsPressedLog, "button1button2", "button 2 with keyboard");
+
+      synthesizeMouseAtCenter(buttons[0], {});
+      SimpleTest.is(buttonsPressedLog, "button1button2button1", "button 1 with mouse");
+      synthesizeMouseAtCenter(buttons[1], {});
+      SimpleTest.is(buttonsPressedLog, "button1button2button1button2", "button 2 with mouse");
+
+      nb.removeAllNotifications(true);
+    }
+  },
+  {
+    test(nb, ntf) {
       ntf = nb.appendNotification("Notification", "note", "happy.png",
                                       nb.PRIORITY_INFO_LOW,
                                       testtag_notificationbox_supportpage,
                                       notification_eventCallback);
       SimpleTest.is(ntf && ntf.localName == NOTIFICATION_LOCAL_NAME, true, "append support page notification");
       return ntf;
     },
     result(nb, ntf) {
--- a/toolkit/content/widgets/notificationbox.js
+++ b/toolkit/content/widgets/notificationbox.js
@@ -583,16 +583,17 @@
         this.messageText.classList.add("notification-message");
         this.buttonContainer = document.createElement("span");
         this.buttonContainer.classList.add("notification-button-container");
 
         this.messageImage = this.shadowRoot.querySelector(".icon");
 
         messageContent.append(this.messageText, this.buttonContainer);
         this.shadowRoot.addEventListener("click", this);
+        this.shadowRoot.addEventListener("command", this);
       }
 
       disconnectedCallback() {
         if (this.eventCallback) {
           this.eventCallback("disconnected");
         }
       }
 
@@ -614,16 +615,20 @@
         window.requestAnimationFrame(() => {
           window.requestAnimationFrame(() => {
             this.container.setAttribute("role", "alert");
           });
         });
       }
 
       handleEvent(e) {
+        if (e.type == "click" && e.target.localName != "label") {
+          return;
+        }
+
         if ("buttonInfo" in e.target) {
           let { buttonInfo } = e.target;
           let { callback, popup } = buttonInfo;
           if (popup) {
             document
               .getElementById(popup)
               .openPopup(
                 e.originalTarget,