Animation changes for FeaturePods pagination

Collapse Animation has been changed.
Buttons below the second row now move downwards and fade out.
Similarly, buttons on the second page or later also move
downwards and fade out.
If the tray is collapsed when not on the first page, there is a smooth
back and forth transition between the selected page and the first page while
collapsing or expanding back from a partially collapsed state.

Add transition durations for page switching.

Animation Example Video:
https://screencast.googleplex.com/cast/NTg4NTIyMDQ3OTgyNzk2OHw2NWUxZDkwMy05NQ

Bug: 914077

Change-Id: I81cdd01f61b5a902f530829a3488db3723271f8c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1610641
Commit-Queue: Ahmed Mehfooz <amehfooz@chromium.org>
Reviewed-by: Tim Song <tengs@chromium.org>
Reviewed-by: Jenny Zhang <jennyz@chromium.org>
Cr-Commit-Position: refs/heads/master@{#669931}

ash/system/tray/tray_constants.h

@@ -241,6 +241,11 @@ constexpr int kUnifiedFeaturePodMaxItemsInCollapsed = 5;
 constexpr int kUnifiedFeaturePodsPageSpacing = 48;
 constexpr int kUnifiedNotificationSeparatorThickness = 1;
 
+// Constants used in system tray page transition animations (ms).
+constexpr int kUnifiedSystemTrayPageTransitionDurationMs = 250;
+constexpr int kUnifiedSystemTrayOverScrollPageTransitionDurationMs = 50;
+constexpr double kCollapseThreshold = 0.3;
+
 // Constants used in PageIndicatorView of UnifiedSystemTray.
 constexpr int kUnifiedPageIndicatorButtonRadius = 3;
 constexpr SkColor kUnifiedPageIndicatorButtonColor =

ash/system/unified/feature_pod_button.cc

@@ -262,6 +262,11 @@ FeaturePodButton::FeaturePodButton(FeaturePodControllerBase* controller)
 
 FeaturePodButton::~FeaturePodButton() = default;
 
+double FeaturePodButton::GetOpacityForExpandedAmount(double expanded_amount) {
+  // TODO(amehfooz): Confirm the animation curve with UX.
+  return std::max(0., 5. * expanded_amount - 4.);
+}
+
 void FeaturePodButton::SetVectorIcon(const gfx::VectorIcon& icon) {
   icon_button_->SetImage(views::Button::STATE_NORMAL,
                          gfx::CreateVectorIcon(icon, kUnifiedMenuIconColor));
@@ -309,10 +314,16 @@ void FeaturePodButton::SetToggled(bool toggled) {
   icon_button_->SetToggled(toggled);
 }
 
-void FeaturePodButton::SetExpandedAmount(double expanded_amount) {
-  // TODO(tetsui): Confirm the animation curve with UX.
-  label_button_->layer()->SetOpacity(std::max(0., 5. * expanded_amount - 4.));
+void FeaturePodButton::SetExpandedAmount(double expanded_amount,
+                                         bool fade_icon_button) {
   label_button_->SetVisible(expanded_amount > 0.0);
+  label_button_->layer()->SetOpacity(
+      GetOpacityForExpandedAmount(expanded_amount));
+
+  if (fade_icon_button)
+    layer()->SetOpacity(GetOpacityForExpandedAmount(expanded_amount));
+  else
+    layer()->SetOpacity(1.0);
 }
 
 void FeaturePodButton::SetVisibleByContainer(bool visible) {

ash/system/unified/feature_pod_button.h

@@ -136,8 +136,16 @@ class ASH_EXPORT FeaturePodButton : public views::View,
 
   // Change the expanded state. 0.0 if collapsed, and 1.0 if expanded.
   // Otherwise, it shows intermediate state. In the collapsed state, the labels
-  // are not shown.
-  void SetExpandedAmount(double expanded_amount);
+  // are not shown, so the label buttons always fade out as expanded_amount
+  // decreases. We also need to fade out the icon button when it's not part of
+  // the buttons visible in the collapsed state. fade_icon_button will be passed
+  // as true for these cases.
+  void SetExpandedAmount(double expanded_amount, bool fade_icon_button);
+
+  // Get opacity for a given expanded_amount value. Used to fade out
+  // all label buttons and icon buttons that are hidden in collapsed state
+  // while collapsing.
+  double GetOpacityForExpandedAmount(double expanded_amount);
 
   // Only called by the container. Same as SetVisible but doesn't change
   // |visible_preferred_| flag.

ash/system/unified/feature_pods_container_view.cc

@@ -33,8 +33,35 @@ void FeaturePodsContainerView::SetExpandedAmount(double expanded_amount) {
     return;
   expanded_amount_ = expanded_amount;
 
-  for (auto* view : children())
-    static_cast<FeaturePodButton*>(view)->SetExpandedAmount(expanded_amount_);
+  int visible_index = 0;
+  for (auto* view : children()) {
+    FeaturePodButton* button = static_cast<FeaturePodButton*>(view);
+    // When collapsing from page 1, buttons below the second row fade out
+    // while the rest move up into a single row for the collapsed state.
+    // When collapsing from page > 1, each row of buttons fades out one by one
+    // and once expanded_amount is less than kCollapseThreshold we begin to
+    // fade in the single row of buttons for the collapsed state.
+    if (expanded_amount_ < kCollapseThreshold &&
+        pagination_model_->selected_page() > 0) {
+      button->SetExpandedAmount(1.0 - expanded_amount,
+                                true /* fade_icon_button */);
+    } else if (visible_index > kUnifiedFeaturePodMaxItemsInCollapsed) {
+      int row = (visible_index / kUnifiedFeaturePodItemsInRow) %
+                kUnifiedFeaturePodItemsRows;
+      double button_expanded_amount =
+          expanded_amount
+              ? std::min(1.0,
+                         expanded_amount +
+                             (0.25 * (kUnifiedFeaturePodItemsRows - row - 1)))
+              : expanded_amount;
+      button->SetExpandedAmount(button_expanded_amount,
+                                true /* fade_icon_button */);
+    } else {
+      button->SetExpandedAmount(expanded_amount, false /* fade_icon_button */);
+    }
+    if (view->GetVisible())
+      visible_index++;
+  }
   UpdateChildVisibility();
   // We have to call Layout() explicitly here.
   Layout();
@@ -159,10 +186,15 @@ gfx::Point FeaturePodsContainerView::GetButtonPosition(
                                           kUnifiedFeaturePodVerticalPadding) *
                                              row;
 
-  // When fully expanded, or below the second row, always return the same
-  // position.
-  if (expanded_amount_ == 1.0 || row > 2)
+  // Only feature pods visible in the collapsed state (i.e. the first 5 pods)
+  // move during expansion/collapse. Otherwise, the button position will always
+  // be constant.
+  if (expanded_amount_ == 1.0 ||
+      visible_index > kUnifiedFeaturePodMaxItemsInCollapsed ||
+      (pagination_model_->selected_page() > 0 &&
+       expanded_amount_ >= kCollapseThreshold)) {
     return gfx::Point(x, y);
+  }
 
   int collapsed_x =
       collapsed_side_padding_ + (kUnifiedFeaturePodCollapsedSize.width() +
@@ -170,8 +202,10 @@ gfx::Point FeaturePodsContainerView::GetButtonPosition(
                                     visible_index;
   int collapsed_y = kUnifiedFeaturePodCollapsedVerticalPadding;
 
-  // When fully collapsed, just return the collapsed position.
-  if (expanded_amount_ == 0.0)
+  // When fully collapsed or collapsing from a different page to the first
+  // page, just return the collapsed position.
+  if (expanded_amount_ == 0.0 || (expanded_amount_ < kCollapseThreshold &&
+                                  pagination_model_->selected_page() > 0))
     return gfx::Point(collapsed_x, collapsed_y);
 
   // Button width is different between expanded and collapsed states.
@@ -246,7 +280,13 @@ void FeaturePodsContainerView::CalculateIdealBoundsForFeaturePods() {
   for (int i = 0; i < visible_buttons_.view_size(); ++i) {
     gfx::Rect tile_bounds;
     gfx::Size child_size;
-    if (expanded_amount_ > 0.0) {
+    // When we are on the first page we calculate bounds for an expanded tray
+    // when expanded_amount is greater than zero. However, when not on the first
+    // page, we only calculate bounds for an expanded tray until expanded_amount
+    // is above kCollapseThreshold. Below kCollapseThreshold we return collapsed
+    // bounds.
+    if ((expanded_amount_ > 0.0 && pagination_model_->selected_page() == 0) ||
+        expanded_amount_ >= kCollapseThreshold) {
       child_size = kUnifiedFeaturePodSize;
 
       // Flexibly give more height if the child view doesn't fit into the

ash/system/unified/feature_pods_container_view.h

@@ -90,7 +90,7 @@ class ASH_EXPORT FeaturePodsContainerView : public views::View,
   // PaginationModelObserver:
   void TransitionChanged() override;
 
-  UnifiedSystemTrayController* controller_;
+  UnifiedSystemTrayController* const controller_;
 
   // Owned by UnifiedSystemTrayModel.
   PaginationModel* pagination_model_;

ash/system/unified/page_indicator_view.cc

@@ -189,7 +189,8 @@ void PageIndicatorView::SetExpandedAmount(double expanded_amount) {
   SetVisible(expanded_amount > 0.0);
   expanded_amount_ = expanded_amount;
   InvalidateLayout();
-  layer()->SetOpacity(expanded_amount_);
+  // TODO(amehfooz): Confirm animation curve with UX.
+  layer()->SetOpacity(std::max(0., 6 * expanded_amount_ - 5.));
 }
 
 void PageIndicatorView::TotalPagesChanged() {

ash/system/unified/unified_system_tray_controller.cc

@@ -32,6 +32,7 @@
 #include "ash/system/night_light/night_light_feature_pod_controller.h"
 #include "ash/system/rotation/rotation_lock_feature_pod_controller.h"
 #include "ash/system/tray/system_tray_item_uma_type.h"
+#include "ash/system/tray/tray_constants.h"
 #include "ash/system/unified/detailed_view_controller.h"
 #include "ash/system/unified/feature_pod_button.h"
 #include "ash/system/unified/feature_pod_controller_base.h"
@@ -71,6 +72,10 @@ UnifiedSystemTrayController::UnifiedSystemTrayController(
   animation_->SetSlideDuration(kExpandAnimationDurationMs);
   animation_->SetTweenType(gfx::Tween::EASE_IN_OUT);
 
+  model_->pagination_model()->SetTransitionDurations(
+      kUnifiedSystemTrayPageTransitionDurationMs,
+      kUnifiedSystemTrayOverScrollPageTransitionDurationMs);
+
   Shell::Get()->metrics()->RecordUserMetricsAction(UMA_STATUS_AREA_MENU_OPENED);
   UMA_HISTOGRAM_BOOLEAN("ChromeOS.SystemTray.IsExpandedOnOpen",
                         model_->IsExpandedOnOpen());
@@ -347,7 +352,8 @@ void UnifiedSystemTrayController::AddFeaturePodItem(
     std::unique_ptr<FeaturePodControllerBase> controller) {
   DCHECK(unified_view_);
   FeaturePodButton* button = controller->CreateButton();
-  button->SetExpandedAmount(IsExpanded() ? 1.0 : 0.0);
+  button->SetExpandedAmount(IsExpanded() ? 1.0 : 0.0,
+                            false /* fade_icon_button */);
 
   // Record DefaultView.VisibleRows UMA.
   SystemTrayItemUmaType uma_type = controller->GetUmaType();