Add label to shelf nudge and basic animation for drag handle.

Bug: 1034168
Change-Id: I0c138a43cf76a3302aecebe11a1ad8011bb7bb59
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2053286
Commit-Queue: Yulun Wu <yulunwu@chromium.org>
Reviewed-by: Manu Cornet <manucornet@chromium.org>
Reviewed-by: Toni Baržić <tbarzic@chromium.org>
Cr-Commit-Position: refs/heads/master@{#744501}

ash/BUILD.gn

@@ -597,6 +597,8 @@ component("ash") {
     "shelf/assistant_overlay.h",
     "shelf/back_button.cc",
     "shelf/back_button.h",
+    "shelf/contextual_nudge.cc",
+    "shelf/contextual_nudge.h",
     "shelf/contextual_tooltip.cc",
     "shelf/contextual_tooltip.h",
     "shelf/drag_handle.cc",

ash/ash_strings.grd

@@ -500,6 +500,9 @@ This file contains the strings for ash.
                desc="The label used in the notification used to indicate that, the shortcut for docked magnifier feature has been disabled.">
         the docked magnifier
       </message>
+      <message name="IDS_ASH_DRAG_HANDLE_NUDGE" desc="The text shown to users above the drag handle when the device is in tablet mode and showing the in-app shelf. Instructs them that they can transition to home screen by swiping up from the shelf.">
+        Swipe up to go home
+      </message>
       <message name="IDS_ASH_FULLSCREEN_MAGNIFIER_SHORTCUT_DISABLED"
                desc="The label used in the notification used to indicate that, the shortcut for full-screen magnifier feature has been disabled.">
         the full-screen magnifier

ash/ash_strings_grd/IDS_ASH_DRAG_HANDLE_NUDGE.png.sha1

+c7a04306437aa8cb0c6d3f25d9d7389606273b1e
\ No newline at end of file

ash/public/cpp/shelf_config.h

@@ -188,6 +188,9 @@ class ASH_EXPORT ShelfConfig : public TabletModeObserver,
   // The tween type for dimming shelf icons, widgets, and buttons.
   gfx::Tween::Type DimAnimationTween() const;
 
+  // The size of the shelf drag handle.
+  gfx::Size DragHandleSize() const;
+
  private:
   friend class ShelfConfigTest;
 

ash/shelf/contextual_nudge.cc

+// Copyright 2020 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 "ash/shelf/contextual_nudge.h"
+
+#include "ash/public/cpp/shelf_types.h"
+#include "ash/public/cpp/shell_window_ids.h"
+#include "ash/system/tray/tray_constants.h"
+#include "ash/wm/collision_detection/collision_detection_utils.h"
+#include "ui/aura/window.h"
+#include "ui/compositor/scoped_layer_animation_settings.h"
+#include "ui/gfx/color_palette.h"
+#include "ui/views/controls/label.h"
+#include "ui/views/layout/fill_layout.h"
+
+namespace ash {
+namespace {
+
+// Shelf item tooltip height.
+constexpr int kTooltipHeight = 18;
+
+// The maximum width of the tooltip bubble.  Borrowed the value from
+// ash/tooltip/tooltip_controller.cc
+constexpr int kTooltipMaxWidth = 250;
+
+}  // namespace
+
+ContextualNudge::ContextualNudge(views::View* anchor,
+                                 const base::string16& text)
+    : views::BubbleDialogDelegateView(anchor,
+                                      views::BubbleBorder::BOTTOM_CENTER,
+                                      views::BubbleBorder::NO_ASSETS) {
+  set_color(SK_ColorTRANSPARENT);
+  set_margins(gfx::Insets(0, 0));
+  set_close_on_deactivate(false);
+  SetCanActivate(false);
+  set_accept_events(false);
+  set_adjust_if_offscreen(false);
+  set_shadow(views::BubbleBorder::NO_ASSETS);
+  DialogDelegate::set_buttons(ui::DIALOG_BUTTON_NONE);
+
+  set_parent_window(
+      anchor_widget()->GetNativeWindow()->GetRootWindow()->GetChildById(
+          kShellWindowId_ShelfContainer));
+
+  SetLayoutManager(std::make_unique<views::FillLayout>());
+
+  label_ = AddChildView(std::make_unique<views::Label>(text));
+  label_->SetPaintToLayer();
+  label_->layer()->SetFillsBoundsOpaquely(false);
+  label_->SetHorizontalAlignment(gfx::ALIGN_CENTER);
+  label_->SetEnabledColor(SkColorSetA(gfx::kGoogleGrey200, 0xFF));
+  label_->SetBackgroundColor(SK_ColorTRANSPARENT);
+
+  views::BubbleDialogDelegateView::CreateBubble(this);
+
+  // Text box for shelf nudge should be ignored for collision detection.
+  CollisionDetectionUtils::IgnoreWindowForCollisionDetection(
+      GetWidget()->GetNativeWindow());
+}
+
+ContextualNudge::~ContextualNudge() = default;
+
+gfx::Size ContextualNudge::CalculatePreferredSize() const {
+  const gfx::Size size = BubbleDialogDelegateView::CalculatePreferredSize();
+  return gfx::Size(std::min(size.width(), kTooltipMaxWidth),
+                   std::max(size.height(), kTooltipHeight));
+}
+
+ui::LayerType ContextualNudge::GetLayerType() const {
+  return ui::LAYER_NOT_DRAWN;
+}
+
+}  // namespace ash

ash/shelf/contextual_nudge.h

+// Copyright 2020 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.
+
+#ifndef ASH_SHELF_CONTEXTUAL_NUDGE_H_
+#define ASH_SHELF_CONTEXTUAL_NUDGE_H_
+
+#include "ash/ash_export.h"
+#include "ui/views/bubble/bubble_dialog_delegate_view.h"
+#include "ui/views/controls/label.h"
+
+namespace views {
+class View;
+}  // namespace views
+
+namespace ash {
+
+// The implementation of contextual nudge tooltip bubbles.
+class ASH_EXPORT ContextualNudge : public views::BubbleDialogDelegateView {
+ public:
+  ContextualNudge(views::View* anchor, const base::string16& text);
+  ~ContextualNudge() override;
+
+  ContextualNudge(const ContextualNudge&) = delete;
+  ContextualNudge& operator=(const ContextualNudge&) = delete;
+
+  views::Label* label() { return label_; }
+
+  // BubbleDialogDelegateView:
+  gfx::Size CalculatePreferredSize() const override;
+  ui::LayerType GetLayerType() const override;
+
+ private:
+  views::Label* label_;
+};
+
+}  // namespace ash
+
+#endif  // ASH_SHELF_CONTEXTUAL_NUDGE_H_

ash/shelf/contextual_tooltip.cc

@@ -92,7 +92,6 @@ base::TimeDelta GetNudgeTimeout(PrefService* prefs, TooltipType type) {
   const int shown_count = GetShownCount(prefs, type);
   if (shown_count == 0)
     return base::TimeDelta();
-  DCHECK(ShouldShowNudge(prefs, type));
   return kNudgeShowDuration;
 }
 

ash/shelf/contextual_tooltip_unittest.cc

@@ -114,6 +114,9 @@ TEST_P(ContextualTooltipTest, ShouldShowTimedDragHandleNudge) {
   clock()->Advance(contextual_tooltip::kMinInterval);
   EXPECT_FALSE(contextual_tooltip::ShouldShowNudge(GetPrefService(),
                                                    TooltipType::kDragHandle));
+  EXPECT_EQ(contextual_tooltip::GetNudgeTimeout(GetPrefService(),
+                                                TooltipType::kDragHandle),
+            contextual_tooltip::kNudgeShowDuration);
 }
 
 // Tests that if the user has successfully performed the gesture for at least

ash/shelf/drag_handle.cc

@@ -4,12 +4,17 @@
 
 #include "ash/shelf/drag_handle.h"
 
+#include "ash/public/cpp/ash_features.h"
 #include "ash/public/cpp/shelf_config.h"
 #include "ash/session/session_controller_impl.h"
+#include "ash/shelf/contextual_tooltip.h"
+#include "ash/shelf/shelf_observer.h"
 #include "ash/shell.h"
+#include "ash/strings/grit/ash_strings.h"
 #include "base/bind.h"
 #include "base/timer/timer.h"
-#include "ui/gfx/color_palette.h"
+#include "ui/base/l10n/l10n_util.h"
+#include "ui/compositor/scoped_layer_animation_settings.h"
 
 namespace ash {
 
@@ -18,10 +23,51 @@ namespace {
 // Vertical padding to make the drag handle easier to tap.
 constexpr int kVerticalClickboxPadding = 15;
 
+// Drag handle translation distance for the first part of nudge animation.
+constexpr int kDragHandleNudgeVerticalMarginRise = -4;
+
+// Drag handle translation distance for the second part of nudge animation.
+// Also the translation distance for the ContextualNudge text box.
+constexpr int kDragHandleNudgeVerticalMarginDrop = 8;
+
+// Animation time for each translation of drag handle to show contextual nudge.
+constexpr base::TimeDelta kDragHandleAnimationTime =
+    base::TimeDelta::FromMilliseconds(300);
+
+// Animation time to return drag handle to original position after hiding
+// contextual nudge.
+constexpr base::TimeDelta kDragHandleAnimationHideTime =
+    base::TimeDelta::FromMilliseconds(600);
+
+// Delay between animating drag handle and tooltip opacity.
+constexpr base::TimeDelta kDragHandleNudgeOpacityDelay =
+    base::TimeDelta::FromMilliseconds(500);
+
+// Fade in time for drag handle nudge tooltip.
+constexpr base::TimeDelta kDragHandleNudgeOpacityAnimationDuration =
+    base::TimeDelta::FromMilliseconds(200);
+
+// This class is deleted after OnImplicitAnimationsCompleted() is called.
+class HideNudgeObserver : public ui::ImplicitAnimationObserver {
+ public:
+  HideNudgeObserver(ContextualNudge* drag_handle_nudge)
+      : drag_handle_nudge_(drag_handle_nudge) {}
+  ~HideNudgeObserver() override = default;
+
+  // ui::ImplicitAnimationObserver:
+  void OnImplicitAnimationsCompleted() override {
+    drag_handle_nudge_->GetWidget()->CloseWithReason(
+        views::Widget::ClosedReason::kUnspecified);
+    delete this;
+  }
+
+ private:
+  ContextualNudge* drag_handle_nudge_;
+};
+
 }  // namespace
 
-DragHandle::DragHandle(gfx::Size drag_handle_size,
-                       AshColorProvider::RippleAttributes ripple_attributes,
+DragHandle::DragHandle(AshColorProvider::RippleAttributes ripple_attributes,
                        int drag_handle_corner_radius) {
   SetPaintToLayer(ui::LAYER_SOLID_COLOR);
   layer()->SetColor(ripple_attributes.base_color);
@@ -31,7 +77,7 @@ DragHandle::DragHandle(gfx::Size drag_handle_size,
   layer()->SetRoundedCornerRadius(
       {drag_handle_corner_radius, drag_handle_corner_radius,
        drag_handle_corner_radius, drag_handle_corner_radius});
-  SetSize(drag_handle_size);
+  SetSize(ShelfConfig::Get()->DragHandleSize());
   SetEventTargeter(std::make_unique<views::ViewTargeter>(this));
 }
 
@@ -47,4 +93,141 @@ bool DragHandle::DoesIntersectRect(const views::View* target,
   return drag_handle_bounds.Intersects(rect);
 }
 
+void DragHandle::ShowDragHandleNudge(base::TimeDelta nudge_duration) {
+  if (showing_nudge_)
+    return;
+  showing_nudge_ = true;
+
+  AnimateDragHandleShow();
+  ShowDragHandleTooltip();
+
+  if (!nudge_duration.is_zero()) {
+    hide_drag_handle_nudge_timer_.Start(
+        FROM_HERE, nudge_duration,
+        base::BindOnce(&DragHandle::HideDragHandleNudge,
+                       base::Unretained(this)));
+  }
+}
+
+void DragHandle::HideDragHandleNudge() {
+  if (!showing_nudge_)
+    return;
+  hide_drag_handle_nudge_timer_.Stop();
+  HideDragHandleNudgeHelper();
+  showing_nudge_ = false;
+}
+
+void DragHandle::OnGestureEvent(ui::GestureEvent* event) {
+  if (event->type() == ui::ET_GESTURE_TAP &&
+      features::AreContextualNudgesEnabled()) {
+    // Drag handle always shows nudge when tapped and does not affect the next
+    // time a session based nudge will be shown.
+    ShowDragHandleNudge(contextual_tooltip::kNudgeShowDuration);
+  }
+}
+
+void DragHandle::ShowDragHandleTooltip() {
+  DCHECK(!drag_handle_nudge_);
+  drag_handle_nudge_ = new ContextualNudge(
+      this, l10n_util::GetStringUTF16(IDS_ASH_DRAG_HANDLE_NUDGE));
+  drag_handle_nudge_->GetWidget()->Show();
+  drag_handle_nudge_->label()->layer()->SetOpacity(0.0f);
+
+  {
+    // Layer transform should be animated after a delay so the animator must
+    // first schedules a pause for transform animation.
+    ui::LayerAnimator* transform_animator =
+        drag_handle_nudge_->GetWidget()->GetLayer()->GetAnimator();
+    transform_animator->SchedulePauseForProperties(
+        kDragHandleAnimationTime, ui::LayerAnimationElement::TRANSFORM);
+
+    // Enqueue transform animation to start after pause.
+    ui::ScopedLayerAnimationSettings transform_animation_settings(
+        transform_animator);
+    transform_animation_settings.SetTweenType(gfx::Tween::EASE_IN_OUT);
+    transform_animation_settings.SetTransitionDuration(
+        kDragHandleAnimationTime);
+    transform_animation_settings.SetPreemptionStrategy(
+        ui::LayerAnimator::ENQUEUE_NEW_ANIMATION);
+
+    // gfx::Transform translate;
+    gfx::Transform translate;
+    translate.Translate(0, kDragHandleNudgeVerticalMarginDrop);
+    drag_handle_nudge_->GetWidget()->GetLayer()->SetTransform(translate);
+  }
+
+  {
+    // Layer opacity should be animated after a delay so the animator must first
+    // schedules a pause for opacity animation.
+    ui::LayerAnimator* opacity_animator =
+        drag_handle_nudge_->label()->layer()->GetAnimator();
+    opacity_animator->SchedulePauseForProperties(
+        kDragHandleNudgeOpacityDelay, ui::LayerAnimationElement::OPACITY);
+
+    // Enqueue opacity animation to start after pause.
+    ui::ScopedLayerAnimationSettings opacity_animation_settings(
+        opacity_animator);
+    opacity_animation_settings.SetPreemptionStrategy(
+        ui::LayerAnimator::ENQUEUE_NEW_ANIMATION);
+    opacity_animation_settings.SetTweenType(gfx::Tween::LINEAR);
+    opacity_animation_settings.SetTransitionDuration(
+        kDragHandleNudgeOpacityAnimationDuration);
+    drag_handle_nudge_->label()->layer()->SetOpacity(1.0f);
+  }
+}
+
+void DragHandle::HideDragHandleNudgeHelper() {
+  ScheduleDragHandleTranslationAnimation(
+      0, kDragHandleAnimationHideTime,
+      ui::LayerAnimator::IMMEDIATELY_ANIMATE_TO_NEW_TARGET);
+
+  if (drag_handle_nudge_) {
+    ui::LayerAnimator* opacity_animator =
+        drag_handle_nudge_->label()->layer()->GetAnimator();
+    ui::ScopedLayerAnimationSettings opacity_animation_settings(
+        opacity_animator);
+    opacity_animation_settings.SetPreemptionStrategy(
+        ui::LayerAnimator::ENQUEUE_NEW_ANIMATION);
+    opacity_animation_settings.SetTweenType(gfx::Tween::LINEAR);
+    opacity_animation_settings.SetTransitionDuration(
+        kDragHandleNudgeOpacityAnimationDuration);
+
+    // Register an animation observer to close the tooltip widget once the label
+    // opacity is animated to 0 as the widget will no longer be needed after
+    // this point.
+    opacity_animation_settings.AddObserver(
+        new HideNudgeObserver(drag_handle_nudge_));
+    drag_handle_nudge_->label()->layer()->SetOpacity(0.0f);
+
+    drag_handle_nudge_ = nullptr;
+  }
+}
+
+void DragHandle::AnimateDragHandleShow() {
+  // Drag handle is animated in two steps that run in sequence. The first step
+  // uses |IMMEDIATELY_ANIMATE_TO_NEW_TARGET| to preempt any in-progress
+  // animations while the second step uses |ENQUEUE_NEW_ANIMATION| so it runs
+  // after the first animation.
+  ScheduleDragHandleTranslationAnimation(
+      kDragHandleNudgeVerticalMarginRise, kDragHandleAnimationTime,
+      ui::LayerAnimator::IMMEDIATELY_ANIMATE_TO_NEW_TARGET);
+  ScheduleDragHandleTranslationAnimation(
+      kDragHandleNudgeVerticalMarginDrop, kDragHandleAnimationTime,
+      ui::LayerAnimator::ENQUEUE_NEW_ANIMATION);
+}
+
+void DragHandle::ScheduleDragHandleTranslationAnimation(
+    int vertical_offset,
+    base::TimeDelta animation_time,
+    ui::LayerAnimator::PreemptionStrategy strategy) {
+  ui::ScopedLayerAnimationSettings animation(layer()->GetAnimator());
+  animation.SetTweenType(gfx::Tween::EASE_IN_OUT);
+  animation.SetTransitionDuration(animation_time);
+  animation.SetPreemptionStrategy(strategy);
+
+  gfx::Transform translate;
+  translate.Translate(0, vertical_offset);
+  SetTransform(translate);
+}
+
 }  // namespace ash

ash/shelf/drag_handle.h

@@ -6,9 +6,11 @@
 #define ASH_SHELF_DRAG_HANDLE_H_
 
 #include "ash/ash_export.h"
+#include "ash/shelf/contextual_nudge.h"
 #include "ash/shelf/shelf_widget.h"
 #include "ash/style/ash_color_provider.h"
 #include "base/timer/timer.h"
+#include "ui/compositor/layer_animator.h"
 #include "ui/views/view.h"
 #include "ui/views/view_targeter_delegate.h"
 
@@ -17,9 +19,8 @@ namespace ash {
 class ASH_EXPORT DragHandle : public views::View,
                               public views::ViewTargeterDelegate {
  public:
-  explicit DragHandle(gfx::Size drag_handle_size,
-                      AshColorProvider::RippleAttributes ripple_attributes,
-                      int drag_handle_corner_radius);
+  DragHandle(AshColorProvider::RippleAttributes ripple_attributes,
+             int drag_handle_corner_radius);
   DragHandle(const DragHandle&) = delete;
   ~DragHandle() override;
 
@@ -28,6 +29,44 @@ class ASH_EXPORT DragHandle : public views::View,
   // views::ViewTargeterDelegate:
   bool DoesIntersectRect(const views::View* target,
                          const gfx::Rect& rect) const override;
+
+  // Animates drag handle and tooltip for drag handle teaching users that
+  // swiping up on will take the user back to the home screen.
+  void ShowDragHandleNudge(base::TimeDelta nudge_duration);
+
+  // Immediately begins the animation to return the drag handle back to its
+  // original position and hide the tooltip.
+  void HideDragHandleNudge();
+
+  // views::View:
+  void OnGestureEvent(ui::GestureEvent* event) override;
+
+ private:
+  // Animates tooltip for drag handle gesture.
+  void ShowDragHandleTooltip();
+
+  // Helper function to hide the drag handle nudge. Called by
+  // |hide_drag_handle_nudge_timer_|.
+  void HideDragHandleNudgeHelper();
+
+  // Helper function to animate the drag handle for the drag handle gesture
+  // contextual nudge.
+  void AnimateDragHandleShow();
+
+  // Animates translation of the drag handle by |vertical_offset| over
+  // |animation_time| using |strategy|.
+  void ScheduleDragHandleTranslationAnimation(
+      int vertical_offset,
+      base::TimeDelta animation_time,
+      ui::LayerAnimator::PreemptionStrategy strategy);
+
+  // Timer to hide drag handle nudge if it has a timed life.
+  base::OneShotTimer hide_drag_handle_nudge_timer_;
+
+  bool showing_nudge_ = false;
+
+  // A label used to educate users about swipe gestures on the drag handle.
+  ContextualNudge* drag_handle_nudge_ = nullptr;
 };
 
 }  // namespace ash

ash/shelf/shelf_config.cc

@@ -395,6 +395,10 @@ gfx::Tween::Type ShelfConfig::DimAnimationTween() const {
   return gfx::Tween::LINEAR;
 }
 
+gfx::Size ShelfConfig::DragHandleSize() const {
+  return gfx::Size(80, 4);
+}
+
 void ShelfConfig::UpdateConfigForAccessibilityState() {
   UpdateConfig(is_app_list_visible_);
 }

ash/shelf/shelf_layout_manager.cc

@@ -584,6 +584,25 @@ void ShelfLayoutManager::UpdateAutoHideForMouseEvent(ui::MouseEvent* event,
   }
 }
 
+void ShelfLayoutManager::UpdateContextualNudges() {
+  const bool in_app_shelf = ShelfConfig::Get()->is_in_app();
+  const bool in_tablet_mode = Shell::Get()->IsInTabletMode();
+
+  if (in_app_shelf && in_tablet_mode) {
+    if (contextual_tooltip::ShouldShowNudge(
+            Shell::Get()->session_controller()->GetLastActiveUserPrefService(),
+            contextual_tooltip::TooltipType::kDragHandle)) {
+      shelf_widget_->ShowDragHandleNudge();
+    }
+  } else {
+    shelf_widget_->HideDragHandleNudge();
+  }
+}
+
+void ShelfLayoutManager::HideContextualNudges() {
+  shelf_widget_->HideDragHandleNudge();
+}
+
 void ShelfLayoutManager::ProcessGestureEventOfAutoHideShelf(
     ui::GestureEvent* event,
     aura::Window* target) {
@@ -1011,6 +1030,7 @@ void ShelfLayoutManager::OnSessionStateChanged(
   const bool was_locked = state_.IsScreenLocked();
   state_.session_state = state;
   MaybeUpdateShelfBackground(AnimationChangeType::ANIMATE);
+  HideContextualNudges();
   if (was_adding_user != state_.IsAddingSecondaryUser()) {
     UpdateShelfVisibilityAfterLoginUIChange();
     return;
@@ -1070,14 +1090,17 @@ float ShelfLayoutManager::GetOpacity() const {
 
 void ShelfLayoutManager::OnShelfConfigUpdated() {
   LayoutShelf(/*animate=*/true);
+  UpdateContextualNudges();
 }
 
 void ShelfLayoutManager::OnTabletModeStarted() {
   LayoutShelf(/*animate=*/true);
+  UpdateContextualNudges();
 }
 
 void ShelfLayoutManager::OnTabletModeEnded() {
   LayoutShelf(/*animate=*/true);
+  UpdateContextualNudges();
 }
 
 ////////////////////////////////////////////////////////////////////////////////
@@ -1968,7 +1991,6 @@ bool ShelfLayoutManager::StartGestureDrag(
 
   if (Shell::Get()->app_list_controller()->IsVisible())
     return true;
-
   return StartShelfDrag(
       gesture_in_screen,
       gfx::Vector2dF(gesture_in_screen.details().scroll_x_hint(),

ash/shelf/shelf_layout_manager.h

@@ -128,6 +128,13 @@ class ASH_EXPORT ShelfLayoutManager
   // Updates the auto-hide state for mouse events.
   void UpdateAutoHideForMouseEvent(ui::MouseEvent* event, aura::Window* target);
 
+  // Shows or hides contextual nudges for shelf gestures, depending on the shelf
+  // state.
+  void UpdateContextualNudges();
+
+  // Hides any visible contextual nudge for shelf gestures.
+  void HideContextualNudges();
+
   // Called by AutoHideEventHandler to process the gesture events when shelf is
   // auto hide.
   void ProcessGestureEventOfAutoHideShelf(ui::GestureEvent* event,

ash/shelf/shelf_widget.cc

@@ -19,6 +19,7 @@
 #include "ash/root_window_controller.h"
 #include "ash/screen_util.h"
 #include "ash/session/session_controller_impl.h"
+#include "ash/shelf/contextual_tooltip.h"
 #include "ash/shelf/drag_handle.h"
 #include "ash/shelf/home_button.h"
 #include "ash/shelf/hotseat_transition_animator.h"
@@ -56,7 +57,6 @@ constexpr int kShelfBlurRadius = 30;
 // the screen edge).
 constexpr int kShelfMaxOvershootHeight = 40;
 constexpr float kShelfBlurQuality = 0.33f;
-constexpr gfx::Size kDragHandleSize(80, 4);
 constexpr int kDragHandleCornerRadius = 2;
 
 // Return the first or last focusable child of |root|.
@@ -173,7 +173,7 @@ class ShelfWidget::DelegateView : public views::WidgetDelegate,
   ui::Layer* opaque_background() { return opaque_background_.layer(); }
   ui::Layer* animating_background() { return &animating_background_; }
   ui::Layer* animating_drag_handle() { return &animating_drag_handle_; }
-  views::View* drag_handle() { return drag_handle_; }
+  DragHandle* drag_handle() { return drag_handle_; }
 
  private:
   // Whether |opaque_background_| is explicitly hidden during an animation.
@@ -234,8 +234,8 @@ ShelfWidget::DelegateView::DelegateView(ShelfWidget* shelf_widget)
       AshColorProvider::Get()->GetRippleAttributes(
           ShelfConfig::Get()->GetDefaultShelfColor());
 
-  drag_handle_ = AddChildView(std::make_unique<DragHandle>(
-      kDragHandleSize, ripple_attributes, kDragHandleCornerRadius));
+  drag_handle_ = AddChildView(
+      std::make_unique<DragHandle>(ripple_attributes, kDragHandleCornerRadius));
 
   animating_drag_handle_.SetColor(ripple_attributes.base_color);
   animating_drag_handle_.SetOpacity(ripple_attributes.inkdrop_opacity + 0.075);
@@ -425,7 +425,7 @@ void ShelfWidget::DelegateView::Layout() {
   login_shelf_view_->SetBoundsRect(GetLocalBounds());
 
   gfx::Rect drag_handle_bounds = GetLocalBounds();
-  drag_handle_bounds.ClampToCenteredSize(kDragHandleSize);
+  drag_handle_bounds.ClampToCenteredSize(ShelfConfig::Get()->DragHandleSize());
   drag_handle_->SetBoundsRect(drag_handle_bounds);
 }
 
@@ -508,6 +508,17 @@ views::View* ShelfWidget::GetDragHandle() {
   return delegate_view_->drag_handle();
 }
 
+void ShelfWidget::ShowDragHandleNudge() {
+  delegate_view_->drag_handle()->ShowDragHandleNudge(
+      contextual_tooltip::GetNudgeTimeout(
+          Shell::Get()->session_controller()->GetLastActiveUserPrefService(),
+          contextual_tooltip::TooltipType::kDragHandle));
+}
+
+void ShelfWidget::HideDragHandleNudge() {
+  delegate_view_->drag_handle()->HideDragHandleNudge();
+}
+
 void ShelfWidget::SetLoginShelfButtonOpacity(float target_opacity) {
   if (login_shelf_view_->GetVisible())
     login_shelf_view_->SetButtonOpacity(target_opacity);

ash/shelf/shelf_widget.h

@@ -159,6 +159,12 @@ class ASH_EXPORT ShelfWidget : public AccessibilityObserver,
   // Gets the view used to display the drag handle on the in-app shelf.
   views::View* GetDragHandle();
 
+  // Starts the animation to show the drag handle nudge.
+  void ShowDragHandleNudge();
+
+  // Starts the animation to hide the drag handle nudge.
+  void HideDragHandleNudge();
+
   // Sets opacity of login shelf buttons to be consistent with shelf icons.
   void SetLoginShelfButtonOpacity(float target_opacity);