Bug 1575220 - Show the close icon in the confirmation-dialog in high contrast mode. r=MattN
authorJared Wein <jwein@mozilla.com>
Thu, 03 Oct 2019 15:32:46 +0000
changeset 496188 faaf976800c27b0f423a69deb5fd6a6dd557de98
parent 496187 0f0a614850991f09f045a111f99f41ec7fba54fc
child 496189 b58865500eded4a2a00b015b41408660361984f0
push id36646
push usernerli@mozilla.com
push dateThu, 03 Oct 2019 21:48:01 +0000
treeherdermozilla-central@2e1bfb7458de [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN
bugs1575220
milestone71.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1575220 - Show the close icon in the confirmation-dialog in high contrast mode. r=MattN Differential Revision: https://phabricator.services.mozilla.com/D47531
browser/components/aboutlogins/content/aboutLogins.html
browser/components/aboutlogins/content/components/confirmation-dialog.css
browser/components/aboutlogins/content/components/confirmation-dialog.js
--- a/browser/components/aboutlogins/content/aboutLogins.html
+++ b/browser/components/aboutlogins/content/aboutLogins.html
@@ -40,17 +40,19 @@
     <confirmation-dialog hidden></confirmation-dialog>
 
     <template id="confirmation-dialog-template">
       <link rel="stylesheet" href="chrome://global/skin/in-content/common.css">
       <link rel="stylesheet" href="chrome://browser/content/aboutlogins/common.css">
       <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>
             <p class="message" id="message"></p>
           </div>
           <div class="buttons">
             <button class="confirm-button danger-button"></button>
             <button class="cancel-button" data-l10n-id="confirmation-dialog-cancel-button"></button>
--- a/browser/components/aboutlogins/content/components/confirmation-dialog.css
+++ b/browser/components/aboutlogins/content/components/confirmation-dialog.css
@@ -9,50 +9,53 @@
            why isn't it declared as a variable? */
   background-color: rgba(0,0,0,0.5);
   display: flex;
 }
 
 .container {
   z-index: 2;
   position: relative;
-
   display: flex;
   flex-direction: column;
-
   min-width: 250px;
   max-width: 500px;
   min-height: 200px;
   margin: auto;
   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 {
   font-size: 1.5em;
   font-weight: normal;
   -moz-user-select: none;
   margin: 0;
 }
 
 .message {
   color: var(--in-content-deemphasized-text);
   margin-bottom: 0;
 }
 
-button.dismiss-button {
+.dismiss-button {
   position: absolute;
   top: 0;
   inset-inline-end: 0;
   min-width: 20px;
   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;
 }
 
 .warning-icon {
   -moz-context-properties: fill;
   fill: currentColor;
--- a/browser/components/aboutlogins/content/components/confirmation-dialog.js
+++ b/browser/components/aboutlogins/content/components/confirmation-dialog.js
@@ -39,17 +39,17 @@ export default class ConfirmationDialog 
         }
         if (event.key === "Escape" && !event.defaultPrevented) {
           this.onCancel();
         }
         break;
       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();
         } else if (event.target.classList.contains("confirm-button")) {
           this.onConfirm();
         }
     }
   }