Animate Click to Call icon text opacity.

After showing the "Sent to device" success message to the user, we want
to gradually fade out the message while collapsing the icon.

Bug: 986743
Change-Id: Ifb32d5c7b4e70b73fe68ba1f38e8bc04c18ed47e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1713534
Commit-Queue: Richard Knoll <knollr@chromium.org>
Reviewed-by: Michael van Ouwerkerk <mvanouwerkerk@chromium.org>
Cr-Commit-Position: refs/heads/master@{#679966}

chrome/browser/ui/views/sharing/click_to_call/click_to_call_icon_view.cc

@@ -12,6 +12,7 @@
 #include "chrome/browser/ui/views/sharing/click_to_call/click_to_call_dialog_view.h"
 #include "components/vector_icons/vector_icons.h"
 #include "ui/base/l10n/l10n_util.h"
+#include "ui/base/material_design/material_design_controller.h"
 #include "ui/gfx/animation/throb_animation.h"
 #include "ui/gfx/geometry/rect.h"
 #include "ui/gfx/paint_vector_icon.h"
@@ -26,6 +27,10 @@ constexpr float kLoaderHeight = 4.0f;
 // Width of the loader bar in percent of its range.
 constexpr float kLoaderWidth = 0.2f;
 
+// TODO(knollr): move these into IconLabelBubbleView.
+constexpr int kIconTextSpacing = 8;
+constexpr int kIconTextSpacingTouch = 10;
+
 ClickToCallSharingDialogController* GetControllerFromWebContents(
     content::WebContents* web_contents) {
   if (!web_contents)
@@ -141,14 +146,33 @@ void ClickToCallIconView::PaintButtonContents(gfx::Canvas* canvas) {
   canvas->DrawRoundRect(bounds, bounds.height() / 2, flags);
 }
 
+double ClickToCallIconView::WidthMultiplier() const {
+  double multiplier = PageActionIconView::WidthMultiplier();
+
+  double min_width = image()->GetPreferredSize().width() + GetInsets().width();
+  double spacing = ui::MaterialDesignController::touch_ui()
+                       ? kIconTextSpacingTouch
+                       : kIconTextSpacing;
+  double label_width = label()->GetPreferredSize().width();
+  double max_width = min_width + spacing + label_width;
+
+  // We offset the width multiplier to start expanding the label straight away
+  // instead of completely hide the icon and expanding it from zero width.
+  double offset = min_width / max_width;
+  return multiplier * (1 - offset) + offset;
+}
+
 void ClickToCallIconView::AnimationProgressed(const gfx::Animation* animation) {
-  if (animation != loading_animation_.get())
+  if (animation != loading_animation_.get()) {
+    UpdateOpacity();
     return PageActionIconView::AnimationProgressed(animation);
+  }
   SchedulePaint();
 }
 
 void ClickToCallIconView::AnimationEnded(const gfx::Animation* animation) {
   PageActionIconView::AnimationEnded(animation);
+  UpdateOpacity();
   Update();
 }
 
@@ -157,6 +181,22 @@ void ClickToCallIconView::OnThemeChanged() {
   UpdateLoaderColor();
 }
 
+void ClickToCallIconView::UpdateOpacity() {
+  if (!IsShrinking()) {
+    DestroyLayer();
+    SetTextSubpixelRenderingEnabled(true);
+    return;
+  }
+
+  if (!layer()) {
+    SetPaintToLayer();
+    SetTextSubpixelRenderingEnabled(false);
+    layer()->SetFillsBoundsOpaquely(false);
+  }
+
+  layer()->SetOpacity(PageActionIconView::WidthMultiplier());
+}
+
 void ClickToCallIconView::UpdateInkDrop(bool activate) {
   auto target_state =
       activate ? views::InkDropState::ACTIVATED : views::InkDropState::HIDDEN;

chrome/browser/ui/views/sharing/click_to_call/click_to_call_icon_view.h

@@ -51,6 +51,7 @@ class ClickToCallIconView : public PageActionIconView {
   const gfx::VectorIcon& GetVectorIcon() const override;
   const gfx::VectorIcon& GetVectorIconBadge() const override;
   bool IsTriggerableEvent(const ui::Event& event) override;
+  double WidthMultiplier() const override;
 
   // gfx::AnimationDelegate:
   void AnimationProgressed(const gfx::Animation* animation) override;
@@ -59,6 +60,7 @@ class ClickToCallIconView : public PageActionIconView {
  private:
   void UpdateInkDrop(bool activate);
   void UpdateLoaderColor();
+  void UpdateOpacity();
 
   SkColor loader_color_;
   std::unique_ptr<gfx::ThrobAnimation> loading_animation_;