[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_data_util.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);
 }
 
+// Creates the Order Summary row, which contains an "Order Summary" label,
+// a Total Amount label, and a Chevron.
+// +----------------------------------------------+
+// | Order Summary           Total USD $12.34   > |
+// +----------------------------------------------+
 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;
 }
 
+// Creates the Payment Method row, which contains a "Payment" label, the user's
+// masked Credit Card details, the icon for the selected card, and a chevron.
+// +----------------------------------------------+
+// | Payment         Visa ****0000                |
+// |                 John Smith        | VISA | > |
+// |                                              |
+// +----------------------------------------------+
+std::unique_ptr<views::Button>
+PaymentSheetViewController::CreatePaymentMethodRow() {
+  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::data_util::GetPaymentRequestData(
+              selected_card->type()).icon_resource_id)
+          .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() {

[sky, 2017/01/13 23:42:52]

Effective c++ recommends preferring non-member functions where possible. WDYT of
moving this function to the anonymous namespace at the top of the file and
having it return the size (so that it doesn't need to modify
widget_name_column_view_width_)? That way you could call from the constructor
and widget_name_column_view_width_ could be const.

[anthonyvd, 2017/01/16 15:33:07]

Great point! Done.

+  DCHECK_EQ(0, widest_name_column_view_width_);
+
+  // The name colums in each row should all have the same width, large enough to
+  // 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,
+  };
+
+  views::Label label(base::ASCIIToUTF16(""));
+  for (int name_id: section_names) {

[sky, 2017/01/13 23:42:52]

So much more readable!

+    label.SetText(l10n_util::GetStringUTF16(name_id));
+    widest_name_column_view_width_ = std::max(
+        label.GetPreferredSize().width(),
+        widest_name_column_view_width_);
+  }
+}
+
 }  // namespace payments