[Payments] Fix up field widths in desktop editors.

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 <map>
 #include <memory>
 #include <utility>
 
@@ skipping 172 matching lines @@
   text_fields_.clear();
   comboboxes_.clear();
 
   std::unique_ptr<views::GridLayout> editor_layout =
       base::MakeUnique<views::GridLayout>(editor_view.get());
 
   // The editor grid layout is padded horizontally.
   editor_layout->SetInsets(0, payments::kPaymentRequestRowHorizontalInsets, 0,
                            payments::kPaymentRequestRowHorizontalInsets);
 
-  views::ColumnSet* columns = editor_layout->AddColumnSet(0);
-  columns->AddColumn(views::GridLayout::LEADING, views::GridLayout::CENTER, 0,
-                     views::GridLayout::USE_PREF, 0, 0);
-
+  // Column set for short fields.
+  constexpr int kLabelWidth = 140;
+  views::ColumnSet* columns_short = editor_layout->AddColumnSet(0);
+  columns_short->AddColumn(views::GridLayout::LEADING,
+                           views::GridLayout::CENTER, 0,
+                           views::GridLayout::FIXED, kLabelWidth, 0);
   // This is the horizontal padding between the label and the input field.
   constexpr int kLabelInputFieldHorizontalPadding = 16;
-  columns->AddPaddingColumn(0, kLabelInputFieldHorizontalPadding);
+  columns_short->AddPaddingColumn(0, kLabelInputFieldHorizontalPadding);
+  // It's possible for the dialog to get wider than the minimum, in which case
+  // we use the extra whitespace for the field width.
+  constexpr int kShortInputFieldFixedWidth = 176;
+  int short_input_width =

[anthonyvd, 2017/05/10 15:03:56]

Ok so one last thing to simplify this code. Currently the UX spec says:

Dialog width: 512px
Label width: 140px
Padding between label and field: 16px
Insets: 2x16px

Form this, we can infer 324px left for the field itself, minus 176px for short
fields and 272px for long fields, the trailing padding should therefore always
be 148px/52px for short/long fields. Let's call that value |trailing_padding|.

Because of this, this code can be changed to:

1. A fixed size column for the label
2. A 16px padding column
3. A USE_PREF sized column for the field
4. A fixed size padding column, |trailing_padding| px in width

This cleans up the code a bit (it removes the width computation) and removes
uses of GetActualDialogWidth(), which is probably going away.

+      kShortInputFieldFixedWidth + (GetActualDialogWidth() - kDialogMinWidth);
+  columns_short->AddColumn(views::GridLayout::LEADING,
+                           views::GridLayout::CENTER, 0,
+                           views::GridLayout::FIXED, short_input_width, 0);
 
-  columns->AddColumn(views::GridLayout::LEADING, views::GridLayout::CENTER, 0,
-                     views::GridLayout::USE_PREF, 0, 0);
+  // Column set for long fields.
+  views::ColumnSet* columns_long = editor_layout->AddColumnSet(1);
+  columns_long->AddColumn(views::GridLayout::LEADING, views::GridLayout::CENTER,
+                          0, views::GridLayout::FIXED, kLabelWidth, 0);
+  columns_long->AddPaddingColumn(0, kLabelInputFieldHorizontalPadding);
+  // It's possible for the dialog to get wider than the minimum, in which case
+  // we use the extra whitespace for the field width.
+  constexpr int kLongInputFieldFixedWidth = 272;
+  int long_input_width =
+      kLongInputFieldFixedWidth + (GetActualDialogWidth() - kDialogMinWidth);
+  columns_long->AddColumn(views::GridLayout::LEADING, views::GridLayout::CENTER,
+                          0, views::GridLayout::FIXED, long_input_width, 0);
 
   // The LayoutManager needs to be set before input fields are created, so we
   // keep a handle to it before we release it to the view.
   views::GridLayout* layout_handle = editor_layout.get();
   editor_view->SetLayoutManager(editor_layout.release());
   std::vector<EditorField> fields = GetFieldDefinitions();
   for (const auto& field : fields)
     CreateInputField(layout_handle, 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) {
+  int column_set =
+      field.length_hint == EditorField::LengthHint::HINT_SHORT ? 0 : 1;
+
   // This is the top padding for every row.
   constexpr int kInputRowSpacing = 6;
-  layout->StartRowWithPadding(0, 0, 0, kInputRowSpacing);
+  layout->StartRowWithPadding(0, column_set, 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. Value picked so that left + right label
   // padding bring the label to half-way in the dialog (~225).
   constexpr int kMaximumLabelWidth = 192;
   label->SetMultiLine(true);
   label->SetMaximumWidth(kMaximumLabelWidth);
   layout->AddView(label.release());
 
@@ skipping 27 matching lines @@
     if (!first_field_view_)
       first_field_view_ = combobox;
 
     // |combobox| will now be owned by |row|.
     layout->AddView(combobox, 1, 1, views::GridLayout::FILL,
                     views::GridLayout::FILL, 0, kInputFieldHeight);
   } else {
     NOTREACHED();
   }
 
-  layout->StartRow(0, 0);
+  layout->StartRow(0, column_set);
   layout->SkipColumns(1);
   std::unique_ptr<views::View> error_label_view =
       base::MakeUnique<views::View>();
   error_label_view->SetLayoutManager(new views::FillLayout);
   error_labels_[field] = error_label_view.get();
   layout->AddView(error_label_view.release());
 
   // Bottom padding for the row.
   layout->AddPaddingRow(0, kInputRowSpacing);
 }
 
 }  // namespace payments