Bug 1267604 - Permission prompt doorhanger restyle draft
authorJonathan Kingston <jkingston@mozilla.com>
Tue, 24 May 2016 14:34:58 +0100
changeset 372194 4034d92f58157e06cc2686ba774d258f7c4a6d60
parent 370278 f6e1ee9ac46c73705320caa6a208e6a017f3bdd8
child 522124 a3b7122389ef6465f8111d509a2876807476d781
push id19467
push userjkingston@mozilla.com
push dateFri, 27 May 2016 18:06:37 +0000
bugs1267604
milestone49.0a1
Bug 1267604 - Permission prompt doorhanger restyle MozReview-Commit-ID: 32gS1L20HH2
browser/base/content/popup-notifications.inc
browser/themes/shared/notification-icons.inc.css
toolkit/content/widgets/notification.xml
toolkit/themes/linux/global/button.css
toolkit/themes/linux/global/global.css
toolkit/themes/linux/global/icons/panelarrow-down-inverted.svg
toolkit/themes/linux/global/jar.mn
toolkit/themes/linux/global/notification.css
toolkit/themes/linux/global/popup.css
toolkit/themes/osx/global/global.css
toolkit/themes/osx/global/icons/panelarrow-down-inverted.svg
toolkit/themes/osx/global/jar.mn
toolkit/themes/osx/global/notification.css
toolkit/themes/osx/global/popup.css
toolkit/themes/windows/global/icons/panelarrow-down-inverted.svg
toolkit/themes/windows/global/jar.mn
--- a/browser/base/content/popup-notifications.inc
+++ b/browser/base/content/popup-notifications.inc
@@ -5,53 +5,54 @@
            footertype="promobox"
            position="after_start"
            hidden="true"
            orient="vertical"
            noautofocus="true"
            role="alert"/>
 
     <popupnotification id="webRTC-shareDevices-notification" hidden="true">
-      <popupnotificationcontent id="webRTC-selectCamera" orient="vertical">
-        <label value="&getUserMedia.selectCamera.label;"
-               accesskey="&getUserMedia.selectCamera.accesskey;"
-               control="webRTC-selectCamera-menulist"/>
+      <popupnotificationcontent id="webRTC-selectCamera" class="popup-notification-control">
+        <image accesskey="&getUserMedia.selectCamera.accesskey;"
+               control="webRTC-selectCamera-menulist">
+        </image>
         <menulist id="webRTC-selectCamera-menulist">
           <menupopup id="webRTC-selectCamera-menupopup"/>
         </menulist>
       </popupnotificationcontent>
 
-      <popupnotificationcontent id="webRTC-selectWindowOrScreen" orient="vertical">
-        <label id="webRTC-selectWindow-label"
-               control="webRTC-selectWindow-menulist"/>
+      <popupnotificationcontent id="webRTC-selectWindowOrScreen" class="popup-notification-control">
+        <image id="webRTC-selectWindow-label"
+               control="webRTC-selectWindow-menulist">
+        </image>
         <menulist id="webRTC-selectWindow-menulist"
                   oncommand="gWebRTCUI.updateMainActionLabel(this);">
           <menupopup id="webRTC-selectWindow-menupopup"/>
         </menulist>
         <description id="webRTC-all-windows-shared" hidden="true">&getUserMedia.allWindowsShared.message;</description>
       </popupnotificationcontent>
 
-      <popupnotificationcontent id="webRTC-selectMicrophone" orient="vertical">
-        <label value="&getUserMedia.selectMicrophone.label;"
-               accesskey="&getUserMedia.selectMicrophone.accesskey;"
-               control="webRTC-selectMicrophone-menulist"/>
+      <popupnotificationcontent id="webRTC-selectMicrophone" class="popup-notification-control">
+        <image accesskey="&getUserMedia.selectMicrophone.accesskey;"
+               control="webRTC-selectMicrophone-menulist">
+        </image>
         <menulist id="webRTC-selectMicrophone-menulist">
           <menupopup id="webRTC-selectMicrophone-menupopup"/>
         </menulist>
       </popupnotificationcontent>
     </popupnotification>
 
     <popupnotification id="servicesInstall-notification" hidden="true">
       <popupnotificationcontent orient="vertical" align="start">
         <!-- XXX bug 974146, tests are looking for this, can't remove yet. -->
       </popupnotificationcontent>
     </popupnotification>
 
     <popupnotification id="pointerLock-notification" hidden="true">
-      <popupnotificationcontent orient="vertical" align="start">
+      <popupnotificationcontent align="start">
         <label id="pointerLock-cancel">&pointerLock.notification.message;</label>
       </popupnotificationcontent>
     </popupnotification>
 
     <popupnotification id="password-notification" hidden="true">
       <popupnotificationcontent orient="vertical">
         <textbox id="password-notification-username"/>
         <textbox id="password-notification-password" type="password" show-content=""/>
--- a/browser/themes/shared/notification-icons.inc.css
+++ b/browser/themes/shared/notification-icons.inc.css
@@ -1,18 +1,45 @@
 %if 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/. */
 %endif
 
+.popup-notification-control {
+  margin-top: .5em;
+  margin-inline-end: var(--panel-arrowcontent-spacing-size);
+  /* Align with main icon center */
+  margin-inline-start: calc(-16px - calc(var(--panel-arrowcontent-spacing-size) * 1.5));
+}
+
 .popup-notification-icon {
-  width: 64px;
-  height: 64px;
+  width: calc(var(--panel-arrowcontent-spacing-size) * 2);
+  height: calc(var(--panel-arrowcontent-spacing-size) * 2);
   margin-inline-end: 10px;
+  margin-inline-start: 0;
+}
+
+image[control="webRTC-selectCamera-menulist"],
+image[control="webRTC-selectWindow-menulist"],
+image[control="webRTC-selectMicrophone-menulist"] {
+  width: var(--panel-arrowcontent-spacing-size);
+  margin-inline-end: var(--panel-arrowcontent-spacing-size);
+}
+
+image[control="webRTC-selectCamera-menulist"] {
+  background: url(chrome://browser/skin/webRTC-shareDevice-64.png) center / var(--panel-arrowcontent-spacing-size) no-repeat;
+}
+
+image[control="webRTC-selectWindow-menulist"] {
+  background: url(chrome://browser/skin/webRTC-shareScreen-64.png) center / var(--panel-arrowcontent-spacing-size) no-repeat;
+}
+
+image[control="webRTC-selectMicrophone-menulist"] {
+  background: url(chrome://browser/skin/webRTC-shareMicrophone-64.png) center / var(--panel-arrowcontent-spacing-size) no-repeat;
 }
 
 .popup-notification-icon[popupid="geolocation"] {
   list-style-image: url(chrome://browser/skin/Geolocation-64.png);
 }
 
 .popup-notification-icon[popupid="xpinstall-disabled"],
 .popup-notification-icon[popupid="addon-install-blocked"],
--- a/toolkit/content/widgets/notification.xml
+++ b/toolkit/content/widgets/notification.xml
@@ -467,35 +467,36 @@
           ]]>
         </body>
       </method>
     </implementation>
   </binding>
 
   <binding id="popup-notification">
     <content>
-      <xul:vbox>
-        <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:image class="popup-notification-icon"
+                     align="center"
+                     xbl:inherits="popupid,src=icon"/>
+          <xul:vbox flex="1" pack="center">
             <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:vbox class="popup-notification-contents">
+          <children includes="popupnotificationcontent"/>
+        </xul:vbox>
         <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:button anonid="button"
                       class="popup-notification-menubutton"
--- a/toolkit/themes/linux/global/button.css
+++ b/toolkit/themes/linux/global/button.css
@@ -120,16 +120,36 @@ button[type="menu-button"] {
   margin: 0;
 }
 
 .button-menu-dropmarker,
 .button-menubutton-dropmarker {
   -moz-appearance: toolbarbutton-dropdown !important;
 }
 
+.popup-notification-body .button-menubutton-dropmarker {
+  --main-color: #5295e5;
+  -moz-appearance: none !important;
+  background: var(--main-color);
+  border: 1px solid var(--main-color);
+  padding: 2rem 1rem;
+  margin: 0;
+  color: #fff;
+}
+
+.popup-notification-body .button-menubutton-dropmarker image {
+  list-style-image: url("chrome://global/skin/icons/panelarrow-down-inverted.svg");
+}
+
+.popup-notification-body .button-menubutton-dropmarker[open="true"] {
+  --main-color: #3579ca;
+  background: var(--main-color);
+  border: 1px solid var(--main-color);
+}
+
 .button-menubutton-dropmarker {
   margin-inline-end: 3px;
 }
 
 /* ::::: plain buttons ::::: */
 
 button.plain {
   border: 0px !important;
--- a/toolkit/themes/linux/global/global.css
+++ b/toolkit/themes/linux/global/global.css
@@ -275,20 +275,16 @@ label[disabled="true"] {
   outline: 1px dotted;
 }
 
 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;
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/linux/global/icons/panelarrow-down-inverted.svg
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- 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:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16"
+   height="16"
+   viewBox="0 0 16 16"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="panelarrow-down-inverted.svg">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2592"
+     inkscape:window-height="1741"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="14.75"
+     inkscape:cx="8"
+     inkscape:cy="8"
+     inkscape:window-x="63"
+     inkscape:window-y="24"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2" />
+  <polygon
+     points="10.5,14 12,12.5 7.625,8 12,3.5 10.5,2 4.625,8 "
+     id="polygon4"
+     transform="matrix(0,-1,1,0,0.3125,16.3125)"
+     style="fill:#ffffff" />
+</svg>
--- a/toolkit/themes/linux/global/jar.mn
+++ b/toolkit/themes/linux/global/jar.mn
@@ -42,16 +42,17 @@ toolkit.jar:
 
    skin/classic/global/icons/Authentication.png                (icons/Authentication.png)
    skin/classic/global/icons/autocomplete-search.svg           (icons/autocomplete-search.svg)
    skin/classic/global/icons/autoscroll.png                    (icons/autoscroll.png)
    skin/classic/global/icons/blacklist_favicon.png             (icons/blacklist_favicon.png)
    skin/classic/global/icons/blacklist_large.png               (icons/blacklist_large.png)
    skin/classic/global/icons/close.svg                         (icons/close.svg)
    skin/classic/global/icons/loading.png                       (icons/loading.png)
+   skin/classic/global/icons/panelarrow-down-inverted.svg      (icons/panelarrow-down-inverted.svg)
    skin/classic/global/icons/panelarrow-horizontal.svg         (icons/panelarrow-horizontal.svg)
    skin/classic/global/icons/panelarrow-vertical.svg           (icons/panelarrow-vertical.svg)
    skin/classic/global/icons/resizer.png                       (icons/resizer.png)
    skin/classic/global/icons/sslWarning.png                    (icons/sslWarning.png)
 
 *  skin/classic/global/in-content/common.css                   (in-content/common.css)
 *  skin/classic/global/in-content/info-pages.css               (in-content/info-pages.css)
    skin/classic/global/toolbar/spring.png                      (toolbar/spring.png)
--- a/toolkit/themes/linux/global/notification.css
+++ b/toolkit/themes/linux/global/notification.css
@@ -64,17 +64,56 @@ notification[type="critical"] {
 .messageCloseButton {
   padding-left: 11px;
   padding-right: 11px;
 }
 
 /* Popup notification */
 
 .popup-notification-body {
-  max-width: 25em;
+  max-width: 30em;
+}
+
+.popup-notification-menubutton {
+  margin: 0;
+}
+
+.popup-notification-contents,
+.popup-notification-learnmore-link {
+   margin: 0;
+  /* icon margin left (spacing size) + icon width (*2 spacing size) + label/description padding (6px) */
+  margin-inline-start: calc(calc(var(--panel-arrowcontent-spacing-size) * 3) + 16px) !important;
+}
+
+.popup-notification-body hbox:first-of-type {
+  margin: var(--panel-arrowcontent-spacing-size) var(--panel-arrowcontent-spacing-size) 0 var(--panel-arrowcontent-spacing-size) !important;
+}
+
+.popup-notification-body hbox:first-of-type vbox * {
+  margin-inline-start: 0;
+}
+
+.popup-notification-origin:first-child {
+  margin-block-start: 0;
+}
+
+.popup-notification-body .button-menubutton-button {
+  --main-color: #5295e5;
+  -moz-appearance: none;
+  background: var(--main-color);
+  border: 1px solid var(--main-color);
+  padding: 2rem;
+  margin: 0;
+  color: #fff;
+}
+
+.popup-notification-body .button-menubutton-button[buttondown="true"] {
+  --main-color: #3579ca;
+  background: var(--main-color);
+  border: 1px solid var(--main-color);
 }
 
 .popup-notification-origin:not([value]),
 .popup-notification-learnmore-link:not([href]) {
   display: none;
 }
 
 .popup-notification-origin {
@@ -85,15 +124,15 @@ notification[type="critical"] {
   margin-top: .5em !important;
 }
 
 .popup-notification-button-container {
   margin-top: 17px;
 }
 
 .popup-notification-closebutton {
-  margin-inline-end: -10px;
-  margin-top: -6px;
+  margin-inline-end: -16px;
+  margin-top: -16px;
 }
 
 .popup-notification-menubutton > .button-menubutton-button[disabled] {
   opacity: 0.5;
 }
--- a/toolkit/themes/linux/global/popup.css
+++ b/toolkit/themes/linux/global/popup.css
@@ -1,22 +1,32 @@
 /* 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/. */
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 /* ::::: Variables ::::: */
 .panel-arrowcontent {
+  --panel-arrowcontent-spacing-size: 22px;
   --panel-arrowcontent-padding: 10px;
   --panel-arrowcontent-background: -moz-Dialog;
   --panel-arrowcontent-color: -moz-DialogText;
   --panel-arrowcontent-border: 1px solid ThreeDShadow;
 }
 
+#notification-popup .panel-arrowcontent {
+  --panel-arrowcontent-padding: 0px;
+  --panel-arrowcontent-background: white;
+}
+
+#notification-popup .popup-notification-button-container, #notification-popup .panel-arrowcontent popupnotification {
+  margin: 0;
+}
+
 /* ::::: menupopup ::::: */
 
 menupopup,
 panel {
   -moz-appearance: menupopup;
   min-width: 1px;
   color: MenuText;
 }
--- a/toolkit/themes/osx/global/global.css
+++ b/toolkit/themes/osx/global/global.css
@@ -260,20 +260,16 @@ notification > button:-moz-focusring {
 notification > button:active:hover:-moz-focusring {
   box-shadow: @focusRingShadow@, @roundButtonPressedShadow@;
 }
 
 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;
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/osx/global/icons/panelarrow-down-inverted.svg
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- 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:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16"
+   height="16"
+   viewBox="0 0 16 16"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="panelarrow-down-inverted.svg">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2592"
+     inkscape:window-height="1741"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="14.75"
+     inkscape:cx="8"
+     inkscape:cy="8"
+     inkscape:window-x="63"
+     inkscape:window-y="24"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2" />
+  <polygon
+     points="10.5,14 12,12.5 7.625,8 12,3.5 10.5,2 4.625,8 "
+     id="polygon4"
+     transform="matrix(0,-1,1,0,0.3125,16.3125)"
+     style="fill:#ffffff" />
+</svg>
--- a/toolkit/themes/osx/global/jar.mn
+++ b/toolkit/themes/osx/global/jar.mn
@@ -63,16 +63,17 @@ toolkit.jar:
   skin/classic/global/arrow/arrow-rit-dis.gif                        (arrow/arrow-rit-dis.gif)
   skin/classic/global/arrow/arrow-rit-hov.gif                        (arrow/arrow-rit-hov.gif)
   skin/classic/global/arrow/arrow-rit-sharp-end.gif                  (arrow/arrow-rit-sharp-end.gif)
   skin/classic/global/arrow/arrow-rit-sharp.gif                      (arrow/arrow-rit-sharp.gif)
   skin/classic/global/arrow/arrow-rit.gif                            (arrow/arrow-rit.gif)
   skin/classic/global/arrow/arrow-up-dis.gif                         (arrow/arrow-up-dis.gif)
   skin/classic/global/arrow/arrow-up-sharp.gif                       (arrow/arrow-up-sharp.gif)
   skin/classic/global/arrow/arrow-up.gif                             (arrow/arrow-up.gif)
+  skin/classic/global/icons/panelarrow-down-inverted.svg             (icons/panelarrow-down-inverted.svg)
   skin/classic/global/arrow/panelarrow-horizontal.png                (arrow/panelarrow-horizontal.png)
   skin/classic/global/arrow/panelarrow-horizontal@2x.png             (arrow/panelarrow-horizontal@2x.png)
   skin/classic/global/arrow/panelarrow-vertical.png                  (arrow/panelarrow-vertical.png)
   skin/classic/global/arrow/panelarrow-vertical@2x.png               (arrow/panelarrow-vertical@2x.png)
   skin/classic/global/checkbox/cbox-check.gif                        (checkbox/cbox-check.gif)
   skin/classic/global/checkbox/cbox-check-dis.gif                    (checkbox/cbox-check-dis.gif)
   skin/classic/global/console/console-error-caret.gif                (console/console-error-caret.gif)
   skin/classic/global/console/console-error-dash.gif                 (console/console-error-dash.gif)
--- a/toolkit/themes/osx/global/notification.css
+++ b/toolkit/themes/osx/global/notification.css
@@ -101,17 +101,44 @@ notification[type="info"]:not([value="tr
   .messageCloseButton > .toolbarbutton-icon {
     width: 16px;
   }
 }
 
 /* Popup notification */
 
 .popup-notification-body {
-  max-width: 25em;
+  max-width: 30em;
+}
+
+.popup-notification-menubutton {
+  margin: 0;
+}
+
+.popup-notification-control menulist {
+  margin-inline-start: 0;
+}
+
+.popup-notification-contents,
+.popup-notification-learnmore-link {
+   margin: 0;
+  /* icon margin left (spacing size) + icon width (*2 spacing size) + label/description padding (6px) */
+  margin-inline-start: calc(calc(var(--panel-arrowcontent-spacing-size) * 3) + 16px) !important;
+}
+
+.popup-notification-body hbox:first-of-type {
+  margin: var(--panel-arrowcontent-spacing-size) var(--panel-arrowcontent-spacing-size) 0 var(--panel-arrowcontent-spacing-size) !important;
+}
+
+.popup-notification-body hbox:first-of-type vbox * {
+  margin-inline-start: 0 !important;
+}
+
+.popup-notification-origin:first-child {
+  margin-block-start: 0;
 }
 
 .popup-notification-origin:not([value]),
 .popup-notification-learnmore-link:not([href]) {
   display: none;
 }
 
 .popup-notification-origin {
@@ -122,57 +149,64 @@ notification[type="info"]:not([value="tr
   margin-top: .5em !important;
 }
 
 .popup-notification-button-container {
   margin-top: 17px;
 }
 
 .popup-notification-menubutton {
+  --main-color: #5295e5;
   -moz-appearance: none;
+  background: var(--main-color) !important;
 }
 
 .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-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 {
+.popup-notification-menubutton > .button-menubutton-button,
+.popup-notification-body .button-menubutton-dropmarker {
   -moz-appearance: none;
+  border: 1px solid var(--main-color);
+  border-radius: 0;
+  padding: 2rem;
   margin: 0;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  padding-inline-start: 8px;
-  padding-inline-end: 5px;
+  color: #fff;
 }
 
-.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-body .button-menubutton-button[buttondown="true"] {
+  --main-color: #3579ca;
+  background: var(--main-color);
+}
+
+.popup-notification-body .button-menubutton-dropmarker {
+  padding: 2rem 1rem;
+}
+
+.popup-notification-body .button-menubutton-dropmarker image {
+  list-style-image: url("chrome://global/skin/icons/panelarrow-down-inverted.svg");
+}
+
+.popup-notification-body .button-menubutton-dropmarker[open="true"] {
+  --main-color: #3579ca;
+  background: var(--main-color) !important;
 }
 
 .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;
 }
 
@@ -184,18 +218,18 @@ notification[type="info"]:not([value="tr
 
 .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;
+  margin-inline-end: -16px;
+  margin-top: -16px;
 }
 
 .popup-notification-closeitem > .menu-iconic-left {
   display: none;
 }
 
 .popup-notification-menubutton > .button-menubutton-button[disabled] {
   opacity: 0.5;
--- a/toolkit/themes/osx/global/popup.css
+++ b/toolkit/themes/osx/global/popup.css
@@ -1,22 +1,32 @@
 /* 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/. */
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
 .panel-arrowcontent {
+  --panel-arrowcontent-spacing-size: 22px;
   --panel-arrowcontent-padding: 16px;
   --panel-arrowcontent-background: linear-gradient(hsla(0,0%,99%,1), hsla(0,0%,99%,.975) 10%, hsla(0,0%,98%,.975));
   --panel-arrowcontent-color: hsl(0,0%,10%);
   --panel-arrowcontent-border: none;
   --panel-arrowcontent-border-radius: 3.5px;
 }
 
+#notification-popup .panel-arrowcontent {
+  --panel-arrowcontent-padding: 0px;
+  --panel-arrowcontent-background: white;
+}
+
+#notification-popup .popup-notification-button-container, #notification-popup .panel-arrowcontent popupnotification {
+  margin: 0;
+}
+
 menupopup,
 panel {
   -moz-appearance: menupopup;
   background-color: Menu;
 }
 
 menupopup > menu > menupopup {
   margin-top: -4px;
new file mode 100644
--- /dev/null
+++ b/toolkit/themes/windows/global/icons/panelarrow-down-inverted.svg
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- 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:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="16"
+   height="16"
+   viewBox="0 0 16 16"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="panelarrow-down-inverted.svg">
+  <metadata
+     id="metadata10">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2592"
+     inkscape:window-height="1741"
+     id="namedview6"
+     showgrid="false"
+     inkscape:zoom="14.75"
+     inkscape:cx="8"
+     inkscape:cy="8"
+     inkscape:window-x="63"
+     inkscape:window-y="24"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg2" />
+  <polygon
+     points="10.5,14 12,12.5 7.625,8 12,3.5 10.5,2 4.625,8 "
+     id="polygon4"
+     transform="matrix(0,-1,1,0,0.3125,16.3125)"
+     style="fill:#ffffff" />
+</svg>
--- a/toolkit/themes/windows/global/jar.mn
+++ b/toolkit/themes/windows/global/jar.mn
@@ -44,16 +44,17 @@ toolkit.jar:
   skin/classic/global/icons/blacklist_favicon.png          (icons/blacklist_favicon.png)
   skin/classic/global/icons/blacklist_large.png            (icons/blacklist_large.png)
   skin/classic/global/icons/close-XPVista7.png             (icons/close-XPVista7.png)
   skin/classic/global/icons/close-XPVista7@2x.png          (icons/close-XPVista7@2x.png)
   skin/classic/global/icons/close-inverted-XPVista7.png    (icons/close-inverted-XPVista7.png)
   skin/classic/global/icons/close-inverted-XPVista7@2x.png (icons/close-inverted-XPVista7@2x.png)
   skin/classic/global/icons/loading.png                    (icons/loading.png)
   skin/classic/global/icons/loading@2x.png                 (icons/loading@2x.png)
+  skin/classic/global/icons/panelarrow-down-inverted.svg   (icons/panelarrow-down-inverted.svg)
   skin/classic/global/icons/resizer.png                    (icons/resizer.png)
   skin/classic/global/icons/sslWarning.png                 (icons/sslWarning.png)
 * skin/classic/global/in-content/common.css                (in-content/common.css)
 * skin/classic/global/in-content/info-pages.css            (in-content/info-pages.css)
   skin/classic/global/toolbar/spring.png                   (toolbar/spring.png)
 
   skin/classic/global/console/console-toolbar-XP.png             (console/console-toolbar-XP.png)
   skin/classic/global/dirListing/folder-XP.png                   (dirListing/folder-XP.png)