views: Remove improper use of GridLayout from examples

Replace GridLayout with BoxLayout and FlexLayout in cases where
GridLayout is not used as a true grid, but only for alignment.

This CL is part of the changes to apply documented best practice to
examples.

Bug: 897377
Change-Id: I789da2ebaa083f149079c36134dc8a1f48dd093a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2316455
Commit-Queue: Keren Zhu <kerenzhu@chromium.org>
Reviewed-by: Michael Wasserman <msw@chromium.org>
Cr-Commit-Position: refs/heads/master@{#791482}

ui/views/examples/message_box_example.cc

@@ -13,7 +13,8 @@
 #include "ui/views/controls/message_box_view.h"
 #include "ui/views/examples/examples_window.h"
 #include "ui/views/examples/grit/views_examples_resources.h"
-#include "ui/views/layout/grid_layout.h"
+#include "ui/views/layout/box_layout.h"
+#include "ui/views/layout/flex_layout.h"
 #include "ui/views/view.h"
 
 using l10n_util::GetStringUTF16;
@@ -28,33 +29,22 @@ MessageBoxExample::MessageBoxExample()
 MessageBoxExample::~MessageBoxExample() = default;
 
 void MessageBoxExample::CreateExampleView(View* container) {
-  GridLayout* layout =
-      container->SetLayoutManager(std::make_unique<views::GridLayout>());
+  container->SetLayoutManager(
+      std::make_unique<BoxLayout>(BoxLayout::Orientation::kVertical));
 
-  auto message_box_view = std::make_unique<MessageBoxView>(
-      MessageBoxView::InitParams(GetStringUTF16(IDS_MESSAGE_INTRO_LABEL)));
-  message_box_view->SetCheckBoxLabel(
+  message_box_view_ = container->AddChildView(std::make_unique<MessageBoxView>(
+      MessageBoxView::InitParams(GetStringUTF16(IDS_MESSAGE_INTRO_LABEL))));
+  message_box_view_->SetCheckBoxLabel(
       GetStringUTF16(IDS_MESSAGE_CHECK_BOX_LABEL));
 
-  const int message_box_column = 0;
-  ColumnSet* column_set = layout->AddColumnSet(message_box_column);
-  column_set->AddColumn(GridLayout::FILL, GridLayout::FILL, 1,
-                        GridLayout::ColumnSize::kUsePreferred, 0, 0);
-  layout->StartRow(1 /* expand */, message_box_column);
-  message_box_view_ = layout->AddView(std::move(message_box_view));
-
-  const int button_column = 1;
-  column_set = layout->AddColumnSet(button_column);
-  column_set->AddColumn(GridLayout::FILL, GridLayout::FILL, 0.5f,
-                        GridLayout::ColumnSize::kUsePreferred, 0, 0);
-  column_set->AddColumn(GridLayout::FILL, GridLayout::FILL, 0.5f,
-                        GridLayout::ColumnSize::kUsePreferred, 0, 0);
-
-  layout->StartRow(0 /* no expand */, button_column);
+  View* button_panel = container->AddChildView(std::make_unique<View>());
+  button_panel->SetLayoutManager(std::make_unique<FlexLayout>())
+      ->SetOrientation(LayoutOrientation::kHorizontal)
+      .SetMainAxisAlignment(LayoutAlignment::kStart);
 
-  status_ = layout->AddView(std::make_unique<LabelButton>(
+  status_ = button_panel->AddChildView(std::make_unique<LabelButton>(
       this, GetStringUTF16(IDS_MESSAGE_STATUS_LABEL)));
-  toggle_ = layout->AddView(std::make_unique<LabelButton>(
+  toggle_ = button_panel->AddChildView(std::make_unique<LabelButton>(
       this, GetStringUTF16(IDS_MESSAGE_TOGGLE_LABEL)));
 }
 

ui/views/examples/radio_button_example.cc

@@ -16,7 +16,7 @@
 #include "ui/views/controls/button/radio_button.h"
 #include "ui/views/examples/examples_window.h"
 #include "ui/views/examples/grit/views_examples_resources.h"
-#include "ui/views/layout/grid_layout.h"
+#include "ui/views/layout/box_layout.h"
 #include "ui/views/view.h"
 
 using l10n_util::GetStringUTF16;
@@ -39,25 +39,21 @@ RadioButtonExample::RadioButtonExample()
 RadioButtonExample::~RadioButtonExample() = default;
 
 void RadioButtonExample::CreateExampleView(View* container) {
-  GridLayout* layout =
-      container->SetLayoutManager(std::make_unique<views::GridLayout>());
-  ColumnSet* column_set = layout->AddColumnSet(0);
-  column_set->AddColumn(GridLayout::FILL, GridLayout::FILL, 1.0f,
-                        GridLayout::ColumnSize::kUsePreferred, 0, 0);
+  container->SetLayoutManager(
+      std::make_unique<views::BoxLayout>(BoxLayout::Orientation::kVertical));
+
   const int group = 1;
   for (size_t i = 0; i < 3; ++i) {
-    layout->StartRow(0, 0);
-    radio_buttons_.push_back(layout->AddView(std::make_unique<RadioButton>(
-        base::UTF8ToUTF16(base::StringPrintf("Radio %d in group %d",
-                                             static_cast<int>(i) + 1, group)),
+    radio_buttons_.push_back(
+        container->AddChildView(std::make_unique<RadioButton>(
+            base::UTF8ToUTF16(base::StringPrintf(
+                "Radio %d in group %d", static_cast<int>(i) + 1, group)),
             group)));
   }
 
-  layout->StartRow(0, 0);
-  select_ = layout->AddView(std::make_unique<LabelButton>(
+  select_ = container->AddChildView(std::make_unique<LabelButton>(
       this, GetStringUTF16(IDS_RADIO_BUTTON_SELECT_BUTTON_LABEL)));
-  layout->StartRow(0, 0);
-  status_ = layout->AddView(std::make_unique<LabelButton>(
+  status_ = container->AddChildView(std::make_unique<LabelButton>(
       this, GetStringUTF16(IDS_RADIO_BUTTON_STATUS_LABEL)));
 }
 

ui/views/examples/scroll_view_example.cc

@@ -20,8 +20,10 @@
 #include "ui/views/controls/button/radio_button.h"
 #include "ui/views/examples/grit/views_examples_resources.h"
 #include "ui/views/layout/box_layout.h"
-#include "ui/views/layout/grid_layout.h"
+#include "ui/views/layout/flex_layout.h"
+#include "ui/views/layout/flex_layout_types.h"
 #include "ui/views/view.h"
+#include "ui/views/view_class_properties.h"
 
 using l10n_util::GetStringUTF16;
 using l10n_util::GetStringUTF8;
@@ -83,33 +85,35 @@ void ScrollViewExample::CreateExampleView(View* container) {
   scrollable_->SetBounds(0, 0, 1000, 100);
   scrollable_->SetColor(SK_ColorYELLOW, SK_ColorCYAN);
 
-  GridLayout* layout =
-      container->SetLayoutManager(std::make_unique<views::GridLayout>());
+  container->SetLayoutManager(std::make_unique<FlexLayout>())
+      ->SetOrientation(LayoutOrientation::kVertical);
+
+  auto full_flex = FlexSpecification(MinimumFlexSizeRule::kScaleToZero,
+                                     MaximumFlexSizeRule::kUnbounded)
+                       .WithWeight(1);
 
   // Add scroll view.
-  ColumnSet* column_set = layout->AddColumnSet(0);
-  column_set->AddColumn(GridLayout::FILL, GridLayout::FILL, 1,
-                        GridLayout::ColumnSize::kUsePreferred, 0, 0);
-  layout->StartRow(1, 0);
-  scroll_view_ = layout->AddView(std::move(scroll_view));
+  scroll_view_ = container->AddChildView(std::move(scroll_view));
+  scroll_view_->SetProperty(views::kFlexBehaviorKey, full_flex);
 
   // Add control buttons.
-  column_set = layout->AddColumnSet(1);
-  for (size_t i = 0; i < 5; i++) {
-    column_set->AddColumn(GridLayout::FILL, GridLayout::FILL, 1,
-                          GridLayout::ColumnSize::kUsePreferred, 0, 0);
-  }
-  layout->StartRow(0, 1);
-  wide_ = layout->AddView(std::make_unique<LabelButton>(
+  auto* button_panel = container->AddChildView(std::make_unique<View>());
+  button_panel->SetLayoutManager(std::make_unique<FlexLayout>())
+      ->SetOrientation(LayoutOrientation::kHorizontal);
+
+  wide_ = button_panel->AddChildView(std::make_unique<LabelButton>(
       this, GetStringUTF16(IDS_SCROLL_VIEW_WIDE_LABEL)));
-  tall_ = layout->AddView(std::make_unique<LabelButton>(
+  tall_ = button_panel->AddChildView(std::make_unique<LabelButton>(
       this, GetStringUTF16(IDS_SCROLL_VIEW_TALL_LABEL)));
-  big_square_ = layout->AddView(std::make_unique<LabelButton>(
+  big_square_ = button_panel->AddChildView(std::make_unique<LabelButton>(
       this, GetStringUTF16(IDS_SCROLL_VIEW_BIG_SQUARE_LABEL)));
-  small_square_ = layout->AddView(std::make_unique<LabelButton>(
+  small_square_ = button_panel->AddChildView(std::make_unique<LabelButton>(
       this, GetStringUTF16(IDS_SCROLL_VIEW_SMALL_SQUARE_LABEL)));
-  scroll_to_ = layout->AddView(std::make_unique<LabelButton>(
+  scroll_to_ = button_panel->AddChildView(std::make_unique<LabelButton>(
       this, GetStringUTF16(IDS_SCROLL_VIEW_SCROLL_TO_LABEL)));
+
+  for (View* child : button_panel->children())
+    child->SetProperty(views::kFlexBehaviorKey, full_flex);
 }
 
 void ScrollViewExample::ButtonPressed(Button* sender, const ui::Event& event) {

ui/views/examples/tabbed_pane_example.cc

@@ -13,7 +13,9 @@
 #include "ui/views/controls/tabbed_pane/tabbed_pane.h"
 #include "ui/views/examples/examples_window.h"
 #include "ui/views/examples/grit/views_examples_resources.h"
-#include "ui/views/layout/grid_layout.h"
+#include "ui/views/layout/flex_layout.h"
+#include "ui/views/layout/flex_layout_types.h"
+#include "ui/views/view_class_properties.h"
 
 using l10n_util::GetStringUTF16;
 using l10n_util::GetStringUTF8;
@@ -36,15 +38,15 @@ void TabbedPaneExample::CreateExampleView(View* container) {
   auto select_at = std::make_unique<LabelButton>(
       this, GetStringUTF16(IDS_TABBED_PANE_SELECT_1_LABEL));
 
-  GridLayout* layout =
-      container->SetLayoutManager(std::make_unique<views::GridLayout>());
+  container->SetLayoutManager(std::make_unique<views::FlexLayout>())
+      ->SetOrientation(LayoutOrientation::kVertical);
 
-  const int tabbed_pane_column = 0;
-  ColumnSet* column_set = layout->AddColumnSet(tabbed_pane_column);
-  column_set->AddColumn(GridLayout::FILL, GridLayout::FILL, 1.0f,
-                        GridLayout::ColumnSize::kUsePreferred, 0, 0);
-  layout->StartRow(1 /* expand */, tabbed_pane_column);
-  tabbed_pane_ = layout->AddView(std::move(tabbed_pane));
+  auto full_flex = FlexSpecification(MinimumFlexSizeRule::kScaleToZero,
+                                     MaximumFlexSizeRule::kUnbounded)
+                       .WithWeight(1);
+
+  tabbed_pane_ = container->AddChildView(std::move(tabbed_pane));
+  tabbed_pane_->SetProperty(views::kFlexBehaviorKey, full_flex);
 
   // Create a few tabs with a button first.
   AddButton(GetStringUTF16(IDS_TABBED_PANE_TAB_1_LABEL));
@@ -52,17 +54,14 @@ void TabbedPaneExample::CreateExampleView(View* container) {
   AddButton(GetStringUTF16(IDS_TABBED_PANE_TAB_3_LABEL));
 
   // Add control buttons horizontally.
-  const int button_column = 1;
-  column_set = layout->AddColumnSet(button_column);
-  for (size_t i = 0; i < 3; i++) {
-    column_set->AddColumn(GridLayout::FILL, GridLayout::FILL, 1.0f,
-                          GridLayout::ColumnSize::kUsePreferred, 0, 0);
-  }
-
-  layout->StartRow(0 /* no expand */, button_column);
-  add_ = layout->AddView(std::move(add));
-  add_at_ = layout->AddView(std::move(add_at));
-  select_at_ = layout->AddView(std::move(select_at));
+  auto* button_panel = container->AddChildView(std::make_unique<View>());
+  button_panel->SetLayoutManager(std::make_unique<views::FlexLayout>());
+  add_ = button_panel->AddChildView(std::move(add));
+  add_at_ = button_panel->AddChildView(std::move(add_at));
+  select_at_ = button_panel->AddChildView(std::move(select_at));
+
+  for (View* view : button_panel->children())
+    view->SetProperty(views::kFlexBehaviorKey, full_flex);
 }
 
 void TabbedPaneExample::ButtonPressed(Button* sender, const ui::Event& event) {

ui/views/examples/table_example.cc

@@ -16,7 +16,9 @@
 #include "ui/views/controls/button/checkbox.h"
 #include "ui/views/controls/scroll_view.h"
 #include "ui/views/examples/examples_window.h"
-#include "ui/views/layout/grid_layout.h"
+#include "ui/views/layout/flex_layout.h"
+#include "ui/views/layout/flex_layout_types.h"
+#include "ui/views/view_class_properties.h"
 
 using base::ASCIIToUTF16;
 
@@ -44,8 +46,8 @@ TableExample::~TableExample() {
 }
 
 void TableExample::CreateExampleView(View* container) {
-  GridLayout* layout =
-      container->SetLayoutManager(std::make_unique<views::GridLayout>());
+  container->SetLayoutManager(std::make_unique<views::FlexLayout>())
+      ->SetOrientation(LayoutOrientation::kVertical);
 
   std::vector<ui::TableColumn> columns;
   columns.push_back(TestTableColumn(0, "Fruit"));
@@ -54,35 +56,26 @@ void TableExample::CreateExampleView(View* container) {
   columns.push_back(TestTableColumn(2, "Origin"));
   columns.push_back(TestTableColumn(3, "Price"));
   columns.back().alignment = ui::TableColumn::RIGHT;
+
+  auto full_flex = FlexSpecification(MinimumFlexSizeRule::kScaleToZero,
+                                     MaximumFlexSizeRule::kUnbounded)
+                       .WithWeight(1);
+
+  // Make table
   auto table = std::make_unique<TableView>(this, columns, ICON_AND_TEXT, true);
   table->SetGrouper(this);
   table->set_observer(this);
-  icon1_.allocN32Pixels(16, 16);
-  SkCanvas canvas1(icon1_);
-  canvas1.drawColor(SK_ColorRED);
-
-  icon2_.allocN32Pixels(16, 16);
-  SkCanvas canvas2(icon2_);
-  canvas2.drawColor(SK_ColorBLUE);
-
-  ColumnSet* column_set = layout->AddColumnSet(0);
-  column_set->AddColumn(GridLayout::FILL, GridLayout::FILL, 1,
-                        GridLayout::ColumnSize::kUsePreferred, 0, 0);
-  layout->StartRow(1 /* expand */, 0);
   table_ = table.get();
-  layout->AddView(TableView::CreateScrollViewWithTable(std::move(table)));
+  container
+      ->AddChildView(TableView::CreateScrollViewWithTable(std::move(table)))
+      ->SetProperty(views::kFlexBehaviorKey, full_flex);
 
-  column_set = layout->AddColumnSet(1);
-  column_set->AddColumn(GridLayout::FILL, GridLayout::FILL, 0.5f,
-                        GridLayout::ColumnSize::kUsePreferred, 0, 0);
-  column_set->AddColumn(GridLayout::FILL, GridLayout::FILL, 0.5f,
-                        GridLayout::ColumnSize::kUsePreferred, 0, 0);
-  column_set->AddColumn(GridLayout::FILL, GridLayout::FILL, 0.5f,
-                        GridLayout::ColumnSize::kUsePreferred, 0, 0);
-  column_set->AddColumn(GridLayout::FILL, GridLayout::FILL, 0.5f,
-                        GridLayout::ColumnSize::kUsePreferred, 0, 0);
+  icon1_.allocN32Pixels(16, 16);
+  icon2_.allocN32Pixels(16, 16);
 
-  layout->StartRow(0 /* no expand */, 1);
+  SkCanvas canvas1(icon1_), canvas2(icon2_);
+  canvas1.drawColor(SK_ColorRED);
+  canvas2.drawColor(SK_ColorBLUE);
 
   auto make_checkbox =
       [this](base::string16 text) -> std::unique_ptr<Checkbox> {
@@ -91,14 +84,21 @@ void TableExample::CreateExampleView(View* container) {
     return result;
   };
 
-  column1_visible_checkbox_ =
-      layout->AddView(make_checkbox(ASCIIToUTF16("Fruit column visible")));
-  column2_visible_checkbox_ =
-      layout->AddView(make_checkbox(ASCIIToUTF16("Color column visible")));
-  column3_visible_checkbox_ =
-      layout->AddView(make_checkbox(ASCIIToUTF16("Origin column visible")));
-  column4_visible_checkbox_ =
-      layout->AddView(make_checkbox(ASCIIToUTF16("Price column visible")));
+  // Make buttons
+  auto* button_panel = container->AddChildView(std::make_unique<View>());
+  button_panel->SetLayoutManager(std::make_unique<views::FlexLayout>())
+      ->SetOrientation(LayoutOrientation::kHorizontal);
+  column1_visible_checkbox_ = button_panel->AddChildView(
+      make_checkbox(ASCIIToUTF16("Fruit column visible")));
+  column2_visible_checkbox_ = button_panel->AddChildView(
+      make_checkbox(ASCIIToUTF16("Color column visible")));
+  column3_visible_checkbox_ = button_panel->AddChildView(
+      make_checkbox(ASCIIToUTF16("Origin column visible")));
+  column4_visible_checkbox_ = button_panel->AddChildView(
+      make_checkbox(ASCIIToUTF16("Price column visible")));
+
+  for (View* child : button_panel->children())
+    child->SetProperty(views::kFlexBehaviorKey, full_flex);
 }
 
 int TableExample::RowCount() {

ui/views/examples/tree_view_example.cc

@@ -15,7 +15,9 @@
 #include "ui/views/controls/tree/tree_view.h"
 #include "ui/views/controls/tree/tree_view_drawing_provider.h"
 #include "ui/views/examples/grit/views_examples_resources.h"
-#include "ui/views/layout/grid_layout.h"
+#include "ui/views/layout/flex_layout.h"
+#include "ui/views/layout/flex_layout_types.h"
+#include "ui/views/view_class_properties.h"
 
 using l10n_util::GetStringUTF16;
 using l10n_util::GetStringUTF8;
@@ -105,29 +107,29 @@ void TreeViewExample::CreateExampleView(View* container) {
   change_title->SetFocusForPlatform();
   change_title->set_request_focus_on_press(true);
 
-  GridLayout* layout =
-      container->SetLayoutManager(std::make_unique<views::GridLayout>());
+  container->SetLayoutManager(std::make_unique<views::FlexLayout>())
+      ->SetOrientation(LayoutOrientation::kVertical);
+
+  auto full_flex = FlexSpecification(MinimumFlexSizeRule::kScaleToZero,
+                                     MaximumFlexSizeRule::kUnbounded)
+                       .WithWeight(1);
 
-  const int tree_view_column = 0;
-  ColumnSet* column_set = layout->AddColumnSet(tree_view_column);
-  column_set->AddColumn(GridLayout::FILL, GridLayout::FILL, 1.0f,
-                        GridLayout::ColumnSize::kUsePreferred, 0, 0);
-  layout->StartRow(1 /* expand */, tree_view_column);
   tree_view_ = tree_view.get();
-  layout->AddView(TreeView::CreateScrollViewWithTree(std::move(tree_view)));
+  container
+      ->AddChildView(TreeView::CreateScrollViewWithTree(std::move(tree_view)))
+      ->SetProperty(views::kFlexBehaviorKey, full_flex);
 
   // Add control buttons horizontally.
-  const int button_column = 1;
-  column_set = layout->AddColumnSet(button_column);
-  for (size_t i = 0; i < 3; i++) {
-    column_set->AddColumn(GridLayout::FILL, GridLayout::FILL, 1.0f,
-                          GridLayout::ColumnSize::kUsePreferred, 0, 0);
-  }
+  auto* button_panel = container->AddChildView(std::make_unique<View>());
+  button_panel->SetLayoutManager(std::make_unique<FlexLayout>())
+      ->SetOrientation(LayoutOrientation::kHorizontal);
+
+  add_ = button_panel->AddChildView(std::move(add));
+  remove_ = button_panel->AddChildView(std::move(remove));
+  change_title_ = button_panel->AddChildView(std::move(change_title));
 
-  layout->StartRow(0 /* no expand */, button_column);
-  add_ = layout->AddView(std::move(add));
-  remove_ = layout->AddView(std::move(remove));
-  change_title_ = layout->AddView(std::move(change_title));
+  for (View* view : button_panel->children())
+    view->SetProperty(views::kFlexBehaviorKey, full_flex);
 }
 
 void TreeViewExample::AddNewNode() {