Card unmasking prompt (desktop) - Add alert icon, tweak padding and

colors

BUG=none

Review URL: https://codereview.chromium.org/1047853003

Cr-Commit-Position: refs/heads/master@{#323344}

8 files changed, 49 insertions, 19 deletions

diff --git a/chrome/app/generated_resources.grd b/chrome/app/generated_resources.grd
index e15235b..a002982 100644
--- a/chrome/app/generated_resources.grd
+++ b/chrome/app/generated_resources.grd
@@ -11299,7 +11299,10 @@ Chrome ran out of memory.
         Your card is verified
       </message>
       <message name="IDS_AUTOFILL_CARD_UNMASK_PROMPT_ERROR_TRY_AGAIN" desc="Error message that encourages the user to try to re-enter their credit card CVC after a previous failed attempt.">
-        There was a problem verifying your card. Check your information and try again.
+        Check your CVC and try again
+      </message>
+      <message name="IDS_AUTOFILL_CARD_UNMASK_PROMPT_ERROR_TRY_AGAIN_WITH_EXPIRATION" desc="Error message that encourages the user to try to re-enter their credit card expiration date and CVC after a previous failed attempt.">
+        Check your expiration date and CVC and try again
       </message>
       <message name="IDS_AUTOFILL_CARD_UNMASK_PROMPT_ERROR_PERMANENT" desc="Error message to show when a credit card cannot be verified and the user isn't allowed to retry.">
         Chrome was unable to verify your card at this time. Please try again later.
@@ -11308,7 +11311,7 @@ Chrome ran out of memory.
         There was a problem verifying your card. Check your internet connection and try again.
       </message>
       <message name="IDS_AUTOFILL_CARD_UNMASK_INVALID_EXPIRATION_DATE" desc="Error message to show when a user has input an invalid or old expiration date.">
-        Card expiration date should be after the current date.
+        The card is expired
       </message>
       <message name="IDS_AUTOFILL_CARD_UNMASK_EXPIRATION_DATE_SEPARATOR" desc="Separator for a credit card expiration date, e.g. the slash in 05/16." formatter_data="android_java">
         /
diff --git a/chrome/app/theme/default_100_percent/common/alert_red.png b/chrome/app/theme/default_100_percent/common/alert_red.png
new file mode 100644
index 0000000..b7f8c46
--- /dev/null
+++ b/chrome/app/theme/default_100_percent/common/alert_red.png
diff --git a/chrome/app/theme/default_200_percent/common/alert_red.png b/chrome/app/theme/default_200_percent/common/alert_red.png
new file mode 100644
index 0000000..e29d09a
--- /dev/null
+++ b/chrome/app/theme/default_200_percent/common/alert_red.png
diff --git a/chrome/app/theme/theme_resources.grd b/chrome/app/theme/theme_resources.grd
index 3b25135..a1f7fd8 100644
--- a/chrome/app/theme/theme_resources.grd
+++ b/chrome/app/theme/theme_resources.grd
@@ -26,6 +26,7 @@
            BECAUSE YOUR RESOURCES ARE FUNCTIONALLY RELATED OR FALL UNDER THE
            SAME CONDITIONALS. -->
       <structure type="chrome_scaled_image" name="IDR_ACCESSED_COOKIES" file="common/accessed_cookies.png" />
+      <structure type="chrome_scaled_image" name="IDR_ALERT_RED" file="common/alert_red.png" />
       <structure type="chrome_scaled_image" name="IDR_ALLOWED_CAMERA" file="common/allowed_camera.png" />
       <structure type="chrome_scaled_image" name="IDR_ALLOWED_DOWNLOADS" file="common/allowed_downloads.png" />
       <structure type="chrome_scaled_image" name="IDR_ALLOWED_FULLSCREEN" file="common/allowed_fullscreen.png" />
diff --git a/chrome/browser/ui/autofill/autofill_dialog_types.cc b/chrome/browser/ui/autofill/autofill_dialog_types.cc
index 4ef0db6..95dfd44 100644
--- a/chrome/browser/ui/autofill/autofill_dialog_types.cc
+++ b/chrome/browser/ui/autofill/autofill_dialog_types.cc
@@ -100,7 +100,7 @@ bool DialogNotification::HasCheckbox() const {
   return type_ == DialogNotification::WALLET_USAGE_CONFIRMATION;
 }
 
-SkColor const kWarningColor = SkColorSetRGB(0xde, 0x49, 0x32);
+SkColor const kWarningColor = SkColorSetRGB(0xd3, 0x2f, 0x2f);
 SkColor const kLightShadingColor = SkColorSetARGB(7, 0, 0, 0);
 SkColor const kSubtleBorderColor = SkColorSetARGB(10, 0, 0, 0);
 
diff --git a/chrome/browser/ui/views/autofill/card_unmask_prompt_views.cc b/chrome/browser/ui/views/autofill/card_unmask_prompt_views.cc
index 0ccecf8..4df074f 100644
--- a/chrome/browser/ui/views/autofill/card_unmask_prompt_views.cc
+++ b/chrome/browser/ui/views/autofill/card_unmask_prompt_views.cc
@@ -36,6 +36,8 @@ namespace autofill {
 // dialog.
 const int kEdgePadding = 19;
 
+SkColor kGreyTextColor = SkColorSetRGB(0x64, 0x64, 0x64);
+
 // static
 CardUnmaskPromptView* CardUnmaskPromptView::CreateAndShow(
     CardUnmaskPromptController* controller) {
@@ -53,6 +55,7 @@ CardUnmaskPromptViews::CardUnmaskPromptViews(
       cvc_input_(nullptr),
       month_input_(nullptr),
       year_input_(nullptr),
+      error_icon_(nullptr),
       error_label_(nullptr),
       storage_row_(nullptr),
       storage_checkbox_(nullptr),
@@ -133,9 +136,11 @@ void CardUnmaskPromptViews::SetRetriableErrorMessage(
   if (message.empty()) {
     error_label_->SetMultiLine(false);
     error_label_->SetText(base::ASCIIToUTF16(" "));
+    error_icon_->SetVisible(false);
   } else {
     error_label_->SetMultiLine(true);
     error_label_->SetText(message);
+    error_icon_->SetVisible(true);
   }
 
   // Update the dialog's size.
@@ -146,6 +151,8 @@ void CardUnmaskPromptViews::SetRetriableErrorMessage(
                          ->delegate()
                          ->GetWebContentsModalDialogHost());
   }
+
+  Layout();
 }
 
 void CardUnmaskPromptViews::SetInputsEnabled(bool enabled) {
@@ -300,7 +307,6 @@ void CardUnmaskPromptViews::OnPerformAction(views::Combobox* combobox) {
     if (month_input_->invalid()) {
       month_input_->SetInvalid(false);
       year_input_->SetInvalid(false);
-      error_label_->SetMultiLine(false);
       SetRetriableErrorMessage(base::string16());
     }
   } else if (month_input_->selected_index() !=
@@ -309,7 +315,6 @@ void CardUnmaskPromptViews::OnPerformAction(views::Combobox* combobox) {
                  year_combobox_model_.GetDefaultIndex()) {
     month_input_->SetInvalid(true);
     year_input_->SetInvalid(true);
-    error_label_->SetMultiLine(true);
     SetRetriableErrorMessage(l10n_util::GetStringUTF16(
         IDS_AUTOFILL_CARD_UNMASK_INVALID_EXPIRATION_DATE));
   }
@@ -329,15 +334,17 @@ void CardUnmaskPromptViews::InitIfNecessary() {
 
   main_contents_ = new views::View();
   main_contents_->SetLayoutManager(
-      new views::BoxLayout(views::BoxLayout::kVertical, 0, 0, 10));
+      new views::BoxLayout(views::BoxLayout::kVertical, 0, 0, 12));
   AddChildView(main_contents_);
 
   permanent_error_label_ = new views::Label();
+  ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
+  permanent_error_label_->SetFontList(
+      rb.GetFontList(ui::ResourceBundle::BoldFont));
   permanent_error_label_->set_background(
-      views::Background::CreateSolidBackground(
-          SkColorSetRGB(0xdb, 0x44, 0x37)));
+      views::Background::CreateSolidBackground(kWarningColor));
   permanent_error_label_->SetBorder(
-      views::Border::CreateEmptyBorder(10, kEdgePadding, 10, kEdgePadding));
+      views::Border::CreateEmptyBorder(12, kEdgePadding, 12, kEdgePadding));
   permanent_error_label_->SetEnabledColor(SK_ColorWHITE);
   permanent_error_label_->SetAutoColorReadabilityEnabled(false);
   permanent_error_label_->SetVisible(false);
@@ -352,10 +359,10 @@ void CardUnmaskPromptViews::InitIfNecessary() {
 
   views::Label* instructions =
       new views::Label(controller_->GetInstructionsMessage());
-
+  instructions->SetEnabledColor(kGreyTextColor);
   instructions->SetMultiLine(true);
   instructions->SetHorizontalAlignment(gfx::ALIGN_LEFT);
-  instructions->SetBorder(views::Border::CreateEmptyBorder(0, 0, 15, 0));
+  instructions->SetBorder(views::Border::CreateEmptyBorder(0, 0, 16, 0));
   controls_container->AddChildView(instructions);
 
   input_row_ = new views::View();
@@ -367,12 +374,14 @@ void CardUnmaskPromptViews::InitIfNecessary() {
     month_input_ = new views::Combobox(&month_combobox_model_);
     month_input_->set_listener(this);
     input_row_->AddChildView(month_input_);
-    input_row_->AddChildView(new views::Label(l10n_util::GetStringUTF16(
-        IDS_AUTOFILL_CARD_UNMASK_EXPIRATION_DATE_SEPARATOR)));
+    views::Label* separator = new views::Label(l10n_util::GetStringUTF16(
+        IDS_AUTOFILL_CARD_UNMASK_EXPIRATION_DATE_SEPARATOR));
+    separator->SetEnabledColor(kGreyTextColor);
+    input_row_->AddChildView(separator);
     year_input_ = new views::Combobox(&year_combobox_model_);
     year_input_->set_listener(this);
     input_row_->AddChildView(year_input_);
-    input_row_->AddChildView(new views::Label(base::ASCIIToUTF16("    ")));
+    input_row_->AddChildView(new views::Label(base::ASCIIToUTF16("  ")));
   }
 
   cvc_input_ = new DecoratedTextfield(
@@ -382,16 +391,31 @@ void CardUnmaskPromptViews::InitIfNecessary() {
   input_row_->AddChildView(cvc_input_);
 
   views::ImageView* cvc_image = new views::ImageView();
-  ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
   cvc_image->SetImage(rb.GetImageSkiaNamed(controller_->GetCvcImageRid()));
   input_row_->AddChildView(cvc_image);
 
+  views::View* temporary_error = new views::View();
+  views::BoxLayout* temporary_error_layout =
+      new views::BoxLayout(views::BoxLayout::kHorizontal, 0, 0, 4);
+  temporary_error->SetLayoutManager(temporary_error_layout);
+  temporary_error_layout->set_cross_axis_alignment(
+      views::BoxLayout::CROSS_AXIS_ALIGNMENT_START);
+  temporary_error->SetBorder(views::Border::CreateEmptyBorder(8, 0, 0, 0));
+  controls_container->AddChildView(temporary_error);
+
+  error_icon_ = new views::ImageView();
+  error_icon_->SetVisible(false);
+  error_icon_->SetImage(ui::ResourceBundle::GetSharedInstance()
+                            .GetImageNamed(IDR_ALERT_RED)
+                            .ToImageSkia());
+  temporary_error->AddChildView(error_icon_);
+
   // Reserve vertical space for the error label, assuming it's one line.
   error_label_ = new views::Label(base::ASCIIToUTF16(" "));
   error_label_->SetHorizontalAlignment(gfx::ALIGN_LEFT);
   error_label_->SetEnabledColor(kWarningColor);
-  error_label_->SetBorder(views::Border::CreateEmptyBorder(3, 0, 5, 0));
-  controls_container->AddChildView(error_label_);
+  temporary_error->AddChildView(error_label_);
+  temporary_error_layout->SetFlexForView(error_label_, 1);
 
   progress_overlay_ = new FadeOutView();
   progress_overlay_->set_fade_everything(true);
diff --git a/chrome/browser/ui/views/autofill/card_unmask_prompt_views.h b/chrome/browser/ui/views/autofill/card_unmask_prompt_views.h
index bf4cafd..001f250 100644
--- a/chrome/browser/ui/views/autofill/card_unmask_prompt_views.h
+++ b/chrome/browser/ui/views/autofill/card_unmask_prompt_views.h
@@ -14,6 +14,7 @@
 #include "ui/views/window/dialog_delegate.h"
 
 namespace views {
+class ImageView;
 class Label;
 class Checkbox;
 class CheckmarkThrobber;
@@ -125,7 +126,8 @@ class CardUnmaskPromptViews : public CardUnmaskPromptView,
   MonthComboboxModel month_combobox_model_;
   YearComboboxModel year_combobox_model_;
 
-  // The error label for most errors, which lives beneath the inputs.
+  // The error icon and label for most errors, which live beneath the inputs.
+  views::ImageView* error_icon_;
   views::Label* error_label_;
 
   FadeOutView* storage_row_;
diff --git a/ui/views/color_constants.cc b/ui/views/color_constants.cc
index a24bcc2..f28a2fd 100644
--- a/ui/views/color_constants.cc
+++ b/ui/views/color_constants.cc
@@ -6,6 +6,6 @@
 
 namespace views {
 
-const SkColor kWarningColor = SkColorSetRGB(0xde, 0x49, 0x32);
+const SkColor kWarningColor = SkColorSetRGB(0xd3, 0x2f, 0x2f);
 
 }  // namespace views