Bug 1697624 - Apply more Proton styles to PopupNotifications. r=desktop-theme-reviewers,harry

In particular, this makes it so that Proton PopupNotifications:

* Are ~400px wide (but use an em value for system font flexibility)
* Use a slightly larger font on macOS
* Have a 16px padding, regardless of platform
* Has 16px of space between each popupnotificationcontent, and before
  the popup-notification-checkbox.
* Sets a default font-weight on the WebRTC permission panel label when
  a single device label is listed

Differential Revision: https://phabricator.services.mozilla.com/D108518

browser/themes/shared/browser.inc.css

@@ -838,11 +838,6 @@ menupopup::part(drop-indicator) {
   background-color: rgb(0,62,170);
 }
 
-.webRTC-selectDevice-label {
-  margin-top: 6px;
-  font-weight: 600;
-}
-
 .webRTC-selectDevice-selector-container {
   display: flex;
   align-items: center;
@@ -853,6 +848,11 @@ menupopup::part(drop-indicator) {
 }
 
 @supports not -moz-bool-pref("browser.proton.doorhangers.enabled") {
+.webRTC-selectDevice-label {
+  margin-top: 6px;
+  font-weight: 600;
+}
+
 #webRTC-selectCamera-icon,
 #webRTC-selectMicrophone-icon {
   display: none;
@@ -860,6 +860,18 @@ menupopup::part(drop-indicator) {
 } /** END not Proton **/
 
 @supports -moz-bool-pref("browser.proton.doorhangers.enabled") {
+popupnotificationcontent {
+  margin-block-start: 8px;
+}
+
+.popup-notification-checkbox {
+  margin-block: 8px;
+}
+
+.popup-notification-body-container {
+  padding-block-end: 0;
+}
+
 #webRTC-selectCamera-label,
 #webRTC-selectMicrophone-label {
   display: none;
@@ -868,6 +880,7 @@ menupopup::part(drop-indicator) {
 .webRTC-selectDevice-icon {
   -moz-context-properties: fill;
   fill: currentColor;
+  margin-inline-end: 6px;
 }
 
 #webRTC-selectCamera-icon {
@@ -877,6 +890,13 @@ menupopup::part(drop-indicator) {
 #webRTC-selectMicrophone-icon {
   list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg");
 }
+
+.popup-notification-body description,
+.popup-notification-body label,
+.popup-notification-body checkbox {
+  margin-inline-start: 0;
+}
+
 } /** END Proton **/
 
 #tab-notification-deck {

toolkit/themes/linux/global/global.css

@@ -22,7 +22,6 @@
   --arrowpanel-background: var(--default-arrowpanel-background);
   --arrowpanel-color: var(--default-arrowpanel-color);
   --arrowpanel-border-color: var(--default-arrowpanel-border-color);
-  --arrowpanel-padding: 10px;
   --panel-disabled-color: GrayText;
   --panel-description-color: GrayText;
   /* ::::: Styles ::::: */
@@ -33,6 +32,12 @@
   font: message-box;
 }
 
+@supports not -moz-bool-pref("browser.proton.enabled") {
+:root {
+  --arrowpanel-padding: 10px;
+}
+} /** END not Proton **/
+
 /* ::::: Alert icons :::::*/
 
 .message-icon {

toolkit/themes/osx/global/global.css

@@ -6,7 +6,6 @@
 
 :root {
   /* ::::: Variables ::::: */
-  --arrowpanel-padding: 16px;
   --default-arrowpanel-background: #fff;
   --default-arrowpanel-color: hsl(0,0%,10%);
   --default-arrowpanel-border-color: hsla(210,4%,10%,.05);

toolkit/themes/shared/global.inc.css

@@ -11,6 +11,18 @@
 @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 @namespace html url("http://www.w3.org/1999/xhtml");
 
+:root {
+  /* ::::: Variables ::::: */
+  --arrowpanel-padding: 16px;
+  --popup-notification-body-width: calc(31em - calc(2 * var(--arrowpanel-padding)));
+}
+
+@supports not -moz-bool-pref("browser.proton.doorhangers.enabled") {
+:root {
+  --popup-notification-body-width: 25em;
+}
+} /** END not Proton **/
+
 /* Lightweight theme roots */
 
 :root[lwtheme-image]:-moz-lwtheme-darktext {

toolkit/themes/shared/popupnotification.inc.css

@@ -7,7 +7,8 @@
 .popup-notification-header-container,
 .popup-notification-footer-container {
   display: flex;
-  max-width: calc(2 * var(--arrowpanel-padding) + 32px + 4px + 25em);
+  /** Padding + Icon width + border-radius + popup-notification-body-width **/
+  max-width: calc(2 * var(--arrowpanel-padding) + 32px + 4px + var(--popup-notification-body-width));
 }
 
 .popup-notification-body-container {
@@ -21,7 +22,7 @@
 }
 
 .popup-notification-body {
-  width: 25em;
+  width: var(--popup-notification-body-width);
 }
 
 .popup-notification-closebutton {
@@ -110,6 +111,10 @@
 
 /** PopupNotifications **/
 @supports -moz-bool-pref("browser.proton.doorhangers.enabled") {
+popupnotification {
+  font: caption;
+}
+
 .panel-footer {
   justify-content: flex-end;
   margin-inline: 16px;

toolkit/themes/windows/global/global.css

@@ -10,7 +10,6 @@
 
 :root {
   /* ::::: Variables ::::: */
-  --arrowpanel-padding: 10px;
   --default-arrowpanel-background: Field;
   --default-arrowpanel-color: FieldText;
   --default-arrowpanel-border-color: ThreeDShadow;
@@ -26,6 +25,12 @@
   font: message-box;
 }
 
+@supports not -moz-bool-pref("browser.proton.enabled") {
+:root {
+  --arrowpanel-padding: 10px;
+}
+} /** END not Proton **/
+
 @supports -moz-bool-pref("browser.proton.contextmenus.enabled") {
 @media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
   :root {