--- 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">
+        <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">
+        <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">
+        <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,39 @@
 %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-icon {
-  width: 64px;
-  height: 64px;
+  width: calc(var(--panel-arrowcontent-spacing-size) * 2);
+  height: calc(var(--panel-arrowcontent-spacing-size) * 2);
   -moz-margin-end: 10px;
+  margin-inline-start: var(--panel-arrowcontent-spacing-size);
+  margin-block-start: var(--panel-arrowcontent-spacing-size);
+}
+
+image[control="webRTC-selectCamera-menulist"],
+image[control="webRTC-selectWindow-menulist"],
+image[control="webRTC-selectMicrophone-menulist"] {
+  width: var(--panel-arrowcontent-spacing-size);
+  margin-inline-end: 12px;
+}
+
+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/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 {
   -moz-margin-end: 3px;
 }
 
 /* ::::: plain buttons ::::: */
 
 button.plain {
   border: 0px !important;

--- a/toolkit/themes/linux/global/global.css
+++ b/toolkit/themes/linux/global/global.css
@@ -277,16 +277,18 @@ label[disabled="true"] {
 
 notification > button {
   margin-top: 0;
   margin-bottom: 0;
 }
 
 popupnotificationcontent {
   margin-top: .5em;
+  margin-inline-end: var(--panel-arrowcontent-spacing-size);
+  margin-inline-start: -33px;
 }
 
 /* :::::: autoscroll popup ::::: */
 
 .autoscroller {
   height: 28px;
   width: 28px;
   border: none;

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,42 @@ 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-body hbox:first-of-type {
+  margin: var(--panel-arrowcontent-spacing-size) var(--panel-arrowcontent-spacing-size) 0 0;
+  min-height: calc(var(--panel-arrowcontent-spacing-size) * 2);
+}
+
+.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 +110,15 @@ notification[type="critical"] {
   margin-top: .5em !important;
 }
 
 .popup-notification-button-container {
   margin-top: 17px;
 }
 
 .popup-notification-closebutton {
-  -moz-margin-end: -10px;
-  margin-top: -6px;
+  -moz-margin-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;
 }