[Tab Groups] Update Tab Group Header Context Menu closer to spec.

Updates the color picker to have a larger colored circle (less white
space) when hovered or selected. Adding top margin to the color picker
view so there is more space between them.

Bug: 1015634
Change-Id: Ie7cd7b5ec5b32d23e438dc40f563b54f46431f62
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1891790Reviewed-by: Taylor Bergquist <tbergquist@chromium.org>
Commit-Queue: Charlene Yan <cyan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#712306}

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

@@ -149,8 +149,8 @@ class ColorPickerElementView : public views::Button,
   // Does nothing if not selected or hovered.
   void PaintSelectionIndicator(gfx::Canvas* canvas) {
     // Visual parameters of our ring.
-    constexpr float kInset = 4.0f;
-    constexpr float kThickness = 4.0f;
+    constexpr float kInset = 3.0f;
+    constexpr float kThickness = 2.0f;
     constexpr SkColor kSelectedColor = SK_ColorWHITE;
     constexpr SkColor kPendingColor = gfx::kGoogleGrey200;
 

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

@@ -123,6 +123,8 @@ TabGroupEditorBubbleView::TabGroupEditorBubbleView(
           GetColorPickerList(),
           base::Bind(&TabGroupEditorBubbleView::UpdateGroup,
                      base::Unretained(this))));
+  color_selector_->SetBorder(
+      views::CreateEmptyBorder(gfx::Insets(vertical_spacing, 0, 0, 0)));
 
   AddChildView(std::make_unique<views::Separator>());