Paint close tab button highlight circle programmatically.

Refactor, minimize and clean up code. Moved the non-refresh/non-touch
tab close button highlight colors to theme_properties.cc since there
was a theme element.

It's still using the close (X) icons instead of painting them since the
coordinates of the strokes are very odd. Also, the "touch" version of the
icon drawn by outlining the X with a complicated path.

Once actual specs for the icon are available, the code can be updated.

TBR=estade@chromium.org

Bug: 838152
Change-Id: I2abca3be74f08649b3472f22fa31d0f897789e70
Reviewed-on: https://chromium-review.googlesource.com/1145590Reviewed-by: Sidney San Martín <sdy@chromium.org>
Reviewed-by: Evan Stade <estade@chromium.org>
Reviewed-by: Allen Bauer <kylixrd@chromium.org>
Reviewed-by: Bret Sepulveda <bsep@chromium.org>
Commit-Queue: Allen Bauer <kylixrd@chromium.org>
Cr-Commit-Position: refs/heads/master@{#577196}

chrome/app/vector_icons/BUILD.gn

@@ -105,9 +105,7 @@ aggregate_vector_icons("chrome_vector_icons") {
     "tab_audio_muting_rounded.icon",
     "tab_audio_rounded.icon",
     "tab_bluetooth_connected.icon",
-    "tab_close_button_highlight.icon",
     "tab_close_button_touch.icon",
-    "tab_close_button_touch_highlight.icon",
     "tab_close_normal.icon",
     "tab_media_capturing.icon",
     "tab_media_capturing_with_arrow.icon",

chrome/app/vector_icons/tab_close_button_highlight.icon

-// Copyright 2018 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.
-
-// The highlight circle around the close "X" for a tab when hovered/pressed.
-CANVAS_DIMENSIONS, 16,
-CIRCLE, 8, 8, 8,

chrome/app/vector_icons/tab_close_button_touch_highlight.icon

-// Copyright 2018 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.
-
-CANVAS_DIMENSIONS, 24,
-CIRCLE, 12, 12, 12,

chrome/browser/themes/theme_properties.cc

@@ -338,6 +338,10 @@ SkColor ThemeProperties::GetDefaultColor(int id, bool incognito) {
       return kDefaultColorTabAlertRecordingIcon;
     case COLOR_TAB_ALERT_CAPTURING:
       return kDefaultColorTabAlertCapturingIcon;
+    case COLOR_TAB_CLOSE_BUTTON_BACKGROUND_HOVER:
+      return SkColorSetRGB(0xDB, 0x44, 0x37);
+    case COLOR_TAB_CLOSE_BUTTON_BACKGROUND_PRESSED:
+      return SkColorSetRGB(0xA8, 0x35, 0x2A);
 #if defined(OS_MACOSX)
     case COLOR_FRAME_VIBRANCY_OVERLAY:
       return incognito ? kDefaultColorFrameVibrancyOverlayIncognito

chrome/browser/ui/cocoa/hover_close_button.mm

@@ -11,7 +11,10 @@
 #import "third_party/google_toolbox_for_mac/src/AppKit/GTMKeyValueAnimation.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/base/resource/resource_bundle.h"
+#include "ui/gfx/canvas.h"
 #include "ui/gfx/color_palette.h"
+#include "ui/gfx/geometry/rect_f.h"
+#include "ui/gfx/image/canvas_image_source.h"
 #include "ui/gfx/image/image_skia_operations.h"
 #include "ui/gfx/image/image_skia_util_mac.h"
 #include "ui/gfx/paint_vector_icon.h"
@@ -31,6 +34,31 @@ NSString* gTooltip = nil;
 NSString* const kFadeOutValueKeyPath = @"fadeOutValue";
 
 const SkColor kDefaultIconColor = SkColorSetARGB(0xA0, 0x00, 0x00, 0x00);
+
+class HighlightImage : public gfx::CanvasImageSource {
+ public:
+  explicit HighlightImage(const int image_size, SkColor color)
+      : CanvasImageSource(gfx::Size(image_size, image_size),
+                          /*is_opaque =*/true),
+        color_(color) {}
+  ~HighlightImage() override {}
+
+ private:
+  void Draw(gfx::Canvas* canvas) override {
+    cc::PaintFlags flags;
+    flags.setAntiAlias(true);
+    flags.setStyle(cc::PaintFlags::kFill_Style);
+    flags.setColor(color_);
+    canvas->DrawCircle(
+        gfx::RectF(size().width(), size().height()).CenterPoint(),
+        kTabCloseButtonSize / 2, flags);
+  }
+
+  SkColor color_;
+
+  DISALLOW_COPY_AND_ASSIGN(HighlightImage);
+};
+
 }  // namespace
 
 @interface HoverCloseButton ()
@@ -154,7 +182,6 @@ const SkColor kDefaultIconColor = SkColorSetARGB(0xA0, 0x00, 0x00, 0x00);
 }
 
 - (NSImage*)imageForHoverState:(CloseButtonHoverState)hoverState {
-  const gfx::VectorIcon* vectorHighlightIcon = nullptr;
   SkColor vectorIconColor = gfx::kPlaceholderColor;
 
   switch (hoverState) {
@@ -162,23 +189,22 @@ const SkColor kDefaultIconColor = SkColorSetARGB(0xA0, 0x00, 0x00, 0x00);
       break;
     case kHoverStateMouseOver:
       // For mouse over, the icon color is the fill color of the circle.
-      vectorHighlightIcon = &kTabCloseButtonHighlightIcon;
       vectorIconColor = SkColorSetARGB(0xFF, 0xDB, 0x44, 0x37);
       break;
     case kHoverStateMouseDown:
       // For mouse pressed, the icon color is the fill color of the circle.
-      vectorHighlightIcon = &kTabCloseButtonHighlightIcon;
       vectorIconColor = SkColorSetARGB(0xFF, 0xA8, 0x35, 0x2A);
       break;
   }
 
-  const gfx::ImageSkia& iconImage =
-      gfx::CreateVectorIcon(kTabCloseNormalIcon, kTabCloseButtonSize,
-                            vectorHighlightIcon ? SK_ColorWHITE : iconColor_);
+  const gfx::ImageSkia iconImage = gfx::CreateVectorIcon(
+      kTabCloseNormalIcon, kTabCloseButtonSize,
+      hoverState != kHoverStateNone ? SK_ColorWHITE : iconColor_);
 
-  if (vectorHighlightIcon) {
-    const gfx::ImageSkia& highlight = gfx::CreateVectorIcon(
-        *vectorHighlightIcon, kTabCloseButtonSize, vectorIconColor);
+  if (hoverState != kHoverStateNone) {
+    const gfx::ImageSkia highlight =
+        gfx::CanvasImageSource::MakeImageSkia<HighlightImage>(
+            kTabCloseButtonSize, vectorIconColor);
     return NSImageFromImageSkia(
         gfx::ImageSkiaOperations::CreateSuperimposedImage(highlight,
                                                           iconImage));

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

@@ -1702,14 +1702,11 @@ void Tab::OnButtonColorMaybeChanged() {
     button_color_ = new_button_color;
     title_->SetEnabledColor(title_color);
     alert_indicator_button_->OnParentTabButtonColorChanged();
-    if (!MD::IsTouchOptimizedUiEnabled()) {
-      close_button_->SetTabColor(button_color_,
-                                 color_utils::IsDark(theme_provider->GetColor(
-                                     ThemeProperties::COLOR_TOOLBAR)));
-    }
   }
-  if (MD::IsTouchOptimizedUiEnabled())
-    close_button_->ActiveStateChanged(this);
+  SkColor icon_color = MD::IsNewerMaterialUi()
+                           ? GetCloseTabButtonColor(views::Button::STATE_NORMAL)
+                           : button_color_;
+  close_button_->SetIconColors(icon_color);
 }
 
 Tab::BackgroundCache::BackgroundCache() = default;

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

@@ -58,26 +58,8 @@ int TabCloseButton::GetWidth() {
   return gfx::GetDefaultSizeOfVectorIcon(close_icon);
 }
 
-void TabCloseButton::SetTabColor(SkColor color, bool tab_color_is_dark) {
-  SkColor hover_color = SkColorSetRGB(0xDB, 0x44, 0x37);
-  SkColor pressed_color = SkColorSetRGB(0xA8, 0x35, 0x2A);
-  SkColor icon_color = SK_ColorWHITE;
-  if (MD::IsRefreshUi()) {
-    hover_color = tab_color_is_dark ? gfx::kGoogleGrey700 : gfx::kGoogleGrey200;
-    pressed_color =
-        tab_color_is_dark ? gfx::kGoogleGrey600 : gfx::kGoogleGrey300;
-    icon_color = color;
-  }
-  GenerateImages(false, color, icon_color, hover_color, pressed_color);
-}
-
-void TabCloseButton::ActiveStateChanged(const Tab* parent_tab) {
-  SkColor icon_color =
-      parent_tab->GetCloseTabButtonColor(views::Button::STATE_NORMAL);
-  GenerateImages(
-      true, icon_color, icon_color,
-      parent_tab->GetCloseTabButtonColor(views::Button::STATE_HOVERED),
-      parent_tab->GetCloseTabButtonColor(views::Button::STATE_PRESSED));
+void TabCloseButton::SetIconColors(SkColor color) {
+  GenerateImages(color, MD::IsNewerMaterialUi() ? color : SK_ColorWHITE);
 }
 
 views::View* TabCloseButton::GetTooltipHandlerForPoint(
@@ -131,6 +113,20 @@ void TabCloseButton::Layout() {
 
 void TabCloseButton::PaintButtonContents(gfx::Canvas* canvas) {
   canvas->SaveLayerAlpha(GetOpacity());
+  ButtonState button_state = state();
+  if (button_state != views::Button::STATE_NORMAL) {
+    // Draw the background circle highlight.
+    gfx::Path path;
+    SkColor background_color =
+        static_cast<Tab*>(parent())->GetCloseTabButtonColor(button_state);
+    gfx::Point center = GetContentsBounds().CenterPoint();
+    path.setFillType(SkPath::kEvenOdd_FillType);
+    path.addCircle(center.x(), center.y(), GetWidth() / 2);
+    cc::PaintFlags flags;
+    flags.setAntiAlias(true);
+    flags.setColor(background_color);
+    canvas->DrawPath(path, flags);
+  }
   views::ImageButton::PaintButtonContents(canvas);
   canvas->Restore();
 }
@@ -178,34 +174,18 @@ SkAlpha TabCloseButton::GetOpacity() {
                                      SK_AlphaOPAQUE);
 }
 
-void TabCloseButton::GenerateImages(bool is_touch,
-                                    SkColor normal_icon_color,
-                                    SkColor hover_pressed_icon_color,
-                                    SkColor hover_highlight_color,
-                                    SkColor pressed_highlight_color) {
-  const gfx::VectorIcon& button_icon =
-      is_touch ? kTabCloseButtonTouchIcon : kTabCloseNormalIcon;
-  const gfx::VectorIcon& highlight = is_touch
-                                         ? kTabCloseButtonTouchHighlightIcon
-                                         : kTabCloseButtonHighlightIcon;
-  const gfx::ImageSkia& normal =
+void TabCloseButton::GenerateImages(SkColor normal_icon_color,
+                                    SkColor hover_pressed_icon_color) {
+  const gfx::VectorIcon& button_icon = MD::IsTouchOptimizedUiEnabled()
+                                           ? kTabCloseButtonTouchIcon
+                                           : kTabCloseNormalIcon;
+  const gfx::ImageSkia normal =
       gfx::CreateVectorIcon(button_icon, normal_icon_color);
-  const gfx::ImageSkia& hover_pressed =
+  const gfx::ImageSkia hover_pressed =
       normal_icon_color != hover_pressed_icon_color
           ? gfx::CreateVectorIcon(button_icon, hover_pressed_icon_color)
           : normal;
-
-  const gfx::ImageSkia& hover_highlight =
-      gfx::CreateVectorIcon(highlight, hover_highlight_color);
-  const gfx::ImageSkia& pressed_highlight =
-      gfx::CreateVectorIcon(highlight, pressed_highlight_color);
-  const gfx::ImageSkia& hover =
-      gfx::ImageSkiaOperations::CreateSuperimposedImage(hover_highlight,
-                                                        hover_pressed);
-  const gfx::ImageSkia& pressed =
-      gfx::ImageSkiaOperations::CreateSuperimposedImage(pressed_highlight,
-                                                        hover_pressed);
   SetImage(views::Button::STATE_NORMAL, normal);
-  SetImage(views::Button::STATE_HOVERED, hover);
-  SetImage(views::Button::STATE_PRESSED, pressed);
+  SetImage(views::Button::STATE_HOVERED, hover_pressed);
+  SetImage(views::Button::STATE_PRESSED, hover_pressed);
 }

chrome/browser/ui/views/tabs/tab_close_button.h

@@ -9,8 +9,6 @@
 #include "ui/views/controls/button/image_button.h"
 #include "ui/views/masked_targeter_delegate.h"
 
-class Tab;
-
 // This is a Button subclass that shows the tab closed icon.
 //
 // In addition to setup for the icon, it forwards middle clicks to the parent
@@ -35,13 +33,8 @@ class TabCloseButton : public views::ImageButton,
   // This function must be called before the tab is painted so it knows what
   // color to use. It must also be called when the background color of the tab
   // changes (this class does not track tab activation state), and when the
-  // theme changes. |tab_color_is_dark| will be true if the tab is a dark
-  // color. This will NOT be called when in newer material ui mode.
-  void SetTabColor(SkColor color, bool tab_color_is_dark);
-
-  // This is called whenever the |parent_tab| changes its active state. This
-  // is only called when in newer material ui mode.
-  void ActiveStateChanged(const Tab* parent_tab);
+  // theme changes.
+  void SetIconColors(SkColor color);
 
   // views::View:
   View* GetTooltipHandlerForPoint(const gfx::Point& point) override;
@@ -64,11 +57,8 @@ class TabCloseButton : public views::ImageButton,
   // the hover animation on the parent tab.
   SkAlpha GetOpacity();
 
-  void GenerateImages(bool is_touch,
-                      SkColor normal_icon_color,
-                      SkColor hover_pressed_icon_color,
-                      SkColor hover_highlight_color,
-                      SkColor pressed_highlight_color);
+  void GenerateImages(SkColor normal_icon_color,
+                      SkColor hover_pressed_icon_color);
 
   MouseEventCallback mouse_event_callback_;