Bug 1575220 - Show the close icon in the confirmation-dialog in high contrast mode. r=MattN

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

--HG--
extra : moz-landing-system : lando

browser/components/aboutlogins/content/aboutLogins.html

@@ -45,7 +45,9 @@
       <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/confirmation-dialog.css">
       <div class="overlay">
         <div class="container" role="dialog" aria-labelledby="title" aria-describedby="message">
-          <button class="dismiss-button" data-l10n-id="confirmation-dialog-dismiss-button"></button>
+          <button class="dismiss-button" data-l10n-id="confirmation-dialog-dismiss-button">
+            <img class="dismiss-icon" src="chrome://global/skin/icons/close.svg"/>
+          </button>
           <div class="content">
             <img class="warning-icon" src="chrome://global/skin/icons/warning.svg"/>
             <h1 class="title" id="title"></h1>

browser/components/aboutlogins/content/components/confirmation-dialog.css

@@ -14,10 +14,8 @@
 .container {
   z-index: 2;
   position: relative;
-
   display: flex;
   flex-direction: column;
-
   min-width: 250px;
   max-width: 500px;
   min-height: 200px;
@@ -25,6 +23,8 @@
   background: var(--in-content-page-background);
   color: var(--in-content-page-color);
   box-shadow: var(--shadow-30);
+  /* show a border in high contrast mode */
+  outline: 1px solid transparent;
 }
 
 .title {
@@ -39,7 +39,7 @@
   margin-bottom: 0;
 }
 
-button.dismiss-button {
+.dismiss-button {
   position: absolute;
   top: 0;
   inset-inline-end: 0;
@@ -47,7 +47,10 @@ button.dismiss-button {
   min-height: 20px;
   margin: 16px;
   padding: 0;
-  background: url(chrome://global/skin/icons/close.svg) no-repeat center;
+  line-height: 0;
+}
+
+.dismiss-icon {
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   fill-opacity: 0;

browser/components/aboutlogins/content/components/confirmation-dialog.js

@@ -44,7 +44,7 @@ export default class ConfirmationDialog extends HTMLElement {
       case "click":
         if (
           event.target.classList.contains("cancel-button") ||
-          event.target.classList.contains("dismiss-button") ||
+          event.currentTarget.classList.contains("dismiss-button") ||
           event.target.classList.contains("overlay")
         ) {
           this.onCancel();