[omnibox] Animate background color on hover

When the steady omnibox is hovered, the location bar
smoothly animates to a slightly different shade
of gray instead of switching instantly.

Bug: 853241
Change-Id: I5c51607a602f7e7245dddd46060d6dc25f4f4581
Reviewed-on: https://chromium-review.googlesource.com/1119494
Commit-Queue: Orin Jaworski <orinj@chromium.org>
Reviewed-by: Peter Kasting <pkasting@chromium.org>
Cr-Commit-Position: refs/heads/master@{#571733}

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

@@ -271,6 +271,10 @@ void LocationBarView::Init() {
   Update(nullptr);
 
   size_animation_.Reset(1);
+
+  // This is for hover effect mouse event handling.
+  set_notify_enter_exit_on_child(true);
+  hover_animation_.SetSlideDuration(200);
 }
 
 bool LocationBarView::IsInitialized() const {
@@ -799,13 +803,14 @@ int LocationBarView::GetHorizontalEdgeThickness() const {
 }
 
 void LocationBarView::RefreshBackground() {
-  // Note we are not using hover state color when focused; only in steady state.
-  const OmniboxPartState state =
-      (omnibox_view_->HasFocus() || !omnibox_view_->IsHovered())
-          ? OmniboxPartState::NORMAL
-          : OmniboxPartState::HOVERED;
+  const SkColor normal = GetOmniboxColor(OmniboxPart::LOCATION_BAR_BACKGROUND,
+                                         tint(), OmniboxPartState::NORMAL);
+  const SkColor hovered = GetOmniboxColor(OmniboxPart::LOCATION_BAR_BACKGROUND,
+                                          tint(), OmniboxPartState::HOVERED);
+  const double opacity = hover_animation_.GetCurrentValue();
   SkColor background_color =
-      GetOmniboxColor(OmniboxPart::LOCATION_BAR_BACKGROUND, tint(), state);
+      gfx::Tween::ColorValueBetween(opacity, normal, hovered);
+
   SkColor border_color = GetBorderColor();
 
   if (IsRounded()) {
@@ -1194,6 +1199,15 @@ void LocationBarView::OnPaintBorder(gfx::Canvas* canvas) {
   BrowserView::Paint1pxHorizontalLine(canvas, border_color, bounds, true);
 }
 
+void LocationBarView::OnMouseEntered(const ui::MouseEvent& event) {
+  // Only show the hover animation when omnibox is in unfocused steady state.
+  if (!omnibox_view_->HasFocus())
+    hover_animation_.Show();
+}
+void LocationBarView::OnMouseExited(const ui::MouseEvent& event) {
+  hover_animation_.Hide();
+}
+
 ////////////////////////////////////////////////////////////////////////////////
 // LocationBarView, private views::DragController implementation:
 
@@ -1236,6 +1250,8 @@ void LocationBarView::AnimationProgressed(const gfx::Animation* animation) {
   } else if (animation == &text_indent_animation_) {
     Layout();
     SchedulePaint();
+  } else if (animation == &hover_animation_) {
+    RefreshBackground();
   } else {
     NOTREACHED();
   }
@@ -1246,9 +1262,16 @@ void LocationBarView::AnimationEnded(const gfx::Animation* animation) {
     AnimationProgressed(animation);
     if (animation->GetCurrentValue() == 0)
       SetVisible(false);
+  } else if (animation == &hover_animation_) {
+    AnimationProgressed(animation);
   }
 }
 
+void LocationBarView::AnimationCanceled(const gfx::Animation* animation) {
+  if (animation == &hover_animation_)
+    AnimationProgressed(animation);
+}
+
 ////////////////////////////////////////////////////////////////////////////////
 // LocationBarView, private OmniboxEditController implementation:
 
@@ -1285,6 +1308,10 @@ void LocationBarView::OnOmniboxFocused() {
   if (focus_ring_)
     focus_ring_->SchedulePaint();
 
+  // Only show hover animation in unfocused steady state.  Since focusing
+  // the omnibox is intentional, snapping is better than transitioning here.
+  hover_animation_.Reset();
+
   if (IsRounded())
     RefreshBackground();
 }
@@ -1297,10 +1324,6 @@ void LocationBarView::OnOmniboxBlurred() {
     RefreshBackground();
 }
 
-void LocationBarView::OnOmniboxHoverChanged() {
-  RefreshBackground();
-}
-
 ////////////////////////////////////////////////////////////////////////////////
 // LocationBarView, private DropdownBarHostDelegate implementation:
 

chrome/browser/ui/views/location_bar/location_bar_view.h

@@ -267,9 +267,6 @@ class LocationBarView : public LocationBar,
   void OnOmniboxFocused();
   void OnOmniboxBlurred();
 
-  // Called when omnibox detects change in hover state
-  void OnOmniboxHoverChanged();
-
  private:
   FRIEND_TEST_ALL_PREFIXES(SecurityIndicatorTest, CheckIndicatorText);
   FRIEND_TEST_ALL_PREFIXES(TouchLocationBarViewBrowserTest,
@@ -373,6 +370,8 @@ class LocationBarView : public LocationBar,
   void OnFocus() override;
   void OnPaint(gfx::Canvas* canvas) override;
   void OnPaintBorder(gfx::Canvas* canvas) override;
+  void OnMouseEntered(const ui::MouseEvent& event) override;
+  void OnMouseExited(const ui::MouseEvent& event) override;
 
   // views::DragController:
   void WriteDragDataForView(View* sender,
@@ -390,6 +389,7 @@ class LocationBarView : public LocationBar,
   // gfx::AnimationDelegate:
   void AnimationProgressed(const gfx::Animation* animation) override;
   void AnimationEnded(const gfx::Animation* animation) override;
+  void AnimationCanceled(const gfx::Animation* animation) override;
 
   // ChromeOmniboxEditController:
   void OnChanged() override;
@@ -472,6 +472,9 @@ class LocationBarView : public LocationBar,
   // Animation to indent the text when opening the suggestions dropdown.
   gfx::SlideAnimation text_indent_animation_{this};
 
+  // Animation to change whole location bar background color on hover.
+  gfx::SlideAnimation hover_animation_{this};
+
   // Whether we're in popup mode. This value also controls whether the location
   // bar is read-only.
   const bool is_popup_mode_;

chrome/browser/ui/views/omnibox/omnibox_view_views.cc

@@ -125,7 +125,6 @@ OmniboxViewViews::OmniboxViewViews(OmniboxEditController* controller,
                                    LocationBarView* location_bar,
                                    const gfx::FontList& font_list)
     : OmniboxView(controller, std::move(client)),
-      hovered_(false),
       popup_window_mode_(popup_window_mode),
       security_level_(security_state::NONE),
       saved_selection_for_focus_change_(gfx::Range::InvalidRange()),
@@ -240,10 +239,6 @@ void OmniboxViewViews::InstallPlaceholderText() {
   }
 }
 
-bool OmniboxViewViews::IsHovered() const {
-  return hovered_;
-}
-
 void OmniboxViewViews::EmphasizeURLComponents() {
   if (!location_bar_view_)
     return;
@@ -598,15 +593,6 @@ void OmniboxViewViews::ClearAccessibilityLabel() {
   friendly_suggestion_text_prefix_length_ = 0;
 }
 
-void OmniboxViewViews::SetHovered(bool hovered) {
-  if (hovered != hovered_) {
-    hovered_ = hovered;
-    if (location_bar_view_) {
-      location_bar_view_->OnOmniboxHoverChanged();
-    }
-  }
-}
-
 bool OmniboxViewViews::UnapplySteadyStateElisions(UnelisionGesture gesture) {
   if (!OmniboxFieldTrial::IsHideSteadyStateUrlSchemeAndSubdomainsEnabled())
     return false;
@@ -848,13 +834,6 @@ void OmniboxViewViews::OnMouseReleased(const ui::MouseEvent& event) {
     TextChanged();
 }
 
-void OmniboxViewViews::OnMouseMoved(const ui::MouseEvent& event) {
-  SetHovered(true);
-}
-void OmniboxViewViews::OnMouseExited(const ui::MouseEvent& event) {
-  SetHovered(false);
-}
-
 void OmniboxViewViews::OnGestureEvent(ui::GestureEvent* event) {
   if (!HasFocus() && event->type() == ui::ET_GESTURE_TAP_DOWN) {
     select_all_on_gesture_tap_ = true;

chrome/browser/ui/views/omnibox/omnibox_view_views.h

@@ -91,9 +91,6 @@ class OmniboxViewViews : public OmniboxView,
   // "Search Google or type a URL" when the Omnibox is empty and unfocused.
   void InstallPlaceholderText();
 
-  // Returns true if the omnibox is currently hovered.
-  bool IsHovered() const;
-
   // OmniboxView:
   void EmphasizeURLComponents() override;
   void Update() override;
@@ -186,9 +183,6 @@ class OmniboxViewViews : public OmniboxView,
 
   void ClearAccessibilityLabel();
 
-  // Sets the hovered state for omnibox.
-  void SetHovered(bool hovered);
-
   // Returns true if the user text was updated with the full URL (without
   // steady-state elisions).  |gesture| is the user gesture causing unelision.
   bool UnapplySteadyStateElisions(UnelisionGesture gesture);
@@ -242,10 +236,6 @@ class OmniboxViewViews : public OmniboxView,
   bool IsTextEditCommandEnabled(ui::TextEditCommand command) const override;
   void ExecuteTextEditCommand(ui::TextEditCommand command) override;
 
-  // views::View:
-  void OnMouseMoved(const ui::MouseEvent& event) override;
-  void OnMouseExited(const ui::MouseEvent& event) override;
-
   // chromeos::input_method::InputMethodManager::CandidateWindowObserver:
 #if defined(OS_CHROMEOS)
   void CandidateWindowOpened(
@@ -282,9 +272,6 @@ class OmniboxViewViews : public OmniboxView,
   // TemplateURLServiceObserver:
   void OnTemplateURLServiceChanged() override;
 
-  // Holds hover state for visual hinting.
-  bool hovered_;
-
   // When true, the location bar view is read only and also is has a slightly
   // different presentation (smaller font size). This is used for popups.
   bool popup_window_mode_;

chrome/browser/ui/views/omnibox/omnibox_view_views_unittest.cc

@@ -445,23 +445,6 @@ TEST_F(OmniboxViewViewsTest, RevertOnBlur) {
   EXPECT_FALSE(omnibox_view()->model()->user_input_in_progress());
 }
 
-TEST_F(OmniboxViewViewsTest, MouseMoveAndExitSetsHoveredState) {
-  // Starting state should not be hovered
-  EXPECT_EQ(omnibox_view()->IsHovered(), false);
-
-  // Moving the mouse over the view should put the view in the hovered state.
-  omnibox_view()->OnMouseMoved(CreateEvent(ui::ET_MOUSE_MOVED, 0));
-  EXPECT_EQ(omnibox_view()->IsHovered(), true);
-
-  // Continuing to move over the view should not change the state.
-  omnibox_view()->OnMouseMoved(CreateEvent(ui::ET_MOUSE_MOVED, 0));
-  EXPECT_EQ(omnibox_view()->IsHovered(), true);
-
-  // But exiting should revert the HOVERED state.
-  omnibox_view()->OnMouseExited(CreateEvent(ui::ET_MOUSE_MOVED, 0));
-  EXPECT_EQ(omnibox_view()->IsHovered(), false);
-}
-
 class OmniboxViewViewsSteadyStateElisionsTest : public OmniboxViewViewsTest {
  protected:
   const int kCharacterWidth = 10;