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

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

 // Copyright (c) 2012 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.
 
 #include "chrome/browser/ui/views/tabs/tab.h"
 
 #include <limits>
 
 #include "base/command_line.h"
 #include "base/debug/alias.h"
@@ skipping 20 matching lines @@
 #include "ui/base/resource/resource_bundle.h"
 #include "ui/base/theme_provider.h"
 #include "ui/gfx/animation/animation_container.h"
 #include "ui/gfx/animation/multi_animation.h"
 #include "ui/gfx/animation/throb_animation.h"
 #include "ui/gfx/canvas.h"
 #include "ui/gfx/color_analysis.h"
 #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/resources/grit/ui_resources.h"
 #include "ui/views/border.h"
 #include "ui/views/controls/button/image_button.h"
 #include "ui/views/controls/label.h"
 #include "ui/views/rect_based_targeting_utils.h"
 #include "ui/views/view_targeter.h"
 #include "ui/views/widget/tooltip_manager.h"
 #include "ui/views/widget/widget.h"
 #include "ui/views/window/non_client_view.h"
 
 #if defined(USE_AURA)
 #include "ui/aura/env.h"
 #endif
 
 using base::UserMetricsAction;
 
 namespace {
 
 // Height of the shadow at the top of the tab image assets.
 const int kDropShadowHeight = 4;
 
 // How long the pulse throb takes.
 const int kPulseDurationMs = 200;
 
 // Width of touch tabs.
 const int kTouchWidth = 120;
 
 const int kToolbarOverlap = 1;
 const int kExtraLeftPaddingToBalanceCloseButtonPadding = 2;
-const int kAfterTitleSpacing = 3;
+const int kAfterTitleSpacing = 4;
 
 // When a non-pinned tab becomes a pinned tab the width of the tab animates. If
 // the width of a pinned tab is at least kPinnedTabExtraWidthToRenderAsNormal
 // larger than the desired pinned tab width then the tab is rendered as a normal
 // tab. This is done to avoid having the title immediately disappear when
 // transitioning a tab from normal to pinned tab.
 const int kPinnedTabExtraWidthToRenderAsNormal = 30;
 
 // How opaque to make the hover state (out of 1).
 const double kHoverOpacity = 0.33;
@@ skipping 43 matching lines @@
 const SkColor kImmersiveInactiveTabColor = SkColorSetRGB(190, 190, 190);
 
 // The minimum opacity (out of 1) when a tab (either active or inactive) is
 // throbbing in the immersive mode light strip.
 const double kImmersiveTabMinThrobOpacity = 0.66;
 
 // Number of steps in the immersive mode loading animation.
 const int kImmersiveLoadingStepCount = 32;
 
 const char kTabCloseButtonName[] = "TabCloseButton";
+const int kTabCloseButtonSize = 16;
 
 void DrawIconAtLocation(gfx::Canvas* canvas,
                         const gfx::ImageSkia& image,
                         int image_offset,
                         int dst_x,
                         int dst_y,
                         int icon_width,
                         int icon_height,
                         bool filter,
                         const SkPaint& paint) {
@@ skipping 256 matching lines @@
 // Tab, public:
 
 Tab::Tab(TabController* controller)
     : controller_(controller),
       closing_(false),
       dragging_(false),
       detached_(false),
       favicon_hiding_offset_(0),
       immersive_loading_step_(0),
       should_display_crashed_favicon_(false),
-      close_button_(NULL),
-      media_indicator_button_(NULL),
+      media_indicator_button_(nullptr),
+      close_button_(nullptr),
       title_(new views::Label()),
       tab_activated_with_last_tap_down_(false),
       hover_controller_(this),
       showing_icon_(false),
       showing_media_indicator_(false),
       showing_close_button_(false),
-      close_button_color_(0) {
+      button_color_(SK_ColorTRANSPARENT) {
   DCHECK(controller);
   InitTabResources();
 
   // So we get don't get enter/exit on children and don't prematurely stop the
   // hover.
   set_notify_enter_exit_on_child(true);
 
   set_id(VIEW_ID_TAB);
 
   title_->SetHorizontalAlignment(gfx::ALIGN_TO_HEAD);
   title_->SetElideBehavior(gfx::FADE_TAIL);
   title_->SetHandlesTooltips(false);
   title_->SetAutoColorReadabilityEnabled(false);
   title_->SetText(CoreTabHelper::GetDefaultTitle());
   AddChildView(title_);
 
   SetEventTargeter(
       scoped_ptr<views::ViewTargeter>(new views::ViewTargeter(this)));
 
-  // Add the Close Button.
+  media_indicator_button_ = new MediaIndicatorButton(this);
+  AddChildView(media_indicator_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));
+  // The normal image is set by OnButtonColorMaybeChanged() because it depends
+  // on the current theme and active state.  The hovered and pressed images
+  // don't depend on the these, so we can set them here.
+  const gfx::ImageSkia& hovered = gfx::CreateVectorIcon(
+      gfx::VectorIconId::TAB_CLOSE_HOVERED_PRESSED, kTabCloseButtonSize,
+      SkColorSetARGB(0xFF, 0xDB, 0x44, 0x37));
+  const gfx::ImageSkia& pressed = gfx::CreateVectorIcon(
+      gfx::VectorIconId::TAB_CLOSE_HOVERED_PRESSED, kTabCloseButtonSize,
+      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);
 }
 
 Tab::~Tab() {
 }
 
-void Tab::set_animation_container(gfx::AnimationContainer* container) {
+void Tab::SetAnimationContainer(gfx::AnimationContainer* container) {
   animation_container_ = container;
   hover_controller_.SetAnimationContainer(container);
 }
 
 bool Tab::IsActive() const {
   return controller_->IsActiveTab(this);
 }
 
 void Tab::ActiveStateChanged() {
-  GetMediaIndicatorButton()->UpdateEnabledForMuteToggle();
+  OnButtonColorMaybeChanged();
+  media_indicator_button_->UpdateEnabledForMuteToggle();
 }
 
 bool Tab::IsSelected() const {
   return controller_->IsTabSelected(this);
 }
 
 void Tab::SetData(const TabRendererData& data) {
   DCHECK(GetWidget());
 
   if (data_.Equals(data))
@@ skipping 31 matching lines @@
       StartCrashAnimation();
 #endif
     }
   } else {
     if (IsPerformingCrashAnimation())
       StopCrashAnimation();
     ResetCrashedFavicon();
   }
 
   if (data_.media_state != old.media_state)
-    GetMediaIndicatorButton()->TransitionToMediaState(data_.media_state);
+    media_indicator_button_->TransitionToMediaState(data_.media_state);
 
   if (old.pinned != data_.pinned) {
     StopAndDeleteAnimation(pinned_title_change_animation_.Pass());
   }
 
   DataChanged(old);
 
   Layout();
   SchedulePaint();
 }
@@ skipping 185 matching lines @@
     if (!intersection.intersect(RectToSkRect(clip)))
        return false;
     mask->addRect(intersection);
   }
   return true;
 }
 
 ////////////////////////////////////////////////////////////////////////////////
 // Tab, views::View overrides:
 
+void Tab::ViewHierarchyChanged(const ViewHierarchyChangedDetails& details) {
+  // If this hierarchy changed has resulted in us being part of a widget
+  // hierarchy for the first time, we can now get at the theme provider, and
+  // should recalculate the button color.
+  OnButtonColorMaybeChanged();
+}
+
 void Tab::OnPaint(gfx::Canvas* canvas) {
   // Don't paint if we're narrower than we can render correctly. (This should
   // only happen during animations).
   if (width() < GetMinimumUnselectedSize().width() && !data().pinned)
     return;
 
   gfx::Rect clip;
   if (!controller_->ShouldPaintTab(this, &clip))
     return;
   if (!clip.IsEmpty()) {
@@ skipping 50 matching lines @@
     const int bottom = height() - close_button_size.height() - top;
     const int right = width() - close_button_end;
     close_button_->SetBorder(
         views::Border::CreateEmptyBorder(top, left, bottom, right));
     close_button_->SizeToPreferredSize();
   }
   close_button_->SetVisible(showing_close_button_);
 
   showing_media_indicator_ = ShouldShowMediaIndicator();
   if (showing_media_indicator_) {
-    views::ImageButton* const button = GetMediaIndicatorButton();
-    const gfx::Size image_size(button->GetPreferredSize());
+    const gfx::Size image_size(media_indicator_button_->GetPreferredSize());
     const int right = showing_close_button_ ?
         close_button_->x() + close_button_->GetInsets().left() : lb.right();
     gfx::Rect bounds(
         std::max(lb.x(), right - image_size.width()),
         lb.y() + (lb.height() - image_size.height() + 1) / 2,
         image_size.width(),
         image_size.height());
     MaybeAdjustLeftForPinnedTab(&bounds);
-    button->SetBoundsRect(bounds);
-    button->SetVisible(true);
-  } else if (media_indicator_button_) {
-    media_indicator_button_->SetVisible(false);
+    media_indicator_button_->SetBoundsRect(bounds);
   }
+  media_indicator_button_->SetVisible(showing_media_indicator_);

[Peter Kasting, 2015/09/19 07:26:34]

Simplified this while I was touching it.

 
   // Size the title to fill the remaining width and use all available height.
   const bool show_title = ShouldRenderAsNormalTab();
   if (show_title) {
     const int title_spacing = GetLayoutConstant(TAB_FAVICON_TITLE_SPACING);
     int title_left = showing_icon_ ?
         (favicon_bounds_.right() + title_spacing) : start;
     int title_width = lb.right() - title_left;
     if (showing_media_indicator_) {
       title_width =
           media_indicator_button_->x() - kAfterTitleSpacing - title_left;
     } else if (close_button_->visible()) {
       // Allow the title to overlay the close button's empty border padding.
       title_width = close_button_->x() + close_button_->GetInsets().left() -
           kAfterTitleSpacing - title_left;
     }
     gfx::Rect rect(title_left, lb.y(), std::max(title_width, 0), lb.height());
     const int title_height = title_->GetPreferredSize().height();
     if (title_height > rect.height()) {
       rect.set_y(lb.y() - (title_height - rect.height()) / 2);
       rect.set_height(title_height);
     }
     title_->SetBoundsRect(rect);
   }
   title_->SetVisible(show_title);
 }
 
 void Tab::OnThemeChanged() {
   LoadTabImages();
+  OnButtonColorMaybeChanged();
 }
 
 const char* Tab::GetClassName() const {
   return kViewClassName;
 }
 
 bool Tab::GetTooltipText(const gfx::Point& p, base::string16* tooltip) const {
   // Note: Anything that affects the tooltip text should be accounted for when
   // calling TooltipTextChanged() from Tab::DataChanged().
   *tooltip = chrome::AssembleTabTooltipText(data_.title, data_.media_state);
@@ skipping 181 matching lines @@
     StopPulse();
 }
 
 void Tab::PaintTab(gfx::Canvas* canvas) {
   // See if the model changes whether the icons should be painted.
   const bool show_icon = ShouldShowIcon();
   const bool show_media_indicator = ShouldShowMediaIndicator();
   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());
   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) {
   // Use transparency for the draw-attention animation.
   int alpha = 255;
   if (pulse_animation_ && pulse_animation_->is_animating() && !data().pinned) {
     alpha = pulse_animation_->CurrentValueBetween(
         255, static_cast<int>(255 * kImmersiveTabMinThrobOpacity));
   }
 
@@ skipping 422 matching lines @@
 
 void Tab::StartCrashAnimation() {
   crash_icon_animation_.reset(new FaviconCrashAnimation(this));
   crash_icon_animation_->Start();
 }
 
 bool Tab::IsPerformingCrashAnimation() const {
   return crash_icon_animation_.get() && data_.IsCrashed();
 }
 
+void Tab::OnButtonColorMaybeChanged() {
+  // The theme provider may be null if we're not currently in a widget
+  // hierarchy.
+  ui::ThemeProvider* theme_provider = GetThemeProvider();
+  if (!theme_provider)
+    return;
+
+  const SkColor new_button_color = SkColorSetA(theme_provider->GetColor(
+      IsActive() ? ThemeProperties::COLOR_TAB_TEXT
+                 : ThemeProperties::COLOR_BACKGROUND_TAB_TEXT), 0xA0);
+  if (button_color_ != new_button_color) {
+    button_color_ = new_button_color;
+    media_indicator_button_->OnParentTabButtonColorChanged();
+    const gfx::ImageSkia& close_button_normal_image = gfx::CreateVectorIcon(
+        gfx::VectorIconId::TAB_CLOSE_NORMAL, kTabCloseButtonSize,
+        button_color_);
+    close_button_->SetImage(views::CustomButton::STATE_NORMAL,
+                            &close_button_normal_image);
+  }
+}
+
 void Tab::ScheduleIconPaint() {
   gfx::Rect bounds = favicon_bounds_;
   if (bounds.IsEmpty())
     return;
 
   // Extends the area to the bottom when sad_favicon is animating.
   if (IsPerformingCrashAnimation())
     bounds.set_height(height() - bounds.y());
   bounds.set_x(GetMirroredXForRect(bounds));
   SchedulePaintInRect(bounds);
@@ skipping 71 matching lines @@
     *frame_id = 0;
   } else if (data().incognito) {
     *tab_id = IDR_THEME_TAB_BACKGROUND_INCOGNITO;
     *frame_id = IDR_THEME_FRAME_INCOGNITO;
   } else {
     *tab_id = IDR_THEME_TAB_BACKGROUND;
     *frame_id = IDR_THEME_FRAME;
   }
 }
 
-MediaIndicatorButton* Tab::GetMediaIndicatorButton() {
-  if (!media_indicator_button_) {
-    media_indicator_button_ = new MediaIndicatorButton(this);
-    AddChildView(media_indicator_button_);  // Takes ownership.
-  }
-  return media_indicator_button_;
-}
-
 ////////////////////////////////////////////////////////////////////////////////
 // Tab, private static:
 
 // static
 void Tab::InitTabResources() {
   static bool initialized = false;
   if (initialized)
     return;
 
   initialized = true;
@@ skipping 44 matching lines @@
                          const gfx::ImageSkia& image) {
   DCHECK_NE(scale_factor, ui::SCALE_FACTOR_NONE);
   ImageCacheEntry entry;
   entry.resource_id = resource_id;
   entry.scale_factor = scale_factor;
   entry.image = image;
   image_cache_->push_front(entry);
   if (image_cache_->size() > kMaxImageCacheSize)
     image_cache_->pop_back();
 }