Bug 1377006 - Part 1: Add disable highlight option in main action button. r=johannh draft
authorsteveck-chung <schung@mozilla.com>
Thu, 27 Jul 2017 16:34:52 +0800
changeset 661165 0ad95fcda824b36b0b7e3fb94093ca2351f81d33
parent 659710 b235fb79d6e017b9f47309cb06eb701c06b7e8d2
child 661166 6265813e87b115b5f9efc4349b4aeb7d16e01de6
push id78655
push userbmo:schung@mozilla.com
push dateFri, 08 Sep 2017 03:08:54 +0000
reviewersjohannh
bugs1377006
milestone57.0a1
Bug 1377006 - Part 1: Add disable highlight option in main action button. r=johannh MozReview-Commit-ID: 5WgQzdxmsNp
browser/base/content/test/popupNotifications/browser_popupNotification_4.js
browser/base/content/test/popupNotifications/head.js
toolkit/content/widgets/notification.xml
toolkit/modules/PopupNotifications.jsm
toolkit/themes/shared/popupnotification.inc.css
--- a/browser/base/content/test/popupNotifications/browser_popupNotification_4.js
+++ b/browser/base/content/test/popupNotifications/browser_popupNotification_4.js
@@ -208,10 +208,24 @@ var tests = [
       };
 
       let notification = showNotification(notifyObj);
       ok(notifyObj.showingCallbackTriggered, "the showing callback was triggered");
       ok(!notifyObj.shownCallbackTriggered, "the shown callback wasn't triggered");
       notification.remove();
       goNext();
     }
-  }
+  },
+  // the main action button should apply non-default(no highlight) style.
+  { id: "Test#11",
+    run() {
+      this.notifyObj = new BasicNotification(this.id);
+      this.notifyObj.mainAction.disableHighlight = true;
+      this.notifyObj.secondaryActions = undefined;
+      this.notification = showNotification(this.notifyObj);
+    },
+    onShown(popup) {
+      checkPopup(popup, this.notifyObj);
+      dismissNotification(popup);
+    },
+    onHidden() { }
+  },
 ];
--- a/browser/base/content/test/popupNotifications/head.js
+++ b/browser/base/content/test/popupNotifications/head.js
@@ -205,16 +205,19 @@ function checkPopup(popup, notifyObj) {
   }
   is(notification.getAttribute("label"), notifyObj.message, "message matches");
   is(notification.id, notifyObj.id + "-notification", "id matches");
   if (notifyObj.mainAction) {
     is(notification.getAttribute("buttonlabel"), notifyObj.mainAction.label,
        "main action label matches");
     is(notification.getAttribute("buttonaccesskey"),
        notifyObj.mainAction.accessKey, "main action accesskey matches");
+    is(notification.getAttribute("buttonhighlight"),
+       (!notifyObj.mainAction.disableHighlight).toString(),
+       "main action highlight matches");
   }
   if (notifyObj.secondaryActions && notifyObj.secondaryActions.length > 0) {
     let secondaryAction = notifyObj.secondaryActions[0];
     is(notification.getAttribute("secondarybuttonlabel"), secondaryAction.label,
        "secondary action label matches");
     is(notification.getAttribute("secondarybuttonaccesskey"),
        secondaryAction.accessKey, "secondary action accesskey matches");
   }
--- a/toolkit/content/widgets/notification.xml
+++ b/toolkit/content/widgets/notification.xml
@@ -544,17 +544,17 @@
             <children/>
           </xul:menupopup>
         </xul:button>
         <xul:button anonid="button"
                     class="popup-notification-button"
                     default="true"
                     label="&defaultButton.label;"
                     accesskey="&defaultButton.accesskey;"
-                    xbl:inherits="oncommand=buttoncommand,label=buttonlabel,accesskey=buttonaccesskey,disabled=mainactiondisabled"/>
+                    xbl:inherits="oncommand=buttoncommand,label=buttonlabel,accesskey=buttonaccesskey,highlight=buttonhighlight,disabled=mainactiondisabled"/>
       </xul:hbox>
     </content>
     <resources>
       <stylesheet src="chrome://global/skin/notification.css"/>
     </resources>
     <implementation>
       <field name="checkbox" readonly="true">
         document.getAnonymousElementByAttribute(this, "anonid", "checkbox");
--- a/toolkit/modules/PopupNotifications.jsm
+++ b/toolkit/modules/PopupNotifications.jsm
@@ -341,16 +341,18 @@ PopupNotifications.prototype = {
    *        action. If present, it must have the following properties:
    *          - label (string): the button's label.
    *          - accessKey (string): the button's accessKey.
    *          - callback (function): a callback to be invoked when the button is
    *            pressed, is passed an object that contains the following fields:
    *              - checkboxChecked: (boolean) If the optional checkbox is checked.
    *          - [optional] dismiss (boolean): If this is true, the notification
    *            will be dismissed instead of removed after running the callback.
+   *          - [optional] disableHighlight (boolean): If this is true, the button
+   *            will not apply the default highlight style.
    *        If null, the notification will have a default "OK" action button
    *        that can be used to dismiss the popup and secondaryActions will be ignored.
    * @param secondaryActions
    *        An optional JavaScript array describing the notification's alternate
    *        actions. The array should contain objects with the same properties
    *        as mainAction. These are used to populate the notification button's
    *        dropdown menu.
    * @param options
@@ -772,16 +774,17 @@ PopupNotifications.prototype = {
       if (Services.prefs.getBoolPref("privacy.permissionPrompts.showCloseButton")) {
         popupnotification.setAttribute("closebuttoncommand", "PopupNotifications._onButtonEvent(event, 'secondarybuttoncommand');");
       } else {
         popupnotification.setAttribute("closebuttoncommand", `PopupNotifications._dismiss(event, ${TELEMETRY_STAT_DISMISSAL_CLOSE_BUTTON});`);
       }
       if (n.mainAction) {
         popupnotification.setAttribute("buttonlabel", n.mainAction.label);
         popupnotification.setAttribute("buttonaccesskey", n.mainAction.accessKey);
+        popupnotification.setAttribute("buttonhighlight", !n.mainAction.disableHighlight);
         popupnotification.setAttribute("buttoncommand", "PopupNotifications._onButtonEvent(event, 'buttoncommand');");
         popupnotification.setAttribute("dropmarkerpopupshown", "PopupNotifications._onButtonEvent(event, 'dropmarkerpopupshown');");
         popupnotification.setAttribute("learnmoreclick", "PopupNotifications._onButtonEvent(event, 'learnmoreclick');");
         popupnotification.setAttribute("menucommand", "PopupNotifications._onMenuCommand(event);");
       } else {
         // Enable the default button to let the user close the popup if the close button is hidden
         popupnotification.setAttribute("buttoncommand", "PopupNotifications._onButtonEvent(event, 'buttoncommand');");
         popupnotification.removeAttribute("buttonlabel");
--- a/toolkit/themes/shared/popupnotification.inc.css
+++ b/toolkit/themes/shared/popupnotification.inc.css
@@ -77,26 +77,26 @@
   background-color: var(--arrowpanel-dimmed-further);
   color: graytext;
 }
 
 .popup-notification-button[default] {
   flex: 0 50%;
 }
 
-.popup-notification-button[default]:not([disabled]) {
+.popup-notification-button[default][highlight="true"]:not([disabled]) {
   background-color: #0996f8;
   color: white;
 }
 
-.popup-notification-button[default]:hover:not([disabled]) {
+.popup-notification-button[default][highlight="true"]:hover:not([disabled]) {
   background-color: #0675d3;
 }
 
-.popup-notification-button[default]:hover:active:not([disabled]) {
+.popup-notification-button[default][highlight="true"]:hover:active:not([disabled]) {
   background-color: #0568ba;
 }
 
 .popup-notification-button[anonid="secondarybutton"][hidden="true"] ~ .popup-notification-button[default] {
   flex: 1;
 }
 
 .popup-notification-button > .button-box {