Backed out changeset 044beb95c8fc (bug 1568306) for mochitest failures on test_confirm_delete_dialog.html . CLOSED TREE

browser/components/aboutlogins/content/aboutLogins.html

@@ -37,15 +37,16 @@
       <link rel="stylesheet" href="chrome://browser/content/aboutlogins/components/confirm-delete-dialog.css">
       <div class="overlay">
         <div class="container" role="dialog" aria-labelledby="title" aria-describedby="message">
-          <button class="dismiss-button" data-l10n-id="confirm-delete-dialog-dismiss-button"></button>
-          <div class="content">
-            <img class="warning-icon" src="chrome://global/skin/icons/warning.svg"/>
+          <div class="title-bar">
             <h1 class="title" id="title" data-l10n-id="confirm-delete-dialog-title"></h1>
+            <button class="dismiss-button" data-l10n-id="confirm-delete-dialog-dismiss-button"></button>
+          </div>
+          <div class="content">
             <p class="message" id="message" data-l10n-id="confirm-delete-dialog-message"></p>
           </div>
           <div class="buttons">
-            <button class="confirm-button danger-button" data-l10n-id="confirm-delete-dialog-confirm-button"></button>
             <button class="cancel-button" data-l10n-id="confirm-delete-dialog-cancel-button"></button>
+            <button class="confirm-button" data-l10n-id="confirm-delete-dialog-confirm-button"></button>
           </div>
         </div>
       </div>

browser/components/aboutlogins/content/components/confirm-delete-dialog.css

@@ -13,29 +13,34 @@
 
 .container {
   z-index: 2;
-  position: relative;
 
   display: flex;
   flex-direction: column;
 
+  width: 50%;
   min-width: 250px;
   max-width: 500px;
+  height: 40%;
   min-height: 200px;
   margin: auto;
   background: var(--in-content-page-background);
   color: var(--in-content-page-color);
 }
 
-.title {
-  font-size: 1.5em;
-  font-weight: normal;
-  -moz-user-select: none;
-  margin: 0;
+.title-bar {
+  position: relative;
+  text-align: center;
+  background-color: var(--in-content-dialog-header-background);
+  padding: 5px;
+  border-bottom: 1px solid var(--in-content-border-color);
 }
 
-.message {
-  color: var(--in-content-deemphasized-text);
-  margin-bottom: 0;
+.title {
+  font-size: .9em;
+  line-height: 1.8em;
+  font-weight: 600;
+  -moz-user-select: none;
+  margin: 0;
 }
 
 button.dismiss-button {
@@ -44,7 +49,7 @@ button.dismiss-button {
   inset-inline-end: 0;
   min-width: 20px;
   min-height: 20px;
-  margin: 16px;
+  margin: 8px 16px;
   padding: 0;
   background: url(chrome://global/skin/icons/close.svg) no-repeat center;
   -moz-context-properties: fill, fill-opacity;
@@ -52,20 +57,19 @@ button.dismiss-button {
   fill-opacity: 0;
 }
 
-.warning-icon {
-  -moz-context-properties: fill;
-  fill: currentColor;
-  width: 40px;
-  height: 40px;
-  margin: 16px;
-}
-
 .content,
 .buttons {
-  text-align: center;
-  padding: 16px 32px;
+  padding: 16px;
 }
 
-.buttons > button {
-  min-width: 140px;
+.content {
+  margin: auto;
+}
+
+.confirm-button {
+  float: inline-end;
+}
+
+.buttons button {
+  margin: 0;
 }

toolkit/themes/shared/in-content/common.inc.css

@@ -348,19 +348,6 @@ xul|button.primary:not([disabled="true"]):hover:active {
   background-color: var(--in-content-primary-button-background-active);
 }
 
-html|button.danger-button {
-  background-color: var(--red-60);
-  color: white !important;
-}
-
-html|button.danger-button:enabled:hover {
-  background-color: var(--red-70);
-}
-
-html|button.danger-button:enabled:hover:active {
-  background-color: var(--red-80);
-}
-
 html|button.ghost-button {
   background-color: transparent;
 }