Bug 1850037 - Part 1: Use new icon ghost button in moz-message-bar r=reusable-components-reviewers,desktop-theme-reviewers,mstriemer,jules

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

toolkit/content/widgets/infobar.css

@@ -32,11 +32,8 @@
   }
 
   .close {
-    margin-block: 4px;
+    margin-block: 2px;
     margin-inline-start: 8px;
-    background-size: 12px;
-    height: 24px;
-    width: 24px;
     align-self: flex-start;
   }
 }

toolkit/content/widgets/moz-button/moz-button.css

@@ -4,6 +4,8 @@
 
 :host {
   display: inline-block;
+  height: fit-content;
+  width: fit-content;
 }
 
 button {
@@ -133,6 +135,7 @@ button {
     width: var(--button-size-icon);
     height: var(--button-size-icon);
     padding: var(--button-padding-icon);
+    color: var(--icon-color);
 
     &[size=small] {
       width: var(--button-size-icon-small);

toolkit/content/widgets/moz-message-bar/moz-message-bar.css

@@ -7,13 +7,7 @@
   --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);
@@ -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) {
@@ -199,13 +170,4 @@
       --message-bar-icon-color: var(--icon-color-critical);
     }
   }
-
-  .close {
-    fill: var(--message-bar-icon-close-color);
-  }
-
-  .ghost-button {
-    border: none;
-    background-color: transparent;
-  }
 }

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 "";

toolkit/content/widgets/notificationbox.js

@@ -663,6 +663,10 @@
         }
       }
 
+      closeButtonTemplate() {
+        return super.closeButtonTemplate({ size: "small" });
+      }
+
       #setStyles() {
         let style = document.createElement("link");
         style.rel = "stylesheet";