[WebPayments] Add the Payment Method section in the Payment Sheet

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

 // Copyright 2016 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/payment_sheet_view_controller.h"
 
+#include <algorithm>
 #include <memory>
 #include <utility>
 
 #include "base/memory/ptr_util.h"
 #include "base/strings/utf_string_conversions.h"
+#include "chrome/browser/browser_process.h"
 #include "chrome/browser/ui/views/payments/payment_request_dialog.h"
 #include "chrome/browser/ui/views/payments/payment_request_views_util.h"
 #include "chrome/grit/generated_resources.h"
+#include "components/autofill/core/browser/autofill_type.h"
+#include "components/autofill/core/browser/credit_card.h"
+#include "components/autofill/core/browser/field_types.h"
 #include "components/payments/payment_request.h"
 #include "components/strings/grit/components_strings.h"
+#include "content/public/browser/web_contents.h"
 #include "third_party/skia/include/core/SkColor.h"
 #include "ui/base/l10n/l10n_util.h"
+#include "ui/base/resource/resource_bundle.h"
 #include "ui/gfx/color_utils.h"
 #include "ui/gfx/font.h"
 #include "ui/gfx/geometry/insets.h"
 #include "ui/gfx/paint_vector_icon.h"
 #include "ui/gfx/range/range.h"
 #include "ui/gfx/vector_icons_public.h"
 #include "ui/views/border.h"
 #include "ui/views/controls/button/custom_button.h"
 #include "ui/views/controls/button/label_button.h"
 #include "ui/views/controls/button/md_text_button.h"
 #include "ui/views/controls/image_view.h"
 #include "ui/views/controls/label.h"
 #include "ui/views/controls/styled_label.h"
+#include "ui/views/layout/fill_layout.h"
 #include "ui/views/layout/grid_layout.h"
 #include "ui/views/view.h"
 
 namespace payments {
 namespace {
 
 enum class PaymentSheetViewControllerTags {
   // The tag for the button that navigates to the Order Summary sheet.
   SHOW_ORDER_SUMMARY_BUTTON = static_cast<int>(
       payments::PaymentRequestCommonTags::PAYMENT_REQUEST_COMMON_TAG_MAX),
+  SHOW_PAYMENT_METHOD_BUTTON,
 };
 
 // Creates a clickable row to be displayed in the Payment Sheet. It contains
 // a section name and some content, followed by a chevron as a clickability
 // affordance. Both, either, or none of |content_view| and |extra_content_view|
 // may be present, the difference between the two being that content is pinned
 // to the left and extra_content is pinned to the right.
 // The row also displays a light gray horizontal ruler on its lower boundary.
+// The name column has a fixed width equal to |name_column_width|.
 // +----------------------------+
 // | Name | Content | Extra | > |
 // +~~~~~~~~~~~~~~~~~~~~~~~~~~~~+ <-- ruler
 class PaymentSheetRow : public views::CustomButton {
  public:
   PaymentSheetRow(views::ButtonListener* listener,
                   const base::string16& section_name,
                   std::unique_ptr<views::View> content_view,
-                  std::unique_ptr<views::View> extra_content_view)
+                  std::unique_ptr<views::View> extra_content_view,
+                  int name_column_width)
     : views::CustomButton(listener) {
     SetBorder(views::CreateSolidSidedBorder(0, 0, 1, 0, SK_ColorLTGRAY));
     views::GridLayout* layout = new views::GridLayout(this);
 
-    constexpr int kRowVerticalInset = 18;
+    constexpr int kRowVerticalInset = 8;
     // The rows have extra inset compared to the header so that their right edge
     // lines up with the close button's X rather than its invisible right edge.
     constexpr int kRowExtraRightInset = 8;
     layout->SetInsets(
         kRowVerticalInset, 0, kRowVerticalInset, kRowExtraRightInset);
     SetLayoutManager(layout);
 
     views::ColumnSet* columns = layout->AddColumnSet(0);
     // A column for the section name.
-    columns->AddColumn(views::GridLayout::LEADING, views::GridLayout::CENTER,
-                       0, views::GridLayout::USE_PREF, 0, 0);
+    columns->AddColumn(views::GridLayout::LEADING,
+                       views::GridLayout::LEADING,
+                       0,
+                       views::GridLayout::FIXED,
+                       name_column_width,
+                       0);
+
+    constexpr int kPaddingColumnsWidth = 25;
+    columns->AddPaddingColumn(0, kPaddingColumnsWidth);
+
     // A column for the content.
-    columns->AddColumn(views::GridLayout::FILL, views::GridLayout::CENTER,
+    columns->AddColumn(views::GridLayout::FILL, views::GridLayout::LEADING,
                        1, views::GridLayout::USE_PREF, 0, 0);
     // A column for the extra content.
     columns->AddColumn(views::GridLayout::TRAILING, views::GridLayout::CENTER,
                        0, views::GridLayout::USE_PREF, 0, 0);
 
-    constexpr int kPaddingColumnsWidth = 25;
     columns->AddPaddingColumn(0, kPaddingColumnsWidth);
     // A column for the chevron.
     columns->AddColumn(views::GridLayout::TRAILING, views::GridLayout::CENTER,
                        0, views::GridLayout::USE_PREF, 0, 0);
 
     layout->StartRow(0, 0);
     views::Label* name_label = new views::Label(section_name);
     layout->AddView(name_label);
 
     if (content_view) {
@@ skipping 16 matching lines @@
   }
 
   DISALLOW_COPY_AND_ASSIGN(PaymentSheetRow);
 };
 
 }  // namespace
 
 PaymentSheetViewController::PaymentSheetViewController(
     PaymentRequest* request,
     PaymentRequestDialog* dialog)
-    : PaymentRequestSheetController(request, dialog) {}
+    : PaymentRequestSheetController(request, dialog),
+      widest_name_column_view_width_(0) {
+  InitWidestNameColumnViewWidth();
+}
 
 PaymentSheetViewController::~PaymentSheetViewController() {}
 
 std::unique_ptr<views::View> PaymentSheetViewController::CreateView() {
   std::unique_ptr<views::View> content_view = base::MakeUnique<views::View>();
 
   views::GridLayout* layout = new views::GridLayout(content_view.get());
   content_view->SetLayoutManager(layout);
   views::ColumnSet* columns = layout->AddColumnSet(0);
   columns->AddColumn(views::GridLayout::FILL, views::GridLayout::CENTER,
                      1, views::GridLayout::USE_PREF, 0, 0);
 
   layout->StartRow(0, 0);
   layout->AddView(CreatePaymentSheetSummaryRow().release());
+  layout->StartRow(0, 0);
+  layout->AddView(CreatePaymentMethodRow().release());
 
   return CreatePaymentView(
       CreateSheetHeaderView(
           false,
           l10n_util::GetStringUTF16(IDS_PAYMENT_REQUEST_PAYMENT_SHEET_TITLE),
           this),
       std::move(content_view));
 }
 
 void PaymentSheetViewController::ButtonPressed(
     views::Button* sender, const ui::Event& event) {
   switch (sender->tag()) {
     case static_cast<int>(PaymentRequestCommonTags::CLOSE_BUTTON_TAG):
       dialog()->CloseDialog();
       break;
     case static_cast<int>(
         PaymentSheetViewControllerTags::SHOW_ORDER_SUMMARY_BUTTON):
       dialog()->ShowOrderSummary();
       break;
+    case static_cast<int>(
+        PaymentSheetViewControllerTags::SHOW_PAYMENT_METHOD_BUTTON):
+      dialog()->ShowPaymentMethodSheet();
+      break;
     default:
       NOTREACHED();
   }
 }
 
 std::unique_ptr<views::View>
 PaymentSheetViewController::CreateOrderSummarySectionContent() {
   base::string16 label_value = l10n_util::GetStringFUTF16(
       IDS_PAYMENT_REQUEST_ORDER_SUMMARY_SECTION_TOTAL_FORMAT,
       base::ASCIIToUTF16(request()->details()->total->label),
       base::ASCIIToUTF16(request()->details()->total->amount->currency),
       base::ASCIIToUTF16(request()->details()->total->amount->value));
 
   return base::MakeUnique<views::Label>(label_value);
 }
 
 std::unique_ptr<views::Button>
 PaymentSheetViewController::CreatePaymentSheetSummaryRow() {
   std::unique_ptr<views::Button> section = base::MakeUnique<PaymentSheetRow>(
       this,
       l10n_util::GetStringUTF16(IDS_PAYMENT_REQUEST_ORDER_SUMMARY_SECTION_NAME),
       std::unique_ptr<views::View>(nullptr),
-      CreateOrderSummarySectionContent());
+      CreateOrderSummarySectionContent(),
+      widest_name_column_view_width_);
   section->set_tag(static_cast<int>(
       PaymentSheetViewControllerTags::SHOW_ORDER_SUMMARY_BUTTON));
   return section;
 }
 
+std::unique_ptr<views::Button>
+PaymentSheetViewController::CreatePaymentMethodRow() {

[Mathieu, 2017/01/12 21:27:11]

I really like the ASCII art in the Java Impl, could we have some? 

[anthonyvd, 2017/01/13 16:09:19]

Done here and above.

+  autofill::CreditCard* selected_card =
+      request()->GetCurrentlySelectedCreditCard();
+
+  std::unique_ptr<views::View> content_view;
+  std::unique_ptr<views::ImageView> card_icon_view;
+  if (selected_card) {
+    content_view = base::MakeUnique<views::View>();
+
+    views::GridLayout* layout = new views::GridLayout(content_view.get());
+    content_view->SetLayoutManager(layout);
+    views::ColumnSet* columns = layout->AddColumnSet(0);
+    columns->AddColumn(views::GridLayout::LEADING, views::GridLayout::CENTER,
+                       1, views::GridLayout::USE_PREF, 0, 0);
+
+    layout->StartRow(0, 0);
+    layout->AddView(new views::Label(selected_card->TypeAndLastFourDigits()));
+    layout->StartRow(0, 0);
+    layout->AddView(new views::Label(
+        selected_card->GetInfo(
+            autofill::AutofillType(autofill::CREDIT_CARD_NAME_FULL),
+            g_browser_process->GetApplicationLocale())));
+
+    card_icon_view = base::MakeUnique<views::ImageView>();
+    card_icon_view->SetImage(
+      ResourceBundle::GetSharedInstance()
+          .GetImageNamed(autofill::CreditCard::PaymentRequestIconResourceId(
+              selected_card->type()))
+          .AsImageSkia());
+    card_icon_view->SetBorder(
+        views::CreateRoundedRectBorder(1, 3, SK_ColorLTGRAY));
+
+    constexpr gfx::Size kCardIconSize = gfx::Size(32, 20);
+    card_icon_view->SetImageSize(kCardIconSize);
+  }
+
+  std::unique_ptr<views::Button> section = base::MakeUnique<PaymentSheetRow>(
+      this,
+      l10n_util::GetStringUTF16(
+          IDS_PAYMENT_REQUEST_PAYMENT_METHOD_SECTION_NAME),
+      std::move(content_view),
+      std::move(card_icon_view),
+      widest_name_column_view_width_);
+  section->set_tag(static_cast<int>(
+      PaymentSheetViewControllerTags::SHOW_PAYMENT_METHOD_BUTTON));
+  return section;
+}
+
+void PaymentSheetViewController::InitWidestNameColumnViewWidth() {
+  DCHECK_EQ(0, widest_name_column_view_width_);
+
+  // The name colums in each row should all have the same width, large enough to

[anthonyvd, 2017/01/12 19:18:59]

If anyone has a better idea to do this that doesn't feel as dirty, I'm all ears.

[Mathieu, 2017/01/12 21:27:11]

Idea 1: https://cs.chromium.org/chromium/src/ui/gfx/text_utils.h?rcl=0&l=29

Idea 2: RenderText thingy here
https://cs.chromium.org/chromium/src/ui/views/controls/label.cc?rcl=0&l=908

[anthonyvd, 2017/01/13 16:09:19]

It looks like neither of those would take into account the rest of the label
(insets, borders, etc) as they only measure the text itself. #2 also seems
equivalent to my implementation since it requires creating a label :(

[Mathieu, 2017/01/13 16:40:16]

Thanks for looking into it! Perhaps a views expert would have more insight into
this.

+  // accomodate the longest piece of text they contain. Because of this, each
+  // row's GridLayout requires its first column to have a fixed width of the
+  // correct size. To measure the required size, layout a label with each
+  // section name, measure its width, then initialize
+  // |widest_name_column_view_width_| with the largest value.
+  // This should only be performed once, when this sheet is shown, because
+  // language/font size can't change while the dialog is open.
+  std::vector<int> section_names {
+    IDS_PAYMENT_REQUEST_ORDER_SUMMARY_SECTION_NAME,
+    IDS_PAYMENT_REQUEST_PAYMENT_METHOD_SECTION_NAME,
+  };
+
+  std::for_each(
+      section_names.begin(),
+      section_names.end(),
+      [=](const int& name) {
+        views::Label label(l10n_util::GetStringUTF16(name));
+        widest_name_column_view_width_ = std::max(
+            label.GetPreferredSize().width(),
+            widest_name_column_view_width_);
+  });
+}
+
 }  // namespace payments