[Tab Groups] Align color picker within the editor bubble.

There is currently a border around each part of the visible circle that
is part of the button and receives events. In order to have each color
have equal target hit sizes, the group modifier container is made
slightly larger (to contain the entirety of its children) and then the
title field is inset-ted inwards by the same amount. The title field
also needs its own container since views::Textfield has special logic
for its borders.

Bug: 1015634
Change-Id: Ia9431f125da7ee654acf0d327e15e7f1b513c9a1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1999104Reviewed-by: Connie Wan <connily@chromium.org>
Commit-Queue: Charlene Yan <cyan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#732415}

chrome/browser/ui/views/tabs/tab_group_editor_bubble_view.cc

@@ -89,8 +89,16 @@ TabGroupEditorBubbleView::TabGroupEditorBubbleView(
 
   views::View* group_modifier_container =
       AddChildView(std::make_unique<views::View>());
+
+  gfx::Insets color_element_insets =
+      ChromeLayoutProvider::Get()->GetInsetsMetric(
+          views::INSETS_VECTOR_IMAGE_BUTTON);
   group_modifier_container->SetBorder(views::CreateEmptyBorder(
-      gfx::Insets(vertical_dialog_content_spacing, horizontal_spacing)));
+      gfx::Insets(vertical_dialog_content_spacing,
+                  horizontal_spacing - color_element_insets.left(),
+                  vertical_dialog_content_spacing,
+                  horizontal_spacing - color_element_insets.right())));
+
   views::FlexLayout* container_layout =
       group_modifier_container->SetLayoutManager(
           std::make_unique<views::FlexLayout>());
@@ -98,23 +106,32 @@ TabGroupEditorBubbleView::TabGroupEditorBubbleView(
       .SetIgnoreDefaultMainAxisMargins(true);
 
   // Add the text field for editing the title.
-  title_field_ = group_modifier_container->AddChildView(
-      std::make_unique<views::Textfield>());
+  views::View* title_field_container =
+      group_modifier_container->AddChildView(std::make_unique<views::View>());
+  title_field_container->SetBorder(views::CreateEmptyBorder(gfx::Insets(
+      0, color_element_insets.left(), vertical_dialog_content_spacing,
+      color_element_insets.right())));
+  title_field_ =
+      title_field_container->AddChildView(std::make_unique<views::Textfield>());
   title_field_->SetText(title);
   title_field_->SetAccessibleName(base::ASCIIToUTF16("Group title"));
   title_field_->SetPlaceholderText(
       l10n_util::GetStringUTF16(IDS_TAB_GROUP_HEADER_BUBBLE_TITLE_PLACEHOLDER));
   title_field_->set_controller(&title_field_controller_);
 
-  const SkColor initial_color = InitColorSet();
+  views::FlexLayout* title_field_container_layout =
+      title_field_container->SetLayoutManager(
+          std::make_unique<views::FlexLayout>());
+  title_field_container_layout
+      ->SetOrientation(views::LayoutOrientation::kVertical)
+      .SetIgnoreDefaultMainAxisMargins(true);
 
+  const SkColor initial_color = InitColorSet();
   color_selector_ =
       group_modifier_container->AddChildView(std::make_unique<ColorPickerView>(
           colors_, background_color(), initial_color,
           base::Bind(&TabGroupEditorBubbleView::UpdateGroup,
                      base::Unretained(this))));
-  color_selector_->SetBorder(views::CreateEmptyBorder(
-      gfx::Insets(vertical_dialog_content_spacing, 0, 0, 0)));
 
   AddChildView(std::make_unique<views::Separator>());