Bug 1568306 - Update about:logins dialog styling to match the spec. r=jaws

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

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

browser/components/aboutlogins/content/aboutLogins.html

@@ -37,16 +37,15 @@
       <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">
-          <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>
+          <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"/>
+            <h1 class="title" id="title" data-l10n-id="confirm-delete-dialog-title"></h1>
             <p class="message" id="message" data-l10n-id="confirm-delete-dialog-message"></p>
           </div>
           <div class="buttons">
-            <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>
+            <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>
           </div>
         </div>
       </div>

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

@@ -13,43 +13,39 @@
 
 .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-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);
+  box-shadow: var(--shadow-30);
 }
 
 .title {
-  font-size: .9em;
-  line-height: 1.8em;
-  font-weight: 600;
+  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 {
   position: absolute;
   top: 0;
   inset-inline-end: 0;
   min-width: 20px;
   min-height: 20px;
-  margin: 8px 16px;
+  margin: 16px;
   padding: 0;
   background: url(chrome://global/skin/icons/close.svg) no-repeat center;
   -moz-context-properties: fill, fill-opacity;
@@ -57,19 +53,20 @@ button.dismiss-button {
   fill-opacity: 0;
 }
 
+.warning-icon {
+  -moz-context-properties: fill;
+  fill: currentColor;
+  width: 40px;
+  height: 40px;
+  margin: 16px;
+}
+
 .content,
 .buttons {
-  padding: 16px;
+  text-align: center;
+  padding: 16px 32px;
 }
 
-.content {
-  margin: auto;
-}
-
-.confirm-button {
-  float: inline-end;
-}
-
-.buttons button {
-  margin: 0;
+.buttons > button {
+  min-width: 140px;
 }

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

@@ -348,6 +348,19 @@ 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;
 }