Material Refresh - Now fades in/out the tab separator and the close button in...

Material Refresh - Now fades in/out the tab separator and the close button in conjunction with the glow hover effect.

Bug: 822061
Change-Id: Ic4c339c54a61d7f00ff8eedc1ae20c6176440aec
Reviewed-on: https://chromium-review.googlesource.com/1052382
Commit-Queue: Allen Bauer <kylixrd@chromium.org>
Reviewed-by: Peter Kasting <pkasting@chromium.org>
Cr-Commit-Position: refs/heads/master@{#557601}

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

@@ -1090,9 +1090,7 @@ void Tab::PaintTabBackground(gfx::Canvas* canvas,
       PaintTabBackgroundStroke(canvas, fill_path, stroke_path, active,
                                stroke_color);
     }
-    return;
-  }
-
+  } else {
     BackgroundCache& cache =
         active ? background_active_cache_ : background_inactive_cache_;
     if (!cache.CacheKeyMatches(canvas->image_scale(), size(), active_color,
@@ -1132,6 +1130,7 @@ void Tab::PaintTabBackground(gfx::Canvas* canvas,
         canvas->sk_canvas()->clipPath(*clip, SkClipOp::kDifference, true);
       canvas->sk_canvas()->drawPicture(cache.stroke_record);
     }
+  }
 
   if (!active)
     PaintSeparator(canvas, inactive_color);
@@ -1195,25 +1194,33 @@ void Tab::PaintTabBackgroundStroke(gfx::Canvas* canvas,
 }
 
 void Tab::PaintSeparator(gfx::Canvas* canvas, SkColor inactive_color) {
-  if (MD::GetMode() != MD::MATERIAL_REFRESH || IsMouseHovered())
+  if (MD::GetMode() != MD::MATERIAL_REFRESH)
     return;
 
-  // If the tab to the left is either active or the mouse is hovered over it,
-  // the separator on this tab should not be painted.
+  // If the tab to the left is active, the separator on this tab should not be
+  // painted.
   Tab* previous_tab =
       controller_->GetAdjacentTab(this, TabController::BACKWARD);
-  if (previous_tab &&
-      (previous_tab->IsActive() || previous_tab->IsMouseHovered()))
+  if (previous_tab && previous_tab->IsActive())
     return;
 
   const int tab_height = GetContentsBounds().height();
   gfx::RectF separator_bounds;
   separator_bounds.set_size(gfx::SizeF(1, 16));
   separator_bounds.set_origin(gfx::PointF(
-      (tab_height - separator_bounds.height()) / 2, GetTabEndcapWidth() / 2));
+      GetTabEndcapWidth() / 2, (tab_height - separator_bounds.height()) / 2));
+  // The following will paint the separator using an opacity that should
+  // cross-fade with the maximum hover animation value of this tab or the
+  // tab to the left. This will have the effect of fading out the separator
+  // while this tab's or the tab to the left's hover animation is progressing.
+  const double max_hover_value = std::max(
+      hover_controller_.GetAnimationValue(),
+      previous_tab ? previous_tab->hover_controller()->GetAnimationValue() : 0);
   cc::PaintFlags flags;
   flags.setAntiAlias(true);
-  flags.setColor(color_utils::BlendTowardOppositeLuma(inactive_color, 0x5a));
+  flags.setColor(
+      SkColorSetA(color_utils::BlendTowardOppositeLuma(inactive_color, 0x5a),
+                  gfx::Tween::IntValueBetween(max_hover_value, 255, 0)));
   canvas->DrawRect(separator_bounds, flags);
 }
 
@@ -1295,7 +1302,7 @@ void Tab::UpdateIconVisibility() {
       int title_width =
           (!showing_icon_ + !showing_alert_indicator_) * favicon_width;
       if ((!hide_inactive_close_button ||
-           (show_close_button_on_hover && IsMouseHovered())) &&
+           (show_close_button_on_hover && hover_controller_.ShouldDraw())) &&
           (title_width + close_button_width + extra_padding <=
            available_width)) {
         showing_close_button_ = true;

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

@@ -18,6 +18,8 @@
 #include "components/strings/grit/components_strings.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/base/material_design/material_design_controller.h"
+#include "ui/gfx/animation/tween.h"
+#include "ui/gfx/canvas.h"
 #include "ui/gfx/color_palette.h"
 #include "ui/gfx/image/image_skia_operations.h"
 #include "ui/gfx/paint_vector_icon.h"
@@ -104,6 +106,12 @@ const char* TabCloseButton::GetClassName() const {
   return "TabCloseButton";
 }
 
+void TabCloseButton::PaintButtonContents(gfx::Canvas* canvas) {
+  canvas->SaveLayerAlpha(GetOpacity());
+  views::ImageButton::PaintButtonContents(canvas);
+  canvas->Restore();
+}
+
 views::View* TabCloseButton::TargetForRect(views::View* root,
                                            const gfx::Rect& rect) {
   CHECK_EQ(root, this);
@@ -137,6 +145,14 @@ bool TabCloseButton::GetHitTestMask(gfx::Path* mask) const {
   return true;
 }
 
+SkAlpha TabCloseButton::GetOpacity() {
+  if (MD::GetMode() != MD::MATERIAL_REFRESH && !IsMouseHovered())
+    return SK_AlphaOPAQUE;
+  const double animation_value =
+      static_cast<Tab*>(parent())->hover_controller()->GetAnimationValue();
+  return gfx::Tween::IntValueBetween(animation_value, 0, 255);
+}
+
 void TabCloseButton::GenerateImages(bool is_touch,
                                     SkColor normal_icon_color,
                                     SkColor hover_pressed_icon_color,

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

@@ -48,11 +48,18 @@ class TabCloseButton : public views::ImageButton,
   void OnGestureEvent(ui::GestureEvent* event) override;
   const char* GetClassName() const override;
 
+ protected:
+  void PaintButtonContents(gfx::Canvas* canvas) override;
+
  private:
   // views::MaskedTargeterDelegate:
   views::View* TargetForRect(views::View* root, const gfx::Rect& rect) override;
   bool GetHitTestMask(gfx::Path* mask) const override;
 
+  // In material refresh mode, calculates opacity based on the current state of
+  // the hover animation on the parent tab.
+  SkAlpha GetOpacity();
+
   void GenerateImages(bool is_touch,
                       SkColor normal_icon_color,
                       SkColor hover_pressed_icon_color,