Bug 1832348 - Part 4: Replace .panel-footer with moz-button-group in popupnotification r=hjones

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

browser/themes/shared/browser-shared.css

@@ -504,7 +504,7 @@ menupopup::part(drop-indicator) {
   background-color: transparent;
   flex-direction: row-reverse;
   /* Override proton-doorhanger default styles that increase the size of the button */
-  margin: 0;
+  margin: 4px;
 }
 
 #contextual-feature-recommendation-notification[data-notification-bucket="CFR_MILESTONE_MESSAGE"] .popup-notification-primary-button {
@@ -512,7 +512,6 @@ menupopup::part(drop-indicator) {
   color: white;
   border: none;
   border-radius: 2px;
-  margin: 4px;
   padding: 3px 12px;
   flex: 1;
 }

toolkit/content/widgets/popupnotification.js

@@ -95,14 +95,14 @@
         </vbox>
       </hbox>
       <hbox class="popup-notification-footer-container"></hbox>
-      <hbox class="popup-notification-button-container panel-footer">
-        <button class="popup-notification-secondary-button"/>
-        <button type="menu" class="popup-notification-dropmarker" data-l10n-id="popup-notification-more-actions-button">
+      <html:moz-button-group class="popup-notification-button-container panel-footer">
+        <button class="popup-notification-secondary-button panel-footer-button"/>
+        <button type="menu" class="popup-notification-dropmarker panel-footer-button" data-l10n-id="popup-notification-more-actions-button">
           <menupopup position="after_end" data-l10n-id="popup-notification-more-actions-button">
           </menupopup>
         </button>
-        <button class="popup-notification-primary-button" data-l10n-id="popup-notification-default-button"/>
-      </hbox>
+        <button class="popup-notification-primary-button primary panel-footer-button" data-l10n-id="popup-notification-default-button"/>
+      </html:moz-button-group>
       `;
     }
 
@@ -115,6 +115,8 @@
       MozXULElement.insertFTLIfNeeded("toolkit/global/popupnotification.ftl");
       this.appendChild(this.constructor.fragment);
 
+      window.ensureCustomElements("moz-button-group");
+
       this.button = this.querySelector(".popup-notification-primary-button");
       if (
         this.hasAttribute("buttonlabel") ||

toolkit/themes/shared/popupnotification.css

@@ -72,14 +72,6 @@ popupnotificationcontent {
   display: none;
 }
 
-@media (-moz-platform: windows) {
-  /* Swap the primary and secondary action, because Windows
-   * platform conventions put the primary action on the left. */
-  .panel-footer > .popup-notification-primary-button:not([default]) {
-    order: -1;
-  }
-}
-
 .popup-notification-secondary-button:not([dropmarkerhidden="true"]) {
   border-start-end-radius: 0;
   border-end-end-radius: 0;