--- a/browser/base/content/popup-notifications.inc
+++ b/browser/base/content/popup-notifications.inc
@@ -4,43 +4,31 @@
            type="arrow"
            position="after_start"
            hidden="true"
            orient="vertical"
            noautofocus="true"
            role="alert"/>
 
     <popupnotification id="webRTC-shareDevices-notification" hidden="true">
-      <popupnotificationcontent id="webRTC-selectCamera" class="popup-notification-control">
-        <image accesskey="&getUserMedia.selectCamera.accesskey;"
-               control="webRTC-selectCamera-menulist"
-               class="camera-icon">
-        </image>
+      <popupnotificationcontent id="webRTC-selectCamera">
         <menulist id="webRTC-selectCamera-menulist">
           <menupopup id="webRTC-selectCamera-menupopup"/>
         </menulist>
       </popupnotificationcontent>
 
-      <popupnotificationcontent id="webRTC-selectWindowOrScreen" class="popup-notification-control">
-        <image id="webRTC-selectWindow-label"
-               control="webRTC-selectWindow-menulist"
-               class="screen-icon">
-        </image>
+      <popupnotificationcontent id="webRTC-selectWindowOrScreen">
         <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" class="popup-notification-control">
-        <image accesskey="&getUserMedia.selectMicrophone.accesskey;"
-               control="webRTC-selectMicrophone-menulist"
-               class="microphone-icon">
-        </image>
+      <popupnotificationcontent id="webRTC-selectMicrophone">
         <menulist id="webRTC-selectMicrophone-menulist">
           <menupopup id="webRTC-selectMicrophone-menupopup"/>
         </menulist>
       </popupnotificationcontent>
     </popupnotification>
 
     <popupnotification id="servicesInstall-notification" hidden="true">
       <popupnotificationcontent orient="vertical" align="start">

--- a/browser/themes/shared/notification-icons.inc.css
+++ b/browser/themes/shared/notification-icons.inc.css
@@ -30,34 +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-control {
-  margin-top: .5em;
-  margin-inline-end: var(--panel-arrowcontent-spacing-size);
-  /* Align with main icon center */
-  margin-inline-start: calc(-10px - calc(var(--panel-arrowcontent-spacing-size) * 1.5));
-}
-
-.popup-notification-icon {
-  width: calc(var(--panel-arrowcontent-spacing-size) * 2);
-  height: calc(var(--panel-arrowcontent-spacing-size) * 2);
-  margin-inline-end: 10px;
-  margin-inline-start: 0;
-}
-
-/* Small row icons */
-popupnotificationcontent > image {
-  width: var(--panel-arrowcontent-spacing-size);
-  margin-inline-end: var(--panel-arrowcontent-spacing-size);
+#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;
 }
 
 /* INDIVIDUAL NOTIFICATIONS */
 
 /* For the moment we apply the color filter only on the icons listed here.
    The first two selectors are used by socialchat.xml (bug 1275558). */
 .webRTC-sharingDevices-notification-icon,
 .webRTC-sharingMicrophone-notification-icon,

--- a/toolkit/content/widgets/notification.xml
+++ b/toolkit/content/widgets/notification.xml
@@ -466,57 +466,55 @@
             }
           ]]>
         </body>
       </method>
     </implementation>
   </binding>
 
   <binding id="popup-notification">
-    <content>
-      <xul:vbox class="popup-notification-body" xbl:inherits="popupid">
-        <xul:hbox align="start">
-          <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>
-        <xul:vbox class="popup-notification-contents">
+    <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 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: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"
-                      type="menu-button"
-                      xbl:inherits="oncommand=buttoncommand,onpopupshown=buttonpopupshown,label=buttonlabel,accesskey=buttonaccesskey">
-            <xul:menupopup anonid="menupopup"
-                           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>
+      <xul:hbox pack="end" class="popup-notification-button-container">
+        <children includes="button"/>
+        <xul:button anonid="button"
+                    class="popup-notification-menubutton"
+                    type="menu-button"
+                    xbl:inherits="oncommand=buttoncommand,onpopupshown=buttonpopupshown,label=buttonlabel,accesskey=buttonaccesskey">
+          <xul:menupopup anonid="menupopup"
+                         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>
     </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/osx/global/notification.css
+++ b/toolkit/themes/osx/global/notification.css
@@ -100,62 +100,57 @@ notification[type="info"]:not([value="tr
 @media (min-resolution: 2dppx) {
   .messageCloseButton > .toolbarbutton-icon {
     width: 16px;
   }
 }
 
 /* Popup notification */
 
-.popup-notification-body {
-  max-width: 30em;
+.popup-notification-body-container {
+  padding: var(--panel-arrowcontent-padding);
 }
 
-.popup-notification-menubutton {
-  margin: 0;
-}
-
-.popup-notification-control menulist {
-  margin-inline-start: 0;
+.popup-notification-icon {
+  width: 32px;
+  height: 32px;
+  margin-inline-end: var(--panel-arrowcontent-padding);
 }
 
-.popup-notification-contents,
-.popup-notification-learnmore-link {
-   margin: 0;
-  /* icon margin left (spacing size) + icon width (*2 spacing size) + icon margin right */
-  margin-inline-start: calc(calc(var(--panel-arrowcontent-spacing-size) * 3) + 10px) !important;
+.popup-notification-body {
+  width: 25em;
 }
 
-.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 description,
+.popup-notification-body label {
+  margin-left: 0 !important;
+  margin-right: 0 !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-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;
+  border-top: 1px solid #eee;
+  background-color: #ddd;
 }
 
 .popup-notification-menubutton {
   --main-color: #5295e5;
   -moz-appearance: none;
   background: var(--main-color) !important;
 }
 
@@ -181,30 +176,30 @@ notification[type="info"]:not([value="tr
   -moz-appearance: none;
   border: 1px solid var(--main-color);
   border-radius: 0;
   padding: 0.9rem 2rem;
   margin: 0;
   color: #fff;
 }
 
-.popup-notification-body .button-menubutton-button[buttondown="true"] {
+.popup-notification-menubutton .button-menubutton-button[buttondown="true"] {
   --main-color: #3579ca;
   background: var(--main-color);
 }
 
-.popup-notification-body .button-menubutton-dropmarker {
+.popup-notification-menubutton .button-menubutton-dropmarker {
   padding: 0 1rem;
 }
 
-.popup-notification-body .button-menubutton-dropmarker image {
+.popup-notification-menubutton .button-menubutton-dropmarker image {
   list-style-image: url("chrome://global/skin/arrow/panelarrow-down-inverted.svg");
 }
 
-.popup-notification-body .button-menubutton-dropmarker[open="true"] {
+.popup-notification-menubutton .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;
@@ -217,20 +212,15 @@ 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: -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,32 +1,22 @@
 /* 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;