Render the tab close button as a vector-based icon.

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

Index: chrome/browser/ui/views/tabs/tab.cc
diff --git a/chrome/browser/ui/views/tabs/tab.cc b/chrome/browser/ui/views/tabs/tab.cc
index 6c179d1075d2fa4fea81fe6c460a589563fb1456..24a33588c039d9b6f1cb8e75976b7e56fb3119f8 100644
--- a/chrome/browser/ui/views/tabs/tab.cc
+++ b/chrome/browser/ui/views/tabs/tab.cc
@@ -37,8 +37,12 @@
 #include "ui/gfx/favicon_size.h"
 #include "ui/gfx/geometry/rect_conversions.h"
 #include "ui/gfx/image/image_skia_operations.h"
+#include "ui/gfx/paint_vector_icon.h"
 #include "ui/gfx/path.h"
 #include "ui/gfx/skia_util.h"
+#include "ui/gfx/vector_icons_public.h"
+#include "ui/native_theme/common_theme.h"
+#include "ui/native_theme/native_theme.h"
 #include "ui/resources/grit/ui_resources.h"
 #include "ui/views/border.h"
 #include "ui/views/controls/button/image_button.h"
@@ -75,8 +79,8 @@ const int kTouchWidth = 120;
 const int kToolbarOverlap = 1;
 const int kExtraLeftPaddingToBalanceCloseButtonPadding = 2;
 const int kFaviconTitleSpacing = 4;
-const int kAfterTitleSpacing = 3;
-const int kCloseButtonRightPaddingOverlap = 3;
+const int kAfterTitleSpacing = 4;
+const int kCloseButtonRightPaddingOverlap = 2;
 const int kStandardTitleWidth = 175;
 
 // Width of the content inside a pinned tab.
@@ -428,7 +432,7 @@ Tab::Tab(TabController* controller)
       showing_icon_(false),
       showing_media_indicator_(false),
       showing_close_button_(false),
-      close_button_color_(0) {
+      close_button_color_(SK_ColorTRANSPARENT) {
   DCHECK(controller);
   InitTabResources();
 
@@ -448,20 +452,33 @@ Tab::Tab(TabController* controller)
   SetEventTargeter(
       scoped_ptr<views::ViewTargeter>(new views::ViewTargeter(this)));
 
-  // Add the Close Button.
   close_button_ = new TabCloseButton(this);
-  ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
-  close_button_->SetImage(views::CustomButton::STATE_NORMAL,
-                          rb.GetImageSkiaNamed(IDR_CLOSE_1));
-  close_button_->SetImage(views::CustomButton::STATE_HOVERED,
-                          rb.GetImageSkiaNamed(IDR_CLOSE_1_H));
-  close_button_->SetImage(views::CustomButton::STATE_PRESSED,
-                          rb.GetImageSkiaNamed(IDR_CLOSE_1_P));
   close_button_->SetAccessibleName(
       l10n_util::GetStringUTF16(IDS_ACCNAME_CLOSE));
+
+  // We need to set the close button's normal image now, even though it will
+  // have the wrong color, so that the close button gets sized and laid out
+  // correctly.  (We can't get the correct color without a ThemeProvider, which
+  // we won't have until we're part of a Widget hierarchy.)  We'll reset the
+  // image to the right color the first time through OnPaint(), when we're
+  // guaranteed to have the ThemeProvider available.
+  SetCloseButtonNormalImage();
+
+  // The hovered andpressed images won't be changing later, so we can set them
+  // correctly here.
+  const gfx::ImageSkia& hovered = gfx::CreateVectorIcon(
+      gfx::VectorIconId::TAB_CLOSE_HOVERED_PRESSED, 16,
+      SkColorSetARGB(0xFF, 0xDB, 0x44, 0x37));
+  const gfx::ImageSkia& pressed = gfx::CreateVectorIcon(
+      gfx::VectorIconId::TAB_CLOSE_HOVERED_PRESSED, 16,
+      SkColorSetARGB(0xFF, 0xA8, 0x35, 0x2A));
+  close_button_->SetImage(views::CustomButton::STATE_HOVERED, &hovered);
+  close_button_->SetImage(views::CustomButton::STATE_PRESSED, &pressed);
+
   // Disable animation so that the red danger sign shows up immediately
   // to help avoid mis-clicks.
   close_button_->SetAnimationDuration(0);
+
   AddChildView(close_button_);
 
   set_context_menu_controller(this);
@@ -744,6 +761,11 @@ void Tab::OnPaint(gfx::Canvas* canvas) {
   gfx::Rect clip;
   if (!controller_->ShouldPaintTab(this, &clip))
     return;
+
+  // If we haven't set the correct close button normal image, we can do so now.
+  if (close_button_color_ == SK_ColorTRANSPARENT)
+    OnThemeChanged();
+
   if (!clip.IsEmpty()) {
     canvas->Save();
     canvas->ClipRect(clip);
@@ -847,6 +869,12 @@ void Tab::Layout() {
 
 void Tab::OnThemeChanged() {
   LoadTabImages();
+
+  const SkColor text_color = GetThemeProvider()->GetColor(
+      IsActive() ? ThemeProperties::COLOR_TAB_TEXT
+                 : ThemeProperties::COLOR_BACKGROUND_TAB_TEXT);
+  close_button_color_ = SkColorSetA(text_color, 0x70);
+  SetCloseButtonNormalImage();
 }
 
 const char* Tab::GetClassName() const {
@@ -1048,29 +1076,18 @@ void Tab::PaintTab(gfx::Canvas* canvas) {
   const bool show_close_button = ShouldShowCloseBox();
   if (show_icon != showing_icon_ ||
       show_media_indicator != showing_media_indicator_ ||
-      show_close_button != showing_close_button_) {
+      show_close_button != showing_close_button_)
     Layout();
-  }
 
   PaintTabBackground(canvas);
 
   const SkColor title_color = GetThemeProvider()->GetColor(IsSelected() ?
       ThemeProperties::COLOR_TAB_TEXT :
       ThemeProperties::COLOR_BACKGROUND_TAB_TEXT);
-  title_->SetVisible(ShouldRenderAsNormalTab());

[Peter Kasting, 2015/09/18 01:00:46]

This was already done in Layout().

   title_->SetEnabledColor(title_color);
 
   if (show_icon)
     PaintIcon(canvas);
-
-  // If the close button color has changed, generate a new one.
-  if (!close_button_color_ || title_color != close_button_color_) {
-    close_button_color_ = title_color;
-    ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
-    close_button_->SetBackground(close_button_color_,
-        rb.GetImageSkiaNamed(IDR_CLOSE_1),
-        rb.GetImageSkiaNamed(IDR_CLOSE_1_MASK));
-  }
 }
 
 void Tab::PaintImmersiveTab(gfx::Canvas* canvas) {
@@ -1513,6 +1530,12 @@ bool Tab::IsPerformingCrashAnimation() const {
   return crash_icon_animation_.get() && data_.IsCrashed();
 }
 
+void Tab::SetCloseButtonNormalImage() {
+  const gfx::ImageSkia& normal = gfx::CreateVectorIcon(
+      gfx::VectorIconId::TAB_CLOSE_NORMAL, 16, close_button_color_);
+  close_button_->SetImage(views::CustomButton::STATE_NORMAL, &normal);
+}
+
 void Tab::ScheduleIconPaint() {
   gfx::Rect bounds = favicon_bounds_;
   if (bounds.IsEmpty())