Bug 1920423, a=RyanVM

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

toolkit/content/widgets/popupnotification.js

@@ -15,7 +15,7 @@
         ".popup-notification-description": "popupid,id=descriptionid",
         ".popup-notification-description > span:first-of-type":
           "text=label,popupid",
-        ".popup-notification-description > b:first-of-type":
+        ".popup-notification-description > .popup-notification-description-name":
           "text=name,popupid",
         ".popup-notification-description > span:nth-of-type(2)":
           "text=endlabel,popupid",
@@ -82,7 +82,7 @@
               <!-- These need to be on the same line to avoid creating
                   whitespace between them (whitespace is added in the
                   localization file, if necessary). -->
-              <description class="popup-notification-description"><html:span></html:span><html:b></html:b><html:span></html:span><html:b></html:b><html:span></html:span></description>
+              <description class="popup-notification-description"><html:span></html:span><html:b class="popup-notification-description-name"></html:b><html:span></html:span><html:b></html:b><html:span></html:span></description>
               <description class="popup-notification-hint-text"></description>
             </vbox>
             <toolbarbutton class="messageCloseButton close-icon popup-notification-closebutton tabbable" data-l10n-id="close-notification-message"></toolbarbutton>

toolkit/themes/shared/popupnotification.css

@@ -52,6 +52,16 @@ popupnotificationcontent {
   flex: 1 auto;
 }
 
+/*
+ * Ensure that host names in PopupNotifications wrap. This targets the "name"
+ * element in the description container which is the "name" property of the
+ * PopupNotification. Name is what gets substituted from the l10n string using
+ * the placeholder <>.
+ */
+.popup-notification-description-name {
+  word-break: break-all;
+}
+
 .popup-notification-closebutton {
   margin-inline-end: -8px;
   margin-top: -8px;