From f9428f8530c37d7d12c2518e05700038dacdc884 Mon Sep 17 00:00:00 2001
From: Tim Nguyen <ntim.bugs@gmail.com>
Date: Wed, 24 Jul 2019 17:53:18 +0000
Subject: [PATCH] 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
---
 .../aboutlogins/content/aboutLogins.html      | 11 ++---
 .../components/confirm-delete-dialog.css      | 47 +++++++++----------
 .../themes/shared/in-content/common.inc.css   | 13 +++++
 3 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/browser/components/aboutlogins/content/aboutLogins.html b/browser/components/aboutlogins/content/aboutLogins.html
index 9db55e6ac789..7ff052933854 100644
--- a/browser/components/aboutlogins/content/aboutLogins.html
+++ b/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>
diff --git a/browser/components/aboutlogins/content/components/confirm-delete-dialog.css b/browser/components/aboutlogins/content/components/confirm-delete-dialog.css
index 3e40608eabfd..15b01270a791 100644
--- a/browser/components/aboutlogins/content/components/confirm-delete-dialog.css
+++ b/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;
 }
diff --git a/toolkit/themes/shared/in-content/common.inc.css b/toolkit/themes/shared/in-content/common.inc.css
index b153c9f97b02..e5c5f145aabd 100644
--- a/toolkit/themes/shared/in-content/common.inc.css
+++ b/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;
 }