Implement new style folder icon

1. Enlarge folder icon to reveal partially hidden inner items when a
   dragged item is hovering the icon. To do this, we create two icon:
   unclipped and clipped icon. unclipped icon is only used inside
   AppListItemView to show the animation while clipped icon is
   provided by AppListItemView::GetIconImage().
2. Enlarge preview circle when a dragged item is hovering non-folder
   icon.
3. Add mask layer to folder's background view so that it clips the
   top icons in folder opening and closing animation.

Specs: https://screenshot.googleplex.com/ORnHSj8JYd1

Demo: https://drive.google.com/open?id=1pFna0cXFzMJ2Hqliq-T2EFbra2bkRaNw
(With animation duration 10X)

Bug: 860824
Change-Id: I174629a373bd398de418f8f66f2ad5b902d72c60
Reviewed-on: https://chromium-review.googlesource.com/1138641Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Reviewed-by: Yury Khmel <khmel@chromium.org>
Commit-Queue: Weidong Guo <weidongg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#578412}

ash/app_list/model/folder_image.cc

@@ -11,6 +11,7 @@
 #include "ash/app_list/model/app_list_item_list.h"
 #include "ash/public/cpp/app_list/app_list_config.h"
 #include "ash/public/cpp/app_list/app_list_constants.h"
+#include "ash/public/cpp/app_list/app_list_features.h"
 #include "base/macros.h"
 #include "base/memory/ptr_util.h"
 #include "ui/base/l10n/l10n_util.h"
@@ -27,13 +28,8 @@ namespace app_list {
 
 namespace {
 
-constexpr int kItemIconDimension = 16;
-constexpr float kFolderBubbleOffsetY = 1;
-
-// Gets the size of a small app icon inside the folder icon.
-gfx::Size ItemIconSize() {
-  return gfx::Size(kItemIconDimension, kItemIconDimension);
-}
+// The margin of item icon in folder icon.
+constexpr int kItemIconMargin = 2;
 
 // Generates the folder icon with the top 4 child item icons laid in 2x2 tile.
 class FolderImageSource : public gfx::CanvasImageSource {
@@ -81,10 +77,11 @@ void FolderImageSource::DrawIcon(gfx::Canvas* canvas,
 }
 
 void FolderImageSource::Draw(gfx::Canvas* canvas) {
-  cc::PaintFlags flags;
-  // Draw circle for folder bubble.
   gfx::PointF bubble_center(size().width() / 2, size().height() / 2);
-  bubble_center.Offset(0, -kFolderBubbleOffsetY);
+  bubble_center.Offset(0, -AppListConfig::instance().folder_bubble_y_offset());
+
+  // Draw circle for folder bubble.
+  cc::PaintFlags flags;
   flags.setStyle(cc::PaintFlags::kFill_Style);
   flags.setAntiAlias(true);
   flags.setColor(FolderImage::kFolderBubbleColor);
@@ -95,17 +92,55 @@ void FolderImageSource::Draw(gfx::Canvas* canvas) {
     return;
 
   // Draw top items' icons.
-  const gfx::Size item_icon_size(ItemIconSize());
+  const size_t num_items =
+      std::min(FolderImage::kNumFolderTopItems, icons_.size());
   std::vector<gfx::Rect> top_icon_bounds =
-      FolderImage::GetTopIconsBounds(gfx::Rect(size()));
+      FolderImage::GetTopIconsBounds(gfx::Rect(size()), num_items);
 
-  for (size_t i = 0; i < FolderImage::kNumFolderTopItems && i < icons_.size();
-       ++i) {
-    DrawIcon(canvas, icons_[i], item_icon_size, top_icon_bounds[i].x(),
-             top_icon_bounds[i].y());
+  for (size_t i = 0; i < num_items; ++i) {
+    DrawIcon(canvas, icons_[i],
+             AppListConfig::instance().item_icon_in_folder_icon_size(),
+             top_icon_bounds[i].x(), top_icon_bounds[i].y());
   }
 }
 
+// Calculates and returns the top item icons' bounds inside |folder_icon_bounds|
+// when new style launcher is not enabled.
+std::vector<gfx::Rect> GetTopIconsBoundsLegacy(
+    const gfx::Rect& folder_icon_bounds,
+    size_t num_items) {
+  DCHECK_LE(num_items, FolderImage::kNumFolderTopItems);
+  const int delta_to_center = 1;
+  const int item_icon_dimension =
+      AppListConfig::instance().item_icon_in_folder_icon_dimension();
+  gfx::Point icon_center = folder_icon_bounds.CenterPoint();
+  std::vector<gfx::Rect> top_icon_bounds;
+
+  // Get the top left icon bounds.
+  int left_x = icon_center.x() - item_icon_dimension - delta_to_center;
+  int top_y = icon_center.y() - item_icon_dimension - delta_to_center;
+  gfx::Rect top_left(left_x, top_y, item_icon_dimension, item_icon_dimension);
+  top_icon_bounds.emplace_back(top_left);
+
+  // Get the top right icon bounds.
+  int right_x = icon_center.x() + delta_to_center;
+  gfx::Rect top_right(right_x, top_y, item_icon_dimension, item_icon_dimension);
+  top_icon_bounds.emplace_back(top_right);
+
+  // Get the bottom left icon bounds.
+  int bottom_y = icon_center.y() + delta_to_center;
+  gfx::Rect bottom_left(left_x, bottom_y, item_icon_dimension,
+                        item_icon_dimension);
+  top_icon_bounds.emplace_back(bottom_left);
+
+  // Get the bottom right icon bounds.
+  gfx::Rect bottom_right(right_x, bottom_y, item_icon_dimension,
+                         item_icon_dimension);
+  top_icon_bounds.emplace_back(bottom_right);
+
+  return top_icon_bounds;
+}
+
 }  // namespace
 
 // static
@@ -128,7 +163,7 @@ void FolderImage::UpdateIcon() {
     item->RemoveObserver(this);
   top_items_.clear();
 
-  for (size_t i = 0; i < kNumFolderTopItems && i < item_list_->item_count();
+  for (size_t i = 0; i < std::min(kNumFolderTopItems, item_list_->item_count());
        ++i) {
     AppListItem* item = item_list_->item_at(i);
     item->AddObserver(this);
@@ -139,33 +174,70 @@ void FolderImage::UpdateIcon() {
 
 // static
 std::vector<gfx::Rect> FolderImage::GetTopIconsBounds(
-    const gfx::Rect& folder_icon_bounds) {
-  const int delta_to_center = 1;
+    const gfx::Rect& folder_icon_bounds,
+    size_t num_items) {
+  if (!features::IsNewStyleLauncherEnabled())
+    return GetTopIconsBoundsLegacy(folder_icon_bounds, num_items);
+
+  DCHECK_LE(num_items, kNumFolderTopItems);
+  const int item_icon_dimension =
+      AppListConfig::instance().item_icon_in_folder_icon_dimension();
   gfx::Point icon_center = folder_icon_bounds.CenterPoint();
   std::vector<gfx::Rect> top_icon_bounds;
 
-  // Get the top left icon bounds.
-  int left_x = icon_center.x() - kItemIconDimension - delta_to_center;
-  int top_y = icon_center.y() - kItemIconDimension - delta_to_center;
-  gfx::Rect top_left(left_x, top_y, kItemIconDimension, kItemIconDimension);
-  top_icon_bounds.push_back(top_left);
+  const gfx::Rect center_rect(icon_center.x() - item_icon_dimension / 2,
+                              icon_center.y() - item_icon_dimension / 2,
+                              item_icon_dimension, item_icon_dimension);
+  const int origin_offset = (AppListConfig::instance().folder_icon_dimension() -
+                             item_icon_dimension) /
+                                2 -
+                            kItemIconMargin;
+  if (num_items == 1) {
+    // Center icon bounds.
+    top_icon_bounds.emplace_back(center_rect);
+    return top_icon_bounds;
+  }
 
-  // Get the top right icon bounds.
-  int right_x = icon_center.x() + delta_to_center;
-  gfx::Rect top_right(right_x, top_y, kItemIconDimension, kItemIconDimension);
-  top_icon_bounds.push_back(top_right);
+  if (num_items == 2) {
+    // Left icon bounds.
+    gfx::Rect left_rect = center_rect;
+    left_rect.Offset(-origin_offset, 0);
+    top_icon_bounds.emplace_back(left_rect);
+
+    // Right icon bounds.
+    gfx::Rect right_rect = center_rect;
+    right_rect.Offset(origin_offset, 0);
+    top_icon_bounds.emplace_back(right_rect);
+    return top_icon_bounds;
+  }
 
-  // Get the bottom left icon bounds.
-  int bottom_y = icon_center.y() + delta_to_center;
-  gfx::Rect bottom_left(left_x, bottom_y, kItemIconDimension,
-                        kItemIconDimension);
-  top_icon_bounds.push_back(bottom_left);
+  // Top left icon bounds.
+  gfx::Rect top_left_rect = center_rect;
+  top_left_rect.Offset(-origin_offset, -origin_offset);
+  top_icon_bounds.emplace_back(top_left_rect);
+
+  // Top right icon bounds.
+  gfx::Rect top_right_rect = center_rect;
+  top_right_rect.Offset(origin_offset, -origin_offset);
+  top_icon_bounds.emplace_back(top_right_rect);
+
+  if (num_items == 3) {
+    // Bottom icon bounds.
+    gfx::Rect bottom_rect = center_rect;
+    bottom_rect.Offset(0, origin_offset);
+    top_icon_bounds.emplace_back(bottom_rect);
+    return top_icon_bounds;
+  }
 
-  // Get the bottom right icon bounds.
-  gfx::Rect bottom_right(right_x, bottom_y, kItemIconDimension,
-                         kItemIconDimension);
-  top_icon_bounds.push_back(bottom_right);
+  // Bottom left icon bounds.
+  gfx::Rect bottom_left_rect = center_rect;
+  bottom_left_rect.Offset(-origin_offset, origin_offset);
+  top_icon_bounds.emplace_back(bottom_left_rect);
 
+  // Bottom right icon bounds.
+  gfx::Rect bottom_right_rect = center_rect;
+  bottom_right_rect.Offset(origin_offset, origin_offset);
+  top_icon_bounds.emplace_back(bottom_right_rect);
   return top_icon_bounds;
 }
 
@@ -174,13 +246,15 @@ gfx::Rect FolderImage::GetTargetIconRectInFolderForItem(
     const gfx::Rect& folder_icon_bounds) const {
   for (size_t i = 0; i < top_items_.size(); ++i) {
     if (item->id() == top_items_[i]->id()) {
-      std::vector<gfx::Rect> rects = GetTopIconsBounds(folder_icon_bounds);
+      std::vector<gfx::Rect> rects =
+          GetTopIconsBounds(folder_icon_bounds, top_items_.size());
       return rects[i];
     }
   }
 
   gfx::Rect target_rect(folder_icon_bounds);
-  target_rect.ClampToCenteredSize(ItemIconSize());
+  target_rect.ClampToCenteredSize(
+      AppListConfig::instance().item_icon_in_folder_icon_size());
   return target_rect;
 }
 
@@ -221,7 +295,8 @@ void FolderImage::RedrawIconAndNotify() {
   FolderImageSource::Icons top_icons;
   for (const auto* item : top_items_)
     top_icons.push_back(item->icon());
-  const gfx::Size icon_size = AppListConfig::instance().grid_icon_size();
+  const gfx::Size icon_size =
+      AppListConfig::instance().folder_unclipped_icon_size();
   icon_ = gfx::ImageSkia(
       std::make_unique<FolderImageSource>(top_icons, icon_size), icon_size);
 

ash/app_list/model/folder_image.h

@@ -55,10 +55,10 @@ class APP_LIST_MODEL_EXPORT FolderImage : public AppListItemListObserver,
   const gfx::ImageSkia& icon() const { return icon_; }
 
   // Calculates the top item icons' bounds inside |folder_icon_bounds|.
-  // Returns the bounds of top item icons in sequence of top left, top right,
-  // bottom left, bottom right.
+  // Returns the bounds of top item icons based on total number of items.
   static std::vector<gfx::Rect> GetTopIconsBounds(
-      const gfx::Rect& folder_icon_bounds);
+      const gfx::Rect& folder_icon_bounds,
+      size_t num_items);
 
   // Returns the target icon bounds for |item| to fly back to its parent folder
   // icon in animation UI. If |item| is one of the top item icon, this will
@@ -89,7 +89,8 @@ class APP_LIST_MODEL_EXPORT FolderImage : public AppListItemListObserver,
   // only be called if the |item_list_| has not been changed (see UpdateIcon).
   void RedrawIconAndNotify();
 
-  // The icon image.
+  // The unclipped icon image. This will be clipped in AppListItemView before
+  // being shown in apps grid.
   gfx::ImageSkia icon_;
 
   // List of top-level app list items (to display small in the icon).

ash/app_list/views/app_list_folder_view.cc

@@ -47,10 +47,7 @@ namespace app_list {
 
 namespace {
 
-constexpr int kFolderBackgroundCornerRadius = 4;
-constexpr int kFolderIconCornerRadius = 24;
 constexpr int kItemGridsBottomPadding = 24;
-constexpr int kFolderPadding = 12;
 constexpr int kOnscreenKeyboardTopPadding = 8;
 
 // Indexes of interesting views in ViewModel of AppListFolderView.
@@ -73,20 +70,26 @@ class BackgroundAnimation : public gfx::SlideAnimation,
   BackgroundAnimation(bool show, AppListFolderView* folder_view)
       : gfx::SlideAnimation(this), show_(show), folder_view_(folder_view) {
     // Calculate the source and target states.
-    from_radius_ =
-        show_ ? kFolderIconCornerRadius : kFolderBackgroundCornerRadius;
-    to_radius_ =
-        show_ ? kFolderBackgroundCornerRadius : kFolderIconCornerRadius;
+    const int icon_radius = AppListConfig::instance().folder_icon_radius();
+    const int folder_radius =
+        AppListConfig::instance().folder_background_radius();
+    from_radius_ = show_ ? icon_radius : folder_radius;
+    to_radius_ = show_ ? folder_radius : icon_radius;
     from_rect_ = show ? folder_view_->folder_item_icon_bounds()
                       : folder_view_->background_view()->bounds();
     to_rect_ = show ? folder_view_->background_view()->bounds()
                     : folder_view_->folder_item_icon_bounds();
-    from_color_ =
-        show_ ? FolderImage::kFolderBubbleColor : kCardBackgroundColor;
-    to_color_ = show_ ? kCardBackgroundColor : FolderImage::kFolderBubbleColor;
+    const SkColor background_color =
+        AppListConfig::instance().folder_background_color();
+    from_color_ = show_ ? FolderImage::kFolderBubbleColor : background_color;
+    to_color_ = show_ ? background_color : FolderImage::kFolderBubbleColor;
 
     SetTweenType(gfx::Tween::FAST_OUT_SLOW_IN);
     SetSlideDuration(kFolderTransitionInDurationMs);
+
+    folder_view_->UpdateBackgroundMask(
+        from_radius_,
+        folder_view_->background_view()->bounds().InsetsFrom(from_rect_));
   }
 
   ~BackgroundAnimation() override = default;
@@ -101,11 +104,12 @@ class BackgroundAnimation : public gfx::SlideAnimation,
         gfx::Tween::ColorValueBetween(progress, from_color_, to_color_);
     const gfx::Rect current_rect = gfx::Tween::RectValueBetween(
         animation->GetCurrentValue(), from_rect_, to_rect_);
-    folder_view_->background_view()->SetBoundsRect(current_rect);
+
     folder_view_->background_view()->SetBackground(
-        views::CreateBackgroundFromPainter(
-            views::Painter::CreateSolidRoundRectPainter(current_color,
-                                                        current_radius)));
+        views::CreateSolidBackground(current_color));
+    folder_view_->UpdateBackgroundMask(
+        current_radius,
+        folder_view_->background_view()->bounds().InsetsFrom(current_rect));
     folder_view_->background_view()->SchedulePaint();
   }
 
@@ -218,7 +222,7 @@ class TopIconAnimation : public AppListFolderView::Animation,
     // Hide the original items in the folder until the animation ends.
     SetFirstPageItemViewsVisible(false);
     DCHECK(folder_view_->GetActivatedFolderItemView());
-    folder_view_->GetActivatedFolderItemView()->icon()->SetVisible(false);
+    folder_view_->GetActivatedFolderItemView()->SetIconVisible(false);
 
     // Calculate the start and end bounds of the top item icons in the
     // animation.
@@ -253,7 +257,7 @@ class TopIconAnimation : public AppListFolderView::Animation,
 
       // Add the transitional views into child views, and set its bounds to the
       // same location of the item in the folder list view.
-      folder_view_->AddChildView(top_icon_views_.back());
+      folder_view_->background_view()->AddChildView(top_icon_views_.back());
       icon_view->SetBoundsRect(first_page_item_views_bounds[i]);
       icon_view->TransformView();
     }
@@ -283,14 +287,16 @@ class TopIconAnimation : public AppListFolderView::Animation,
     // Show the folder icon when closing the folder.
     if ((!show_ || hide_for_reparent_) &&
         folder_view_->GetActivatedFolderItemView()) {
-      folder_view_->GetActivatedFolderItemView()->icon()->SetVisible(true);
+      folder_view_->GetActivatedFolderItemView()->SetIconVisible(true);
     }
   }
 
  private:
   std::vector<gfx::Rect> GetTopItemViewsBoundsInFolderIcon() {
-    std::vector<gfx::Rect> top_icons_bounds =
-        FolderImage::GetTopIconsBounds(folder_view_->folder_item_icon_bounds());
+    std::vector<gfx::Rect> top_icons_bounds = FolderImage::GetTopIconsBounds(
+        folder_view_->folder_item_icon_bounds(),
+        std::min(folder_view_->folder_item()->ChildItemCount(),
+                 FolderImage::kNumFolderTopItems));
     std::vector<gfx::Rect> top_item_views_bounds;
     const int icon_dimension = AppListConfig::instance().grid_icon_dimension();
     const int tile_width = AppListConfig::instance().grid_tile_width();
@@ -530,7 +536,9 @@ gfx::Size AppListFolderView::CalculatePreferredSize() const {
   gfx::Size size = items_grid_view_->GetTileGridSizeWithoutPadding();
   gfx::Size header_size = folder_header_view_->GetPreferredSize();
   size.Enlarge(0, kItemGridsBottomPadding + header_size.height());
-  size.Enlarge(kFolderPadding * 2, kFolderPadding * 2);
+  const int folder_padding =
+      AppListConfig::instance().grid_tile_spacing_in_folder();
+  size.Enlarge(folder_padding * 2, folder_padding * 2);
   return size;
 }
 
@@ -630,6 +638,16 @@ void AppListFolderView::RecordAnimationSmoothness() {
   }
 }
 
+void AppListFolderView::UpdateBackgroundMask(int corner_radius,
+                                             const gfx::Insets& insets) {
+  background_mask_ = views::Painter::CreatePaintedLayer(
+      views::Painter::CreateSolidRoundRectPainter(SK_ColorBLACK, corner_radius,
+                                                  insets));
+  background_mask_->layer()->SetFillsBoundsOpaquely(false);
+  background_mask_->layer()->SetBounds(background_view_->GetContentsBounds());
+  background_view_->layer()->SetMaskLayer(background_mask_->layer());
+}
+
 void AppListFolderView::CalculateIdealBounds() {
   gfx::Rect rect(GetContentsBounds());
   if (rect.IsEmpty())
@@ -638,7 +656,9 @@ void AppListFolderView::CalculateIdealBounds() {
   view_model_->set_ideal_bounds(kIndexBackground, GetContentsBounds());
   view_model_->set_ideal_bounds(kIndexContentsContainer, GetContentsBounds());
 
-  rect.Inset(kFolderPadding, kFolderPadding);
+  const int folder_padding =
+      AppListConfig::instance().grid_tile_spacing_in_folder();
+  rect.Inset(folder_padding, folder_padding);
 
   // Calculate bounds for items grid view.
   gfx::Rect grid_frame(rect);
@@ -747,7 +767,7 @@ void AppListFolderView::HideViewImmediately() {
   background_view_->SchedulePaint();
   AppListItemView* activated_folder_item_view = GetActivatedFolderItemView();
   if (activated_folder_item_view) {
-    activated_folder_item_view->icon()->SetVisible(true);
+    activated_folder_item_view->SetIconVisible(true);
     activated_folder_item_view->title()->SetEnabledColor(
         AppListConfig::instance().grid_title_color());
     activated_folder_item_view->title()->SetVisible(true);

ash/app_list/views/app_list_folder_view.h

@@ -102,6 +102,9 @@ class APP_LIST_EXPORT AppListFolderView : public views::View,
   // ContentsContainerAnimation.
   void RecordAnimationSmoothness();
 
+  // Sets the layer mask's corner radius and insets in background.
+  void UpdateBackgroundMask(int corner_radius, const gfx::Insets& insets);
+
  private:
   void CalculateIdealBounds();
 
@@ -173,6 +176,9 @@ class APP_LIST_EXPORT AppListFolderView : public views::View,
   std::unique_ptr<Animation> top_icon_animation_;
   std::unique_ptr<Animation> contents_container_animation_;
 
+  // The layer mask to create rounded corner.
+  std::unique_ptr<ui::LayerOwner> background_mask_ = nullptr;
+
   // The compositor frame number when animation starts.
   int animation_start_frame_number_;
 

ash/app_list/views/app_list_item_view.h

@@ -61,7 +61,6 @@ class APP_LIST_EXPORT AppListItemView
 
   void CancelContextMenu();
 
-  gfx::ImageSkia GetDragImage();
   void OnDragEnded();
   gfx::Point GetDragImageOffset();
 
@@ -69,8 +68,6 @@ class APP_LIST_EXPORT AppListItemView
 
   AppListItem* item() const { return item_weak_; }
 
-  views::ImageView* icon() { return icon_; }
-
   views::Label* title() { return title_; }
 
   // In a synchronous drag the item view isn't informed directly of the drag
@@ -78,7 +75,16 @@ class APP_LIST_EXPORT AppListItemView
   void OnSyncDragEnd();
 
   // Returns the icon bounds relative to AppListItemView.
-  const gfx::Rect& GetIconBounds() const;
+  gfx::Rect GetIconBounds() const;
+
+  // Returns the icon bounds in screen.
+  gfx::Rect GetIconBoundsInScreen() const;
+
+  // Returns the image of icon.
+  gfx::ImageSkia GetIconImage() const;
+
+  // Sets the icon's visibility.
+  void SetIconVisible(bool visible);
 
   // Sets UI state to dragging state.
   void SetDragUIState();
@@ -115,6 +121,12 @@ class APP_LIST_EXPORT AppListItemView
   // ImageShadowAnimator::Delegate overrides:
   void ImageShadowAnimationProgressed(ImageShadowAnimator* animator) override;
 
+  // When a dragged view enters this view, a preview circle is shown for
+  // non-folder item while the icon is enlarged for folder item. When a
+  // dragged view exits this view, the reverse animation will be performed.
+  void OnDraggedViewEnter();
+  void OnDraggedViewExit();
+
  private:
   enum UIState {
     UI_STATE_NORMAL,              // Normal UI (icon + label)
@@ -122,6 +134,9 @@ class APP_LIST_EXPORT AppListItemView
     UI_STATE_DROPPING_IN_FOLDER,  // Folder dropping preview UI
   };
 
+  // gfx::AnimationDelegate:
+  void AnimationProgressed(const gfx::Animation* animation) override;
+
   // Callback used when a menu is closed.
   void OnMenuClosed();
 
@@ -187,6 +202,12 @@ class APP_LIST_EXPORT AppListItemView
   // AppListMenuModelAdapter::Delegate overrides;
   void ExecuteCommand(int command_id, int event_flags) override;
 
+  // Returns the radius of preview circle.
+  int GetPreviewCircleRadius() const;
+
+  // Creates dragged view hover animation if it does not exist.
+  void CreateDraggedViewHoverAnimation();
+
   const bool is_folder_;
   const bool is_in_folder_;
 
@@ -212,6 +233,18 @@ class APP_LIST_EXPORT AppListItemView
 
   std::unique_ptr<ImageShadowAnimator> shadow_animator_;
 
+  // The animation that runs when dragged view enters or exits this view.
+  std::unique_ptr<gfx::SlideAnimation> dragged_view_hover_animation_;
+
+  // The radius of preview circle for non-folder item.
+  int preview_circle_radius_ = 0;
+
+  // The insets of folder icon mask to the unclipped folder icon.
+  int folder_icon_insets_ = 0;
+
+  // The folder icon mask used to clip the folder icon.
+  std::unique_ptr<ui::LayerOwner> folder_icon_mask_;
+
   bool is_installing_ = false;
   bool is_highlighted_ = false;
 
@@ -222,6 +255,9 @@ class APP_LIST_EXPORT AppListItemView
   // A timer to defer showing drag UI when the app item is touch pressed.
   base::OneShotTimer touch_drag_timer_;
 
+  // True if new style launcher feature is enabled.
+  const bool is_new_style_launcher_enabled_;
+
   base::WeakPtrFactory<AppListItemView> weak_ptr_factory_;
 
   DISALLOW_COPY_AND_ASSIGN(AppListItemView);

ash/app_list/views/apps_grid_view.cc

@@ -80,31 +80,18 @@ constexpr int kDragBufferPx = 20;
 constexpr int kTileHorizontalPadding = 12;
 constexpr int kTileVerticalPadding = 6;
 
-// Padding of a tile within the folder view.
-constexpr int kFolderTilePadding = 6;
-
-// Width in pixels of the area on the sides that triggers a page flip.
-constexpr int kPageFlipZoneSize = 40;
-
 // Delay in milliseconds to do the page flip in fullscreen app list.
 constexpr int kPageFlipDelayInMsFullscreen = 500;
 
 // The drag and drop proxy should get scaled by this factor.
 constexpr float kDragAndDropProxyScale = 1.2f;
 
-// Delays in milliseconds to show folder dropping preview circle.
-constexpr int kFolderDroppingDelay = 150;
-
 // Delays in milliseconds to show re-order preview.
 constexpr int kReorderDelay = 120;
 
 // Delays in milliseconds to show folder item reparent UI.
 constexpr int kFolderItemReparentDelay = 50;
 
-// Radius of the circle, in which if entered, show folder dropping preview
-// UI.
-constexpr int kFolderDroppingCircleRadius = 39;
-
 // Padding between suggested apps tiles and all apps indicator.
 constexpr int kSuggestionsAllAppsIndicatorPadding = 26;
 
@@ -385,8 +372,11 @@ gfx::Size AppsGridView::GetTotalTileSize() const {
 }
 
 gfx::Insets AppsGridView::GetTilePadding() const {
-  if (folder_delegate_)
-    return gfx::Insets(-kFolderTilePadding, -kFolderTilePadding);
+  if (folder_delegate_) {
+    const int tile_padding_in_folder =
+        AppListConfig::instance().grid_tile_spacing_in_folder() / 2;
+    return gfx::Insets(-tile_padding_in_folder, -tile_padding_in_folder);
+  }
   if (is_new_style_launcher_enabled_)
     return gfx::Insets(-vertical_tile_padding_, -horizontal_tile_padding_);
   return gfx::Insets(-kTileVerticalPadding, -kTileHorizontalPadding);
@@ -557,7 +547,7 @@ bool AppsGridView::UpdateDragFromItem(Pointer pointer,
   DispatchDragEventToDragAndDropHost(location_in_screen);
   if (drag_and_drop_host_) {
     drag_and_drop_host_->UpdateDragIconProxyByLocation(
-        drag_view_->icon()->GetBoundsInScreen().origin());
+        drag_view_->GetIconBoundsInScreen().origin());
   }
   return true;
 }
@@ -597,7 +587,9 @@ void AppsGridView::UpdateDrag(Pointer pointer, const gfx::Point& point) {
     } else if (drop_attempt_ == DROP_FOR_FOLDER) {
       reorder_timer_.Stop();
       folder_dropping_timer_.Start(
-          FROM_HERE, base::TimeDelta::FromMilliseconds(kFolderDroppingDelay),
+          FROM_HERE,
+          base::TimeDelta::FromMilliseconds(
+              AppListConfig::instance().folder_dropping_delay()),
           this, &AppsGridView::OnFolderDroppingTimer);
     }
 
@@ -1309,7 +1301,7 @@ void AppsGridView::ExtractDragLocation(const gfx::Point& root_location,
 void AppsGridView::CalculateDropTarget() {
   DCHECK(drag_view_);
 
-  gfx::Point point = drag_view_->icon()->bounds().CenterPoint();
+  gfx::Point point = drag_view_->GetIconBounds().CenterPoint();
   views::View::ConvertPointToTarget(drag_view_, this, &point);
   // Ensure that the drop target location is correct if RTL.
   point.set_x(GetMirroredXInView(point.x()));
@@ -1355,8 +1347,10 @@ bool AppsGridView::CalculateFolderDropTarget(const gfx::Point& point,
   int distance_to_tile_center =
       (point - GetExpectedTileBounds(nearest_tile_index).CenterPoint())
           .Length();
-  if (distance_to_tile_center > kFolderDroppingCircleRadius)
+  if (distance_to_tile_center >
+      AppListConfig::instance().folder_dropping_circle_radius()) {
     return false;
+  }
 
   AppListItemView* target_view =
       GetViewDisplayedAtSlotOnCurrentPage(nearest_tile_index.slot);
@@ -1382,6 +1376,7 @@ bool AppsGridView::CalculateFolderDropTarget(const gfx::Point& point,
 bool AppsGridView::CalculateReorderDropTarget(const gfx::Point& point,
                                               GridIndex* drop_target) const {
   gfx::Rect bounds = GetContentsBounds();
+  bounds.Inset(GetTilePadding());
   GridIndex grid_index = GetNearestTileIndexForPoint(point);
   gfx::Point reorder_placeholder_center =
       GetExpectedTileBounds(reorder_placeholder_).CenterPoint();
@@ -1403,7 +1398,8 @@ bool AppsGridView::CalculateReorderDropTarget(const gfx::Point& point,
   // This makes eordering feel like the user is slotting items into the spaces
   // between apps.
   int x_offset = x_offset_direction *
-                 (total_tile_size.width() - kFolderDroppingCircleRadius) / 2;
+                 (total_tile_size.width() / 2 -
+                  AppListConfig::instance().folder_dropping_circle_radius());
   int col = (point.x() - bounds.x() + x_offset) / total_tile_size.width();
   col = base::ClampToRange(col, 0, cols_ - 1);
   *drop_target =
@@ -1496,7 +1492,7 @@ gfx::Rect AppsGridView::GetTargetIconRectInFolder(
       view_model_.ideal_bounds(view_model_.GetIndexOfView(folder_item_view));
   const gfx::Rect icon_ideal_bounds =
       folder_item_view->GetIconBoundsForTargetViewBounds(
-          view_ideal_bounds, folder_item_view->icon()->GetImage().size());
+          view_ideal_bounds, folder_item_view->GetIconImage().size());
   AppListFolderItem* folder_item =
       static_cast<AppListFolderItem*>(folder_item_view->item());
   return folder_item->GetTargetIconRectInFolderForItem(drag_item_view->item(),
@@ -1867,8 +1863,8 @@ void AppsGridView::StartDragAndDropHostDrag(const gfx::Point& grid_location) {
   // the OS dependent code to "lift off the dragged item".
   DCHECK(!IsDraggingForReparentInRootLevelGridView());
   drag_and_drop_host_->CreateDragIconProxyByLocationWithNoAnimation(
-      drag_view_->icon()->GetBoundsInScreen().origin(),
-      drag_view_->item()->icon(), drag_view_, kDragAndDropProxyScale);
+      drag_view_->GetIconBoundsInScreen().origin(), drag_view_->GetIconImage(),
+      drag_view_, kDragAndDropProxyScale);
 
   SetViewHidden(drag_view_, true /* hide */, true /* no animation */);
 }
@@ -1918,7 +1914,7 @@ void AppsGridView::MaybeStartPageFlipTimer(const gfx::Point& drag_point) {
   // Drag zones are at the edges of the scroll axis.
   if (pagination_controller_->scroll_axis() ==
       PaginationController::SCROLL_AXIS_VERTICAL) {
-    if (drag_point.y() < kPageFlipZoneSize) {
+    if (drag_point.y() < AppListConfig::instance().page_flip_zone_size()) {
       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.
@@ -1926,11 +1922,13 @@ void AppsGridView::MaybeStartPageFlipTimer(const gfx::Point& drag_point) {
     }
   } else {
     // TODO(xiyuan): Fix this for RTL.
-    if (new_page_flip_target == -1 && drag_point.x() < kPageFlipZoneSize)
+    if (new_page_flip_target == -1 &&
+        drag_point.x() < AppListConfig::instance().page_flip_zone_size())
       new_page_flip_target = pagination_model_.selected_page() - 1;
 
     if (new_page_flip_target == -1 &&
-        drag_point.x() > width() - kPageFlipZoneSize) {
+        drag_point.x() >
+            width() - AppListConfig::instance().page_flip_zone_size()) {
       new_page_flip_target = pagination_model_.selected_page() + 1;
     }
   }
@@ -2308,7 +2306,8 @@ bool AppsGridView::IsPointWithinBottomDragBuffer(
           GetWidget()->GetNativeView());
 
   const int kBottomDragBufferMin =
-      GetBoundsInScreen().bottom() - kPageFlipZoneSize;
+      GetBoundsInScreen().bottom() -
+      (AppListConfig::instance().page_flip_zone_size());
   const int kBottomDragBufferMax =
       display.bounds().bottom() -
       (contents_view_->app_list_view()->is_side_shelf() ? 0 : kShelfSize);
@@ -2492,7 +2491,8 @@ GridIndex AppsGridView::GetNearestTileIndexForPoint(
   int col = base::ClampToRange(
       (point.x() - bounds.x()) / total_tile_size.width(), 0, cols_ - 1);
 
-  const bool show_suggested_apps = current_page == 0 && !folder_delegate_;
+  const bool show_suggested_apps =
+      !is_new_style_launcher_enabled_ && current_page == 0 && !folder_delegate_;
   int row =
       base::ClampToRange((point.y() - bounds.y()) / total_tile_size.height(), 0,
                          rows_per_page_ - (show_suggested_apps ? 2 : 1));
@@ -2566,8 +2566,15 @@ void AppsGridView::SetAsFolderDroppingTarget(const GridIndex& target_index,
                                              bool is_target_folder) {
   AppListItemView* target_view =
       GetViewDisplayedAtSlotOnCurrentPage(target_index.slot);
-  if (target_view)
+  if (target_view) {
     target_view->SetAsAttemptedFolderTarget(is_target_folder);
+    if (is_new_style_launcher_enabled_) {
+      if (is_target_folder)
+        target_view->OnDraggedViewEnter();
+      else
+        target_view->OnDraggedViewExit();
+    }
+  }
 }
 
 bool AppsGridView::IsAppsGridGapEnabled() const {

ash/public/cpp/app_list/app_list_config.cc

@@ -6,6 +6,7 @@
 
 #include "ash/public/cpp/app_list/app_list_features.h"
 #include "base/macros.h"
+#include "ui/gfx/color_palette.h"
 
 namespace app_list {
 
@@ -35,7 +36,18 @@ AppListConfig::AppListConfig()
       page_spacing_(40),
       expand_arrow_tile_height_(60),
       folder_bubble_radius_(23),
-      arc_icon_dimension_(48) {
+      arc_icon_dimension_(48),
+      folder_bubble_y_offset_(1),
+      folder_icon_dimension_(48),
+      folder_unclipped_icon_dimension_(48),
+      folder_icon_radius_(24),
+      folder_background_radius_(4),
+      item_icon_in_folder_icon_dimension_(16),
+      folder_dropping_circle_radius_(39),
+      folder_dropping_delay_(150),
+      folder_background_color_(SkColorSetRGB(0xFA, 0xFA, 0xFC)),
+      page_flip_zone_size_(40),
+      grid_tile_spacing_in_folder_(12) {
   if (features::IsNewStyleLauncherEnabled()) {
     grid_tile_width_ = 120;
     grid_tile_height_ = 112;
@@ -53,7 +65,18 @@ AppListConfig::AppListConfig()
     preferred_rows_ = 4;
     page_spacing_ = 48;
     expand_arrow_tile_height_ = 72;
-    folder_bubble_radius_ = 31;
+    folder_bubble_radius_ = 44;
+    folder_bubble_y_offset_ = 0;
+    folder_icon_dimension_ = 72;
+    folder_unclipped_icon_dimension_ = 88;
+    folder_icon_radius_ = 36;
+    folder_background_radius_ = 12;
+    item_icon_in_folder_icon_dimension_ = 32;
+    folder_dropping_circle_radius_ = 44;
+    folder_dropping_delay_ = 0;
+    folder_background_color_ = gfx::kGoogleGrey100;
+    page_flip_zone_size_ = 20;
+    grid_tile_spacing_in_folder_ = 8;
   }
 
   // We're getting the largest font that doesn't exceed

ash/public/cpp/app_list/app_list_config.h

@@ -64,6 +64,25 @@ class ASH_PUBLIC_EXPORT AppListConfig {
   int expand_arrow_tile_height() const { return expand_arrow_tile_height_; }
   int folder_bubble_radius() const { return folder_bubble_radius_; }
   int arc_icon_dimension() const { return arc_icon_dimension_; }
+  int folder_bubble_y_offset() const { return folder_bubble_y_offset_; }
+  int folder_icon_dimension() const { return folder_icon_dimension_; }
+  int folder_unclipped_icon_dimension() const {
+    return folder_unclipped_icon_dimension_;
+  }
+  int item_icon_in_folder_icon_dimension() const {
+    return item_icon_in_folder_icon_dimension_;
+  }
+  int folder_icon_radius() const { return folder_icon_radius_; }
+  int folder_background_radius() const { return folder_background_radius_; }
+  int folder_dropping_circle_radius() const {
+    return folder_dropping_circle_radius_;
+  }
+  int folder_dropping_delay() const { return folder_dropping_delay_; }
+  SkColor folder_background_color() const { return folder_background_color_; }
+  int page_flip_zone_size() const { return page_flip_zone_size_; }
+  int grid_tile_spacing_in_folder() const {
+    return grid_tile_spacing_in_folder_;
+  }
 
   gfx::Size grid_icon_size() const {
     return gfx::Size(grid_icon_dimension_, grid_icon_dimension_);
@@ -95,6 +114,24 @@ class ASH_PUBLIC_EXPORT AppListConfig {
     return gfx::Size(arc_icon_dimension_, arc_icon_dimension_);
   }
 
+  gfx::Size folder_icon_size() const {
+    return gfx::Size(folder_icon_dimension_, folder_icon_dimension_);
+  }
+
+  gfx::Size folder_unclipped_icon_size() const {
+    return gfx::Size(folder_unclipped_icon_dimension_,
+                     folder_unclipped_icon_dimension_);
+  }
+
+  int folder_icon_insets() const {
+    return (folder_unclipped_icon_dimension_ - folder_icon_dimension_) / 2;
+  }
+
+  gfx::Size item_icon_in_folder_icon_size() const {
+    return gfx::Size(item_icon_in_folder_icon_dimension_,
+                     item_icon_in_folder_icon_dimension_);
+  }
+
   // Returns the dimension at which a result's icon should be displayed.
   int GetPreferredIconDimension(
       ash::SearchResultDisplayType display_type) const;
@@ -176,6 +213,40 @@ class ASH_PUBLIC_EXPORT AppListConfig {
   // |grid_icon_dimension_| when being shown in the apps grid. (Original arc
   // icon support 48px instead of 64px.)
   int arc_icon_dimension_;
+
+  // The y offset of folder image bubble center.
+  int folder_bubble_y_offset_;
+
+  // The icon dimension of folder.
+  int folder_icon_dimension_;
+
+  // The unclipped icon dimension of folder.
+  int folder_unclipped_icon_dimension_;
+
+  // The corner radius of folder icon.
+  int folder_icon_radius_;
+
+  // The corner radius of folder background.
+  int folder_background_radius_;
+
+  // The dimension of the item icon in folder icon.
+  int item_icon_in_folder_icon_dimension_;
+
+  // Radius of the circle, in which if entered, show folder dropping preview
+  // UI.
+  int folder_dropping_circle_radius_;
+
+  // Delays in milliseconds to show folder dropping preview circle.
+  int folder_dropping_delay_;
+
+  // The background color of folder.
+  SkColor folder_background_color_;
+
+  // Width in pixels of the area on the sides that triggers a page flip.
+  int page_flip_zone_size_;
+
+  // The spacing between tile views in folder.
+  int grid_tile_spacing_in_folder_;
 };
 
 }  // namespace app_list