Backed out 2 changesets (bug 1568306) for browser-chrome failures at browser/components/aboutlogins/tests/browser/browser_confirmDeleteDialog.js on a CLOSED TREE

Backed out changeset 585b6ae0dd0d (bug 1568306)
Backed out changeset 8d7df4760fe4 (bug 1568306)

browser/components/aboutlogins/content/aboutLogins.ftl

@@ -76,9 +76,9 @@ master-password-reload-button =
   .label = Log in
   .accesskey = L
 
-confirm-delete-dialog-title = Delete this login?
-confirm-delete-dialog-message = This action cannot be undone.
+confirm-delete-dialog-title = Confirm Deletion
+confirm-delete-dialog-message = Are you sure you want to delete this login?
 confirm-delete-dialog-dismiss-button =
   .title = Cancel
 confirm-delete-dialog-cancel-button = Cancel
-confirm-delete-dialog-confirm-button = Delete
+confirm-delete-dialog-confirm-button = Delete login

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" tabindex="2" data-l10n-id="confirm-delete-dialog-confirm-button"></button>
-            <button class="cancel-button" tabindex="1" data-l10n-id="confirm-delete-dialog-cancel-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,39 +13,43 @@
 
 .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);
-  box-shadow: var(--shadow-30);
+}
+
+.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);
 }
 
 .title {
-  font-size: 1.5em;
-  font-weight: normal;
+  font-size: .9em;
+  line-height: 1.8em;
+  font-weight: 600;
   -moz-user-select: none;
   margin: 0;
 }
 
-.message {
-  color: var(--in-content-deemphasized-text);
-  margin-bottom: 0;
-}
-
 button.dismiss-button {
   position: absolute;
   top: 0;
   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;
@@ -53,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;
 }