Bug 1267604 - Restyle doorhanger notifications. r=paolo draft
authorJonathan Kingston <jkt@mozilla.com>
Wed, 02 Nov 2016 09:11:05 +0100
changeset 439155 70a8252b9c07ce9a18c3ae89b13a06790cff133d
parent 439154 bf7023aa973c9b9add2e321269bf3ab3748a1530
child 439156 d23c0923da5dd7659157bc1bc6d659b765509a4a
push id35917
push userpaolo.mozmail@amadzone.org
push dateTue, 15 Nov 2016 14:34:23 +0000
reviewerspaolo
bugs1267604
milestone53.0a1
Bug 1267604 - Restyle doorhanger notifications. r=paolo MozReview-Commit-ID: HBykgFhgjmX
browser/base/content/test/popupNotifications/head.js
browser/base/content/test/webrtc/head.js
browser/themes/shared/notification-icons.inc.css
dom/indexedDB/test/head.js
toolkit/components/passwordmgr/nsLoginManagerPrompter.js
toolkit/components/passwordmgr/test/browser/browser_notifications_2.js
toolkit/content/widgets/notification.xml
toolkit/themes/linux/global/notification.css
toolkit/themes/osx/global/notification.css
toolkit/themes/shared/icons/menubutton-dropmarker-white.svg
toolkit/themes/shared/jar.inc.mn
toolkit/themes/shared/popupnotification.inc.css
toolkit/themes/windows/global/notification.css
--- a/browser/base/content/test/popupNotifications/head.js
+++ b/browser/base/content/test/popupNotifications/head.js
@@ -258,30 +258,26 @@ function onPopupEvent(eventName, callbac
   PopupNotifications.panel.addEventListener(eventName, listener, false);
 }
 
 function triggerMainCommand(popup) {
   let notifications = popup.childNodes;
   ok(notifications.length > 0, "at least one notification displayed");
   let notification = notifications[0];
   info("Triggering main command for notification " + notification.id);
-  // 20, 10 so that the inner button is hit
-  EventUtils.synthesizeMouse(notification.button, 20, 10, {});
+  EventUtils.synthesizeMouseAtCenter(notification.button, {});
 }
 
 function triggerSecondaryCommand(popup, index) {
   let notifications = popup.childNodes;
   ok(notifications.length > 0, "at least one notification displayed");
   let notification = notifications[0];
   info("Triggering secondary command for notification " + notification.id);
-  // Cancel the arrow panel slide-in transition (bug 767133) such that
-  // it won't interfere with us interacting with the dropdown.
-  document.getAnonymousNodes(popup)[0].style.transition = "none";
 
-  notification.button.focus();
+  notification.button.nextSibling.nextSibling.focus();
 
   popup.addEventListener("popupshown", function handle() {
     popup.removeEventListener("popupshown", handle, false);
     info("Command popup open for notification " + notification.id);
     // Press down until the desired command is selected
     for (let i = 0; i <= index; i++) {
       EventUtils.synthesizeKey("VK_DOWN", {});
     }
--- a/browser/base/content/test/webrtc/head.js
+++ b/browser/base/content/test/webrtc/head.js
@@ -300,17 +300,17 @@ function promiseNoPopupNotification(aNam
 }
 
 const kActionAlways = 1;
 const kActionDeny = 2;
 const kActionNever = 3;
 
 function activateSecondaryAction(aAction) {
   let notification = PopupNotifications.panel.firstChild;
-  notification.button.focus();
+  notification.button.nextSibling.nextSibling.focus();
   let popup = notification.menupopup;
   popup.addEventListener("popupshown", function () {
     popup.removeEventListener("popupshown", arguments.callee, false);
 
     // Press 'down' as many time as needed to select the requested action.
     while (aAction--)
       EventUtils.synthesizeKey("VK_DOWN", {});
 
--- a/browser/themes/shared/notification-icons.inc.css
+++ b/browser/themes/shared/notification-icons.inc.css
@@ -34,20 +34,26 @@
 %ifdef MOZ_WIDGET_GTK
     list-style-image: url(moz-icon://stock/gtk-dialog-info?size=dialog);
 %else
     list-style-image: url(chrome://global/skin/icons/information-32.png);
 %endif
   }
 }
 
-.popup-notification-icon {
-  width: 64px;
-  height: 64px;
-  margin-inline-end: 10px;
+#notification-popup > .panel-arrowcontainer > .panel-arrowcontent {
+  /* In order to display the action buttons near the edge of the arrow panel we
+   * have to reset its default padding and specify the padding in the individual
+   * "popupnotification" elements instead. To keep the rounded borders of the
+   * panel, we also have to ensure the contents are clipped to the border box
+   * by hiding the overflow, and we have to override the "display" property so
+   * that the height of the contents is computed correctly in that case. */
+  padding: 0;
+  overflow: hidden;
+  display: block;
 }
 
 .notification-anchor-icon:not(.plugin-blocked):-moz-lwtheme,
 #blocked-permissions-container > .blocked-permission-icon:-moz-lwtheme {
   filter: url(chrome://browser/skin/filters.svg#fill);
   fill: currentColor;
 }
 
--- a/dom/indexedDB/test/head.js
+++ b/dom/indexedDB/test/head.js
@@ -42,32 +42,27 @@ function unregisterAllPopupEventHandlers
 function triggerMainCommand(popup)
 {
   info("triggering main command");
   let notifications = popup.childNodes;
   ok(notifications.length > 0, "at least one notification displayed");
   let notification = notifications[0];
   info("triggering command: " + notification.getAttribute("buttonlabel"));
 
-  // 20, 10 so that the inner button is hit
-  EventUtils.synthesizeMouse(notification.button, 20, 10, {});
+  EventUtils.synthesizeMouseAtCenter(notification.button, {});
 }
 
 function triggerSecondaryCommand(popup, index)
 {
   info("triggering secondary command, " + index);
   let notifications = popup.childNodes;
   ok(notifications.length > 0, "at least one notification displayed");
   let notification = notifications[0];
 
-  // Cancel the arrow panel slide-in transition (bug 767133) such that
-  // it won't interfere with us interacting with the dropdown.
-  SpecialPowers.wrap(document).getAnonymousNodes(popup)[0].style.transition = "none";
-
-  notification.button.focus();
+  notification.button.nextSibling.nextSibling.focus();
 
   popup.addEventListener("popupshown", function () {
     popup.removeEventListener("popupshown", arguments.callee, false);
 
     // Press down until the desired command is selected
     for (let i = 0; i <= index; i++)
       EventUtils.synthesizeKey("VK_DOWN", {});
 
--- a/toolkit/components/passwordmgr/nsLoginManagerPrompter.js
+++ b/toolkit/components/passwordmgr/nsLoginManagerPrompter.js
@@ -798,17 +798,17 @@ LoginManagerPrompter.prototype = {
     let histogram = Services.telemetry.getHistogramById(histogramName);
     histogram.add(PROMPT_DISPLAYED);
 
     let chromeDoc = browser.ownerDocument;
 
     let currentNotification;
 
     let updateButtonStatus = (element) => {
-      let mainActionButton = chromeDoc.getAnonymousElementByAttribute(element.button, "anonid", "button");
+      let mainActionButton = element.button;
       // Disable the main button inside the menu-button if the password field is empty.
       if (login.password.length == 0) {
         mainActionButton.setAttribute("disabled", true);
         chromeDoc.getElementById("password-notification-password")
                  .classList.add("popup-notification-invalid-input");
       } else {
         mainActionButton.removeAttribute("disabled");
         chromeDoc.getElementById("password-notification-password")
--- a/toolkit/components/passwordmgr/test/browser/browser_notifications_2.js
+++ b/toolkit/components/passwordmgr/test/browser/browser_notifications_2.js
@@ -34,17 +34,17 @@ add_task(function* test_empty_password()
       let passwordTextbox = notificationElement.querySelector("#password-notification-password");
       let toggleCheckbox = notificationElement.querySelector("#password-notification-visibilityToggle");
 
       // Synthesize input to empty the field
       passwordTextbox.focus();
       yield EventUtils.synthesizeKey("VK_RIGHT", {});
       yield EventUtils.synthesizeKey("VK_BACK_SPACE", {});
 
-      let mainActionButton = document.getAnonymousElementByAttribute(notificationElement.button, "anonid", "button");
+      let mainActionButton = notificationElement.button;
       Assert.ok(mainActionButton.disabled, "Main action button is disabled");
 
       // Makes sure submiting an empty password throws an error
       Assert.throws(notificationElement.button.doCommand(),
                     "Can't add a login with a null or empty password.",
                     "Should fail for an empty password");
     });
 });
--- a/toolkit/content/widgets/notification.xml
+++ b/toolkit/content/widgets/notification.xml
@@ -481,59 +481,65 @@
             }
           ]]>
         </body>
       </method>
     </implementation>
   </binding>
 
   <binding id="popup-notification">
-    <content>
-      <xul:vbox>
+    <content orient="vertical">
+      <xul:hbox align="start" class="popup-notification-body-container">
         <xul:image class="popup-notification-icon"
                    xbl:inherits="popupid,src=icon,class=iconclass"/>
-      </xul:vbox>
-      <xul:vbox class="popup-notification-body" xbl:inherits="popupid">
-        <xul:hbox align="start">
-          <xul:vbox flex="1">
-            <xul:label class="popup-notification-origin header"
-                       xbl:inherits="value=origin,tooltiptext=origin"
-                       crop="center"/>
-            <xul:description class="popup-notification-description"
-                             xbl:inherits="xbl:text=label,popupid"/>
-          </xul:vbox>
-          <xul:toolbarbutton anonid="closebutton"
-                             class="messageCloseButton close-icon popup-notification-closebutton tabbable"
-                             xbl:inherits="oncommand=closebuttoncommand"
-                             tooltiptext="&closeNotification.tooltip;"/>
-        </xul:hbox>
-        <children includes="popupnotificationcontent"/>
-        <xul:label class="text-link popup-notification-learnmore-link"
-               xbl:inherits="onclick=learnmoreclick,href=learnmoreurl">&learnMore;</xul:label>
-        <xul:checkbox anonid="checkbox"
-                      xbl:inherits="hidden=checkboxhidden,checked=checkboxchecked,label=checkboxlabel,oncommand=checkboxcommand" />
-        <xul:description class="popup-notification-warning" xbl:inherits="hidden=warninghidden,xbl:text=warninglabel"/>
-        <xul:spacer flex="1"/>
-        <xul:hbox class="popup-notification-button-container"
-                  pack="end" align="center">
-          <children includes="button"/>
+        <xul:vbox flex="1" pack="start"
+                  class="popup-notification-body" xbl:inherits="popupid">
+          <xul:hbox align="start">
+            <xul:vbox flex="1">
+              <xul:label class="popup-notification-origin header"
+                         xbl:inherits="value=origin,tooltiptext=origin"
+                         crop="center"/>
+              <xul:description class="popup-notification-description"
+                               xbl:inherits="xbl:text=label,popupid"/>
+            </xul:vbox>
+            <xul:toolbarbutton anonid="closebutton"
+                               class="messageCloseButton close-icon popup-notification-closebutton tabbable"
+                               xbl:inherits="oncommand=closebuttoncommand"
+                               tooltiptext="&closeNotification.tooltip;"/>
+          </xul:hbox>
+          <children includes="popupnotificationcontent"/>
+          <xul:label class="text-link popup-notification-learnmore-link"
+                     xbl:inherits="onclick=learnmoreclick,href=learnmoreurl">&learnMore;</xul:label>
+          <xul:checkbox anonid="checkbox"
+                        xbl:inherits="hidden=checkboxhidden,checked=checkboxchecked,label=checkboxlabel,oncommand=checkboxcommand" />
+          <xul:description class="popup-notification-warning" xbl:inherits="hidden=warninghidden,xbl:text=warninglabel"/>
+        </xul:vbox>
+      </xul:hbox>
+      <xul:hbox pack="end" class="popup-notification-button-container">
+        <children includes="button"/>
+        <xul:hbox class="popup-notification-button-wrapper">
           <xul:button anonid="button"
-                      class="popup-notification-menubutton"
-                      type="menu-button"
-                      xbl:inherits="oncommand=buttoncommand,onpopupshown=buttonpopupshown,label=buttonlabel,accesskey=buttonaccesskey,disabled=mainactiondisabled">
+                      class="popup-notification-button"
+                      default="true"
+                      xbl:inherits="oncommand=buttoncommand,label=buttonlabel,accesskey=buttonaccesskey,disabled=mainactiondisabled"/>
+          <xul:toolbarseparator/>
+          <xul:button type="menu"
+                      class="popup-notification-button popup-notification-dropmarker"
+                      xbl:inherits="onpopupshown=buttonpopupshown">
             <xul:menupopup anonid="menupopup"
+                           position="after_end"
                            xbl:inherits="oncommand=menucommand">
               <children/>
               <xul:menuitem class="menuitem-iconic popup-notification-closeitem"
                             label="&closeNotificationItem.label;"
                             xbl:inherits="oncommand=closeitemcommand,hidden=hidenotnow"/>
             </xul:menupopup>
           </xul:button>
         </xul:hbox>
-      </xul:vbox>
+      </xul:hbox>
     </content>
     <resources>
       <stylesheet src="chrome://global/skin/notification.css"/>
     </resources>
     <implementation>
       <field name="checkbox" readonly="true">
         document.getAnonymousElementByAttribute(this, "anonid", "checkbox");
       </field>
--- a/toolkit/themes/linux/global/notification.css
+++ b/toolkit/themes/linux/global/notification.css
@@ -61,39 +61,14 @@ notification[type="critical"] {
   list-style-image: url("moz-icon://stock/gtk-dialog-error?size=menu");
 }
 
 .messageCloseButton {
   padding-left: 11px;
   padding-right: 11px;
 }
 
-/* Popup notification */
-
-.popup-notification-body {
-  max-width: 25em;
-}
-
-.popup-notification-origin:not([value]),
-.popup-notification-learnmore-link:not([href]) {
-  display: none;
-}
-
-.popup-notification-origin {
-  margin-bottom: .3em !important;
-}
+%include ../../shared/popupnotification.inc.css
 
-.popup-notification-learnmore-link {
-  margin-top: .5em !important;
-}
-
-.popup-notification-button-container {
-  margin-top: 17px;
+.popup-notification-button:focus {
+  outline: 1px -moz-dialogtext dotted;
+  outline-offset: -5px;
 }
-
-.popup-notification-closebutton {
-  margin-inline-end: -10px;
-  margin-top: -6px;
-}
-
-.popup-notification-menubutton > .button-menubutton-button[disabled] {
-  opacity: 0.5;
-}
--- a/toolkit/themes/osx/global/notification.css
+++ b/toolkit/themes/osx/global/notification.css
@@ -98,109 +98,23 @@ notification[type="info"]:not([value="tr
 }
 
 @media (min-resolution: 2dppx) {
   .messageCloseButton > .toolbarbutton-icon {
     width: 16px;
   }
 }
 
-/* Popup notification */
-
-.popup-notification-body {
-  max-width: 25em;
-}
-
-.popup-notification-origin:not([value]),
-.popup-notification-learnmore-link:not([href]) {
-  display: none;
-}
-
-.popup-notification-origin {
-  margin-bottom: .3em !important;
-}
+%include ../../shared/popupnotification.inc.css
 
-.popup-notification-learnmore-link {
-  margin-top: .5em !important;
-}
-
-.popup-notification-button-container {
-  margin-top: 17px;
-}
-
-.popup-notification-menubutton {
-  -moz-appearance: none;
-}
-
-.popup-notification-menubutton:not([type="menu-button"]):-moz-focusring,
-.popup-notification-menubutton:-moz-focusring > .button-menubutton-dropmarker,
-.popup-notification-menubutton > .button-menubutton-button:-moz-focusring {
-  box-shadow: @focusRingShadow@;
-  position: relative;
+.popup-notification-button:focus {
+  outline: 2px -moz-mac-focusring solid;
+  outline-offset: -2px;
 }
 
-.popup-notification-menubutton:not([type="menu-button"]),
-.popup-notification-menubutton > .button-menubutton-button,
-.popup-notification-menubutton > .button-menubutton-dropmarker {
-  -moz-appearance: none;
-  color: #434343;
-  border-radius: 4px;
-  border: 1px solid #b5b5b5;
-  background: linear-gradient(#fff, #f2f2f2);
-  box-shadow: inset 0 1px rgba(255,255,255,.8),
-              inset 0 0 1px rgba(255,255,255,.25),
-              0 1px rgba(255,255,255,.3);
-  background-clip: padding-box;
-  background-origin: padding-box;
-  padding: 2px 6px;
-}
-
-.popup-notification-menubutton > .button-menubutton-button {
-  -moz-appearance: none;
-  margin: 0;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  padding-inline-start: 8px;
-  padding-inline-end: 5px;
-}
-
-.popup-notification-menubutton > .button-menubutton-dropmarker {
-  padding: 7px 8px;
-  margin-top: 0;
-  margin-bottom: 0;
-  margin-inline-start: -1px;
-  list-style-image: url("chrome://global/skin/icons/panel-dropmarker.png");
-}
-
-.popup-notification-menubutton > .button-menubutton-button:-moz-locale-dir(ltr),
-.popup-notification-menubutton > .button-menubutton-dropmarker:-moz-locale-dir(rtl) {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-.popup-notification-menubutton > .button-menubutton-button:-moz-locale-dir(rtl),
-.popup-notification-menubutton > .button-menubutton-dropmarker:-moz-locale-dir(ltr) {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.popup-notification-menubutton:not([type="menu-button"]):hover:active,
-.popup-notification-menubutton > .button-menubutton-button:hover:active,
-.popup-notification-menubutton[open="true"] > .button-menubutton-dropmarker {
-  box-shadow: inset 0 1px 4px -3px #000, 0 1px rgba(255, 255, 255, 0.3);
-}
-
-.popup-notification-closebutton {
-  margin-inline-end: -12px;
-  margin-top: -13px;
-}
-
-.popup-notification-closeitem > .menu-iconic-left {
-  display: none;
-}
-
-.popup-notification-menubutton > .button-menubutton-button[disabled] {
-  opacity: 0.5;
+/* This is changed due to hover transparency looking invisible when buttons are hovered */
+.popup-notification-button-wrapper {
+  --panel-separator-color: white;
 }
 
 .popup-notification-warning {
   color: #aa1b08;
 }
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/icons/menubutton-dropmarker-white.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="16" height="16" viewBox="0 0 16 16">
+  <path fill="#fff" d="m 2,6 6,6 6,-6 -1.5,-1.5 -4.5,4.5 -4.5,-4.5 z" />
+</svg>
--- a/toolkit/themes/shared/jar.inc.mn
+++ b/toolkit/themes/shared/jar.inc.mn
@@ -22,16 +22,17 @@ toolkit.jar:
   skin/classic/global/appPicker.css                        (../../shared/appPicker.css)
   skin/classic/global/config.css                           (../../shared/config.css)
   skin/classic/global/timepicker.css                       (../../shared/timepicker.css)
   skin/classic/global/icons/find-arrows.svg                (../../shared/icons/find-arrows.svg)
   skin/classic/global/icons/info.svg                       (../../shared/incontent-icons/info.svg)
   skin/classic/global/icons/input-clear.svg                (../../shared/icons/input-clear.svg)
   skin/classic/global/icons/loading.png                    (../../shared/icons/loading.png)
   skin/classic/global/icons/loading@2x.png                 (../../shared/icons/loading@2x.png)
+  skin/classic/global/icons/menubutton-dropmarker-white.svg (../../shared/icons/menubutton-dropmarker-white.svg)
   skin/classic/global/icons/warning.svg                    (../../shared/incontent-icons/warning.svg)
   skin/classic/global/icons/blocked.svg                    (../../shared/incontent-icons/blocked.svg)
   skin/classic/global/alerts/alert-common.css              (../../shared/alert-common.css)
   skin/classic/global/narrate.css                          (../../shared/narrate.css)
   skin/classic/global/narrateControls.css                  (../../shared/narrateControls.css)
   skin/classic/global/narrate/arrow.svg                    (../../shared/narrate/arrow.svg)
   skin/classic/global/narrate/back.svg                     (../../shared/narrate/back.svg)
   skin/classic/global/narrate/fast.svg                     (../../shared/narrate/fast.svg)
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/shared/popupnotification.inc.css
@@ -0,0 +1,113 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.popup-notification-body-container {
+  padding: var(--arrowpanel-padding);
+}
+
+.popup-notification-icon {
+  width: 32px;
+  height: 32px;
+  margin-inline-end: var(--arrowpanel-padding);
+}
+
+.popup-notification-body {
+  width: 25em;
+}
+
+.popup-notification-body description,
+.popup-notification-body label {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
+.popup-notification-closebutton {
+  margin-inline-end: -8px;
+  margin-top: -8px;
+}
+
+.popup-notification-origin:not([value]),
+.popup-notification-learnmore-link:not([href]) {
+  display: none;
+}
+
+.popup-notification-origin {
+  margin-bottom: .3em !important;
+}
+
+.popup-notification-learnmore-link {
+  margin-top: .5em !important;
+}
+
+.popup-notification-button-container {
+  background-color: var(--arrowpanel-dimmed);
+  border-top: 1px solid var(--panel-separator-color);
+}
+
+.popup-notification-button-wrapper {
+  background-color: #0996f8;
+}
+
+.popup-notification-button-wrapper > toolbarseparator {
+  -moz-appearance: none;
+  border: 0;
+  border-left: 1px solid var(--panel-separator-color);
+  margin: 7px 0 7px;
+  min-width: 0;
+}
+
+.popup-notification-button-wrapper:hover > toolbarseparator {
+  margin: 0;
+}
+
+.popup-notification-button {
+  -moz-appearance: none;
+  background-color: transparent;
+  color: white;
+  margin: 0;
+  padding: 0 18px;
+  min-height: 40px;
+  min-width: 0;
+  border: none;
+}
+
+.popup-notification-button:hover {
+  outline: 1px solid var(--arrowpanel-dimmed);
+  background-color: #0675d3;
+}
+
+.popup-notification-button:hover:active {
+  outline: 1px solid var(--arrowpanel-dimmed-further);
+  background-color: #0568ba;
+  box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
+}
+
+.popup-notification-dropmarker {
+  padding: 0 15px;
+}
+
+/* prevent double border on windows when focused */
+.popup-notification-button > .button-box {
+  border: none;
+}
+
+.popup-notification-dropmarker > .button-box > hbox {
+  display: none;
+}
+
+.popup-notification-dropmarker > .button-box > .button-menu-dropmarker {
+  /* This is to override the linux !important */
+  -moz-appearance: none !important;
+  display: -moz-box;
+}
+
+.popup-notification-dropmarker > .button-box > .button-menu-dropmarker > .dropmarker-icon {
+  width: 16px;
+  height: 16px;
+  list-style-image: url(chrome://global/skin/icons/menubutton-dropmarker-white.svg);
+}
+
+.popup-notification-button[disabled] {
+  opacity: 0.5;
+}
--- a/toolkit/themes/windows/global/notification.css
+++ b/toolkit/themes/windows/global/notification.css
@@ -61,155 +61,26 @@ notification[type="critical"] {
   padding: 4px 2px;
   border: none !important;
 }
 
 .messageCloseButton > .toolbarbutton-icon {
   margin-inline-end: 5px;
 }
 
-/* Popup notification */
-
-.popup-notification-body {
-  max-width: 25em;
-}
-
-.popup-notification-origin:not([value]),
-.popup-notification-learnmore-link:not([href]) {
-  display: none;
-}
+%include ../../shared/popupnotification.inc.css
 
-.popup-notification-origin {
-  margin-bottom: .3em !important;
-}
-
-.popup-notification-learnmore-link {
-  margin-top: .5em !important;
-}
-
-.popup-notification-button-container {
-  margin-top: 17px;
+.popup-notification-button:focus {
+  outline: 1px -moz-dialogtext dotted;
+  outline-offset: -1px;
 }
 
-%ifdef XP_WIN
-/*
-XXX: apply styles to all themes until bug 509642 is fixed
-@media (-moz-windows-default-theme) {
-*/
-  .popup-notification-menubutton {
-    -moz-appearance: none;
-    border-radius: 3px;
-    padding: 0;
-    background-color: rgba(250,250,250,.3)
-  }
-
-  .popup-notification-menubutton:hover:active {
-    border-color: rgba(0,0,0,.5);
-  }
-
-  .popup-notification-menubutton:not([type="menu-button"]),
-  .popup-notification-menubutton > .button-menubutton-button,
-  .popup-notification-menubutton > .button-menubutton-dropmarker {
-    -moz-appearance: none;
-    margin: 0;
-    border: 1px solid rgba(0,0,0,.35);
-
-    box-shadow: 0 1px 0 rgba(255,255,255,.5) inset,
-                0 2px 2px rgba(255,255,255,.35) inset,
-                0 -1px 2px rgba(0,0,0,.1) inset,
-                0 1px 0 rgba(255,255,255,.35);
-
-  }
-
-  @media (-moz-windows-glass) {
-    .popup-notification-menubutton:not([type="menu-button"]),
-    .popup-notification-menubutton > .button-menubutton-button,
-    .popup-notification-menubutton > .button-menubutton-dropmarker {
-      background-color: transparent;
-      background-image: linear-gradient(rgba(250,250,250,.6), rgba(175,175,175,.25) 49%, rgba(0,0,0,.12) 51%, rgba(0,0,0,.09) 60%, rgba(0,0,0,.05));
-      box-shadow: 0 0 1px 1px rgba(255,255,255,.75) inset;
-    }
-  }
-
-  .popup-notification-menubutton > .button-menubutton-button {
-    background-color: transparent;
-    padding: 1px;
-    border-inline-end: none;
-  }
-
-  .popup-notification-menubutton:not([type="menu-button"]),
-  .popup-notification-menubutton > .button-menubutton-button > .button-box {
-    padding-inline-start: 8px;
-    padding-inline-end: 5px;
-  }
-
-  .popup-notification-menubutton > .button-menubutton-dropmarker {
-    padding: 9px 5px 8px;
-    width: auto;
-    height: auto;
-    list-style-image: url("chrome://global/skin/arrow/arrow-dn-sharp.gif");
-  }
-
-  .popup-notification-menubutton:-moz-focusring > .button-menubutton-dropmarker {
-    outline: 1px dotted ThreeDDarkShadow;
-    outline-offset: -3px;
-  }
-
-  @media (-moz-windows-glass) {
-    .popup-notification-menubutton > .button-menubutton-button:-moz-locale-dir(ltr),
-    .popup-notification-menubutton > .button-menubutton-dropmarker:-moz-locale-dir(rtl) {
-      border-radius: 2px 0 0 2px;
-    }
-
-    .popup-notification-menubutton > .button-menubutton-button:-moz-locale-dir(rtl),
-    .popup-notification-menubutton > .button-menubutton-dropmarker:-moz-locale-dir(ltr) {
-      border-radius: 0 2px 2px 0;
-    }
-  }
-
-  .popup-notification-menubutton:not([type="menu-button"]):hover,
-  .popup-notification-menubutton > .button-menubutton-button:hover,
-  .popup-notification-menubutton > .button-menubutton-dropmarker:hover {
-    background-color: rgba(250,250,250,.6);
-  }
-
-  .popup-notification-menubutton:not([type="menu-button"]):hover:active,
-  .popup-notification-menubutton > .button-menubutton-button:hover:active,
-  .popup-notification-menubutton > .button-menubutton-dropmarker:hover:active,
-  .popup-notification-menubutton[open="true"] > .button-menubutton-dropmarker {
-    background-color: rgba(0,0,0,.05);
-    box-shadow: 0 0 2px rgba(0,0,0,.65) inset;
-  }
-
-  @media (-moz-windows-glass) {
-    .popup-notification-menubutton:not([type="menu-button"]):hover,
-    .popup-notification-menubutton > .button-menubutton-button:hover,
-    .popup-notification-menubutton > .button-menubutton-dropmarker:hover {
-      background-color: transparent;
-      background-image: linear-gradient(rgba(250,250,250,.9), rgba(200,200,200,.6) 49%, rgba(0,0,0,.23) 51%, rgba(0,0,0,.17) 60%, rgba(0,0,0,.05));
-      box-shadow: 0 0 0 1px white inset,
-                  0 0 2px 1px rgba(255,255,255,.75) inset;
-    }
-    .popup-notification-menubutton:not([type="menu-button"]):hover:active,
-    .popup-notification-menubutton > .button-menubutton-button:hover:active,
-    .popup-notification-menubutton > .button-menubutton-dropmarker:hover:active,
-    .popup-notification-menubutton[open="true"] > .button-menubutton-dropmarker {
-      background-color: transparent;
-      background-image: linear-gradient(rgba(250,250,250,.9), rgba(200,200,200,.6) 49%, rgba(0,0,0,.23) 51%, rgba(0,0,0,.17) 60%, rgba(0,0,0,.05));
-    }
-  }
-/*}*/
-%endif
-
-.popup-notification-closebutton {
-  margin-inline-end: -14px;
-  margin-top: -10px;
-}
-
-.popup-notification-menubutton > .button-menubutton-button[disabled] {
-  opacity: 0.5;
+/* Override default icon size which is too small for this dropdown */
+.popup-notification-dropmarker > .button-box > .button-menu-dropmarker {
+  width: 16px;
+  height: 16px;
 }
 
 @media (-moz-windows-default-theme) {
   .popup-notification-warning {
     color: #aa1b08;
   }
 }