Implement new expand arrow and apps grid

1. Add TransitionAnimationObserver to layout app list at the end of
   animation to make sure child views are in right position.
2. Replace old expand arrow icon with Skia-drawn arrow and implement the
   new transition.
3. Change the layout of apps grid and make the rows and cols adaptive to
   the width and height.
4. Enlarge the folder icon.

Demo: https://drive.google.com/open?id=1xlGUpNv1X-s4D9mSjAPkyfZBMWhCjJag

Change-Id: I3bc86870c66d0b35b36a801c16befb2624a33a55
Reviewed-on: https://chromium-review.googlesource.com/1121547Reviewed-by: Mitsuru Oshima <oshima@chromium.org>
Reviewed-by: Yury Khmel <khmel@chromium.org>
Commit-Queue: Weidong Guo <weidongg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#575868}

ash/app_list/app_list_presenter_delegate_unittest.cc

@@ -95,6 +95,7 @@ class AppListPresenterDelegateTest : public AshTestBase,
 
   // testing::Test:
   void SetUp() override {
+    app_list::AppListView::SetShortAnimationForTesting(true);
     base::CommandLine::ForCurrentProcess()->AppendSwitch(
         keyboard::switches::kEnableVirtualKeyboard);
     AshTestBase::SetUp();
@@ -103,6 +104,11 @@ class AppListPresenterDelegateTest : public AshTestBase,
     UpdateDisplay("1024x768");
   }
 
+  void TearDown() override {
+    AshTestBase::TearDown();
+    app_list::AppListView::SetShortAnimationForTesting(false);
+  }
+
   // Whether to run the test with mouse or gesture events.
   bool TestMouseEventParam() { return GetParam(); }
 

ash/app_list/model/folder_image.cc

@@ -28,7 +28,6 @@ namespace app_list {
 namespace {
 
 constexpr int kItemIconDimension = 16;
-constexpr float kFolderBubbleRadius = 23;
 constexpr float kFolderBubbleOffsetY = 1;
 
 // Gets the size of a small app icon inside the folder icon.
@@ -89,7 +88,8 @@ void FolderImageSource::Draw(gfx::Canvas* canvas) {
   flags.setStyle(cc::PaintFlags::kFill_Style);
   flags.setAntiAlias(true);
   flags.setColor(FolderImage::kFolderBubbleColor);
-  canvas->DrawCircle(bubble_center, kFolderBubbleRadius, flags);
+  canvas->DrawCircle(bubble_center,
+                     AppListConfig::instance().folder_bubble_radius(), flags);
 
   if (icons_.size() == 0)
     return;

ash/app_list/views/app_list_view.cc

@@ -15,6 +15,7 @@
 #include "ash/app_list/views/apps_container_view.h"
 #include "ash/app_list/views/contents_view.h"
 #include "ash/app_list/views/search_box_view.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 "ash/public/cpp/shell_window_ids.h"
@@ -97,6 +98,9 @@ constexpr float kAppListAnimationDurationFromFullscreenMs = 250;
 // The app list opacity when the tablet mode is enabled.
 constexpr float kAppListOpacityInTabletMode = 0.1;
 
+// Set animation durations to 0 for testing.
+static bool short_animations_for_testing;
+
 // This view forwards the focus to the search box widget by providing it as a
 // FocusTraversable when a focus search is provided.
 class SearchBoxFocusHost : public views::View {
@@ -229,6 +233,23 @@ class HideViewAnimationObserver : public ui::ImplicitAnimationObserver {
   DISALLOW_COPY_AND_ASSIGN(HideViewAnimationObserver);
 };
 
+// An animation observer to transition between states.
+class TransitionAnimationObserver : public ui::ImplicitAnimationObserver {
+ public:
+  explicit TransitionAnimationObserver(AppListView* view) : view_(view) {}
+
+  // ui::ImplicitAnimationObserver:
+  void OnImplicitAnimationsCompleted() override {
+    DCHECK(view_);
+    view_->Layout();
+  }
+
+ private:
+  AppListView* const view_;
+
+  DISALLOW_COPY_AND_ASSIGN(TransitionAnimationObserver);
+};
+
 ////////////////////////////////////////////////////////////////////////////////
 // AppListView::TestApi
 
@@ -247,10 +268,12 @@ AppListView::AppListView(AppListViewDelegate* delegate)
     : delegate_(delegate),
       model_(delegate->GetModel()),
       search_model_(delegate->GetSearchModel()),
-      short_animations_for_testing_(false),
       is_background_blur_enabled_(features::IsBackgroundBlurEnabled()),
       display_observer_(this),
-      animation_observer_(new HideViewAnimationObserver()),
+      hide_view_animation_observer_(
+          std::make_unique<HideViewAnimationObserver>()),
+      transition_animation_observer_(
+          std::make_unique<TransitionAnimationObserver>(this)),
       previous_arrow_key_traversal_enabled_(
           views::FocusManager::arrow_key_traversal_enabled()),
       state_animation_metrics_reporter_(
@@ -266,7 +289,7 @@ AppListView::AppListView(AppListViewDelegate* delegate)
 }
 
 AppListView::~AppListView() {
-  animation_observer_.reset();
+  hide_view_animation_observer_.reset();
   // Remove child views first to ensure no remaining dependencies on delegate_.
   RemoveAllChildViews(true);
   views::FocusManager::set_arrow_key_traversal_enabled(
@@ -279,6 +302,16 @@ void AppListView::ExcludeWindowFromEventHandling(aura::Window* window) {
   window->SetProperty(kExcludeWindowFromEventHandling, true);
 }
 
+// static
+void AppListView::SetShortAnimationForTesting(bool enabled) {
+  short_animations_for_testing = enabled;
+}
+
+// static
+bool AppListView::ShortAnimationsForTesting() {
+  return short_animations_for_testing;
+}
+
 void AppListView::Initialize(const InitParams& params) {
   base::Time start_time = base::Time::Now();
   is_tablet_mode_ = params.is_tablet_mode;
@@ -335,8 +368,8 @@ void AppListView::SetAppListOverlayVisible(bool visible) {
   if (!visible) {
     // Since only one animation is visible at a time, it's safe to re-use
     // animation_observer_ here.
-    animation_observer_->SetTarget(overlay_view_);
-    settings.AddObserver(animation_observer_.get());
+    hide_view_animation_observer_->SetTarget(overlay_view_);
+    settings.AddObserver(hide_view_animation_observer_.get());
   }
 
   const float kOverlayFadeInMilliseconds = 125;
@@ -652,10 +685,13 @@ void AppListView::EndDrag(const gfx::Point& location) {
         app_list_y_for_state = display_height - kHalfAppListHeight;
         app_list_height = kHalfAppListHeight;
         break;
-      case AppListViewState::PEEKING:
-        app_list_y_for_state = display_height - kPeekingAppListHeight;
-        app_list_height = kPeekingAppListHeight;
+      case AppListViewState::PEEKING: {
+        const int peeking_height =
+            AppListConfig::instance().peeking_app_list_height();
+        app_list_y_for_state = display_height - peeking_height;
+        app_list_height = peeking_height;
         break;
+      }
       case AppListViewState::CLOSED:
         NOTREACHED();
         break;
@@ -1156,7 +1192,8 @@ void AppListView::StartAnimationForState(AppListViewState target_state) {
 
   switch (target_state) {
     case AppListViewState::PEEKING:
-      target_state_y = display_height - kPeekingAppListHeight;
+      target_state_y =
+          display_height - AppListConfig::instance().peeking_app_list_height();
       break;
     case AppListViewState::HALF:
       target_state_y = std::max(0, display_height - kHalfAppListHeight);
@@ -1183,7 +1220,7 @@ void AppListView::StartAnimationForState(AppListViewState target_state) {
   int animation_duration;
   // If animating to or from a fullscreen state, animate over 250ms, else
   // animate over 200 ms.
-  if (short_animations_for_testing_) {
+  if (ShortAnimationsForTesting()) {
     animation_duration = kAppListAnimationDurationTestMs;
   } else if (is_fullscreen() ||
              target_state == AppListViewState::FULLSCREEN_ALL_APPS ||
@@ -1216,6 +1253,7 @@ void AppListView::StartAnimationForState(AppListViewState target_state) {
   settings.SetPreemptionStrategy(
       ui::LayerAnimator::IMMEDIATELY_ANIMATE_TO_NEW_TARGET);
   settings.SetAnimationMetricsReporter(state_animation_metrics_reporter_.get());
+  settings.AddObserver(transition_animation_observer_.get());
 
   layer->SetTransform(gfx::Transform());
 }
@@ -1309,6 +1347,13 @@ int AppListView::GetScreenBottom() {
   return GetDisplayNearestView().bounds().bottom();
 }
 
+int AppListView::GetCurrentAppListHeight() const {
+  if (!fullscreen_widget_)
+    return kShelfSize;
+  return GetDisplayNearestView().size().height() -
+         fullscreen_widget_->GetWindowBoundsInScreen().y();
+}
+
 bool AppListView::IsHomeLauncherEnabledInTabletMode() const {
   return is_tablet_mode_ && is_home_launcher_enabled_;
 }

ash/app_list/views/app_list_view.h

@@ -42,6 +42,7 @@ class HideViewAnimationObserver;
 class PaginationModel;
 class SearchBoxView;
 class SearchModel;
+class TransitionAnimationObserver;
 
 // AppListView is the top-level view and controller of app list UI. It creates
 // and hosts a AppsGridView and passes AppListModel to it for display.
@@ -103,6 +104,9 @@ class APP_LIST_EXPORT AppListView : public views::WidgetDelegateView,
   // app list.
   static void ExcludeWindowFromEventHandling(aura::Window* window);
 
+  static void SetShortAnimationForTesting(bool enabled);
+  static bool ShortAnimationsForTesting();
+
   // Initializes the widget as a bubble or fullscreen view depending on if the
   // fullscreen app list feature is set.
   void Initialize(const InitParams& params);
@@ -181,10 +185,6 @@ class APP_LIST_EXPORT AppListView : public views::WidgetDelegateView,
   // Sets |is_in_drag_| and updates the visibility of app list items.
   void SetIsInDrag(bool is_in_drag);
 
-  void set_short_animation_for_testing() {
-    short_animations_for_testing_ = true;
-  }
-
   // Gets the PaginationModel owned by this view's apps grid.
   PaginationModel* GetAppsPaginationModel();
 
@@ -195,6 +195,9 @@ class APP_LIST_EXPORT AppListView : public views::WidgetDelegateView,
   // Gets current screen bottom.
   int GetScreenBottom();
 
+  // Returns current app list height above display bottom.
+  int GetCurrentAppListHeight() const;
+
   views::Widget* get_fullscreen_widget_for_test() const {
     return fullscreen_widget_;
   }
@@ -220,10 +223,6 @@ class APP_LIST_EXPORT AppListView : public views::WidgetDelegateView,
 
   bool is_in_drag() const { return is_in_drag_; }
 
-  int app_list_y_position_in_screen() const {
-    return app_list_y_position_in_screen_;
-  }
-
   bool drag_started_from_peeking() const { return drag_started_from_peeking_; }
 
   void set_onscreen_keyboard_shown(bool onscreen_keyboard_shown) {
@@ -350,9 +349,6 @@ class APP_LIST_EXPORT AppListView : public views::WidgetDelegateView,
   // or dragging the app list from shelf.
   bool is_in_drag_ = false;
 
-  // Set animation durations to 0 for testing.
-  bool short_animations_for_testing_;
-
   // Y position of the app list in screen space coordinate during dragging.
   int app_list_y_position_in_screen_ = 0;
 
@@ -382,7 +378,9 @@ class APP_LIST_EXPORT AppListView : public views::WidgetDelegateView,
   // are open.
   views::View* overlay_view_ = nullptr;
 
-  std::unique_ptr<HideViewAnimationObserver> animation_observer_;
+  std::unique_ptr<HideViewAnimationObserver> hide_view_animation_observer_;
+
+  std::unique_ptr<TransitionAnimationObserver> transition_animation_observer_;
 
   // For UMA and testing. If non-null, triggered when the app list is painted.
   base::Closure next_paint_callback_;

ash/app_list/views/app_list_view_unittest.cc

@@ -97,9 +97,15 @@ class AppListViewTest : public views::ViewsTestBase {
   AppListViewTest() = default;
   ~AppListViewTest() override = default;
 
+  void SetUp() override {
+    AppListView::SetShortAnimationForTesting(true);
+    views::ViewsTestBase::SetUp();
+  }
+
   void TearDown() override {
     view_->GetWidget()->Close();
     views::ViewsTestBase::TearDown();
+    AppListView::SetShortAnimationForTesting(false);
   }
 
  protected:

ash/app_list/views/apps_container_view.h

@@ -21,6 +21,7 @@ class AppListFolderItem;
 class AppListFolderView;
 class AppListModel;
 class ContentsView;
+class ExpandArrowView;
 class FolderBackgroundView;
 class PageSwitcher;
 class SuggestionChipContainerView;
@@ -80,9 +81,9 @@ class APP_LIST_EXPORT AppsContainerView : public HorizontalPage {
   views::View* GetFirstFocusableView() override;
   gfx::Rect GetPageBoundsForState(ash::AppListState state) const override;
 
-  // Returns the expected search box bounds in the screen when the given state
-  // is active.
-  gfx::Rect GetSearchBoxBoundsForState(ash::AppListState state) const;
+  // Returns the expected search box bounds based on the current height of app
+  // list.
+  gfx::Rect GetSearchBoxExpectedBounds() const;
 
   AppsGridView* apps_grid_view() { return apps_grid_view_; }
   FolderBackgroundView* folder_background_view() {
@@ -103,9 +104,6 @@ class APP_LIST_EXPORT AppsContainerView : public HorizontalPage {
   // Gets the final top padding of search box.
   int GetSearchBoxFinalTopPadding() const;
 
-  // Gets the top padding of search box during dragging.
-  int GetSearchBoxTopPaddingDuringDragging() const;
-
   // Returns the bounds of the page in the parent view during dragging.
   gfx::Rect GetPageBoundsDuringDragging(ash::AppListState state) const;
 
@@ -114,12 +112,16 @@ class APP_LIST_EXPORT AppsContainerView : public HorizontalPage {
 
   ContentsView* contents_view_;  // Not owned.
 
+  // True if new style launcher feature is enabled.
+  const bool is_new_style_launcher_enabled_;
+
   // The views below are owned by views hierarchy.
   SuggestionChipContainerView* suggestion_chip_container_view_ = nullptr;
   AppsGridView* apps_grid_view_ = nullptr;
   AppListFolderView* app_list_folder_view_ = nullptr;
   PageSwitcher* page_switcher_ = nullptr;
   FolderBackgroundView* folder_background_view_ = nullptr;
+  ExpandArrowView* expand_arrow_view_ = nullptr;
 
   ShowState show_state_ = SHOW_NONE;
 

ash/app_list/views/apps_grid_view.h

@@ -106,6 +106,12 @@ class APP_LIST_EXPORT AppsGridView : public views::View,
   // Returns the size of the entire tile grid without padding.
   gfx::Size GetTileGridSizeWithoutPadding() const;
 
+  // Returns the minimum size of the entire tile grid.
+  gfx::Size GetMinimumTileGridSize() const;
+
+  // Returns the maximum size of the entire tile grid.
+  gfx::Size GetMaximumTileGridSize() const;
+
   // This resets the grid view to a fresh state for showing the app list.
   void ResetForShowApps();
 
@@ -592,6 +598,9 @@ class APP_LIST_EXPORT AppsGridView : public views::View,
   // histograms.
   void RecordAppMovingTypeMetrics(AppListAppMovingType type);
 
+  // Update the padding of tile view based on the contents bounds.
+  void UpdateTilePadding();
+
   AppListModel* model_ = nullptr;         // Owned by AppListView.
   AppListItemList* item_list_ = nullptr;  // Not owned.
 
@@ -714,6 +723,13 @@ class APP_LIST_EXPORT AppsGridView : public views::View,
   // True if the apps grid gap feature is enabled.
   const bool is_apps_grid_gap_feature_enabled_;
 
+  // True if new style launcher feature is enabled.
+  const bool is_new_style_launcher_enabled_;
+
+  // Tile spacing between the tile views.
+  int horizontal_tile_padding_ = 0;
+  int vertical_tile_padding_ = 0;
+
   DISALLOW_COPY_AND_ASSIGN(AppsGridView);
 };
 

ash/app_list/views/apps_grid_view_unittest.cc

@@ -172,6 +172,7 @@ class AppsGridViewTest : public views::ViewsTestBase,
 
   // testing::Test overrides:
   void SetUp() override {
+    AppListView::SetShortAnimationForTesting(true);
     views::ViewsTestBase::SetUp();
     if (testing::UnitTest::GetInstance()->current_test_info()->value_param()) {
       is_rtl_ = GetParam().is_rtl_enabled;
@@ -183,7 +184,6 @@ class AppsGridViewTest : public views::ViewsTestBase,
     parent->SetBounds(gfx::Rect(gfx::Point(0, 0), gfx::Size(1024, 768)));
     delegate_.reset(new AppListTestViewDelegate);
     app_list_view_ = new AppListView(delegate_.get());
-    app_list_view_->set_short_animation_for_testing();
     AppListView::InitParams params;
     params.parent = parent;
     app_list_view_->Initialize(params);
@@ -209,6 +209,7 @@ class AppsGridViewTest : public views::ViewsTestBase,
   void TearDown() override {
     app_list_view_->GetWidget()->Close();
     views::ViewsTestBase::TearDown();
+    AppListView::SetShortAnimationForTesting(false);
   }
 
  protected:

ash/app_list/views/contents_view.cc

@@ -136,7 +136,7 @@ void ContentsView::SetDragAndDropHostOfCurrentAppList(
 }
 
 void ContentsView::SetActiveState(ash::AppListState state) {
-  SetActiveState(state, true);
+  SetActiveState(state, !AppListView::ShortAnimationsForTesting());
 }
 
 void ContentsView::SetActiveState(ash::AppListState state, bool animate) {
@@ -252,18 +252,17 @@ void ContentsView::UpdatePageBounds() {
 
   // Update app list pages.
   for (AppListPage* page : app_list_pages_) {
-    page->OnAnimationUpdated(progress, current_state, target_state);
-
     gfx::Rect to_rect = page->GetPageBoundsForState(target_state);
     gfx::Rect from_rect = page->GetPageBoundsForState(current_state);
-    if (from_rect == to_rect)
-      continue;
 
     // Animate linearly (the PaginationModel handles easing).
     gfx::Rect bounds(
         gfx::Tween::RectValueBetween(progress, from_rect, to_rect));
 
     page->SetBoundsRect(bounds);
+
+    if (ShouldLayoutPage(page, current_state, target_state))
+      page->OnAnimationUpdated(progress, current_state, target_state);
   }
 
   // Update the search box.
@@ -273,11 +272,13 @@ void ContentsView::UpdatePageBounds() {
 void ContentsView::UpdateSearchBox(double progress,
                                    ash::AppListState current_state,
                                    ash::AppListState target_state) {
+  SearchBoxView* search_box = GetSearchBoxView();
+  if (!search_box->GetWidget())
+    return;
+
   AppListPage* from_page = GetPageView(GetPageIndexForState(current_state));
   AppListPage* to_page = GetPageView(GetPageIndexForState(target_state));
 
-  SearchBoxView* search_box = GetSearchBoxView();
-
   gfx::Rect search_box_from(from_page->GetSearchBoxBounds());
   gfx::Rect search_box_to(to_page->GetSearchBoxBounds());
   gfx::Rect search_box_rect =
@@ -392,33 +393,14 @@ gfx::Size ContentsView::GetDefaultContentsSize() const {
 }
 
 gfx::Size ContentsView::CalculatePreferredSize() const {
-  return gfx::Size(GetDisplayWidth(), GetDisplayHeight());
+  return GetWorkAreaSize();
 }
 
 void ContentsView::Layout() {
-  // Immediately finish all current animations.
-  pagination_model_.FinishAnimation();
-
   if (GetContentsBounds().IsEmpty())
     return;
 
-  for (AppListPage* page : app_list_pages_) {
-    // Ensures re-layout happens even when the page bounds does not change. So
-    // that |horizontal_page_container_| can layout its children in response to
-    // user dragging.
-    page->InvalidateLayout();
-    page->SetBoundsRect(page->GetPageBoundsForState(GetActiveState()));
-  }
-
-  // The search box is contained in a widget so set the bounds of the widget
-  // rather than the SearchBoxView.
-  views::Widget* search_box_widget = GetSearchBoxView()->GetWidget();
-  if (search_box_widget && search_box_widget != GetWidget()) {
-    gfx::Rect search_box_bounds = GetSearchBoxBoundsForState(GetActiveState());
-    search_box_widget->SetBounds(ConvertRectToWidget(
-        GetSearchBoxView()->GetViewBoundsForSearchBoxContentsBounds(
-            search_box_bounds)));
-  }
+  UpdatePageBounds();
 }
 
 const char* ContentsView::GetClassName() const {
@@ -443,20 +425,17 @@ void ContentsView::TransitionChanged() {
 
 void ContentsView::TransitionEnded() {}
 
-int ContentsView::GetDisplayHeight() const {
+gfx::Size ContentsView::GetWorkAreaSize() const {
   return display::Screen::GetScreen()
       ->GetDisplayNearestView(GetWidget()->GetNativeView())
       .work_area()
-      .size()
-      .height();
+      .size();
 }
 
-int ContentsView::GetDisplayWidth() const {
+gfx::Size ContentsView::GetDisplaySize() const {
   return display::Screen::GetScreen()
       ->GetDisplayNearestView(GetWidget()->GetNativeView())
-      .work_area()
-      .size()
-      .width();
+      .size();
 }
 
 void ContentsView::FadeOutOnClose(base::TimeDelta animation_duration) {
@@ -475,4 +454,28 @@ views::View* ContentsView::GetSelectedView() const {
   return app_list_pages_[GetActivePageIndex()]->GetSelectedView();
 }
 
+bool ContentsView::ShouldLayoutPage(AppListPage* page,
+                                    ash::AppListState current_state,
+                                    ash::AppListState target_state) const {
+  if (page == horizontal_page_container_) {
+    return (current_state == ash::AppListState::kStateStart &&
+            target_state == ash::AppListState::kStateApps) ||
+           (current_state == ash::AppListState::kStateApps &&
+            target_state == ash::AppListState::kStateStart);
+  }
+
+  if (page == search_results_page_view_) {
+    return ((current_state == ash::AppListState::kStateSearchResults &&
+             target_state == ash::AppListState::kStateStart) ||
+            (current_state == ash::AppListState::kStateStart &&
+             target_state == ash::AppListState::kStateSearchResults)) ||
+           ((current_state == ash::AppListState::kStateSearchResults &&
+             target_state == ash::AppListState::kStateApps) ||
+            (current_state == ash::AppListState::kStateApps &&
+             target_state == ash::AppListState::kStateSearchResults));
+  }
+
+  return false;
+}
+
 }  // namespace app_list

ash/app_list/views/contents_view.h

@@ -154,11 +154,11 @@ class APP_LIST_EXPORT ContentsView : public views::View,
   void TransitionChanged() override;
   void TransitionEnded() override;
 
-  // Returns the height of current display.
-  int GetDisplayHeight() const;
+  // Returns the size of current work area.
+  gfx::Size GetWorkAreaSize() const;
 
-  // Returns the width of the current display.
-  int GetDisplayWidth() const;
+  // Returns the size of current display.
+  gfx::Size GetDisplaySize() const;
 
   // Starts the fade out animation when the app list is closed.
   void FadeOutOnClose(base::TimeDelta animation_duration);
@@ -205,6 +205,12 @@ class APP_LIST_EXPORT ContentsView : public views::View,
   // launcher-page pagination.
   PaginationModel* GetAppsPaginationModel();
 
+  // Returns true if the |page| requires layout when transitioning from
+  // |current_state| to |target_state|.
+  bool ShouldLayoutPage(AppListPage* page,
+                        ash::AppListState current_state,
+                        ash::AppListState target_state) const;
+
   // Unowned pointer to application list model.
   AppListModel* model_ = nullptr;
 

ash/app_list/views/expand_arrow_view.h

@@ -16,7 +16,6 @@ class SlideAnimation;
 }  // namespace gfx
 
 namespace views {
-class ImageView;
 class InkDrop;
 class InkDropMask;
 class InkDropRipple;
@@ -42,7 +41,6 @@ class APP_LIST_EXPORT ExpandArrowView : public views::Button,
 
   // Overridden from views::View:
   gfx::Size CalculatePreferredSize() const override;
-  void Layout() override;
   bool OnKeyPressed(const ui::KeyEvent& event) override;
   void OnFocus() override;
   void OnBlur() override;
@@ -68,11 +66,6 @@ class APP_LIST_EXPORT ExpandArrowView : public views::Button,
   ContentsView* const contents_view_;
   AppListView* const app_list_view_;  // Owned by the views hierarchy.
 
-  // This is a container view for |icon_| and is used to clip |icon_| during
-  // the animation.
-  views::View* clip_view_;
-  views::ImageView* icon_;
-
   // Properties for pulse opacity and size used in animation.
   float pulse_opacity_;
   int pulse_radius_;
@@ -83,6 +76,12 @@ class APP_LIST_EXPORT ExpandArrowView : public views::Button,
   // be canceled.
   bool button_pressed_ = false;
 
+  // True if new style launcher feature is enabled.
+  const bool is_new_style_launcher_enabled_;
+
+  // The y position offset of the arrow in this view.
+  int arrow_y_offset_;
+
   base::WeakPtrFactory<ExpandArrowView> weak_ptr_factory_;
 
   DISALLOW_COPY_AND_ASSIGN(ExpandArrowView);

ash/app_list/views/horizontal_page_container.cc

@@ -43,8 +43,7 @@ gfx::Size HorizontalPageContainer::CalculatePreferredSize() const {
   if (!GetWidget())
     return gfx::Size();
 
-  return gfx::Size(contents_view_->GetDisplayWidth(),
-                   contents_view_->GetDisplayHeight());
+  return contents_view_->GetWorkAreaSize();
 }
 
 void HorizontalPageContainer::Layout() {
@@ -56,6 +55,7 @@ void HorizontalPageContainer::Layout() {
     gfx::Rect page_bounds(
         page->GetPageBoundsForState(contents_view_->GetActiveState()));
     page_bounds.Offset(GetOffsetForPageIndex(i));
+    page->InvalidateLayout();
     page->SetBoundsRect(page_bounds);
   }
 }
@@ -81,6 +81,7 @@ void HorizontalPageContainer::OnAnimationUpdated(double progress,
     gfx::Rect bounds(
         gfx::Tween::RectValueBetween(progress, from_rect, to_rect));
     bounds.Offset(GetOffsetForPageIndex(i));
+    page->InvalidateLayout();
     page->SetBoundsRect(bounds);
   }
 }
@@ -93,7 +94,7 @@ gfx::Rect HorizontalPageContainer::GetSearchBoxBoundsForState(
     ash::AppListState state) const {
   // The search box bounds are decided by AppsContainerView and are not changed
   // during horizontal page switching.
-  return apps_container_view_->GetSearchBoxBoundsForState(state);
+  return apps_container_view_->GetSearchBoxExpectedBounds();
 }
 
 gfx::Rect HorizontalPageContainer::GetPageBoundsForState(

ash/app_list/views/search_box_view.cc

@@ -18,6 +18,7 @@
 #include "ash/app_list/views/contents_view.h"
 #include "ash/app_list/views/search_result_base_view.h"
 #include "ash/app_list/views/search_result_page_view.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/vector_icons/vector_icons.h"
 #include "ash/public/cpp/wallpaper_types.h"
@@ -266,12 +267,10 @@ void SearchBoxView::UpdateOpacity() {
            ->ShouldShowSearchBox()) {
     return;
   }
-  int app_list_y_position_in_screen =
-      contents->app_list_view()->app_list_y_position_in_screen();
   float fraction =
-      std::max<float>(0, contents->app_list_view()->GetScreenBottom() -
-                             kShelfSize - app_list_y_position_in_screen) /
-      (kPeekingAppListHeight - kShelfSize);
+      std::max<float>(0, contents->app_list_view()->GetCurrentAppListHeight() -
+                             kShelfSize) /
+      (AppListConfig::instance().peeking_app_list_height() - kShelfSize);
 
   float opacity =
       std::min(std::max((fraction - kOpacityStartFraction) /

ash/app_list/views/search_result_suggestion_chip_view.cc

@@ -85,6 +85,7 @@ gfx::Size SearchResultSuggestionChipView::CalculatePreferredSize() const {
 
 void SearchResultSuggestionChipView::DiscardItem() {
   delete suggestion_chip_view_;
+  suggestion_chip_view_ = nullptr;
 
   if (item_)
     item_->RemoveObserver(this);

ash/public/cpp/app_list/app_list_config.cc

@@ -25,7 +25,16 @@ AppListConfig::AppListConfig()
       search_tile_badge_background_radius_(10),
       search_list_icon_dimension_(18),
       search_list_badge_icon_dimension_(14),
-      app_title_max_line_height_(16) {
+      app_title_max_line_height_(16),
+      peeking_app_list_height_(320),
+      search_box_closed_top_padding_(12),
+      search_box_peeking_top_padding_(24),
+      search_box_fullscreen_top_padding_(24),
+      preferred_cols_(5),
+      preferred_rows_(5),
+      page_spacing_(40),
+      expand_arrow_tile_height_(60),
+      folder_bubble_radius_(23) {
   if (features::IsNewStyleLauncherEnabled()) {
     grid_tile_width_ = 120;
     grid_tile_height_ = 112;
@@ -37,6 +46,13 @@ AppListConfig::AppListConfig()
     grid_focus_dimension_ = 80;
     grid_focus_corner_radius_ = 12;
     app_title_max_line_height_ = 20;
+    peeking_app_list_height_ = 284;
+    search_box_closed_top_padding_ = 84;
+    search_box_peeking_top_padding_ = 84;
+    preferred_rows_ = 4;
+    page_spacing_ = 48;
+    expand_arrow_tile_height_ = 72;
+    folder_bubble_radius_ = 31;
   }
 
   // We're getting the largest font that doesn't exceed

ash/public/cpp/app_list/app_list_config.h

@@ -48,6 +48,21 @@ class ASH_PUBLIC_EXPORT AppListConfig {
   }
   int app_title_max_line_height() const { return app_title_max_line_height_; }
   const gfx::FontList& app_title_font() const { return app_title_font_; }
+  int peeking_app_list_height() const { return peeking_app_list_height_; }
+  int search_box_closed_top_padding() const {
+    return search_box_closed_top_padding_;
+  }
+  int search_box_peeking_top_padding() const {
+    return search_box_peeking_top_padding_;
+  }
+  int search_box_fullscreen_top_padding() const {
+    return search_box_fullscreen_top_padding_;
+  }
+  int preferred_cols() const { return preferred_cols_; }
+  int preferred_rows() const { return preferred_rows_; }
+  int page_spacing() const { return page_spacing_; }
+  int expand_arrow_tile_height() const { return expand_arrow_tile_height_; }
+  int folder_bubble_radius() const { return folder_bubble_radius_; }
 
   gfx::Size grid_icon_size() const {
     return gfx::Size(grid_icon_dimension_, grid_icon_dimension_);
@@ -126,6 +141,31 @@ class ASH_PUBLIC_EXPORT AppListConfig {
 
   // The font for app title in app list.
   gfx::FontList app_title_font_;
+
+  // The height of app list in peeking mode.
+  int peeking_app_list_height_;
+
+  // The top padding of search box in closed state.
+  int search_box_closed_top_padding_;
+
+  // The top padding of search box in peeking state.
+  int search_box_peeking_top_padding_;
+
+  // The top padding of search box in fullscreen state.
+  int search_box_fullscreen_top_padding_;
+
+  // Preferred number of columns and rows in apps grid.
+  int preferred_cols_;
+  int preferred_rows_;
+
+  // The spacing between each page.
+  int page_spacing_;
+
+  // The tile height of expand arrow.
+  int expand_arrow_tile_height_;
+
+  // The folder image bubble radius.
+  int folder_bubble_radius_;
 };
 
 }  // namespace app_list

ash/public/cpp/app_list/app_list_constants.cc

@@ -73,19 +73,12 @@ const gfx::Tween::Type kFolderFadeInTweenType = gfx::Tween::EASE_IN_2;
 // a folder.
 const gfx::Tween::Type kFolderFadeOutTweenType = gfx::Tween::FAST_OUT_LINEAR_IN;
 
-// Preferred number of columns and rows in apps grid.
-const int kPreferredCols = 5;
-const int kPreferredRows = 5;
-
 // The number of apps shown in the start page app grid.
 const int kNumStartPageTiles = 5;
 
 // Maximum number of results to show in the launcher Search UI.
 const size_t kMaxSearchResults = 6;
 
-// Top padding of expand arrow.
-const size_t kExpandArrowTopPadding = 29;
-
 // Radius of the circle, in which if entered, show re-order preview.
 const int kReorderDroppingCircleRadius = 35;
 

ash/public/cpp/app_list/app_list_constants.h

@@ -50,14 +50,9 @@ ASH_PUBLIC_EXPORT extern const int kCustomPageCollapsedHeight;
 ASH_PUBLIC_EXPORT extern const gfx::Tween::Type kFolderFadeInTweenType;
 ASH_PUBLIC_EXPORT extern const gfx::Tween::Type kFolderFadeOutTweenType;
 
-ASH_PUBLIC_EXPORT extern const int kPreferredCols;
-ASH_PUBLIC_EXPORT extern const int kPreferredRows;
-
 ASH_PUBLIC_EXPORT extern const int kNumStartPageTiles;
 ASH_PUBLIC_EXPORT extern const size_t kMaxSearchResults;
 
-ASH_PUBLIC_EXPORT extern const size_t kExpandArrowTopPadding;
-
 ASH_PUBLIC_EXPORT extern const int kReorderDroppingCircleRadius;
 
 ASH_PUBLIC_EXPORT extern const int kAppsGridPadding;