Cros: Use semantic colors for background cards with ripple hover

Adds background color constants in app list constant for the apps grid,
according to spec.
Highlights pages' background when hovered rather than when switched.

Bug: 1108652
Change-Id: Id239b3e8a61e9c4a7505c0ec84afd17351dff8a2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2327370Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Reviewed-by: Toni Baržić <tbarzic@chromium.org>
Commit-Queue: Ana Salazar <anasalazar@chromium.org>
Cr-Commit-Position: refs/heads/master@{#794211}

ash/app_list/views/apps_grid_view.cc

@@ -116,14 +116,6 @@ constexpr int kDefaultAnimationDuration = 200;
 // apps grid view.
 constexpr int kEndCardifiedAnimationDuration = 350;
 
-// The background card opacity of the active apps grid page, when background
-// cards are shown.
-constexpr float kBackgroundCardOpacityActivePage = 0.2f;
-
-// The background card opacity of inactive apps grid pages, when background
-// cards are shown.
-constexpr float kBackgroundCardOpacityInactivePage = 0.1f;
-
 // The opacity for the background cards when hidden.
 constexpr float kBackgroundCardOpacityHide = 0.0f;
 
@@ -360,6 +352,17 @@ bool IsOEMFolderItem(AppListItem* item) {
              AppListFolderItem::FOLDER_TYPE_OEM;
 }
 
+// Returns the relative horizontal position of a point compared to a rect. -1
+// means the point is outside on the left side of the rect. 0 means the point is
+// within the rect. 1 means it's on the right side of the rect.
+int CompareHorizontalPointPositionToRect(gfx::Point point, gfx::Rect bounds) {
+  if (point.x() > bounds.right())
+    return 1;
+  if (point.x() < bounds.x())
+    return -1;
+  return 0;
+}
+
 }  // namespace
 
 std::string GridIndex::ToString() const {
@@ -744,6 +747,14 @@ void AppsGridView::UpdateDrag(Pointer pointer, const gfx::Point& point) {
 
   MaybeStartPageFlipTimer(last_drag_point_);
 
+  if (cardified_state_) {
+    int hovered_page = GetPageFlipTargetForDrag(last_drag_point_);
+    if (hovered_page == -1)
+      hovered_page = pagination_model_.selected_page();
+
+    SetHighlightedBackgroundCard(hovered_page);
+  }
+
   if (last_drop_target != drop_target_ ||
       last_drop_target_region != drop_target_region_) {
     if (drop_target_region_ == ON_ITEM && DraggedItemCanEnterFolder() &&
@@ -1584,11 +1595,11 @@ void AppsGridView::AnimationBetweenRows(AppListItemView* view,
                                         const gfx::Rect& current,
                                         bool animate_target,
                                         const gfx::Rect& target) {
-  // Determine page of |current| and |target|. -1 means in the left invisible
-  // page, 0 is the center visible page and 1 means in the right invisible page.
+  // Determine page of |current| and |target|.
   const int current_page =
-      current.x() < 0 ? -1 : current.x() >= width() ? 1 : 0;
-  const int target_page = target.x() < 0 ? -1 : target.x() >= width() ? 1 : 0;
+      CompareHorizontalPointPositionToRect(current.origin(), GetLocalBounds());
+  const int target_page =
+      CompareHorizontalPointPositionToRect(target.origin(), GetLocalBounds());
 
   const int dir = current_page < target_page || (current_page == target_page &&
                                                  current.y() < target.y())
@@ -2295,7 +2306,7 @@ void AppsGridView::StartAppsGridCardifiedView() {
   cardified_state_ = true;
   UpdateTilePadding();
   for (int i = 0; i < pagination_model_.total_pages(); i++)
-    AppendBackgroundCard(kBackgroundCardOpacityHide);
+    AppendBackgroundCard();
   MaybeCreateGradientMask();
   AnimateCardifiedState();
 }
@@ -2381,13 +2392,13 @@ void AppsGridView::AnimateCardifiedState() {
       const bool is_active_page =
           background_cards_[pagination_model_.selected_page()] ==
           background_card;
-      background_card->SetOpacity(is_active_page
-                                      ? kBackgroundCardOpacityActivePage
-                                      : kBackgroundCardOpacityInactivePage);
+      background_card->SetColor(
+          GetAppListConfig().GetCardifiedBackgroundColor(is_active_page));
     } else {
       background_card->SetOpacity(kBackgroundCardOpacityHide);
     }
   }
+  highlighted_page_ = pagination_model_.selected_page();
 }
 
 void AppsGridView::RecenterItemsContainer() {
@@ -2493,29 +2504,7 @@ void AppsGridView::DispatchDragEventToDragAndDropHost(
 void AppsGridView::MaybeStartPageFlipTimer(const gfx::Point& drag_point) {
   if (!IsPointWithinPageFlipBuffer(drag_point))
     StopPageFlipTimer();
-  int new_page_flip_target = -1;
-
-  // Drag zones are at the edges of the scroll axis.
-  if (pagination_controller_->scroll_axis() ==
-      PaginationController::SCROLL_AXIS_VERTICAL) {
-    if (drag_point.y() <
-        GetAppListConfig().page_flip_zone_size() + GetInsets().top()) {
-      new_page_flip_target = pagination_model_.selected_page() - 1;
-    } else if (IsPointWithinBottomDragBuffer(drag_point)) {
-      // If the drag point is within the drag buffer, but not over the shelf.
-      new_page_flip_target = pagination_model_.selected_page() + 1;
-    }
-  } else {
-    // TODO(xiyuan): Fix this for RTL.
-    if (new_page_flip_target == -1 &&
-        drag_point.x() < GetAppListConfig().page_flip_zone_size())
-      new_page_flip_target = pagination_model_.selected_page() - 1;
-
-    if (new_page_flip_target == -1 &&
-        drag_point.x() > width() - GetAppListConfig().page_flip_zone_size()) {
-      new_page_flip_target = pagination_model_.selected_page() + 1;
-    }
-  }
+  int new_page_flip_target = GetPageFlipTargetForDrag(drag_point);
 
   if (new_page_flip_target == page_flip_target_)
     return;
@@ -2990,11 +2979,10 @@ void AppsGridView::OnListItemMoved(size_t from_index,
     Layout();
 }
 
-void AppsGridView::AppendBackgroundCard(float opacity) {
+void AppsGridView::AppendBackgroundCard() {
   background_cards_.push_back(
       std::make_unique<ui::Layer>(ui::LAYER_SOLID_COLOR));
   ui::Layer* current_layer = background_cards_.back().get();
-  current_layer->SetColor(gfx::kGoogleGrey100);
   // The size of the grid excluding the outer padding.
   const gfx::Size grid_size = GetTileGridSize();
   // The size for the background card that will be displayed. The outer padding
@@ -3021,7 +3009,6 @@ void AppsGridView::AppendBackgroundCard(float opacity) {
       horizontal_padding, vertical_padding + vertical_page_start_offset,
       background_card_size.width() - 2 * kCardifiedHorizontalPadding,
       background_card_size.height()));
-  current_layer->SetOpacity(opacity);
   current_layer->SetVisible(true);
   current_layer->SetRoundedCornerRadius(
       gfx::RoundedCornersF(kBackgroundCardCornerRadius));
@@ -3066,8 +3053,9 @@ void AppsGridView::TotalPagesChanged(int previous_page_count,
 
   const int page_difference = new_page_count - previous_page_count;
   if (page_difference > 0) {
-    for (int i = previous_page_count; i < new_page_count; ++i)
-      AppendBackgroundCard(kBackgroundCardOpacityHide);
+    for (int i = background_cards_.size(); i <= new_page_count; ++i) {
+      AppendBackgroundCard();
+    }
   } else {
     for (int i = 0; i < page_difference; ++i)
       RemoveBackgroundCard();
@@ -3110,12 +3098,6 @@ void AppsGridView::SelectedPageChanged(int old_selected, int new_selected) {
     }
     Layout();
   }
-  if (cardified_state_) {
-    background_cards_[old_selected]->SetOpacity(
-        kBackgroundCardOpacityInactivePage);
-    background_cards_[new_selected]->SetOpacity(
-        kBackgroundCardOpacityActivePage);
-  }
 }
 
 void AppsGridView::TransitionStarting() {
@@ -3969,4 +3951,48 @@ void AppsGridView::MaybeCreateGradientMask() {
   }
 }
 
+int AppsGridView::GetPageFlipTargetForDrag(const gfx::Point& drag_point) {
+  int new_page_flip_target = -1;
+
+  // Drag zones are at the edges of the scroll axis.
+  if (pagination_controller_->scroll_axis() ==
+      PaginationController::SCROLL_AXIS_VERTICAL) {
+    if (drag_point.y() <
+        GetAppListConfig().page_flip_zone_size() + GetInsets().top()) {
+      new_page_flip_target = pagination_model_.selected_page() - 1;
+    } else if (IsPointWithinBottomDragBuffer(drag_point)) {
+      // If the drag point is within the drag buffer, but not over the shelf.
+      new_page_flip_target = pagination_model_.selected_page() + 1;
+    }
+  } else {
+    // TODO(xiyuan): Fix this for RTL.
+    if (new_page_flip_target == -1 &&
+        drag_point.x() < GetAppListConfig().page_flip_zone_size())
+      new_page_flip_target = pagination_model_.selected_page() - 1;
+
+    if (new_page_flip_target == -1 &&
+        drag_point.x() > width() - GetAppListConfig().page_flip_zone_size()) {
+      new_page_flip_target = pagination_model_.selected_page() + 1;
+    }
+  }
+  return new_page_flip_target;
+}
+
+void AppsGridView::SetHighlightedBackgroundCard(int new_highlighted_page) {
+  if (!IsValidPageFlipTarget(new_highlighted_page))
+    return;
+
+  if (new_highlighted_page != highlighted_page_) {
+    background_cards_[highlighted_page_]->SetColor(
+        GetAppListConfig().GetCardifiedBackgroundColor(
+            /*is_active=*/false));
+    if (static_cast<int>(background_cards_.size()) == new_highlighted_page)
+      AppendBackgroundCard();
+    background_cards_[new_highlighted_page]->SetColor(
+        GetAppListConfig().GetCardifiedBackgroundColor(/*is_active=*/true));
+
+    highlighted_page_ = new_highlighted_page;
+  }
+}
+
 }  // namespace ash

ash/app_list/views/apps_grid_view.h

@@ -311,9 +311,8 @@ class APP_LIST_EXPORT AppsGridView : public views::View,
   // Translates the items container view to center the current page in the apps
   // grid.
   void RecenterItemsContainer();
-  // Appends a background card to the back of |background_cards_| with a defined
-  // |opacity|.
-  void AppendBackgroundCard(float opacity);
+  // Appends a background card to the back of |background_cards_|.
+  void AppendBackgroundCard();
   // Removes the background card at the end of |background_cards_|.
   void RemoveBackgroundCard();
   // Masks the apps grid container to background cards bounds.
@@ -741,6 +740,12 @@ class APP_LIST_EXPORT AppsGridView : public views::View,
   // Create a layer mask for graident alpha when the feature is enabled.
   void MaybeCreateGradientMask();
 
+  // Obtains the target page to flip for |drag_point|.
+  int GetPageFlipTargetForDrag(const gfx::Point& drag_point);
+
+  // Updates the highlighted background card. Used only for cardified state.
+  void SetHighlightedBackgroundCard(int new_highlighted_page);
+
   AppListModel* model_ = nullptr;         // Owned by AppListView.
   AppListItemList* item_list_ = nullptr;  // Not owned.
 
@@ -906,6 +911,9 @@ class APP_LIST_EXPORT AppsGridView : public views::View,
   // recent drag on AppsGridView instead of the app icon.
   gfx::PointF last_mouse_drag_point_;
 
+  // The highlighted page during cardified state.
+  int highlighted_page_ = -1;
+
   // Layer array for apps grid background cards. Used to display the background
   // card during cardified state.
   std::vector<std::unique_ptr<ui::Layer>> background_cards_;

ash/public/cpp/app_list/app_list_config.cc

@@ -325,7 +325,10 @@ AppListConfig::AppListConfig(AppListConfigType type)
       all_apps_opacity_start_px_(8.0f),
       all_apps_opacity_end_px_(144.0f),
       search_result_title_font_style_(ui::ResourceBundle::BaseFont),
-      search_tile_height_(92) {}
+      search_tile_height_(92),
+      cardified_background_color_(SkColorSetA(SK_ColorWHITE, 26 /* 10% */)),
+      cardified_background_color_active_(
+          SkColorSetA(SK_ColorWHITE, 41 /* 16% */)) {}
 
 AppListConfig::AppListConfig(const AppListConfig& base_config,
                              float scale_x,
@@ -469,7 +472,10 @@ AppListConfig::AppListConfig(const AppListConfig& base_config,
       all_apps_opacity_end_px_(base_config.all_apps_opacity_end_px_),
       search_result_title_font_style_(
           base_config.search_result_title_font_style_),
-      search_tile_height_(base_config.search_tile_height_) {}
+      search_tile_height_(base_config.search_tile_height_),
+      cardified_background_color_(base_config.cardified_background_color_),
+      cardified_background_color_active_(
+          base_config.cardified_background_color_active_) {}
 
 AppListConfig::~AppListConfig() = default;
 
@@ -523,4 +529,9 @@ int AppListConfig::GetIdealVerticalMargin(
   return available_bounds.height() / kAppsGridMarginRatio;
 }
 
+SkColor AppListConfig::GetCardifiedBackgroundColor(bool is_active) const {
+  return is_active ? cardified_background_color_active_
+                   : cardified_background_color_;
+}
+
 }  // namespace ash

ash/public/cpp/app_list/app_list_config.h

@@ -239,6 +239,9 @@ class ASH_PUBLIC_EXPORT AppListConfig {
   int GetIdealHorizontalMargin(const gfx::Rect& abailable_bounds) const;
   int GetIdealVerticalMargin(const gfx::Rect& abailable_bounds) const;
 
+  // Returns the color and opacity for the page background.
+  SkColor GetCardifiedBackgroundColor(bool is_active) const;
+
  private:
   const AppListConfigType type_;
 
@@ -459,6 +462,10 @@ class ASH_PUBLIC_EXPORT AppListConfig {
   // Max number of search result list items in the launcher suggestion window.
   const size_t max_search_result_list_items_ = 5;
 
+  // Cardified app list background properties
+  const SkColor cardified_background_color_;
+  const SkColor cardified_background_color_active_;
+
   DISALLOW_COPY_AND_ASSIGN(AppListConfig);
 };