Implement the animation of opened search box

Changes:
1. Initializes the search result page view using the same bounds, color
and background border corner raidus as the search box view to make it
hidden.

2. When there's query in the search box, grows the search result page in
the same pace as the search box to make them look like a single growing
view.

Screenshots of animation:
https://screenshot.googleplex.com/FNsJ0bE9s29
https://screenshot.googleplex.com/4ObTEsitpRK
https://screenshot.googleplex.com/sHQWVWaqavH
https://screenshot.googleplex.com/HVFKUXrYQhO

Specs: https://screenshot.googleplex.com/409fBM7pTO2

BUG=741051

Change-Id: I2fc15631e6675169dcb0ab222ce1af4cdc9cf2d2
Reviewed-on: https://chromium-review.googlesource.com/570835
Commit-Queue: Weidong Guo <weidongg@chromium.org>
Reviewed-by: Steven Bennetts <stevenjb@chromium.org>
Reviewed-by: Yury Khmel <khmel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#486825}

ui/app_list/app_list_constants.cc

@@ -127,6 +127,12 @@ const int kSearchBoxPadding = 16;
 const int kSearchBoxTopPadding = 24;
 const int kSearchBoxBottomPadding = 21;
 
+// The preferred height of the search box.
+const int kSearchBoxPreferredHeight = 48;
+
+// The background border corner radius of the search box in fullscreen mode.
+const int kSearchBoxBorderCornerRadiusFullscreen = 24;
+
 // Max items allowed in a folder.
 size_t kMaxFolderItems = 16;
 

ui/app_list/app_list_constants.h

@@ -96,6 +96,8 @@ APP_LIST_EXPORT extern const int kAppsGridPadding;
 APP_LIST_EXPORT extern const int kSearchBoxPadding;
 APP_LIST_EXPORT extern const int kSearchBoxTopPadding;
 APP_LIST_EXPORT extern const int kSearchBoxBottomPadding;
+APP_LIST_EXPORT extern const int kSearchBoxPreferredHeight;
+APP_LIST_EXPORT extern const int kSearchBoxBorderCornerRadiusFullscreen;
 
 APP_LIST_EXPORT extern size_t kMaxFolderItems;
 APP_LIST_EXPORT extern const size_t kNumFolderTopItems;

ui/app_list/views/app_list_page.h

@@ -43,6 +43,7 @@ class APP_LIST_EXPORT AppListPage : public views::View {
   // Returns the z height of the search box for this page.
   virtual int GetSearchBoxZHeight() const;
 
+  const ContentsView* contents_view() const { return contents_view_; }
   void set_contents_view(ContentsView* contents_view) {
     contents_view_ = contents_view;
   }

ui/app_list/views/contents_view.cc

@@ -214,10 +214,7 @@ void ContentsView::ActivePageChanged() {
   const bool folder_active = state == AppListModel::STATE_APPS &&
                              apps_container_view_->IsInFolderView();
 
-  if (is_fullscreen_app_list_enabled_) {
-    app_list_main_view_->search_box_view()->UpdateBackground(
-        state == AppListModel::STATE_SEARCH_RESULTS);
-  } else {
+  if (!is_fullscreen_app_list_enabled_) {
     app_list_main_view_->search_box_view()->back_button()->SetVisible(
         state != AppListModel::STATE_START);
     app_list_main_view_->search_box_view()->Layout();
@@ -327,6 +324,8 @@ void ContentsView::UpdateSearchBox(double progress,
         gfx::Tween::ColorValueBetween(progress, original_shadow.color(),
                                       target_shadow.color())));
   }
+  if (is_fullscreen_app_list_enabled_)
+    search_box->UpdateBackground(progress, current_state, target_state);
   search_box->GetWidget()->SetBounds(
       search_box->GetViewBoundsForSearchBoxContentsBounds(
           ConvertRectToWidget(search_box_rect)));

ui/app_list/views/search_box_view.cc

@@ -13,7 +13,6 @@
 #include "third_party/skia/include/core/SkPath.h"
 #include "ui/app_list/app_list_constants.h"
 #include "ui/app_list/app_list_features.h"
-#include "ui/app_list/app_list_model.h"
 #include "ui/app_list/app_list_switches.h"
 #include "ui/app_list/app_list_view_delegate.h"
 #include "ui/app_list/resources/grit/app_list_resources.h"
@@ -53,13 +52,11 @@ constexpr int kPadding = 12;
 constexpr int kInnerPadding = 24;
 constexpr int kPreferredWidth = 360;
 constexpr int kPreferredWidthFullscreen = 544;
-constexpr int kPreferredHeight = 48;
 
 constexpr SkColor kHintTextColor = SkColorSetARGBMacro(0xFF, 0xA0, 0xA0, 0xA0);
 
-constexpr int kBackgroundBorderCornerRadius = 2;
-constexpr int kBackgroundBorderCornerRadiusFullscreen = 24;
-constexpr int kBackgroundBorderCornerRadiusSearchResult = 4;
+constexpr int kSearchBoxBorderCornerRadius = 2;
+constexpr int kSearchBoxBorderCornerRadiusSearchResult = 4;
 constexpr int kGoogleIconSize = 24;
 constexpr int kMicIconSize = 24;
 constexpr int kCloseIconSize = 24;
@@ -78,45 +75,29 @@ constexpr SkColor kZeroQuerySearchboxColor =
 // A background that paints a solid white rounded rect with a thin grey border.
 class SearchBoxBackground : public views::Background {
  public:
-  explicit SearchBoxBackground(SkColor color) : color_(color) {
-    const int corner_radius = features::IsFullscreenAppListEnabled()
-                                  ? kBackgroundBorderCornerRadiusFullscreen
-                                  : kBackgroundBorderCornerRadius;
-    SetCornerRadius(corner_radius, corner_radius, corner_radius, corner_radius);
-  }
+  explicit SearchBoxBackground(
+      SkColor color,
+      int corner_radius = features::IsFullscreenAppListEnabled()
+                              ? kSearchBoxBorderCornerRadiusFullscreen
+                              : kSearchBoxBorderCornerRadius)
+      : corner_radius_(corner_radius), color_(color) {}
   ~SearchBoxBackground() override {}
 
-  void SetCornerRadius(int top_left,
-                       int top_right,
-                       int bottom_right,
-                       int bottom_left) {
-    DCHECK(top_left >= 0 && top_right >= 0 && bottom_right >= 0 &&
-           bottom_left >= 0);
-    corner_radius_[0] = top_left;
-    corner_radius_[1] = top_right;
-    corner_radius_[2] = bottom_right;
-    corner_radius_[3] = bottom_left;
-  }
+  void set_corner_radius(int corner_radius) { corner_radius_ = corner_radius; }
+  void set_color(SkColor color) { color_ = color; }
 
  private:
   // views::Background overrides:
   void Paint(gfx::Canvas* canvas, views::View* view) const override {
     gfx::Rect bounds = view->GetContentsBounds();
 
-    const SkScalar kRadius[8] = {
-        SkIntToScalar(corner_radius_[0]), SkIntToScalar(corner_radius_[0]),
-        SkIntToScalar(corner_radius_[1]), SkIntToScalar(corner_radius_[1]),
-        SkIntToScalar(corner_radius_[2]), SkIntToScalar(corner_radius_[2]),
-        SkIntToScalar(corner_radius_[3]), SkIntToScalar(corner_radius_[3])};
-    SkPath path;
-    path.addRoundRect(gfx::RectToSkRect(bounds), kRadius);
     cc::PaintFlags flags;
     flags.setAntiAlias(true);
     flags.setColor(color_);
-    canvas->DrawPath(path, flags);
+    canvas->DrawRoundRect(bounds, corner_radius_, flags);
   }
 
-  int corner_radius_[4];
+  int corner_radius_;
   SkColor color_;
 
   DISALLOW_COPY_AND_ASSIGN(SearchBoxBackground);
@@ -181,7 +162,7 @@ SearchBoxView::SearchBoxView(SearchBoxViewDelegate* delegate,
   SetPreferredSize(gfx::Size(is_fullscreen_app_list_enabled_
                                  ? kPreferredWidthFullscreen
                                  : kPreferredWidth,
-                             kPreferredHeight));
+                             kSearchBoxPreferredHeight));
   AddChildView(content_container_);
 
   SetShadow(GetShadowForZHeight(2));
@@ -194,7 +175,7 @@ SearchBoxView::SearchBoxView(SearchBoxViewDelegate* delegate,
   content_container_->SetLayoutManager(layout);
   layout->set_cross_axis_alignment(
       views::BoxLayout::CROSS_AXIS_ALIGNMENT_CENTER);
-  layout->set_minimum_cross_axis_size(kPreferredHeight);
+  layout->set_minimum_cross_axis_size(kSearchBoxPreferredHeight);
 
   search_box_->SetBorder(views::NullBorder());
   search_box_->SetTextColor(kSearchTextColor);
@@ -484,19 +465,47 @@ void SearchBoxView::OnMouseEvent(ui::MouseEvent* event) {
   HandleSearchBoxEvent(event);
 }
 
-void SearchBoxView::UpdateBackground(bool search_results_state) {
-  if (!search_results_state) {
-    WallpaperProminentColorsChanged();
-    return;
-  }
+int SearchBoxView::GetSearchBoxBorderCornerRadiusForState(
+    AppListModel::State state) {
+  if (state == AppListModel::STATE_SEARCH_RESULTS)
+    return kSearchBoxBorderCornerRadiusSearchResult;
+  return kSearchBoxBorderCornerRadiusFullscreen;
+}
+
+SkColor SearchBoxView::GetSearchBoxColorForState(
+    AppListModel::State state) const {
+  if (state == AppListModel::STATE_SEARCH_RESULTS)
+    return kSearchBoxBackgroundDefault;
 
+  // Uses wallpaper prominent color for other states.
+  const std::vector<SkColor> prominent_colors =
+      model_->search_box()->wallpaper_prominent_colors();
+  if (prominent_colors.empty())
+    return kSearchBoxBackgroundDefault;
+
+  DCHECK_EQ(static_cast<size_t>(ColorProfileType::NUM_OF_COLOR_PROFILES),
+            prominent_colors.size());
+  const SkColor light_vibrant =
+      prominent_colors[static_cast<int>(ColorProfileType::LIGHT_VIBRANT)];
+  const SkColor light_vibrant_mixed = color_utils::AlphaBlend(
+      SK_ColorWHITE, light_vibrant, kLightVibrantBlendAlpha);
+  return SK_ColorTRANSPARENT == light_vibrant ? kSearchBoxBackgroundDefault
+                                              : light_vibrant_mixed;
+}
+
+void SearchBoxView::UpdateBackground(double progress,
+                                     AppListModel::State current_state,
+                                     AppListModel::State target_state) {
   SearchBoxBackground* background =
-      new SearchBoxBackground(kSearchBoxBackgroundDefault);
-  background->SetCornerRadius(kBackgroundBorderCornerRadiusSearchResult,
-                              kBackgroundBorderCornerRadiusSearchResult, 0, 0);
-  content_container_->SetBackground(
-      base::WrapUnique<SearchBoxBackground>(background));
-  search_box_->SetBackgroundColor(kSearchBoxBackgroundDefault);
+      static_cast<SearchBoxBackground*>(content_container_->background());
+  background->set_corner_radius(gfx::Tween::LinearIntValueBetween(
+      progress, GetSearchBoxBorderCornerRadiusForState(current_state),
+      GetSearchBoxBorderCornerRadiusForState(target_state)));
+  const SkColor color = gfx::Tween::ColorValueBetween(
+      progress, GetSearchBoxColorForState(current_state),
+      GetSearchBoxColorForState(target_state));
+  background->set_color(color);
+  search_box_->SetBackgroundColor(color);
 }
 
 void SearchBoxView::UpdateModel() {
@@ -697,9 +706,10 @@ void SearchBoxView::WallpaperProminentColorsChanged() {
   const SkColor light_vibrant_mixed = color_utils::AlphaBlend(
       SK_ColorWHITE, light_vibrant, kLightVibrantBlendAlpha);
   const bool light_vibrant_available = SK_ColorTRANSPARENT != light_vibrant;
-  content_container_->SetBackground(base::MakeUnique<SearchBoxBackground>(
-      light_vibrant_available ? light_vibrant_mixed
-                              : kSearchBoxBackgroundDefault));
+  SearchBoxBackground* background =
+      static_cast<SearchBoxBackground*>(content_container_->background());
+  background->set_color(light_vibrant_available ? light_vibrant_mixed
+                                                : kSearchBoxBackgroundDefault);
   search_box_->SetBackgroundColor(light_vibrant_available
                                       ? light_vibrant_mixed
                                       : kSearchBoxBackgroundDefault);

ui/app_list/views/search_box_view.h

@@ -8,6 +8,7 @@
 #include <string>
 
 #include "base/macros.h"
+#include "ui/app_list/app_list_model.h"
 #include "ui/app_list/search_box_model_observer.h"
 #include "ui/app_list/speech_ui_model_observer.h"
 #include "ui/gfx/shadow_value.h"
@@ -32,7 +33,6 @@ enum SearchBoxFocus {
   FOCUS_CONTENTS_VIEW,  // Something outside the SearchBox is selected
 };
 
-class AppListModel;
 class AppListView;
 class AppListViewDelegate;
 class SearchBoxModel;
@@ -109,8 +109,16 @@ class APP_LIST_EXPORT SearchBoxView : public views::View,
   void OnGestureEvent(ui::GestureEvent* event) override;
   void OnMouseEvent(ui::MouseEvent* event) override;
 
-  // Updates the |content_container_|'s background corner radius.
-  void UpdateBackground(bool search_results_state);
+  // Returns background border corner radius in the given state.
+  static int GetSearchBoxBorderCornerRadiusForState(AppListModel::State state);
+
+  // Returns search box color in the given state.
+  SkColor GetSearchBoxColorForState(AppListModel::State state) const;
+
+  // Updates the search box's background corner radius and color.
+  void UpdateBackground(double progress,
+                        AppListModel::State current_state,
+                        AppListModel::State target_state);
 
  private:
   // Updates model text and selection model with current Textfield info.

ui/app_list/views/search_result_page_view.cc

@@ -13,6 +13,7 @@
 #include "ui/app_list/app_list_features.h"
 #include "ui/app_list/app_list_view_delegate.h"
 #include "ui/app_list/views/app_list_main_view.h"
+#include "ui/app_list/views/contents_view.h"
 #include "ui/app_list/views/search_box_view.h"
 #include "ui/app_list/views/search_result_list_view.h"
 #include "ui/app_list/views/search_result_tile_item_list_view.h"
@@ -37,11 +38,10 @@ constexpr int kFullscreenHeight = 440;
 // The z-height of the search box and cards in this view.
 constexpr int kSearchResultZHeight = 1;
 
-constexpr int kBackgroundCornerRadius = 4;
+// The horizontal padding of the separator.
 constexpr int kSeparatorPadding = 12;
 constexpr int kSeparatorThickness = 1;
 
-constexpr SkColor kBackgroundColor = SK_ColorWHITE;
 constexpr SkColor kSeparatorColor = SkColorSetARGBMacro(0x1F, 0x00, 0x00, 0x00);
 
 // A container view that ensures the card background and the shadow are painted
@@ -52,10 +52,10 @@ class SearchCardView : public views::View {
     if (!features::IsFullscreenAppListEnabled()) {
       SetBorder(base::MakeUnique<views::ShadowBorder>(
           GetShadowForZHeight(kSearchResultZHeight)));
+      content_view->SetBackground(
+          views::CreateSolidBackground(kCardBackgroundColor));
     }
     SetLayoutManager(new views::FillLayout());
-    content_view->SetBackground(
-        views::CreateSolidBackground(kCardBackgroundColor));
     AddChildView(content_view);
   }
 
@@ -78,34 +78,28 @@ class ZeroWidthVerticalScrollBar : public views::OverlayScrollBar {
 
 class SearchResultPageBackground : public views::Background {
  public:
-  SearchResultPageBackground() {}
+  SearchResultPageBackground(SkColor color, int corner_radius)
+      : color_(color), corner_radius_(corner_radius) {}
   ~SearchResultPageBackground() override {}
 
  private:
   // views::Background overrides:
   void Paint(gfx::Canvas* canvas, views::View* view) const override {
     gfx::Rect bounds = view->GetContentsBounds();
-    const SkScalar kCornerRadiusScalar = SkIntToScalar(kBackgroundCornerRadius);
-    const SkScalar kRadius[8] = {0,
-                                 0,
-                                 0,
-                                 0,
-                                 kCornerRadiusScalar,
-                                 kCornerRadiusScalar,
-                                 kCornerRadiusScalar,
-                                 kCornerRadiusScalar};
-    SkPath path;
-    path.addRoundRect(gfx::RectToSkRect(bounds), kRadius);
     cc::PaintFlags flags;
     flags.setAntiAlias(true);
-    flags.setColor(kBackgroundColor);
-    canvas->DrawPath(path, flags);
+    flags.setColor(color_);
+    canvas->DrawRoundRect(bounds, corner_radius_, flags);
 
     // Draws a separator between SearchBoxView and SearchResultPageView.
+    bounds.set_y(kSearchBoxPreferredHeight);
     bounds.set_height(kSeparatorThickness);
     canvas->FillRect(bounds, kSeparatorColor);
   }
 
+  const SkColor color_;
+  const int corner_radius_;
+
   DISALLOW_COPY_AND_ASSIGN(SearchResultPageBackground);
 };
 
@@ -147,7 +141,11 @@ SearchResultPageView::SearchResultPageView()
   if (is_fullscreen_app_list_enabled_) {
     contents_view_->SetLayoutManager(
         new views::BoxLayout(views::BoxLayout::kVertical, gfx::Insets(), 0));
-    SetBackground(base::MakeUnique<SearchResultPageBackground>());
+
+    // Hides this view behind the search box by using the same color and
+    // background border corner radius.
+    SetBackground(base::MakeUnique<SearchResultPageBackground>(
+        kSearchBoxBackgroundDefault, kSearchBoxBorderCornerRadiusFullscreen));
   } else {
     gfx::ShadowValue shadow = GetShadowForZHeight(kSearchResultZHeight);
     std::unique_ptr<views::Border> border(new views::ShadowBorder(shadow));
@@ -164,8 +162,9 @@ SearchResultPageView::SearchResultPageView()
 
   views::ScrollView* const scroller = new views::ScrollView;
   if (is_fullscreen_app_list_enabled_) {
-    scroller->SetBorder(
-        views::CreateEmptyBorder(gfx::Insets(kSeparatorThickness, 0, 0, 0)));
+    // Leaves a placeholder area for the search box and the separator below it.
+    scroller->SetBorder(views::CreateEmptyBorder(
+        gfx::Insets(kSearchBoxPreferredHeight + kSeparatorThickness, 0, 0, 0)));
   }
   scroller->SetContents(contents_view_);
   // Setting clip height is necessary to make ScrollView take into account its
@@ -348,20 +347,22 @@ void SearchResultPageView::OnSearchResultContainerResultsChanged() {
 
 gfx::Rect SearchResultPageView::GetPageBoundsForState(
     AppListModel::State state) const {
-  gfx::Rect onscreen_bounds = GetDefaultContentsBounds();
-
-  if (is_fullscreen_app_list_enabled_) {
-    gfx::Rect search_box_bounds = GetSearchBoxBounds();
-    onscreen_bounds.set_y(search_box_bounds.bottom());
-    onscreen_bounds.set_height(kFullscreenHeight - search_box_bounds.height());
+  if (!is_fullscreen_app_list_enabled_) {
+    return (state == AppListModel::STATE_SEARCH_RESULTS
+                ? GetDefaultContentsBounds()
+                : GetAboveContentsOffscreenBounds(
+                      GetDefaultContentsBounds().size()));
   }
 
-  switch (state) {
-    case AppListModel::STATE_SEARCH_RESULTS:
-      return onscreen_bounds;
-    default:
-      return GetAboveContentsOffscreenBounds(onscreen_bounds.size());
+  if (state != AppListModel::STATE_SEARCH_RESULTS) {
+    // Hides this view behind the search box by using the same bounds.
+    return AppListPage::GetSearchBoxBounds();
   }
+
+  gfx::Rect onscreen_bounds(GetDefaultContentsBounds());
+  onscreen_bounds.set_y(AppListPage::GetSearchBoxBounds().y());
+  onscreen_bounds.set_height(kFullscreenHeight);
+  return onscreen_bounds;
 }
 
 void SearchResultPageView::OnAnimationUpdated(double progress,
@@ -372,6 +373,23 @@ void SearchResultPageView::OnAnimationUpdated(double progress,
     return;
   }
 
+  if (is_fullscreen_app_list_enabled_) {
+    const SearchBoxView* search_box =
+        AppListPage::contents_view()->GetSearchBoxView();
+    const SkColor color = gfx::Tween::ColorValueBetween(
+        progress, search_box->GetSearchBoxColorForState(from_state),
+        search_box->GetSearchBoxColorForState(to_state));
+
+    // Grows this view in the same pace as the search box to make them look
+    // like a single view.
+    SetBackground(base::MakeUnique<SearchResultPageBackground>(
+        color,
+        gfx::Tween::LinearIntValueBetween(
+            progress,
+            SearchBoxView::GetSearchBoxBorderCornerRadiusForState(from_state),
+            SearchBoxView::GetSearchBoxBorderCornerRadiusForState(to_state))));
+  }
+
   gfx::Rect onscreen_bounds(
       GetPageBoundsForState(AppListModel::STATE_SEARCH_RESULTS));
   onscreen_bounds -= bounds().OffsetFromOrigin();
@@ -391,8 +409,9 @@ void SearchResultPageView::OnHidden() {
 gfx::Rect SearchResultPageView::GetSearchBoxBounds() const {
   gfx::Rect rect(AppListPage::GetSearchBoxBounds());
   if (is_fullscreen_app_list_enabled_) {
-    rect.set_x(bounds().x());
-    rect.set_width(bounds().width());
+    gfx::Rect contents_bounds(GetDefaultContentsBounds());
+    rect.set_x(contents_bounds.x());
+    rect.set_width(contents_bounds.width());
   }
   return rect;
 }

ui/app_list/views/search_result_view.cc

@@ -255,7 +255,8 @@ void SearchResultView::PaintButtonContents(gfx::Canvas* canvas) {
   const bool selected = list_view_->IsResultViewSelected(this);
   const bool hover = state() == STATE_HOVERED || state() == STATE_PRESSED;
 
-  canvas->FillRect(content_rect, kCardBackgroundColor);
+  if (!is_fullscreen_app_list_enabled_)
+    canvas->FillRect(content_rect, kCardBackgroundColor);
 
   // Possibly call FillRect a second time (these colours are partially
   // transparent, so the previous FillRect is not redundant).