cros: Add slider animation for alt-tab mode toggle.

This CL animates the toggle slider for the alt-tab mode toggle slider.

Test: manual
Bug: 1157087
Change-Id: Ide73ce93aa0238c8927411cdf4489f7581a22d31
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2638153
Commit-Queue: Jeremy Chinsen <chinsenj@chromium.org>
Reviewed-by: Jeremy Chinsen <chinsenj@chromium.org>
Reviewed-by: Xiaoqian Dai <xdai@chromium.org>
Cr-Commit-Position: refs/heads/master@{#845419}

ash/wm/window_cycle/window_cycle_controller_unittest.cc

@@ -49,6 +49,7 @@
 #include "ui/aura/test/test_windows.h"
 #include "ui/aura/window.h"
 #include "ui/aura/window_event_dispatcher.h"
+#include "ui/compositor/scoped_animation_duration_scale_mode.h"
 #include "ui/display/display_layout_builder.h"
 #include "ui/display/manager/display_layout_store.h"
 #include "ui/display/manager/display_manager.h"
@@ -168,11 +169,11 @@ class WindowCycleControllerTest : public AshTestBase {
         ->GetWindowCycleItemViewsForTesting();
   }
 
-  const views::View::Views& GetWindowCycleTabSliderViews() const {
+  const views::View::Views& GetWindowCycleTabSliderButtons() const {
     return Shell::Get()
         ->window_cycle_controller()
         ->window_cycle_list()
-        ->GetWindowCycleTabSliderViewsForTesting();
+        ->GetWindowCycleTabSliderButtonsForTesting();
   }
 
   const views::Label* GetWindowCycleNoRecentItemsLabel() const {
@@ -1727,8 +1728,10 @@ class ModeSelectionWindowCycleControllerTest
   }
 
   void SwitchPerDeskAltTabMode(bool per_desk_mode) {
+    ui::ScopedAnimationDurationScaleMode animation_scale(
+        ui::ScopedAnimationDurationScaleMode::NON_ZERO_DURATION);
     gfx::Point button_center =
-        GetWindowCycleTabSliderViews()[per_desk_mode ? 1 : 0]
+        GetWindowCycleTabSliderButtons()[per_desk_mode ? 1 : 0]
             ->GetBoundsInScreen()
             .CenterPoint();
     generator_->MoveMouseTo(button_center);
@@ -1779,7 +1782,7 @@ TEST_F(ModeSelectionWindowCycleControllerTest, SingleDeskHidesInteractiveMode) {
 
   // Expect mode-switching buttons and no-recent-item label to exist.
   EXPECT_FALSE(!GetWindowCycleNoRecentItemsLabel());
-  auto tab_slider_buttons = GetWindowCycleTabSliderViews();
+  auto tab_slider_buttons = GetWindowCycleTabSliderButtons();
   EXPECT_EQ(2u, tab_slider_buttons.size());
   const gfx::Rect alttab_bounds_with_tab_slider =
       GetWindowCycleListWidget()->GetWindowBoundsInScreen();
@@ -2160,7 +2163,7 @@ class MultiUserWindowCycleControllerTest
     auto* cycle_controller = Shell::Get()->window_cycle_controller();
     EXPECT_TRUE(cycle_controller->IsCycling());
     gfx::Point button_center =
-        GetWindowCycleTabSliderViews()[per_desk_mode ? 1 : 0]
+        GetWindowCycleTabSliderButtons()[per_desk_mode ? 1 : 0]
             ->GetBoundsInScreen()
             .CenterPoint();
     generator_->MoveMouseTo(button_center);
@@ -2223,11 +2226,11 @@ class MultiUserWindowCycleControllerTest
         ->GetWindowCycleItemViewsForTesting();
   }
 
-  const views::View::Views& GetWindowCycleTabSliderViews() const {
+  const views::View::Views& GetWindowCycleTabSliderButtons() const {
     return Shell::Get()
         ->window_cycle_controller()
         ->window_cycle_list()
-        ->GetWindowCycleTabSliderViewsForTesting();
+        ->GetWindowCycleTabSliderButtonsForTesting();
   }
 
   const aura::Window* GetTargetWindow() const {

ash/wm/window_cycle/window_cycle_list.cc

@@ -569,8 +569,8 @@ class WindowCycleView : public views::WidgetDelegateView,
     return mirror_container_->children();
   }
 
-  const views::View::Views& GetTabSliderViewsForTesting() const {
-    return tab_slider_container_->children();
+  const views::View::Views& GetTabSliderButtonsForTesting() const {
+    return tab_slider_container_->GetTabSliderButtonsForTesting();
   }
 
   const views::Label* GetNoRecentItemsLabelForTesting() const {
@@ -942,8 +942,8 @@ const views::View::Views& WindowCycleList::GetWindowCycleItemViewsForTesting()
 }
 
 const views::View::Views&
-WindowCycleList::GetWindowCycleTabSliderViewsForTesting() const {
-  return cycle_view_->GetTabSliderViewsForTesting();  // IN-TEST
+WindowCycleList::GetWindowCycleTabSliderButtonsForTesting() const {
+  return cycle_view_->GetTabSliderButtonsForTesting();  // IN-TEST
 }
 
 const views::Label*

ash/wm/window_cycle/window_cycle_list.h

@@ -121,7 +121,7 @@ class ASH_EXPORT WindowCycleList : public aura::WindowObserver,
   const views::View::Views& GetWindowCycleItemViewsForTesting() const;
 
   // Returns the views for the window cycle tab slider buttons.
-  const views::View::Views& GetWindowCycleTabSliderViewsForTesting() const;
+  const views::View::Views& GetWindowCycleTabSliderButtonsForTesting() const;
 
   // Returns no recent items label.
   const views::Label* GetWindowCycleNoRecentItemsLabelForTesting() const;

ash/wm/window_cycle/window_cycle_tab_slider.cc

@@ -14,42 +14,63 @@
 #include "base/strings/utf_string_conversions.h"
 #include "components/prefs/pref_service.h"
 #include "ui/base/l10n/l10n_util.h"
+#include "ui/compositor/scoped_layer_animation_settings.h"
 #include "ui/gfx/canvas.h"
+#include "ui/gfx/transform_util.h"
 #include "ui/views/background.h"
 #include "ui/views/layout/box_layout.h"
 #include "ui/views/metadata/metadata_impl_macros.h"
 
 namespace ash {
 
+namespace {
+
+// The animation duration for the translation of |active_button_background_| on
+// mode change.
+constexpr auto kToggleSlideDuration = base::TimeDelta::FromMilliseconds(150);
+
+}  // namespace
+
 WindowCycleTabSlider::WindowCycleTabSlider()
-    : all_desks_tab_slider_button_(
-          AddChildView(std::make_unique<WindowCycleTabSliderButton>(
+    : active_button_background_(AddChildView(std::make_unique<views::View>())),
+      buttons_container_(AddChildView(std::make_unique<views::View>())),
+      all_desks_tab_slider_button_(buttons_container_->AddChildView(
+          std::make_unique<WindowCycleTabSliderButton>(
               base::BindRepeating(&WindowCycleTabSlider::OnModeChanged,
                                   base::Unretained(this),
                                   false),
               l10n_util::GetStringUTF16(IDS_ASH_ALT_TAB_ALL_DESKS_MODE)))),
-      current_desk_tab_slider_button_(
-          AddChildView(std::make_unique<WindowCycleTabSliderButton>(
+      current_desk_tab_slider_button_(buttons_container_->AddChildView(
+          std::make_unique<WindowCycleTabSliderButton>(
               base::BindRepeating(&WindowCycleTabSlider::OnModeChanged,
                                   base::Unretained(this),
                                   true),
               l10n_util::GetStringUTF16(IDS_ASH_ALT_TAB_CURRENT_DESK_MODE)))) {
-  SetPaintToLayer();
-  layer()->SetFillsBoundsOpaquely(false);
-  SetLayoutManager(std::make_unique<views::BoxLayout>(
+  active_button_background_->SetPaintToLayer();
+  active_button_background_->layer()->SetFillsBoundsOpaquely(false);
+
+  buttons_container_->SetPaintToLayer();
+  buttons_container_->layer()->SetFillsBoundsOpaquely(false);
+  buttons_container_->SetLayoutManager(std::make_unique<views::BoxLayout>(
       views::BoxLayout::Orientation::kHorizontal, gfx::Insets(0, 0), 0));
 
-  // All buttons should have the same width and height.
+  // All buttons and the |active_button_background_| should have the same width
+  // and height.
   gfx::Size common_size = all_desks_tab_slider_button_->GetPreferredSize();
   common_size.SetToMax(current_desk_tab_slider_button_->GetPreferredSize());
   all_desks_tab_slider_button_->SetPreferredSize(common_size);
   current_desk_tab_slider_button_->SetPreferredSize(common_size);
+  active_button_background_->SetPreferredSize(common_size);
 
   const int tab_slider_round_radius = int{common_size.height() / 2};
-  SetBackground(views::CreateRoundedRectBackground(
+  buttons_container_->SetBackground(views::CreateRoundedRectBackground(
       AshColorProvider::Get()->GetControlsLayerColor(
           AshColorProvider::ControlsLayerType::kControlBackgroundColorInactive),
       tab_slider_round_radius));
+  active_button_background_->SetBackground(views::CreateRoundedRectBackground(
+      AshColorProvider::Get()->GetControlsLayerColor(
+          AshColorProvider::ControlsLayerType::kControlBackgroundColorActive),
+      tab_slider_round_radius));
 
   OnModePrefsChanged();
 }
@@ -75,6 +96,44 @@ void WindowCycleTabSlider::OnModePrefsChanged() {
       Shell::Get()->window_cycle_controller()->IsAltTabPerActiveDesk();
   all_desks_tab_slider_button_->SetToggled(!per_desk);
   current_desk_tab_slider_button_->SetToggled(per_desk);
+
+  auto active_button_background_bounds = active_button_background_->bounds();
+  if (active_button_background_bounds.IsEmpty()) {
+    // OnModePrefsChanged() is called in the ctor so the
+    // |active_button_background_| has not been laid out yet so exit early.
+    return;
+  }
+
+  auto* active_button_background_layer = active_button_background_->layer();
+  ui::ScopedLayerAnimationSettings scoped_settings(
+      active_button_background_layer->GetAnimator());
+  scoped_settings.SetTransitionDuration(kToggleSlideDuration);
+  scoped_settings.SetTweenType(gfx::Tween::Type::FAST_OUT_SLOW_IN_2);
+  scoped_settings.SetPreemptionStrategy(
+      ui::LayerAnimator::IMMEDIATELY_ANIMATE_TO_NEW_TARGET);
+
+  gfx::Transform transform = gfx::TransformBetweenRects(
+      gfx::RectF(active_button_background_bounds),
+      gfx::RectF(per_desk ? current_desk_tab_slider_button_->bounds()
+                          : all_desks_tab_slider_button_->bounds()));
+  active_button_background_layer->SetTransform(transform);
+}
+
+void WindowCycleTabSlider::Layout() {
+  buttons_container_->SetBoundsRect(GetLocalBounds());
+  active_button_background_->SetBoundsRect(
+      Shell::Get()->window_cycle_controller()->IsAltTabPerActiveDesk()
+          ? current_desk_tab_slider_button_->bounds()
+          : all_desks_tab_slider_button_->bounds());
+}
+
+gfx::Size WindowCycleTabSlider::CalculatePreferredSize() const {
+  return buttons_container_->GetPreferredSize();
+}
+
+const views::View::Views& WindowCycleTabSlider::GetTabSliderButtonsForTesting()
+    const {
+  return buttons_container_->children();
 }
 
 BEGIN_METADATA(WindowCycleTabSlider, views::View)

ash/wm/window_cycle/window_cycle_tab_slider.h

@@ -9,6 +9,10 @@
 #include "ash/wm/window_cycle/window_cycle_tab_slider_button.h"
 #include "ui/views/metadata/metadata_header_macros.h"
 
+namespace gfx {
+class Size;
+}
+
 namespace ash {
 
 // A WindowCycleTabSlider containing two buttons to switch between
@@ -28,9 +32,19 @@ class ASH_EXPORT WindowCycleTabSlider : public views::View {
   // Updates UI when user prefs change.
   void OnModePrefsChanged();
 
-  // TODO(crbug.com/1157087): Add tab slider animation.
+  // views::View:
+  void Layout() override;
+  gfx::Size CalculatePreferredSize() const override;
+
+  const views::View::Views& GetTabSliderButtonsForTesting() const;
 
  private:
+  // The view that acts as the background for the currently active mode's
+  // button. It is animated during mode change.
+  views::View* active_button_background_;
+
+  // The view that contains the tab slider buttons.
+  views::View* buttons_container_;
 
   WindowCycleTabSliderButton* all_desks_tab_slider_button_;
   WindowCycleTabSliderButton* current_desk_tab_slider_button_;

ash/wm/window_cycle/window_cycle_tab_slider_button.cc

@@ -19,9 +19,6 @@ namespace {
 // The height of the tab slider button.
 constexpr int kTabSliderButtonHeight = 32;
 
-// The round radius of the slider, which is half of its diameter (height).
-constexpr int kTabSliderRoundRadius = int{kTabSliderButtonHeight / 2};
-
 // The horizontal insets between the label and the button.
 constexpr int kTabSliderButtonHorizontalInsets = 20;
 
@@ -56,20 +53,6 @@ void WindowCycleTabSliderButton::SetToggled(bool is_toggled) {
   SetEnabledTextColors(AshColorProvider::Get()->GetContentLayerColor(
       toggled_ ? AshColorProvider::ContentLayerType::kButtonLabelColorPrimary
                : AshColorProvider::ContentLayerType::kTextColorPrimary));
-  // SchedulePaint triggers OnPaintBackground
-  SchedulePaint();
-}
-
-void WindowCycleTabSliderButton::OnPaintBackground(gfx::Canvas* canvas) {
-  if (!toggled_)
-    return;
-
-  cc::PaintFlags flags;
-  flags.setAntiAlias(true);
-  flags.setStyle(cc::PaintFlags::kFill_Style);
-  flags.setColor(AshColorProvider::Get()->GetControlsLayerColor(
-      AshColorProvider::ControlsLayerType::kControlBackgroundColorActive));
-  canvas->DrawRoundRect(GetContentsBounds(), kTabSliderRoundRadius, flags);
 }
 
 gfx::Size WindowCycleTabSliderButton::CalculatePreferredSize() const {

ash/wm/window_cycle/window_cycle_tab_slider_button.h

@@ -25,7 +25,6 @@ class ASH_EXPORT WindowCycleTabSliderButton : public views::LabelButton {
   ~WindowCycleTabSliderButton() override = default;
 
   // views::View:
-  void OnPaintBackground(gfx::Canvas* canvas) override;
   gfx::Size CalculatePreferredSize() const override;
 
   void SetToggled(bool is_toggled);