Displays the calibration complete message to touch calibration and gracefully quits

chrome/browser/chromeos/display/touch_calibrator/touch_calibrator_view.cc

 // Copyright 2016 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/chromeos/display/touch_calibrator/touch_calibrator_view.h"
 
 #include "ash/display/window_tree_host_manager.h"
 #include "ash/public/cpp/shell_window_ids.h"
+#include "ash/resources/vector_icons/vector_icons.h"
 #include "ash/shell.h"
 #include "ui/aura/window.h"
 #include "ui/base/resource/resource_bundle.h"
 #include "ui/compositor/scoped_layer_animation_settings.h"
 #include "ui/gfx/animation/linear_animation.h"
 #include "ui/gfx/animation/throb_animation.h"
 #include "ui/gfx/canvas.h"
+#include "ui/gfx/paint_vector_icon.h"
 #include "ui/strings/grit/ui_strings.h"
 #include "ui/views/background.h"
 #include "ui/views/controls/label.h"
 #include "ui/views/widget/widget.h"
 
 namespace chromeos {
 
 namespace {
 
 constexpr char kWidgetName[] = "TouchCalibratorOverlay";
 
 constexpr int kAnimationFrameRate = 100;
 constexpr int kFadeDurationInMs = 150;
-constexpr int kPointMoveDurationInMs = 600;
-constexpr int kPointMoveDurationLongInMs = 700;
+constexpr int kPointMoveDurationInMs = 400;
+constexpr int kPointMoveDurationLongInMs = 500;
 
 const SkColor kExitLabelColor = SkColorSetARGBInline(255, 96, 96, 96);
 const SkColor kExitLabelShadowColor = SkColorSetARGBInline(255, 11, 11, 11);
 constexpr int kExitLabelWidth = 300;
 constexpr int kExitLabelHeight = 20;
 
 const SkColor kTapHereLabelColor = SK_ColorWHITE;
 
 constexpr int kHintBoxWidth = 298;
 constexpr int kHintBoxHeight = 180;
 constexpr int kHintBoxLabelTextSize = 5;
 constexpr int kHintBoxSublabelTextSize = 3;
 
 constexpr int kThrobberCircleViewWidth = 64;
 constexpr float kThrobberCircleRadiusFactor = 3.f / 8.f;
 
+constexpr int kFinalMessageTransitionDurationMs = 200;
+constexpr int kCompleteMessageViewWidth = 427;
+constexpr int kCompleteMessageViewHeight = kThrobberCircleViewWidth;
+constexpr int kCompleteMessageTextSize = 16;
+
 constexpr int kTouchPointViewOffset = 100;
 
 constexpr int kTapLabelHeight = 48;
 constexpr int kTapLabelWidth = 80;
 
 const SkColor kHintLabelTextColor = SK_ColorBLACK;
 const SkColor kHintSublabelTextColor = SkColorSetARGBInline(255, 161, 161, 161);
 
 const SkColor kInnerCircleColor = SK_ColorWHITE;
-const SkColor kOuterCircleColor = SkColorSetA(kInnerCircleColor, 128);
+const SkColor kOuterCircleColor = SkColorSetA(kInnerCircleColor, 255 * 0.2);
 
 constexpr int kCircleAnimationDurationMs = 900;
 
 constexpr int kHintRectBorderRadius = 4;
 
 constexpr float kBackgroundFinalOpacity = 0.75f;
 
 // Returns the initialization params for the widget that contains the touch
 // calibrator view.
 views::Widget::InitParams GetWidgetParams(aura::Window* root_window) {
@@ skipping 13 matching lines @@
 // Returns the size of bounding box required for |text| of given |font_list|.
 gfx::Size GetSizeForString(const base::string16& text,
                            const gfx::FontList& font_list) {
   int height = 0, width = 0;
   gfx::Canvas::SizeStringInt(text, font_list, &width, &height, 0, 0);
   return gfx::Size(width, height);
 }
 
 void AnimateLayerToPosition(views::View* view,
                             int duration,
-                            gfx::Point end_position) {
+                            gfx::Point end_position,
+                            float opacity = 1.f) {
   ui::ScopedLayerAnimationSettings slide_settings(view->layer()->GetAnimator());
   slide_settings.SetPreemptionStrategy(
       ui::LayerAnimator::IMMEDIATELY_ANIMATE_TO_NEW_TARGET);
   slide_settings.SetTransitionDuration(
       base::TimeDelta::FromMilliseconds(duration));
   view->SetBoundsRect(gfx::Rect(end_position, view->size()));
+  view->layer()->SetOpacity(opacity);
 }
 
 }  // namespace
 
 // Creates a throbbing animated view with two concentric circles. The radius of
 // the inner circle is fixed while that of the outer circle oscillates between a
 // min and max radius. The animation takes |animation_duration| milliseconds
 // to complete. The center of these circles are at the center of the view
 // element.
 class CircularThrobberView : public views::View, public gfx::AnimationDelegate {
@@ skipping 190 matching lines @@
 
 void HintBox::OnPaint(gfx::Canvas* canvas) {
   canvas->DrawRoundRect(GetLocalBounds(), border_radius_, paint_);
   canvas->DrawStringRectWithFlags(label_text_, label_font_list_, label_color_,
                                   label_text_bounds_, gfx::Canvas::NO_ELLIPSIS);
   canvas->DrawStringRectWithFlags(sublabel_text_, sublabel_font_list_,
                                   sublabel_color_, sublabel_text_bounds_,
                                   gfx::Canvas::NO_ELLIPSIS);
 }
 
+class CompletionMessageView : public views::View {
+ public:
+  CompletionMessageView(gfx::Rect bounds, base::string16 message);

[oshima, 2017/01/18 01:57:16]

nit: const & for both

[malaykeshav, 2017/01/18 02:08:38]

Done

+  ~CompletionMessageView() override;
+
+  // views::View overrides:
+  void OnPaint(gfx::Canvas* canvas) override;
+
+ private:
+  const base::string16 message_;
+  gfx::FontList font_list_;
+
+  int radius_;
+
+  gfx::Point center_;

[oshima, 2017/01/18 01:57:16]

document these two.

[malaykeshav, 2017/01/18 02:08:38]

No longer required.

+
+  gfx::Rect text_bounds_;
+
+  gfx::ImageSkia check_icon_;
+
+  SkPaint paint_;
+
+  DISALLOW_COPY_AND_ASSIGN(CompletionMessageView);
+};
+
+CompletionMessageView::CompletionMessageView(gfx::Rect bounds,
+                                             base::string16 message)
+    : message_(message) {
+  SetBoundsRect(bounds);
+
+  center_.SetPoint(height() / 2, height() / 2);
+  radius_ = height() / 2;
+
+  int x_offset = height() * 5.f / 4.f;
+  text_bounds_.SetRect(x_offset, 0, width() - x_offset, height());
+
+  font_list_ = ui::ResourceBundle::GetSharedInstance().GetFontListWithDelta(
+      kCompleteMessageTextSize, gfx::Font::FontStyle::NORMAL,
+      gfx::Font::Weight::NORMAL);
+
+  // crbug/676513 moves this file to src/ash which will require an ash icon
+  // file.
+  check_icon_ = gfx::CreateVectorIcon(ash::kTouchCalibrationCompleteCheckIcon,
+                                      SK_ColorWHITE);
+
+  paint_.setColor(SK_ColorWHITE);
+  paint_.setStyle(SkPaint::kFill_Style);
+  paint_.setFlags(SkPaint::kAntiAlias_Flag);
+}
+
+CompletionMessageView::~CompletionMessageView() {}
+
+void CompletionMessageView::OnPaint(gfx::Canvas* canvas) {
+  canvas->DrawImageInt(check_icon_, 0, 0);
+
+  // TODO(malaykeshav): Work with elizabethchiu@ to get better UX for RTL.
+  canvas->DrawStringRectWithFlags(
+      message_, font_list_, paint_.getColor(), text_bounds_,
+      gfx::Canvas::TEXT_ALIGN_LEFT | gfx::Canvas::NO_SUBPIXEL_RENDERING);
+}
+
 TouchCalibratorView::TouchCalibratorView(const display::Display& target_display,
                                          bool is_primary_view)
     : display_(target_display),
       is_primary_view_(is_primary_view),
       exit_label_(nullptr),
       tap_label_(nullptr),
       throbber_circle_(nullptr),
       hint_box_view_(nullptr),
       touch_point_view_(nullptr) {
   aura::Window* root = ash::Shell::GetInstance()
@@ skipping 104 matching lines @@
       touch_point_view_->y() + (tpv_width / 2.f) - (size.height() / 2.f));
 
   HintBox* hint_box =
       new HintBox(gfx::Rect(position, size), kHintRectBorderRadius);
   hint_box->SetVisible(false);
   hint_box->SetLabel(hint_label_text, kHintLabelTextColor);
   hint_box->SetSubLabel(hint_sublabel_text, kHintSublabelTextColor);
   hint_box_view_ = hint_box;
 
   AddChildView(hint_box_view_);
+
+  // Initialize the view that contains the calibration complete message which
+  // will be displayed at the end.
+  base::string16 finish_msg_text =
+      rb.GetLocalizedString(IDS_DISPLAY_TOUCH_CALIBRATION_FINISH_LABEL);
+
+  gfx::Rect msg_view_bounds(
+      (display_.bounds().width() - kCompleteMessageViewWidth) / 2,
+      display_.bounds().height() / 3, kCompleteMessageViewWidth,
+      kCompleteMessageViewHeight);
+  completion_message_view_ =
+      new CompletionMessageView(msg_view_bounds, finish_msg_text);
+  completion_message_view_->SetVisible(false);
+  completion_message_view_->SetPaintToLayer(true);
+  completion_message_view_->layer()->SetFillsBoundsOpaquely(false);
+  completion_message_view_->layer()->GetAnimator()->AddObserver(this);
+  completion_message_view_->set_background(
+      views::Background::CreateSolidBackground(SK_ColorTRANSPARENT));
+
+  AddChildView(completion_message_view_);
 }
 
 void TouchCalibratorView::OnPaint(gfx::Canvas* canvas) {
   OnPaintBackground(canvas);
 }
 
 void TouchCalibratorView::OnPaintBackground(gfx::Canvas* canvas) {
   float opacity;
 
   // If current state is a fade in or fade out state then update opacity
@@ skipping 25 matching lines @@
 void TouchCalibratorView::AnimationEnded(const gfx::Animation* animation) {
   switch (state_) {
     case BACKGROUND_FADING_IN:
       exit_label_->SetVisible(true);
       state_ = is_primary_view_ ? DISPLAY_POINT_1 : CALIBRATION_COMPLETE;
       if (is_primary_view_) {
         touch_point_view_->SetVisible(true);
         hint_box_view_->SetVisible(true);
       }
       break;
+    case BACKGROUND_FADING_OUT:
+      exit_label_->SetVisible(false);
+      if (is_primary_view_)
+        completion_message_view_->SetVisible(false);
+      widget_->Hide();
+      break;

[oshima, 2017/01/18 01:57:16]

You can do it in a separate CL, but you should use DIM layer.

[malaykeshav, 2017/01/18 02:08:38]

Ack

     default:
       break;
   }
 }
 
 void TouchCalibratorView::OnLayerAnimationStarted(
     ui::LayerAnimationSequence* sequence) {}
 
 void TouchCalibratorView::OnLayerAnimationEnded(
     ui::LayerAnimationSequence* sequence) {
   switch (state_) {
     case ANIMATING_1_TO_2:
       state_ = DISPLAY_POINT_2;
       tap_label_->SetVisible(true);
       break;
     case ANIMATING_2_TO_3:
       state_ = DISPLAY_POINT_3;
       break;
     case ANIMATING_3_TO_4:
       state_ = DISPLAY_POINT_4;
       break;
+    case ANIMATING_FINAL_MESSAGE:
+      state_ = CALIBRATION_COMPLETE;
+      break;
     default:
       break;
   }
 }
 
 void TouchCalibratorView::OnLayerAnimationAborted(
     ui::LayerAnimationSequence* sequence) {
   OnLayerAnimationEnded(sequence);
 }
 
@@ skipping 42 matching lines @@
       state_ = ANIMATING_3_TO_4;
 
       // The touch point has to be animated from the bottom left corner of the
       // screen to the bottom right corner.
       AnimateLayerToPosition(
           touch_point_view_, kPointMoveDurationInMs,
           gfx::Point(display_.bounds().width() - kTouchPointViewOffset -
                          touch_point_view_->width(),
                      touch_point_view_->y()));
       return;
+    case DISPLAY_POINT_4:
+      state_ = ANIMATING_FINAL_MESSAGE;
+      completion_message_view_->layer()->SetOpacity(0.f);
+      completion_message_view_->SetVisible(true);
+
+      touch_point_view_->SetVisible(false);
+
+      AnimateLayerToPosition(completion_message_view_,
+                             kFinalMessageTransitionDurationMs,
+                             gfx::Point(completion_message_view_->x(),
+                                        display_.bounds().height() / 2));
+      return;
+    case CALIBRATION_COMPLETE:
+      state_ = BACKGROUND_FADING_OUT;
+      if (is_primary_view_) {
+        // In case of primary view, we also need to fade out the calibration
+        // complete message view.
+        AnimateLayerToPosition(
+            completion_message_view_, kFadeDurationInMs,
+            gfx::Point(completion_message_view_->x(),
+                       completion_message_view_->y() +
+                           2 * completion_message_view_->height()),
+            0.f);
+      }
+
+      start_opacity_value_ = kBackgroundFinalOpacity;
+      end_opacity_value_ = 0.f;
+
+      paint_.setStyle(SkPaint::kFill_Style);
+      animator_->SetDuration(kFadeDurationInMs);
+      animator_->Start();
+      return;
     default:
       return;
   }
 }
 
 bool TouchCalibratorView::GetDisplayPointLocation(gfx::Point* location) {
   DCHECK(location);
   if (!is_primary_view_)
     return false;
 
   if (state_ != DISPLAY_POINT_1 && state_ != DISPLAY_POINT_2 &&
       state_ != DISPLAY_POINT_3 && state_ != DISPLAY_POINT_4) {
     return false;
   }
 
   if (!touch_point_view_ || !throbber_circle_)
     return false;
   // TODO(malaykeshav): Can use views::ConvertPointToScreen()
   location->SetPoint(touch_point_view_->x() + touch_point_view_->width() / 2.f,
                      touch_point_view_->y() + touch_point_view_->width() / 2.f);
   return true;
 }
 
-void TouchCalibratorView::SkipToFinalState() {}
+void TouchCalibratorView::SkipToFinalState() {
+  state_ = CALIBRATION_COMPLETE;
+
+  exit_label_->SetVisible(false);
+
+  if (is_primary_view_) {
+    touch_point_view_->SetVisible(false);
+    hint_box_view_->SetVisible(false);
+  }
+
+  AdvanceToNextState();
+}
 
 void TouchCalibratorView::SkipCurrentAnimation() {
   if (animator_->is_animating())
     animator_->End();
   if (touch_point_view_ &&
       touch_point_view_->layer()->GetAnimator()->is_animating()) {
     touch_point_view_->layer()->GetAnimator()->StopAnimating();
   }
 }
 
 }  // namespace chromeos