Animate the app list search box shadow.

This CL animates the app list search box shadow as it transitions from
any page to the search result page.

BUG=453653

Review URL: https://codereview.chromium.org/889593003

Cr-Commit-Position: refs/heads/master@{#315260}

ui/app_list/app_list_constants.cc

@@ -50,9 +50,6 @@ const float kFolderBubbleRadius = 23;
 const float kFolderShadowRadius = 23.5;
 const float kFolderShadowOffsetY = 1;
 
-const int kCardShadowBlur = 4;
-const int kCardShadowYOffset = 1;
-const SkColor kCardShadowColor = SkColorSetARGB(0x4C, 0, 0, 0);
 const SkColor kCardBackgroundColor = SK_ColorWHITE;
 
 // Duration in milliseconds for page transition.
@@ -126,4 +123,21 @@ const char kAppListWMClass[] = "chromium_app_list";
 #endif
 #endif
 
+gfx::ShadowValue GetShadowForZHeight(int z_height) {
+  if (z_height <= 0)
+    return gfx::ShadowValue();
+
+  switch (z_height) {
+    case 1:
+      return gfx::ShadowValue(gfx::Point(0, 1), 2,
+                              SkColorSetARGB(0x4C, 0, 0, 0));
+    case 2:
+      return gfx::ShadowValue(gfx::Point(0, 2), 4,
+                              SkColorSetARGB(0x33, 0, 0, 0));
+    default:
+      return gfx::ShadowValue(gfx::Point(0, 8), 12,
+                              SkColorSetARGB(0x3F, 0, 0, 0));
+  }
+}
+
 }  // namespace app_list

ui/app_list/app_list_constants.h

@@ -9,6 +9,7 @@
 #include "ui/app_list/app_list_export.h"
 #include "ui/base/resource/resource_bundle.h"
 #include "ui/gfx/animation/tween.h"
+#include "ui/gfx/shadow_value.h"
 
 namespace app_list {
 
@@ -43,9 +44,6 @@ APP_LIST_EXPORT extern const float kFolderBubbleRadius;
 APP_LIST_EXPORT extern const float kFolderShadowRadius;
 APP_LIST_EXPORT extern const float kFolderShadowOffsetY;
 
-APP_LIST_EXPORT extern const int kCardShadowBlur;
-APP_LIST_EXPORT extern const int kCardShadowYOffset;
-APP_LIST_EXPORT extern const SkColor kCardShadowColor;
 APP_LIST_EXPORT extern const SkColor kCardBackgroundColor;
 
 APP_LIST_EXPORT extern const int kPageTransitionDurationInMs;
@@ -84,6 +82,9 @@ APP_LIST_EXPORT extern const ui::ResourceBundle::FontStyle kItemTextFontStyle;
 APP_LIST_EXPORT extern const char kAppListWMClass[];
 #endif
 
+// Returns the shadow values for a view at |z_height|.
+gfx::ShadowValue APP_LIST_EXPORT GetShadowForZHeight(int z_height);
+
 }  // namespace app_list
 
 #endif  // UI_APP_LIST_APP_LIST_CONSTANTS_H_

ui/app_list/views/contents_animator.cc

@@ -12,11 +12,21 @@
 #include "ui/app_list/views/start_page_view.h"
 #include "ui/gfx/animation/tween.h"
 #include "ui/gfx/geometry/rect.h"
+#include "ui/gfx/shadow_value.h"
 #include "ui/views/view.h"
 #include "ui/views/widget/widget.h"
 
 namespace app_list {
 
+namespace {
+
+gfx::ShadowValue GetSearchBoxShadowForState(AppListModel::State state) {
+  return GetShadowForZHeight(state == AppListModel::STATE_SEARCH_RESULTS ? 1
+                                                                         : 2);
+}
+
+}  // namespace
+
 // ContentsAnimator
 
 ContentsAnimator::ContentsAnimator(ContentsView* contents_view)
@@ -97,9 +107,27 @@ void ContentsAnimator::UpdateSearchBoxForDefaultAnimation(double progress,
   gfx::Rect search_box_rect =
       gfx::Tween::RectValueBetween(progress, search_box_from, search_box_to);
 
+  AppListModel::State from_state =
+      contents_view()->GetStateForPageIndex(from_page);
+  AppListModel::State to_state = contents_view()->GetStateForPageIndex(to_page);
+
+  gfx::ShadowValue original_shadow = GetSearchBoxShadowForState(from_state);
+  gfx::ShadowValue target_shadow = GetSearchBoxShadowForState(to_state);
+
   SearchBoxView* search_box = contents_view()->GetSearchBoxView();
-  search_box->GetWidget()->SetBounds(contents_view()->ConvertRectToWidget(
-      search_box->GetViewBoundsForSearchBoxContentsBounds(search_box_rect)));
+  gfx::Point offset(gfx::Tween::LinearIntValueBetween(
+                        progress, original_shadow.x(), target_shadow.x()),
+                    gfx::Tween::LinearIntValueBetween(
+                        progress, original_shadow.y(), target_shadow.y()));
+  search_box->SetShadow(gfx::ShadowValue(
+      offset, gfx::Tween::LinearIntValueBetween(
+                  progress, original_shadow.blur(), target_shadow.blur()),
+      gfx::Tween::ColorValueBetween(progress, original_shadow.color(),
+                                    target_shadow.color())));
+
+  search_box->GetWidget()->SetBounds(
+      search_box->GetViewBoundsForSearchBoxContentsBounds(
+          contents_view()->ConvertRectToWidget(search_box_rect)));
 }
 
 void ContentsAnimator::ClipSearchResultsPageToOnscreenBounds(

ui/app_list/views/search_box_view.cc

@@ -44,10 +44,6 @@ const int kMenuXOffsetFromButton = -7;
 
 const int kBackgroundBorderCornerRadius = 2;
 
-const int kShadowBlur = 4;
-const int kShadowYOffset = 2;
-const SkColor kShadowColor = SkColorSetARGB(0x33, 0, 0, 0);
-
 // A background that paints a solid white rounded rect with a thin grey border.
 class ExperimentalSearchBoxBackground : public views::Background {
  public:
@@ -86,8 +82,7 @@ SearchBoxView::SearchBoxView(SearchBoxViewDelegate* delegate,
   AddChildView(content_container_);
 
   if (switches::IsExperimentalAppListEnabled()) {
-    SetBorder(make_scoped_ptr(new views::ShadowBorder(gfx::ShadowValue(
-        gfx::Point(0, kShadowYOffset), kShadowBlur, kShadowColor))));
+    SetShadow(GetShadowForZHeight(1));
     back_button_ = new views::ImageButton(this);
     ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
     back_button_->SetImage(
@@ -176,10 +171,15 @@ void SearchBoxView::InvalidateMenu() {
   menu_.reset();
 }
 
+void SearchBoxView::SetShadow(const gfx::ShadowValue& shadow) {
+  SetBorder(make_scoped_ptr(new views::ShadowBorder(shadow)));
+  Layout();
+}
+
 gfx::Rect SearchBoxView::GetViewBoundsForSearchBoxContentsBounds(
     const gfx::Rect& rect) const {
   gfx::Rect view_bounds = rect;
-  view_bounds.Inset(GetInsets().Scale(-1));
+  view_bounds.Inset(-GetInsets());
   return view_bounds;
 }
 

ui/app_list/views/search_box_view.h

@@ -9,6 +9,7 @@
 
 #include "ui/app_list/search_box_model_observer.h"
 #include "ui/app_list/speech_ui_model_observer.h"
+#include "ui/gfx/shadow_value.h"
 #include "ui/views/controls/button/image_button.h"
 #include "ui/views/controls/button/menu_button_listener.h"
 #include "ui/views/controls/textfield/textfield_controller.h"
@@ -48,6 +49,9 @@ class APP_LIST_EXPORT SearchBoxView : public views::View,
   void ClearSearch();
   void InvalidateMenu();
 
+  // Sets the shadow border of the search box.
+  void SetShadow(const gfx::ShadowValue& shadow);
+
   // Returns the bounds to use for the view (including the shadow) given the
   // desired bounds of the search box contents.
   gfx::Rect GetViewBoundsForSearchBoxContentsBounds(

ui/app_list/views/search_result_page_view.cc

@@ -8,6 +8,7 @@
 #include "ui/app_list/app_list_switches.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/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"
 #include "ui/gfx/shadow_value.h"
@@ -28,9 +29,7 @@ const int kTopPadding = 5;
 class SearchCardView : public views::View {
  public:
   explicit SearchCardView(views::View* content_view) {
-    SetBorder(make_scoped_ptr(new views::ShadowBorder(
-        gfx::ShadowValue(gfx::Point(0, kCardShadowYOffset), kCardShadowBlur,
-                         kCardShadowColor))));
+    SetBorder(make_scoped_ptr(new views::ShadowBorder(GetShadowForZHeight(1))));
     SetLayoutManager(new views::FillLayout());
     content_view->set_background(
         views::Background::CreateSolidBackground(kCardBackgroundColor));
@@ -49,9 +48,18 @@ class SearchCardView : public views::View {
 
 SearchResultPageView::SearchResultPageView() : selected_index_(0) {
   if (switches::IsExperimentalAppListEnabled()) {
-    SetLayoutManager(new views::BoxLayout(views::BoxLayout::kVertical,
-                                          kExperimentalWindowPadding,
-                                          kTopPadding, kGroupSpacing));
+    gfx::ShadowValue shadow = GetShadowForZHeight(1);
+    scoped_ptr<views::Border> border(new views::ShadowBorder(shadow));
+
+    gfx::Insets insets = gfx::Insets(kTopPadding, kExperimentalWindowPadding, 0,
+                                     kExperimentalWindowPadding);
+    insets += -border->GetInsets();
+
+    views::BoxLayout* layout =
+        new views::BoxLayout(views::BoxLayout::kVertical, 0, 0, kGroupSpacing);
+    layout->set_inside_border_insets(insets);
+
+    SetLayoutManager(layout);
   } else {
     SetLayoutManager(new views::FillLayout);
   }

ui/app_list/views/speech_view.cc

@@ -109,8 +109,8 @@ bool MicButton::GetHitTestMask(gfx::Path* mask) const {
 SpeechView::SpeechView(AppListViewDelegate* delegate)
     : delegate_(delegate),
       logo_(NULL) {
-  SetBorder(scoped_ptr<views::Border>(new views::ShadowBorder(gfx::ShadowValue(
-      gfx::Point(0, kCardShadowYOffset), kCardShadowBlur, kCardShadowColor))));
+  SetBorder(scoped_ptr<views::Border>(
+      new views::ShadowBorder(GetShadowForZHeight(1))));
 
   // To keep the painting order of the border and the background, this class
   // actually has a single child of 'container' which has white background and