[Payments] Add error messages to credit card editor.

chrome/browser/ui/views/payments/editor_view_controller.cc

 // Copyright 2017 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 #include "chrome/browser/ui/views/payments/editor_view_controller.h"
 
 #include <memory>
 #include <utility>
 
 #include "base/memory/ptr_util.h"
@@ skipping 43 matching lines @@
 
 std::unique_ptr<views::View> EditorViewController::CreateView() {
   std::unique_ptr<views::View> content_view = base::MakeUnique<views::View>();
 
   views::BoxLayout* layout =
       new views::BoxLayout(views::BoxLayout::kVertical, 0, 0, 0);
   layout->set_main_axis_alignment(views::BoxLayout::MAIN_AXIS_ALIGNMENT_START);
   layout->set_cross_axis_alignment(
       views::BoxLayout::CROSS_AXIS_ALIGNMENT_STRETCH);
   content_view->SetLayoutManager(layout);
+  // No insets. Child views below are responsible for their padding.
 
+  // An editor can optionally have a header view specific to it.
   content_view->AddChildView(CreateHeaderView().release());
 
-  // Create an input label/textfield for each field definition.
-  std::vector<EditorField> fields = GetFieldDefinitions();
-  for (const auto& field : fields) {
-    content_view->AddChildView(CreateInputField(field).release());
-  }
+  // The heart of the editor dialog: all the input fields with their labels.
+  content_view->AddChildView(CreateEditorView().release());
 
   return CreatePaymentView(
       CreateSheetHeaderView(
           true, l10n_util::GetStringUTF16(
                     IDS_PAYMENT_REQUEST_CREDIT_CARD_EDITOR_ADD_TITLE),
           this),
       std::move(content_view));
 }
 
 // Adds the "required fields" label in disabled text, to obtain this result.
@@ skipping 13 matching lines @@
   // Adds the "* indicates a required field" label in "disabled" grey text.
   std::unique_ptr<views::Label> label = base::MakeUnique<views::Label>(
       l10n_util::GetStringUTF16(IDS_PAYMENTS_REQUIRED_FIELD_MESSAGE));
   label->SetDisabledColor(label->GetNativeTheme()->GetSystemColor(
       ui::NativeTheme::kColorId_LabelDisabledColor));
   label->SetEnabled(false);
   content_view->AddChildView(label.release());
   return content_view;
 }
 
+void EditorViewController::DisplayErrorMessageForField(
+    const EditorField& field,
+    const base::string16& error_message) {
+  const auto& label_it = error_labels_.find(field);
+  DCHECK(label_it != error_labels_.end());
+  label_it->second->SetText(error_message);
+  label_it->second->SchedulePaint();
+  dialog()->Layout();
+}
+
 std::unique_ptr<views::Button> EditorViewController::CreatePrimaryButton() {
   std::unique_ptr<views::Button> button(
       views::MdTextButton::CreateSecondaryUiBlueButton(
           this, l10n_util::GetStringUTF16(IDS_DONE)));
   button->set_tag(static_cast<int>(EditorViewControllerTags::SAVE_BUTTON));
   button->set_id(static_cast<int>(DialogViewID::EDITOR_SAVE_BUTTON));
   return button;
 }
 
 void EditorViewController::ButtonPressed(views::Button* sender,
@@ skipping 11 matching lines @@
 
 void EditorViewController::ContentsChanged(views::Textfield* sender,
                                            const base::string16& new_contents) {
   static_cast<ValidatingTextfield*>(sender)->OnContentsChanged();
 }
 
 void EditorViewController::OnPerformAction(views::Combobox* sender) {
   static_cast<ValidatingCombobox*>(sender)->OnContentsChanged();
 }
 
-std::unique_ptr<views::View> EditorViewController::CreateInputField(
-    const EditorField& field) {
-  std::unique_ptr<views::View> row = base::MakeUnique<views::View>();
+std::unique_ptr<views::View> EditorViewController::CreateEditorView() {
+  std::unique_ptr<views::View> editor_view = base::MakeUnique<views::View>();
 
-  row->SetBorder(payments::CreatePaymentRequestRowBorder());
+  views::GridLayout* editor_layout = new views::GridLayout(editor_view.get());
 
-  views::GridLayout* layout = new views::GridLayout(row.get());
+  // The editor grid layout is padded vertically from the top and bottom, and
+  // horizontally inset like other content views. The top padding needs to be
+  // added to the top padding of the first row.
+  constexpr int kEditorVerticalInset = 16;
+  editor_layout->SetInsets(
+      kEditorVerticalInset, payments::kPaymentRequestRowHorizontalInsets,
+      kEditorVerticalInset, payments::kPaymentRequestRowHorizontalInsets);
 
-  // The vertical spacing for these rows is slightly different than the spacing
-  // spacing for clickable rows, so don't use kPaymentRequestRowVerticalInsets.
-  constexpr int kRowVerticalInset = 12;
-  layout->SetInsets(
-      kRowVerticalInset, payments::kPaymentRequestRowHorizontalInsets,
-      kRowVerticalInset, payments::kPaymentRequestRowHorizontalInsets);
-
-  row->SetLayoutManager(layout);
-  views::ColumnSet* columns = layout->AddColumnSet(0);
+  editor_view->SetLayoutManager(editor_layout);
+  views::ColumnSet* columns = editor_layout->AddColumnSet(0);
   columns->AddColumn(views::GridLayout::LEADING, views::GridLayout::CENTER, 0,
                      views::GridLayout::USE_PREF, 0, 0);
-  columns->AddPaddingColumn(1, 0);
-  columns->AddColumn(views::GridLayout::TRAILING, views::GridLayout::CENTER, 0,
+
+  // This is the horizontal padding between the label and the input field.
+  constexpr int kLabelInputFieldHorizontalPadding = 16;
+  columns->AddPaddingColumn(0, kLabelInputFieldHorizontalPadding);
+
+  columns->AddColumn(views::GridLayout::LEADING, views::GridLayout::CENTER, 0,
                      views::GridLayout::USE_PREF, 0, 0);
 
-  layout->StartRow(0, 0);
-  layout->AddView(new views::Label(field.label));
+  std::vector<EditorField> fields = GetFieldDefinitions();
+  for (const auto& field : fields) {
+    CreateInputField(editor_layout, field);
+  }
+
+  return editor_view;
+}
+
+// Each input field is a 4-quadrant grid.
+// +----------------------------------------------------------+
+// | Field Label           | Input field (textfield/combobox) |
+// |_______________________|__________________________________|
+// |   (empty)             | Error label                      |
+// +----------------------------------------------------------+
+void EditorViewController::CreateInputField(views::GridLayout* layout,
+                                            const EditorField& field) {
+  // This is the top padding for every row.
+  constexpr int kInputRowSpacing = 6;
+  layout->StartRowWithPadding(0, 0, 0, kInputRowSpacing);
+
+  std::unique_ptr<views::Label> label = base::MakeUnique<views::Label>(
+      field.required ? field.label + base::ASCIIToUTF16("*") : field.label);
+  // A very long label will wrap.
+  label->SetMultiLine(true);

[anthonyvd, 2017/02/22 19:32:45]

I don't see where the max width of the label is set so I'd expect it to just be
sized to its content all the time. What triggers the label being multiline in
this case?

[Mathieu, 2017/02/22 20:08:59]

Correct! I've set a max width now.

+  layout->AddView(label.release());
 
   if (field.control_type == EditorField::ControlType::TEXTFIELD) {
     ValidatingTextfield* text_field =
-        new ValidatingTextfield(CreateValidationDelegate(field));
+        new ValidatingTextfield(CreateValidationDelegate(field, this));
     text_field->set_controller(this);
     // Using autofill field type as a view ID (for testing).
     text_field->set_id(static_cast<int>(field.type));
     text_field->set_default_width_in_chars(
         field.length_hint == EditorField::LengthHint::HINT_SHORT
             ? kNumCharactersInShortField
             : kNumCharactersInLongField);
 
     text_fields_.insert(std::make_pair(text_field, field));
     // |text_field| will now be owned by |row|.
     layout->AddView(text_field);
   } else if (field.control_type == EditorField::ControlType::COMBOBOX) {
-    ValidatingCombobox* combobox = new ValidatingCombobox(
-        GetComboboxModelForType(field.type), CreateValidationDelegate(field));
+    ValidatingCombobox* combobox =
+        new ValidatingCombobox(GetComboboxModelForType(field.type),
+                               CreateValidationDelegate(field, this));
     // Using autofill field type as a view ID (for testing).
     combobox->set_id(static_cast<int>(field.type));
     combobox->set_listener(this);
     comboboxes_.insert(std::make_pair(combobox, field));
     // |combobox| will now be owned by |row|.
     layout->AddView(combobox);
   } else {
     NOTREACHED();
   }
 
-  return row;
+  // This is the vertical space between the input field and its error label.
+  constexpr int kInputErrorLabelPadding = 6;
+  layout->StartRowWithPadding(0, 0, 0, kInputErrorLabelPadding);
+  layout->SkipColumns(1);
+  // Error label is initially empty.
+  std::unique_ptr<views::Label> error_label =
+      base::MakeUnique<views::Label>(base::ASCIIToUTF16(""));
+  error_label->set_id(static_cast<int>(DialogViewID::ERROR_LABEL_OFFSET) +
+                      field.type);

[anthonyvd, 2017/02/22 19:32:45]

Are all fields guaranteed to have a different type? What's field.type here?

[Mathieu, 2017/02/22 20:08:59]

Yes they all have different type, it's the autofill type they represent (e.g.
autofill::CREDIT_CARD_NAME_FULL) . This is a way to get to this label during
testing.

+  error_label->SetFontList(
+      error_label->GetDefaultFontList().DeriveWithSizeDelta(-1));
+  error_label->SetEnabledColor(error_label->GetNativeTheme()->GetSystemColor(
+      ui::NativeTheme::kColorId_AlertSeverityHigh));
+  error_labels_[field] = error_label.get();
+
+  layout->AddView(error_label.release());
 }
 
 }  // namespace payments