Bug 1267604 - Permission prompt doorhanger restyle r?Paolo draft
authorJonathan Kingston <jkingston@mozilla.com>
Tue, 24 May 2016 14:34:58 +0100
changeset 399123 72fe49e38c31ef8b65a0f719e194c51e77804fbc
parent 397822 e78975b53563d80c99ebfbdf8a9fbf6b829a8a48
child 527850 cb149a77f520c725090a337a2ca8a42d7c437a4d
push id25743
push userjkingston@mozilla.com
push dateWed, 10 Aug 2016 14:04:23 +0000
reviewersPaolo
bugs1267604
milestone51.0a1
Bug 1267604 - Permission prompt doorhanger restyle r?Paolo MozReview-Commit-ID: 32gS1L20HH2
browser/themes/shared/notification-icons.inc.css
toolkit/content/widgets/notification.xml
toolkit/themes/linux/global/global.css
toolkit/themes/linux/global/notification.css
toolkit/themes/osx/global/global.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/themes/shared/notification-icons.inc.css
+++ b/browser/themes/shared/notification-icons.inc.css
@@ -30,20 +30,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-popup-box > .notification-anchor-icon:not(.in-use):hover {
   fill: #606060;
 }
 
 /* INDIVIDUAL NOTIFICATIONS */
 
--- a/toolkit/content/widgets/notification.xml
+++ b/toolkit/content/widgets/notification.xml
@@ -466,56 +466,61 @@
             }
           ]]>
         </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"/>
-      </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: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: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">
+                      class="popup-notification-button"
+                      default="true"
+                      xbl:inherits="oncommand=buttoncommand,onpopupshown=buttonpopupshown,label=buttonlabel,accesskey=buttonaccesskey"/>
+          <xul:toolbarseparator/>
+          <xul:button type="menu"
+                      class="popup-notification-button popup-notification-dropmarker">
             <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="closebutton" readonly="true">
         document.getAnonymousElementByAttribute(this, "anonid", "closebutton");
       </field>
--- a/toolkit/themes/linux/global/global.css
+++ b/toolkit/themes/linux/global/global.css
@@ -279,16 +279,17 @@ notification > button {
   margin-top: 0;
   margin-bottom: 0;
 }
 
 popupnotificationcontent {
   margin-top: .5em;
 }
 
+
 /* :::::: autoscroll popup ::::: */
 
 .autoscroller {
   height: 28px;
   width: 28px;
   border: none;
   margin: -14px;
   padding: 0;
--- a/toolkit/themes/linux/global/notification.css
+++ b/toolkit/themes/linux/global/notification.css
@@ -61,39 +61,9 @@ 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;
-}
-
-.popup-notification-learnmore-link {
-  margin-top: .5em !important;
-}
-
-.popup-notification-button-container {
-  margin-top: 17px;
-}
-
-.popup-notification-closebutton {
-  margin-inline-end: -10px;
-  margin-top: -6px;
-}
-
-.popup-notification-menubutton > .button-menubutton-button[disabled] {
-  opacity: 0.5;
-}
+%include ../../shared/popupnotification.inc.css
--- a/toolkit/themes/osx/global/global.css
+++ b/toolkit/themes/osx/global/global.css
@@ -264,16 +264,17 @@ notification > button:active:hover:-moz-
 notification > button > .button-box > .button-text {
   margin: 0 !important;
 }
 
 popupnotificationcontent {
   margin-top: .5em;
 }
 
+
 /* :::::: autoscroll popup ::::: */
 
 .autoscroller {
   height: 28px;
   width: 28px;
   border: none;
   margin: -14px;
   padding: 0;
--- a/toolkit/themes/osx/global/notification.css
+++ b/toolkit/themes/osx/global/notification.css
@@ -98,105 +98,16 @@ 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 {
+.popup-notification-button:-moz-focusring {
   box-shadow: @focusRingShadow@;
   position: relative;
 }
 
-.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;
-}
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
@@ -6,58 +6,59 @@
 # actual theme-specific manifests, so that shared resources need only
 # be specified once. As a result, the source file paths are relative
 # to the location of the actual manifest.
 
 toolkit.jar:
 % skin global classic/1.0 %skin/classic/global/
 % skin help classic/1.0 %skin/classic/help/
 % skin mozapps classic/1.0 %skin/classic/mozapps/
-  skin/classic/global/about.css                            (../../shared/about.css)
-  skin/classic/global/aboutCache.css                       (../../shared/aboutCache.css)
-  skin/classic/global/aboutCacheEntry.css                  (../../shared/aboutCacheEntry.css)
-  skin/classic/global/aboutMemory.css                      (../../shared/aboutMemory.css)
-  skin/classic/global/aboutReader.css                      (../../shared/aboutReader.css)
-  skin/classic/global/aboutReaderContent.css               (../../shared/aboutReaderContent.css)
-* skin/classic/global/aboutReaderControls.css              (../../shared/aboutReaderControls.css)
-  skin/classic/global/aboutSupport.css                     (../../shared/aboutSupport.css)
-  skin/classic/global/appPicker.css                        (../../shared/appPicker.css)
-  skin/classic/global/config.css                           (../../shared/config.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/loading.png                    (../../shared/icons/loading.png)
-  skin/classic/global/icons/loading@2x.png                 (../../shared/icons/loading@2x.png)
-  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)
-  skin/classic/global/narrate/forward.svg                  (../../shared/narrate/forward.svg)
-  skin/classic/global/narrate/slow.svg                     (../../shared/narrate/slow.svg)
-  skin/classic/global/narrate/start.svg                    (../../shared/narrate/start.svg)
-  skin/classic/global/narrate/stop.svg                     (../../shared/narrate/stop.svg)
-  skin/classic/global/menu/shared-menu-check@2x.png        (../../shared/menu-check@2x.png)
-  skin/classic/global/menu/shared-menu-check.png           (../../shared/menu-check.png)
-  skin/classic/global/menu/shared-menu-check-active.svg    (../../shared/menu-check-active.svg)
-  skin/classic/global/menu/shared-menu-check-black.svg     (../../shared/menu-check-black.svg)
-  skin/classic/global/menu/shared-menu-check-hover.svg     (../../shared/menu-check-hover.svg)
-  skin/classic/global/in-content/check.svg                 (../../shared/in-content/check.svg)
-  skin/classic/global/in-content/check-partial.svg         (../../shared/in-content/check-partial.svg)
-  skin/classic/global/in-content/dropdown.svg              (../../shared/in-content/dropdown.svg)
-  skin/classic/global/in-content/help-glyph.svg            (../../shared/in-content/help-glyph.svg)
-  skin/classic/global/in-content/radio.svg                 (../../shared/in-content/radio.svg)
-  skin/classic/global/passwordmgr.css                      (../../shared/passwordmgr.css)
-  skin/classic/global/reader/RM-Close-24x24.svg            (../../shared/reader/RM-Close-24x24.svg)
-  skin/classic/global/reader/RM-Minus-24x24.svg            (../../shared/reader/RM-Minus-24x24.svg)
-  skin/classic/global/reader/RM-Plus-24x24.svg             (../../shared/reader/RM-Plus-24x24.svg)
-  skin/classic/global/reader/RM-Type-Controls-24x24.svg    (../../shared/reader/RM-Type-Controls-24x24.svg)
-  skin/classic/global/reader/RM-Type-Controls-Arrow.svg    (../../shared/reader/RM-Type-Controls-Arrow.svg)
+  skin/classic/global/about.css                             (../../shared/about.css)
+  skin/classic/global/aboutCache.css                        (../../shared/aboutCache.css)
+  skin/classic/global/aboutCacheEntry.css                   (../../shared/aboutCacheEntry.css)
+  skin/classic/global/aboutMemory.css                       (../../shared/aboutMemory.css)
+  skin/classic/global/aboutReader.css                       (../../shared/aboutReader.css)
+  skin/classic/global/aboutReaderContent.css                (../../shared/aboutReaderContent.css)
+* skin/classic/global/aboutReaderControls.css               (../../shared/aboutReaderControls.css)
+  skin/classic/global/aboutSupport.css                      (../../shared/aboutSupport.css)
+  skin/classic/global/appPicker.css                         (../../shared/appPicker.css)
+  skin/classic/global/config.css                            (../../shared/config.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/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)
+  skin/classic/global/narrate/forward.svg                   (../../shared/narrate/forward.svg)
+  skin/classic/global/narrate/slow.svg                      (../../shared/narrate/slow.svg)
+  skin/classic/global/narrate/start.svg                     (../../shared/narrate/start.svg)
+  skin/classic/global/narrate/stop.svg                      (../../shared/narrate/stop.svg)
+  skin/classic/global/menu/shared-menu-check@2x.png         (../../shared/menu-check@2x.png)
+  skin/classic/global/menu/shared-menu-check.png            (../../shared/menu-check.png)
+  skin/classic/global/menu/shared-menu-check-active.svg     (../../shared/menu-check-active.svg)
+  skin/classic/global/menu/shared-menu-check-black.svg      (../../shared/menu-check-black.svg)
+  skin/classic/global/menu/shared-menu-check-hover.svg      (../../shared/menu-check-hover.svg)
+  skin/classic/global/in-content/check.svg                  (../../shared/in-content/check.svg)
+  skin/classic/global/in-content/check-partial.svg          (../../shared/in-content/check-partial.svg)
+  skin/classic/global/in-content/dropdown.svg               (../../shared/in-content/dropdown.svg)
+  skin/classic/global/in-content/help-glyph.svg             (../../shared/in-content/help-glyph.svg)
+  skin/classic/global/in-content/radio.svg                  (../../shared/in-content/radio.svg)
+  skin/classic/global/passwordmgr.css                       (../../shared/passwordmgr.css)
+  skin/classic/global/reader/RM-Close-24x24.svg             (../../shared/reader/RM-Close-24x24.svg)
+  skin/classic/global/reader/RM-Minus-24x24.svg             (../../shared/reader/RM-Minus-24x24.svg)
+  skin/classic/global/reader/RM-Plus-24x24.svg              (../../shared/reader/RM-Plus-24x24.svg)
+  skin/classic/global/reader/RM-Type-Controls-24x24.svg     (../../shared/reader/RM-Type-Controls-24x24.svg)
+  skin/classic/global/reader/RM-Type-Controls-Arrow.svg     (../../shared/reader/RM-Type-Controls-Arrow.svg)
   skin/classic/global/reader/RM-Content-Width-Minus-42x16.svg            (../../shared/reader/RM-Content-Width-Minus-42x16.svg)
   skin/classic/global/reader/RM-Content-Width-Plus-44x16.svg             (../../shared/reader/RM-Content-Width-Plus-44x16.svg)
   skin/classic/global/reader/RM-Line-Height-Minus-38x14.svg            (../../shared/reader/RM-Line-Height-Minus-38x14.svg)
   skin/classic/global/reader/RM-Line-Height-Plus-38x24.svg             (../../shared/reader/RM-Line-Height-Plus-38x24.svg)
   skin/classic/global/media/TopLevelImageDocument.css      (../../shared/media/TopLevelImageDocument.css)
   skin/classic/global/media/TopLevelVideoDocument.css      (../../shared/media/TopLevelVideoDocument.css)
   skin/classic/global/media/imagedoc-lightnoise.png        (../../shared/media/imagedoc-lightnoise.png)
   skin/classic/global/media/imagedoc-darknoise.png         (../../shared/media/imagedoc-darknoise.png)
copy from toolkit/themes/osx/global/notification.css
copy to toolkit/themes/shared/popupnotification.inc.css
--- a/toolkit/themes/osx/global/notification.css
+++ b/toolkit/themes/shared/popupnotification.inc.css
@@ -1,202 +1,108 @@
 /* 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/. */
 
-%include shared.inc
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-notification {
-  padding: 3px 3px 4px;
-  text-shadow: none;
-}
-
-notification[type="info"] {
-  color: rgba(255,255,255,0.95);
-  background: linear-gradient(#606060, #404040);
-  border-top: 1px solid #2a2a2a;
-  border-bottom: 1px solid #2a2a2a;
-}
-
-notification[type="warning"] {
-  color: rgba(0,0,0,0.95);
-  background: linear-gradient(#ffe13e, #ffc703);
-  border-top: 1px solid #bf8a01;
-  border-bottom: 1px solid #bf8a01;
-}
-
-notification[type="critical"] {
-  color: rgba(255,255,255,0.95);
-  background: linear-gradient(#d40000, #980000);
-  border-top: 1px solid #5d0000;
-  border-bottom: 1px solid #5d0000;
-}
-
-notificationbox[notificationside="top"] > notification {
-  border-top-style: none;
-}
-
-notificationbox[notificationside="bottom"] > notification {
-  border-bottom-style: none;
-}
-
-.messageText > .text-link {
-  color: inherit !important;
-  text-decoration: underline;
-}
-
-.messageImage {
-  width: 16px;
-  height: 16px;
-  margin: 0 4px;
-}
-
-/* Default icons for notifications */
-
-.messageImage[type="info"] {
-  list-style-image: url("chrome://global/skin/notification/info-icon.png");
-}
-
-.messageImage[type="warning"] {
-  list-style-image: url("chrome://global/skin/notification/warning-icon.png");
-}
-
-.messageImage[type="critical"] {
-  list-style-image: url("chrome://global/skin/notification/error-icon.png");
-}
-
-.messageText {
-  margin: 0 3px !important;
-  padding: 0;
-  font-weight: bold;
-}
-
-.messageCloseButton {
-  -moz-appearance: none;
-  padding: 0;
-  margin: 0 2px;
-  border: none;
-}
-
-/*
- Invert the close icon for @type=info since both are normally dark. It's unclear
- why !important is necessary here so remove it if it's no longer needed.
-*/
-notification[type="info"]:not([value="translation"]) .close-icon:not(:hover) {
-  -moz-image-region: rect(0, 64px, 16px, 48px) !important;
-}
-
-@media (min-resolution: 2dppx) {
-  notification[type="info"]:not([value="translation"]) .close-icon:not(:hover) {
-    -moz-image-region: rect(0, 128px, 32px, 96px) !important;
-  }
-}
-
-.messageCloseButton:-moz-focusring > .toolbarbutton-icon {
-  border-radius: 10000px;
-  box-shadow: 0 0 2px 1px -moz-mac-focusring,
-              0 0 0 2px -moz-mac-focusring inset;
-}
-
-@media (min-resolution: 2dppx) {
-  .messageCloseButton > .toolbarbutton-icon {
-    width: 16px;
-  }
-}
-
 /* Popup notification */
 
+.popup-notification-body-container {
+  padding: var(--panel-arrowcontent-padding);
+}
+
+.popup-notification-icon {
+  width: 32px;
+  height: 32px;
+  margin-inline-end: var(--panel-arrowcontent-padding);
+}
+
 .popup-notification-body {
-  max-width: 25em;
+  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 {
-  margin-top: 17px;
+  background-color: hsla(210,4%,10%,.07);
+  border-top: 1px solid hsla(210,4%,10%,.14);
 }
 
-.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-wrapper {
+  background-color: #0996f8;
 }
 
-.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-button-wrapper > toolbarseparator {
+  border: 0;
+  border-left: 1px solid var(--panel-separator-color);
+  margin: 7px 0 7px;
+  -moz-appearance: none !important;
+}
+
+.popup-notification-button-wrapper:hover > toolbarseparator {
+  margin: 0;
 }
 
-.popup-notification-menubutton > .button-menubutton-button {
+.popup-notification-button {
   -moz-appearance: none;
+  background-color: transparent;
+  color: white;
   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");
+  padding: 0;
+  min-height: 40px;
+  min-width: 0;
+  border: none;
+  padding: 0.9em 2em;
 }
 
-.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-button:hover {
+  outline: 1px solid hsla(210,4%,10%,.07);
+  background-color: #0675d3;
 }
 
-.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-button:hover:active {
+  outline: 1px solid hsla(210,4%,10%,.12);
+  background-color: #0568ba;
+  box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
 }
 
-.popup-notification-closebutton {
-  margin-inline-end: -12px;
-  margin-top: -13px;
+.popup-notification-dropmarker {
+  padding: 0 15px;
 }
 
-.popup-notification-closeitem > .menu-iconic-left {
+.popup-notification-dropmarker > .button-box > hbox {
   display: none;
 }
 
-.popup-notification-menubutton > .button-menubutton-button[disabled] {
+.popup-notification-dropmarker > .button-box > .button-menu-dropmarker {
+  display: -moz-box;
+}
+
+.popup-notification-dropmarker > .button-box > .button-menu-dropmarker > .dropmarker-icon {
+  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,149 +61,9 @@ 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;
-}
-
-.popup-notification-origin {
-  margin-bottom: .3em !important;
-}
-
-.popup-notification-learnmore-link {
-  margin-top: .5em !important;
-}
-
-.popup-notification-button-container {
-  margin-top: 17px;
-}
-
-%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;
-}
+%include ../../shared/popupnotification.inc.css