[Views] Update ink drop for omnibox icons

chrome/browser/ui/views/location_bar/icon_label_bubble_view.cc

Index: chrome/browser/ui/views/location_bar/icon_label_bubble_view.cc
diff --git a/chrome/browser/ui/views/location_bar/icon_label_bubble_view.cc b/chrome/browser/ui/views/location_bar/icon_label_bubble_view.cc
index 1647164adff4ee34c15ab1f34ea9688652b53676..d40941471f0e528aab0946720e2de3147eb55a83 100644
--- a/chrome/browser/ui/views/location_bar/icon_label_bubble_view.cc
+++ b/chrome/browser/ui/views/location_bar/icon_label_bubble_view.cc
@@ -8,11 +8,16 @@
 #include "chrome/browser/ui/views/location_bar/background_with_1_px_border.h"
 #include "chrome/browser/ui/views/location_bar/location_bar_view.h"
 #include "ui/accessibility/ax_node_data.h"
+#include "ui/compositor/layer_animator.h"
+#include "ui/compositor/scoped_layer_animation_settings.h"
 #include "ui/gfx/canvas.h"
 #include "ui/gfx/color_utils.h"
 #include "ui/gfx/scoped_canvas.h"
 #include "ui/native_theme/native_theme.h"
+#include "ui/views/animation/flood_fill_ink_drop_ripple.h"
 #include "ui/views/animation/ink_drop_highlight.h"
+#include "ui/views/animation/ink_drop_impl.h"
+#include "ui/views/animation/ink_drop_ripple.h"
 #include "ui/views/border.h"
 #include "ui/views/controls/image_view.h"
 #include "ui/views/widget/widget.h"
@@ -22,12 +27,76 @@ namespace {
 // Amount of space on either side of the separator that appears after the label.
 constexpr int kSpaceBesideSeparator = 8;
 
+// The length of the separator's fade animation.
+constexpr int kFadeInDurationMs = 250;

[sky, 2017/05/05 23:40:20]

Where do these numbers come from? Shouldn't we use consistent numbers for
animations?

[spqchan, 2017/05/10 19:22:11]

These numbers are based from observation on what looks good. It looks slightly
better with the difference. I added a comment.

+constexpr int kFadeOutDurationMs = 175;
+
 }  // namespace
 
+//////////////////////////////////////////////////////////////////
+// SeparatorView class
+
+IconLabelBubbleView::SeparatorView::SeparatorView(IconLabelBubbleView* owner) {
+  DCHECK(owner);
+  owner_ = owner;
+  SetPaintToLayer();

[sky, 2017/05/05 23:40:20]

It would be nice if you only enabled the layer when necessary (animating).

[spqchan, 2017/05/10 19:22:11]

Done.

+  layer()->SetFillsBoundsOpaquely(false);
+}
+
+void IconLabelBubbleView::SeparatorView::OnPaint(gfx::Canvas* canvas) {
+  if (!owner_->ShouldShowLabel())
+    return;
+
+  const SkColor plain_text_color = owner_->GetNativeTheme()->GetSystemColor(
+      ui::NativeTheme::kColorId_TextfieldDefaultColor);
+  const SkColor separator_color = SkColorSetA(
+      plain_text_color, color_utils::IsDark(plain_text_color) ? 0x59 : 0xCC);
+
+  gfx::Rect bounds(owner_->label()->bounds());
+  const int kSeparatorHeight = 16;
+  bounds.Inset(0, (bounds.height() - kSeparatorHeight) / 2);

[sky, 2017/05/05 23:40:20]

Why don't you position the SeparatorView rather than making it take the whole
bounds and then only drawing a small portion of that?

[spqchan, 2017/05/10 19:22:11]

Done.

+  bounds.set_width(bounds.width() + kSpaceBesideSeparator);
+  canvas->Draw1pxLine(gfx::PointF(bounds.top_right()),
+                      gfx::PointF(bounds.bottom_right()), separator_color);
+}
+
+bool IconLabelBubbleView::SeparatorView::CanProcessEventsWithinSubtree() const {
+  return false;

[sky, 2017/05/05 23:40:20]

Do you actually need this? AFAICT you don't add children to SeparateView.

[spqchan, 2017/05/10 19:22:11]

Yes, otherwise the SeparatorView will consume the events before the parents
could.

+}
+
+void IconLabelBubbleView::SeparatorView::UpdateOpacity() {
+  views::InkDrop* ink_drop = owner_->GetInkDrop();

[sky, 2017/05/05 23:40:20]

Is it worth running the animation if owner_->ShouldShowLabel() is false?

[spqchan, 2017/05/10 19:22:11]

Done.

+  DCHECK(ink_drop);
+
+  // If an inkdrop highlight or ripple is animating in or visible, the
+  // separator should fade out.
+  views::InkDropState state = ink_drop->GetTargetInkDropState();
+  float opacity = 0.0f;
+  float duration = kFadeOutDurationMs;
+  if (!ink_drop->IsHighlightFadingInOrVisible() &&
+      (state == views::InkDropState::HIDDEN ||
+       state == views::InkDropState::ACTION_TRIGGERED ||
+       state == views::InkDropState::DEACTIVATED)) {
+    opacity = 1.0f;
+    duration = kFadeInDurationMs;
+  }
+
+  ui::ScopedLayerAnimationSettings animation(layer()->GetAnimator());
+  animation.SetTransitionDuration(base::TimeDelta::FromMilliseconds(duration));
+  animation.SetTweenType(gfx::Tween::Type::EASE_IN);
+  layer()->SetOpacity(opacity);
+}
+
+//////////////////////////////////////////////////////////////////
+// IconLabelBubbleView class
+
 IconLabelBubbleView::IconLabelBubbleView(const gfx::FontList& font_list,
                                          bool elide_in_middle)
-    : image_(new views::ImageView()),
-      label_(new views::Label(base::string16(), {font_list})) {
+    : CustomButton(this),
+      image_(new views::ImageView()),
+      label_(new views::Label(base::string16(), {font_list})),
+      ink_drop_container_(new views::InkDropContainerView()),
+      suppress_button_release_(false) {
   // Disable separate hit testing for |image_|.  This prevents views treating
   // |image_| as a separate mouse hover region from |this|.
   image_->set_can_process_events_within_subtree(false);
@@ -41,6 +110,12 @@ IconLabelBubbleView::IconLabelBubbleView(const gfx::FontList& font_list,
     label_->SetElideBehavior(gfx::ELIDE_MIDDLE);
   AddChildView(label_);
 
+  separator_view_.reset(new SeparatorView(this));
+  AddChildView(separator_view_.get());
+
+  AddChildView(ink_drop_container_);
+  ink_drop_container_->SetVisible(false);
+
   // Bubbles are given the full internal height of the location bar so that all
   // child views in the location bar have the same height. The visible height of
   // the bubble should be smaller, so use an empty border to shrink down the
@@ -49,12 +124,21 @@ IconLabelBubbleView::IconLabelBubbleView(const gfx::FontList& font_list,
       gfx::Insets(LocationBarView::kBubbleVerticalPadding, 0)));
 
   // Flip the canvas in RTL so the separator is drawn on the correct side.
-  EnableCanvasFlippingForRTLUI(true);
+  separator_view_->EnableCanvasFlippingForRTLUI(true);
 }
 
 IconLabelBubbleView::~IconLabelBubbleView() {
 }
 
+void IconLabelBubbleView::ButtonPressed(Button* sender,
+                                        const ui::Event& event) {
+  OnActivate(event);
+}
+
+void IconLabelBubbleView::InkDropAnimationStarted() {
+  separator_view_->UpdateOpacity();
+}
+
 void IconLabelBubbleView::SetLabel(const base::string16& label) {
   label_->SetText(label);
 }
@@ -75,7 +159,11 @@ bool IconLabelBubbleView::IsShrinking() const {
   return false;
 }
 
-bool IconLabelBubbleView::OnActivate(const ui::Event& event) {
+bool IconLabelBubbleView::ShowBubble(const ui::Event& event) {
+  return false;
+}
+
+bool IconLabelBubbleView::IsBubbleShown() const {
   return false;
 }
 
@@ -120,12 +208,34 @@ void IconLabelBubbleView::Layout() {
   const int label_width = std::max(
       0, width() - label_x - bubble_trailing_padding - kSpaceBesideSeparator);
   label_->SetBounds(label_x, 0, label_width, height());
+  separator_view_->SetBoundsRect(GetLocalBounds());
+
+  gfx::Rect ink_drop_bounds = GetLocalBounds();
+  if (ShouldShowLabel()) {
+    ink_drop_bounds.set_width(ink_drop_bounds.width() -
+                              GetPostSeparatorPadding());
+  }
+
+  ink_drop_container_->SetBoundsRect(ink_drop_bounds);
+}
+
+bool IconLabelBubbleView::OnMousePressed(const ui::MouseEvent& event) {
+  suppress_button_release_ = IsBubbleShown();
+  return CustomButton::OnMousePressed(event);
 }
 
 void IconLabelBubbleView::GetAccessibleNodeData(ui::AXNodeData* node_data) {
   label_->GetAccessibleNodeData(node_data);
 }
 
+void IconLabelBubbleView::OnBoundsChanged(const gfx::Rect& previous_bounds) {
+  if (!IsMouseHovered()) {
+    GetInkDrop()->AnimateToState(views::InkDropState::HIDDEN);
+    GetInkDrop()->SetHovered(false);
+  }
+  CustomButton::OnBoundsChanged(previous_bounds);
+}
+
 void IconLabelBubbleView::OnNativeThemeChanged(
     const ui::NativeTheme* native_theme) {
   label_->SetEnabledColor(GetTextColor());
@@ -134,25 +244,67 @@ void IconLabelBubbleView::OnNativeThemeChanged(
 }
 
 void IconLabelBubbleView::AddInkDropLayer(ui::Layer* ink_drop_layer) {
-  image()->SetPaintToLayer();
-  image()->layer()->SetFillsBoundsOpaquely(false);
-  InkDropHostView::AddInkDropLayer(ink_drop_layer);
+  ink_drop_container_->AddInkDropLayer(ink_drop_layer);
 }
 
 void IconLabelBubbleView::RemoveInkDropLayer(ui::Layer* ink_drop_layer) {
-  InkDropHostView::RemoveInkDropLayer(ink_drop_layer);
-  image()->DestroyLayer();
+  ink_drop_container_->RemoveInkDropLayer(ink_drop_layer);
+}
+
+std::unique_ptr<views::InkDrop> IconLabelBubbleView::CreateInkDrop() {
+  std::unique_ptr<views::InkDropImpl> ink_drop =
+      CreateDefaultFloodFillInkDropImpl();
+  ink_drop->SetShowHighlightOnFocus(true);
+  ink_drop->AddObserver(this);
+  return std::move(ink_drop);
 }
 
 std::unique_ptr<views::InkDropHighlight>
 IconLabelBubbleView::CreateInkDropHighlight() const {
-  // Only show a highlight effect when the label is empty/invisible.
-  return label()->visible() ? nullptr
-                            : InkDropHostView::CreateInkDropHighlight();
+  return InkDropHostView::CreateDefaultInkDropHighlight(
+      gfx::RectF(ink_drop_container_->bounds()).CenterPoint(),
+      ink_drop_container_->size());
+}
+
+std::unique_ptr<views::InkDropRipple> IconLabelBubbleView::CreateInkDropRipple()
+    const {
+  gfx::Point center_point = GetInkDropCenterBasedOnLastEvent();
+  View::ConvertPointToTarget(this, ink_drop_container_, &center_point);
+  center_point.SetToMax(ink_drop_container_->origin());
+  center_point.SetToMin(ink_drop_container_->bounds().bottom_right());
+
+  return base::MakeUnique<views::FloodFillInkDropRipple>(
+      ink_drop_container_->size(), center_point, GetInkDropBaseColor(),
+      ink_drop_visible_opacity());
 }
 
 SkColor IconLabelBubbleView::GetInkDropBaseColor() const {
-  return color_utils::DeriveDefaultIconColor(GetTextColor());
+  return color_utils::DeriveDefaultIconColor(GetNativeTheme()->GetSystemColor(
+      ui::NativeTheme::kColorId_TextfieldDefaultColor));
+}
+
+bool IconLabelBubbleView::IsTriggerableEvent(const ui::Event& event) {
+  if (event.IsMouseEvent())
+    return !IsBubbleShown() && !suppress_button_release_;
+
+  return true;
+}
+
+void IconLabelBubbleView::OnClickCanceled(const ui::Event& event) {
+  // Overriden to prevent CustomButton from hiding the ink drop when the click

[sky, 2017/05/05 23:40:20]

This makes me mildly nervous. If CustomButton ever did anything else in
OnClickCanceled this wouldn't work right. It's safter to have
CustomButton::OnClickCanceled() call a virtual function that updates the ink
drop state that you can override. Or perhaps a
ShouldUpdateInkDropOnClickCanceled().

[spqchan, 2017/05/10 19:22:11]

Done.

+  // is cancelled. The click might be cancelled because the bubble is still
+  // opened. In this case, the ink drop state should still be active.
+}
+
+void IconLabelBubbleView::OnWidgetDestroying(views::Widget* widget) {
+  widget->RemoveObserver(this);
+}
+
+void IconLabelBubbleView::OnWidgetVisibilityChanged(views::Widget* widget,
+                                                    bool visible) {
+  // |widget| is a bubble that has just got shown / hidden.
+  if (!visible)
+    AnimateInkDrop(views::InkDropState::HIDDEN, nullptr /* event */);
 }
 
 SkColor IconLabelBubbleView::GetParentBackgroundColor() const {
@@ -168,30 +320,36 @@ gfx::Size IconLabelBubbleView::GetSizeForLabelWidth(int label_width) const {
   // is necessary to animate |total_width| even when the background is hidden
   // as long as the animation is still shrinking.
   if (ShouldShowLabel() || shrinking) {
-    // On scale factors < 2, we reserve 1 DIP for the 1 px separator.  For
-    // higher scale factors, we simply take the separator px out of the
-    // kSpaceBesideSeparator region before the separator, as that results in a
-    // width closer to the desired gap than if we added a whole DIP for the
-    // separator px.  (For scale 2, the two methods have equal error: 1 px.)
-    const int separator_width = (GetScaleFactor() >= 2) ? 0 : 1;
-    const int post_label_width =
-        (kSpaceBesideSeparator + separator_width + GetPostSeparatorPadding());
-
     // |multiplier| grows from zero to one, stays equal to one and then shrinks
     // to zero again. The view width should correspondingly grow from zero to
     // fully showing both label and icon, stay there, then shrink to just large
     // enough to show the icon. We don't want to shrink all the way back to
     // zero, since this would mean the view would completely disappear and then
     // pop back to an icon after the animation finishes.
-    const int max_width =
-        size.width() + GetInternalSpacing() + label_width + post_label_width;
-    const int current_width = WidthMultiplier() * max_width;
+    const int current_width =
+        WidthMultiplier() * GetMaxSizeForLabelWidth(label_width).width();
     size.set_width(shrinking ? std::max(current_width, size.width())
                              : current_width);
   }
   return size;
 }
 
+gfx::Size IconLabelBubbleView::GetMaxSizeForLabelWidth(int label_width) const {
+  gfx::Size size(image_->GetPreferredSize());
+  if (ShouldShowLabel() || IsShrinking()) {
+    // On scale factors < 2, we reserve 1 DIP for the 1 px separator.  For
+    // higher scale factors, we simply take the separator px out of the
+    // kSpaceBesideSeparator region before the separator, as that results in a
+    // width closer to the desired gap than if we added a whole DIP for the
+    // separator px.  (For scale 2, the two methods have equal error: 1 px.)
+    const int separator_width = (GetScaleFactor() >= 2) ? 0 : 1;
+    const int post_label_width =
+        (kSpaceBesideSeparator + separator_width + GetPostSeparatorPadding());
+    size.Enlarge(GetInternalSpacing() + label_width + post_label_width, 0);
+  }
+  return size;
+}
+
 int IconLabelBubbleView::GetInternalSpacing() const {
   return image_->GetPreferredSize().IsEmpty()
              ? 0
@@ -213,23 +371,16 @@ float IconLabelBubbleView::GetScaleFactor() const {
   return compositor ? compositor->device_scale_factor() : 1.0f;
 }
 
-const char* IconLabelBubbleView::GetClassName() const {
-  return "IconLabelBubbleView";
-}
-
-void IconLabelBubbleView::OnPaint(gfx::Canvas* canvas) {
-  if (!ShouldShowLabel())
-    return;
+bool IconLabelBubbleView::OnActivate(const ui::Event& event) {
+  if (ShowBubble(event)) {
+    AnimateInkDrop(views::InkDropState::ACTIVATED, nullptr);
+    return true;
+  }
 
-  const SkColor plain_text_color = GetNativeTheme()->GetSystemColor(
-      ui::NativeTheme::kColorId_TextfieldDefaultColor);
-  const SkColor separator_color = SkColorSetA(
-      plain_text_color, color_utils::IsDark(plain_text_color) ? 0x59 : 0xCC);
+  AnimateInkDrop(views::InkDropState::HIDDEN, nullptr);
+  return false;
+}
 
-  gfx::Rect bounds(label_->bounds());
-  const int kSeparatorHeight = 16;
-  bounds.Inset(0, (bounds.height() - kSeparatorHeight) / 2);
-  bounds.set_width(bounds.width() + kSpaceBesideSeparator);
-  canvas->Draw1pxLine(gfx::PointF(bounds.top_right()),
-                      gfx::PointF(bounds.bottom_right()), separator_color);
+const char* IconLabelBubbleView::GetClassName() const {
+  return "IconLabelBubbleView";
 }