Bug 1575220 - Show breach notification icons in high contrast mode. r=MattN

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

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

browser/components/aboutlogins/content/aboutLogins.html

@@ -151,9 +151,12 @@
         </span>
       </div>
       <div class="breach-alert">
+        <img class="breach-icon" src="chrome://global/skin/icons/warning.svg"/>
         <span class="breach-alert-text" data-l10n-id="breach-alert-text"></span>
         <a class="breach-alert-link" data-l10n-id="breach-alert-link" href="#" rel="noreferrer" target="_blank"></a>
-        <button class="dismiss-breach-alert" data-l10n-id="breach-alert-dismiss"></button>
+        <button class="dismiss-breach-alert" data-l10n-id="breach-alert-dismiss">
+          <img class="dismiss-breach-alert-icon" src="chrome://global/skin/icons/close.svg"/>
+        </button>
       </div>
       <div class="header">
         <div class="login-item-favicon-wrapper">

browser/components/aboutlogins/content/components/login-item.css

@@ -282,12 +282,7 @@ input[name="password"] {
   border-radius: 8px;
   border: 1px solid var(--in-content-border-color);
   background-color: var(--yellow-10);
-  background-image: url("chrome://global/skin/icons/warning.svg");
-  background-repeat: no-repeat;
-  background-position: left 10px top 10px;
   color: #0C0C0D;
-  -moz-context-properties: fill;
-  fill: var(--red-90);
   box-shadow: 0 2px 8px 0 rgba(12,12,13,0.1);
   font-size: .9em;
   font-weight: 300;
@@ -299,31 +294,30 @@ input[name="password"] {
   position: relative;
 }
 
-.breach-alert:dir(rtl) {
-  background-position: right 10px top 10px;
-}
-
-a.breach-alert-link {
+.breach-alert-link {
   color: inherit;
   text-decoration: underline;
   font-weight: 500;
 }
 
+.breach-icon {
+  position: absolute;
+  inset-block-start: 10px;
+  inset-inline-start: 10px;
+  -moz-context-properties: fill;
+  fill: var(--red-90);
+}
+
 .dismiss-breach-alert {
   border: none;
   padding: 0;
   margin: 0;
   position: absolute;
-  background-image: url("chrome://global/skin/icons/close.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-  min-height: 16px;
-  min-width: 16px;
-  -moz-context-properties: fill, fill-opacity;
-  fill-opacity: 0;
-  fill: currentColor;
   inset-inline-end: 12px;
   inset-block-start: 12px;
+  min-width: auto;
+  min-height: auto;
+  line-height: 0;
 }
 
 .dismiss-breach-alert,
@@ -331,6 +325,14 @@ a.breach-alert-link {
   background-color: transparent;
 }
 
+.dismiss-breach-alert-icon {
+  -moz-context-properties: fill, fill-opacity;
+  fill-opacity: 0;
+  fill: currentColor;
+  width: 16px;
+  height: 16px;
+}
+
 .error-message {
   color: #fff;
   background-color: var(--red-60);
@@ -359,6 +361,12 @@ a.breach-alert-link {
   font-weight: 600;
 }
 
+@media (-moz-windows-default-theme: 0) {
+  .breach-icon {
+    fill: currentColor;
+  }
+}
+
 @supports -moz-bool-pref("browser.in-content.dark-mode") {
   @media (prefers-color-scheme: dark) {
     :host {

browser/components/aboutlogins/content/components/login-list.css

@@ -172,13 +172,19 @@ ol {
   display: none;
 }
 
-.breached > .list-item-warning-icon {
+.list-item-warning-icon {
   -moz-context-properties: fill;
   fill: var(--red-90);
   min-width: 16px;
   margin-inline-start: 12px;
 }
 
+@media (-moz-windows-default-theme: 0) {
+  .list-item-warning-icon {
+    fill: currentColor;
+  }
+}
+
 @supports -moz-bool-pref("browser.in-content.dark-mode") {
   @media (prefers-color-scheme: dark) {
     .breached > .list-item-warning-icon {