[Views] Update ink drop for omnibox icons

chrome/browser/ui/views/location_bar/icon_label_bubble_view.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/location_bar/icon_label_bubble_view.h"
 
 #include "chrome/browser/ui/layout_constants.h"
 #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"
 
 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;
+constexpr int kFadeOutDurationMs = 175;
+
 }  // namespace
 
+//////////////////////////////////////////////////////////////////
+// SeparatorView class
+
+IconLabelBubbleView::SeparatorView::SeparatorView(IconLabelBubbleView* owner) {
+  DCHECK(owner);
+  owner_ = owner;
+  SetPaintToLayer();
+  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);
+  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;
+}
+
+void IconLabelBubbleView::SeparatorView::UpdateOpacity() {
+  views::InkDrop* ink_drop = owner_->GetInkDrop();
+  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);
   image_->SetBorder(views::CreateEmptyBorder(
       gfx::Insets(LocationBarView::kIconInteriorPadding)));
   AddChildView(image_);
 
   label_->SetHorizontalAlignment(gfx::ALIGN_LEFT);
 
   if (elide_in_middle)
     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
   // content bounds so the background gets painted correctly.
   SetBorder(views::CreateEmptyBorder(
       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);
 }
 
 void IconLabelBubbleView::SetImage(const gfx::ImageSkia& image_skia) {
   image_->SetImage(image_skia);
 }
 
 bool IconLabelBubbleView::ShouldShowLabel() const {
   return label_->visible() && !label_->text().empty();
 }
 
 double IconLabelBubbleView::WidthMultiplier() const {
   return 1.0;
 }
 
 bool IconLabelBubbleView::IsShrinking() const {
   return false;
 }
 
 bool IconLabelBubbleView::OnActivate(const ui::Event& event) {
   return false;
 }
 
+bool IconLabelBubbleView::IsBubbleShown() const {
+  return false;
+}
+
 gfx::Size IconLabelBubbleView::GetPreferredSize() const {
   // Height will be ignored by the LocationBarView.
   return GetSizeForLabelWidth(label_->GetPreferredSize().width());
 }
 
 bool IconLabelBubbleView::OnKeyPressed(const ui::KeyEvent& event) {
   if (event.key_code() == ui::VKEY_RETURN)
     return OnActivate(event);
   return false;
 }
@@ skipping 21 matching lines @@
   image_->SetBounds(0, 0, image_width, height());
 
   // Compute the label bounds.  The label gets whatever size is left over after
   // accounting for the preferred image width and padding amounts.  Note that if
   // the label has zero size it doesn't actually matter what we compute its X
   // value to be, since it won't be visible.
   const int label_x = image_->bounds().right() + GetInternalSpacing();
   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::OnGestureEvent(ui::GestureEvent* event) {
+  if (event->type() == ui::ET_GESTURE_TAP) {
+    AnimateInkDrop(views::InkDropState::ACTIVATED, event);

[bruthig, 2017/04/21 15:05:09]

This animation seems a little distant from the spot that actually shows the
bubble, i.e. OnActivate().  This might cause a ripple to persist in the
ACTIVATED state when there is no bubble showing.
Would it be possible to couple this together with the triggered action somehow?

We could possibly remove the animation from BubbleIconView::OnGestureEvent()
then too.

Example template pattern:

// Change return value and to be non-virtual.
void IconLabelBubbleView::OnActivate(const ui::Event& e) {
  if (TriggerAction())
    AnimateInkDrop(ACTIVATED, e);
  else
    AnimateInkDrop(HIDDEN, e);
}

// Returns true if a 'bubble' was shown.
// May need to replace bool return value with enum if possible actions is more
diverse.
virtual bool IconLabelBubbleView::TriggerAction() {}

[spqchan, 2017/04/27 21:40:06]

Done.

+  }
+
+  CustomButton::OnGestureEvent(event);
 }
 
 void IconLabelBubbleView::GetAccessibleNodeData(ui::AXNodeData* node_data) {
   label_->GetAccessibleNodeData(node_data);
 }
 
 void IconLabelBubbleView::OnNativeThemeChanged(
     const ui::NativeTheme* native_theme) {
   label_->SetEnabledColor(GetTextColor());
   label_->SetBackgroundColor(GetParentBackgroundColor());
   SchedulePaint();
 }
 
 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 {
+  return base::MakeUnique<views::FloodFillInkDropRipple>(
+      ink_drop_container_->size(), ink_drop_container_->bounds().CenterPoint(),

[bruthig, 2017/04/21 15:05:09]

Was it an intentional decision to center the ripple on the view as opposed to
using InkDropHostView::GetInkDropCenterBasedOnLastEvent() ?

[spqchan, 2017/04/27 21:40:06]

Nope, I didn't notice this method. I can't use it here though, since the ink
drop isn't actually centered for the bubble view
(the ink drop container has different bounds)

[bruthig, 2017/05/01 22:42:18]

Would it be possible to use View::ConvertPointToTarget() to convert the point to
the |ink_drop_container_| coordinates?

[spqchan, 2017/05/02 22:50:05]

I'm a bit confused with what you mean. How would I use that method to get the
center point?

[bruthig, 2017/05/02 23:49:56]

I guess you'd also have to snap the point to the, possibly smaller,
|ink_drop_container_| bounds. i.e.

  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.bottom_right());

  return base::MakeUnique<view::FloodFillInkDropRipple>(
      ink_drop_container_->size(), center_point,
      GetInkDropBNaseColor(), ink_drop_visible_opacity());

[spqchan, 2017/05/03 00:43:51]

Done.

+      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

[bruthig, 2017/04/21 15:05:09]

I believe this override may allow for an ACTION_PENDING ripple to incorrectly
persist in the following situation:

1. Navigate to http://popuptest.com/popuptest1.html
2. Click and hold on the 'P' of the expanded 'Pop-up blocked' button
3. Maintain the click down and allow the 'Pop-up blocked' button to shrink
4. Release the mouse (This should be outside the bounds of the button since the
mouse down happened near the 'P')

Expected:
The ripple should not persist on the button.

Actual:
The ripple persists.

Can you see if there's an easy fix for this?  If not we may have to capture it
as a issue/TODO.

[spqchan, 2017/04/27 21:40:06]

I added a fix. In OnBoundsChanged, if the view is no longer hover, the InkDrop
will be animated to HIDDEN and the hover state will be set to false. There's
still an issue where if the click is at the right of the button, the ripple will
persist (like it's supposed to) but the ink drop size will be incorrect. This
will be fixed by crbug.com/669253, I think I'll give that a shot after this CL
lands :)

[bruthig, 2017/05/01 22:42:18]

Acknowledged.

+  // 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 {
   return GetNativeTheme()->GetSystemColor(
       ui::NativeTheme::kColorId_TextfieldDefaultBackground);
 }
 
 gfx::Size IconLabelBubbleView::GetSizeForLabelWidth(int label_width) const {
   gfx::Size size(image_->GetPreferredSize());
   const bool shrinking = IsShrinking();
   // Animation continues for the last few pixels even after the label is not
   // visible in order to slide the icon into its final position. Therefore it
   // is necessary to animate |total_width| even when the background is hidden
   // as long as the animation is still shrinking.
   if (ShouldShowLabel() || shrinking) {
+    // |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 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());
-
-    // |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;
-    size.set_width(shrinking ? std::max(current_width, size.width())
-                             : current_width);
+    size.Enlarge(GetInternalSpacing() + label_width + post_label_width, 0);
   }
   return size;
 }
 
 int IconLabelBubbleView::GetInternalSpacing() const {
   return image_->GetPreferredSize().IsEmpty()
              ? 0
              : GetLayoutConstant(LOCATION_BAR_ELEMENT_PADDING);
 }
 
 int IconLabelBubbleView::GetPostSeparatorPadding() const {
   // The location bar will add LOCATION_BAR_ELEMENT_PADDING after us.
   return kSpaceBesideSeparator -
          GetLayoutConstant(LOCATION_BAR_ELEMENT_PADDING) -
          next_element_interior_padding_;
 }
 
 float IconLabelBubbleView::GetScaleFactor() const {
   const views::Widget* widget = GetWidget();
   // There may be no widget in tests, and in ash there may be no compositor if
   // the native view of the Widget doesn't have a parent.
   const ui::Compositor* compositor = widget ? widget->GetCompositor() : nullptr;
   return compositor ? compositor->device_scale_factor() : 1.0f;
 }
 
 const char* IconLabelBubbleView::GetClassName() const {
   return "IconLabelBubbleView";
 }
-
-void IconLabelBubbleView::OnPaint(gfx::Canvas* canvas) {
-  if (!ShouldShowLabel())
-    return;
-
-  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);
-
-  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);
-}