Merging upstream version 126.0.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

2 files changed, 17 insertions, 51 deletions

diff --git a/toolkit/content/widgets/moz-message-bar/moz-message-bar.css b/toolkit/content/widgets/moz-message-bar/moz-message-bar.css
index 6d35009982..fa7b08612d 100644
--- a/toolkit/content/widgets/moz-message-bar/moz-message-bar.css
+++ b/toolkit/content/widgets/moz-message-bar/moz-message-bar.css
@@ -6,14 +6,7 @@
   /* Icon */
   --message-bar-icon-color: var(--icon-color-information);
   --message-bar-icon-size: var(--size-item-small);
-  --message-bar-icon-close-color: var(--icon-color);
-  --message-bar-icon-close-url: url("chrome://global/skin/icons/close-12.svg");
-
-  /* Button */
-  --message-bar-button-size-ghost: var(--button-min-height);
-  --message-bar-button-border-radius-ghost: var(--button-border-radius);
-  --message-bar-button-background-color-ghost-hover: var(--button-background-color-hover);
-  --message-bar-button-background-color-ghost-active: var(--button-background-color-active);
+  --message-bar-icon-close-url: url("chrome://global/skin/icons/close.svg");
 
   /* Container */
   --message-bar-container-min-height: var(--size-item-large);
@@ -28,12 +21,13 @@
   --message-bar-text-line-height: 1.5em;
 
   /* Background */
-  --message-bar-background-color: var(--color-background-information);
+  --message-bar-background-color: var(--background-color-information);
 
   background-color: var(--message-bar-background-color);
   border: var(--message-bar-border-width) solid var(--message-bar-border-color);
   border-radius: var(--message-bar-border-radius);
   color: var(--message-bar-text-color);
+  text-align: start;
 }
 
 @media (prefers-contrast) {
@@ -144,31 +138,8 @@
 
 /* Close icon styles */
 
-.close {
+moz-button::part(button) {
   background-image: var(--message-bar-icon-close-url);
-  background-repeat: no-repeat;
-  background-position: center center;
-  -moz-context-properties: fill;
-  fill: currentColor;
-  min-width: auto;
-  min-height: auto;
-  width: var(--message-bar-button-size-ghost);
-  height: var(--message-bar-button-size-ghost);
-  margin: 0;
-  padding: 0;
-  flex-shrink: 0;
-}
-
-.ghost-button {
-  border-radius: var(--message-bar-button-border-radius-ghost);
-}
-
-.ghost-button:enabled:hover {
-  background-color: var(--message-bar-button-background-color-ghost-hover);
-}
-
-.ghost-button:enabled:hover:active {
-  background-color: var(--message-bar-button-background-color-ghost-active);
 }
 
 @media not (prefers-contrast) {
@@ -176,7 +147,7 @@
   /* Colors from: https://www.figma.com/file/zd3B9UyknB2XNZNdrYLm2W/Outreachy?type=design&node-id=59-1921&mode=design&t=ZYS4e6pAbAlXGvun-4 */
 
   :host([type=warning]) {
-    --message-bar-background-color: var(--color-background-warning);
+    --message-bar-background-color: var(--background-color-warning);
 
     .icon {
       --message-bar-icon-color: var(--icon-color-warning);
@@ -184,7 +155,7 @@
   }
 
   :host([type=success]) {
-    --message-bar-background-color: var(--color-background-success);
+    --message-bar-background-color: var(--background-color-success);
 
     .icon {
       --message-bar-icon-color: var(--icon-color-success);
@@ -193,19 +164,10 @@
 
   :host([type=error]),
   :host([type=critical]) {
-    --message-bar-background-color: var(--color-background-critical);
+    --message-bar-background-color: var(--background-color-critical);
 
     .icon {
       --message-bar-icon-color: var(--icon-color-critical);
     }
   }
-
-  .close {
-    fill: var(--message-bar-icon-close-color);
-  }
-
-  .ghost-button {
-    border: none;
-    background-color: transparent;
-  }
 }
diff --git a/toolkit/content/widgets/moz-message-bar/moz-message-bar.mjs b/toolkit/content/widgets/moz-message-bar/moz-message-bar.mjs
index d83de5d29f..8f0c997149 100644
--- a/toolkit/content/widgets/moz-message-bar/moz-message-bar.mjs
+++ b/toolkit/content/widgets/moz-message-bar/moz-message-bar.mjs
@@ -4,6 +4,8 @@
 
 import { html, ifDefined } from "../vendor/lit.all.mjs";
 import { MozLitElement } from "../lit-utils.mjs";
+// eslint-disable-next-line import/no-unassigned-import
+import "chrome://global/content/elements/moz-button.mjs";
 
 const messageTypeToIconData = {
   info: {
@@ -41,7 +43,7 @@ const messageTypeToIconData = {
  * @property {string} messageL10nArgs - Any args needed for the message l10n ID.
  * @fires message-bar:close
  *  Custom event indicating that message bar was closed.
- *  @fires message-bar:user-dismissed
+ * @fires message-bar:user-dismissed
  *  Custom event indicating that message bar was dismissed by the user.
  */
 
@@ -49,7 +51,7 @@ export default class MozMessageBar extends MozLitElement {
   static queries = {
     actionsSlotEl: "slot[name=actions]",
     actionsEl: ".actions",
-    closeButtonEl: "button.close",
+    closeButtonEl: "moz-button.close",
     supportLinkSlotEl: "slot[name=support-link]",
   };
 
@@ -113,14 +115,16 @@ export default class MozMessageBar extends MozLitElement {
     return "";
   }
 
-  closeButtonTemplate() {
+  closeButtonTemplate({ size } = {}) {
     if (this.dismissable) {
       return html`
-        <button
-          class="close ghost-button"
+        <moz-button
+          type="icon ghost"
+          class="close"
+          size=${ifDefined(size)}
           data-l10n-id="moz-message-bar-close-button"
           @click=${this.dismiss}
-        ></button>
+        ></moz-button>
       `;
     }
     return "";