From fffedee9efa35423fa021db1c3a6c3d0e9ef58d2 Mon Sep 17 00:00:00 2001
From: ganna <annhermy@gmail.com>
Date: Wed, 30 Aug 2023 17:35:38 +0000
Subject: [PATCH] Bug 1832348 - Part 1: Replace .panel-footer with
 moz-button-group in editBookmarkPanel r=hjones,dao

Differential Revision: https://phabricator.services.mozilla.com/D181285
---
 browser/base/content/browser-places.js        |  1 +
 browser/base/content/main-popupset.inc.xhtml  | 19 +++---------
 .../shared/places/editBookmarkPanel.css       |  4 ---
 toolkit/themes/shared/global-shared.css       | 29 +++++++++++++------
 4 files changed, 25 insertions(+), 28 deletions(-)

diff --git a/browser/base/content/browser-places.js b/browser/base/content/browser-places.js
index 689021661e8b..bcaf755f5c6d 100644
--- a/browser/base/content/browser-places.js
+++ b/browser/base/content/browser-places.js
@@ -55,6 +55,7 @@ var StarUI = {
     delete this.panel;
     this._createPanelIfNeeded();
     var element = this._element("editBookmarkPanel");
+    window.ensureCustomElements("moz-button-group");
     // initially the panel is hidden
     // to avoid impacting startup / new window performance
     element.hidden = false;
diff --git a/browser/base/content/main-popupset.inc.xhtml b/browser/base/content/main-popupset.inc.xhtml
index 1ec4091376bd..2633ccd0f9fa 100644
--- a/browser/base/content/main-popupset.inc.xhtml
+++ b/browser/base/content/main-popupset.inc.xhtml
@@ -187,30 +187,19 @@
                     data-l10n-id="bookmark-panel-show-editor-checkbox"
                     oncommand="StarUI.onShowForNewBookmarksCheckboxCommand();"/>
         </vbox>
-        <hbox id="editBookmarkPanelBottomButtons"
+        <html:moz-button-group
               class="panel-footer"
               data-l10n-id="bookmark-panel"
               data-l10n-attrs="style">
-#ifndef XP_UNIX
           <button id="editBookmarkPanelDoneButton"
-                  class="editBookmarkPanelBottomButton"
+                  class="panel-footer-button"
                   data-l10n-id="bookmark-panel-save-button"
                   default="true"
                   oncommand="StarUI.panel.hidePopup();"/>
           <button id="editBookmarkPanelRemoveButton"
-                  class="editBookmarkPanelBottomButton"
+                  class="panel-footer-button"
                   oncommand="StarUI.removeBookmarkButtonCommand();"/>
-#else
-          <button id="editBookmarkPanelRemoveButton"
-                  class="editBookmarkPanelBottomButton"
-                  oncommand="StarUI.removeBookmarkButtonCommand();"/>
-          <button id="editBookmarkPanelDoneButton"
-                  class="editBookmarkPanelBottomButton"
-                  data-l10n-id="bookmark-panel-save-button"
-                  default="true"
-                  oncommand="StarUI.panel.hidePopup();"/>
-#endif
-        </hbox>
+        </html:moz-button-group>
       </vbox>
     </panel>
   </html:template>
diff --git a/browser/themes/shared/places/editBookmarkPanel.css b/browser/themes/shared/places/editBookmarkPanel.css
index deac3b4f3c68..aef04c61d490 100644
--- a/browser/themes/shared/places/editBookmarkPanel.css
+++ b/browser/themes/shared/places/editBookmarkPanel.css
@@ -99,10 +99,6 @@
   opacity: 0.7;
 }
 
-#editBookmarkPanelBottomButtons > button {
-  margin-top: 0;
-}
-
 #editBookmarkPanel .expander-up > .button-box > .button-text,
 #editBookmarkPanel .expander-down > .button-box > .button-text {
   display: none;
diff --git a/toolkit/themes/shared/global-shared.css b/toolkit/themes/shared/global-shared.css
index a7982cc8319a..a8505bb05480 100644
--- a/toolkit/themes/shared/global-shared.css
+++ b/toolkit/themes/shared/global-shared.css
@@ -189,13 +189,17 @@ button.text-link .button-text {
 
 /* Panel footer buttons */
 
-.panel-footer {
+.panel-footer:not(moz-button-group) {
   display: flex;
   justify-content: flex-end;
+}
+
+.panel-footer {
   margin: 8px 16px 16px;
 }
 
-.panel-footer > button {
+.panel-footer > button,
+.panel-footer-button {
   appearance: none;
   border: 0;
   border-radius: 4px;
@@ -208,33 +212,40 @@ button.text-link .button-text {
   margin-bottom: 0;
 }
 
-.panel-footer > button[disabled] {
+.panel-footer > button[disabled],
+.panel-footer-button[disabled] {
   opacity: 0.4;
 }
 
-.panel-footer > button:focus-visible {
+.panel-footer > button:focus-visible,
+.panel-footer-button:focus-visible {
   outline: var(--focus-outline);
   outline-offset: var(--focus-outline-offset);
 }
 
-.panel-footer > button:not([disabled]):hover {
+.panel-footer > button:not([disabled]):hover,
+.panel-footer-button:not([disabled]):hover {
   background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 17%, transparent));
 }
 
-.panel-footer > button:not([disabled]):hover:active {
+.panel-footer > button:not([disabled]):hover:active,
+.panel-footer-button:not([disabled]):hover:active {
   background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent));
 }
 
-.panel-footer > button:not([disabled])[default] {
+.panel-footer > button:not([disabled])[default],
+.panel-footer-button:not([disabled])[default] {
   color: var(--button-primary-color);
   background-color: var(--button-primary-bgcolor);
 }
 
-.panel-footer > button:not([disabled])[default]:hover {
+.panel-footer > button:not([disabled])[default]:hover,
+.panel-footer-button:not([disabled])[default]:hover {
   background-color: var(--button-primary-hover-bgcolor);
 }
 
-.panel-footer > button:not([disabled])[default]:hover:active {
+.panel-footer > button:not([disabled])[default]:hover:active,
+.panel-footer-button:not([disabled])[default]:hover:active {
   background-color: var(--button-primary-active-bgcolor);
 }