Add a card background to the app list search result groups.

This CL adds a white rect with a shadow to the background of each group
of app list search results.

BUG=416756

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

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

ui/app_list/app_list_constants.cc

@@ -50,6 +50,11 @@ const float kFolderBubbleRadius = 22;
 const float kFolderShadowRadius = 22.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.
 const int kPageTransitionDurationInMs = 180;
 

ui/app_list/app_list_constants.h

@@ -43,6 +43,11 @@ 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;
 APP_LIST_EXPORT extern const int kOverscrollPageTransitionDurationMs;
 APP_LIST_EXPORT extern const int kFolderTransitionInDurationMs;

ui/app_list/views/search_result_page_view.cc

@@ -9,13 +9,38 @@
 #include "ui/app_list/views/app_list_main_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/views/background.h"
 #include "ui/views/layout/box_layout.h"
+#include "ui/views/layout/fill_layout.h"
+#include "ui/views/shadow_border.h"
 
 namespace app_list {
 
 namespace {
 
 const int kGroupSpacing = 20;
+const int kTopPadding = 5;
+
+// A container view that ensures the card background and the shadow are painted
+// in the correct order.
+class SearchCardView : public views::View {
+ public:
+  SearchCardView(views::View* content_view) {
+    SetBorder(make_scoped_ptr(new views::ShadowBorder(
+        kCardShadowBlur, kCardShadowColor, kCardShadowYOffset, 0)));
+    SetLayoutManager(new views::FillLayout());
+    content_view->set_background(
+        views::Background::CreateSolidBackground(kCardBackgroundColor));
+    AddChildView(content_view);
+  }
+
+  ~SearchCardView() override {}
+
+  void ChildPreferredSizeChanged(views::View* child) override {
+    Layout();
+    PreferredSizeChanged();
+  }
+};
 
 }  // namespace
 
@@ -25,14 +50,14 @@ SearchResultPageView::SearchResultPageView(AppListMainView* app_list_main_view,
           new SearchResultListView(app_list_main_view, view_delegate)),
       tiles_view_(new SearchResultTileItemListView()) {
   SetLayoutManager(new views::BoxLayout(views::BoxLayout::kVertical,
-                                        kExperimentalWindowPadding, 0,
+                                        kExperimentalWindowPadding, kTopPadding,
                                         kGroupSpacing));
 
   // The view containing the search results.
-  AddChildView(results_view_);
+  AddChildView(new SearchCardView(results_view_));
 
   // The view containing the start page tiles.
-  AddChildView(tiles_view_);
+  AddChildView(new SearchCardView(tiles_view_));
 
   AppListModel::SearchResults* model = view_delegate->GetModel()->results();
   results_view_->SetResults(model);

ui/app_list/views/search_result_view.cc

@@ -7,6 +7,7 @@
 #include <algorithm>
 
 #include "ui/app_list/app_list_constants.h"
+#include "ui/app_list/app_list_switches.h"
 #include "ui/app_list/search_result.h"
 #include "ui/app_list/views/progress_bar_view.h"
 #include "ui/app_list/views/search_result_actions_view.h"
@@ -209,15 +210,16 @@ void SearchResultView::OnPaint(gfx::Canvas* canvas) {
     return;
 
   gfx::Rect content_rect(rect);
-  content_rect.set_height(rect.height() - kBorderSize);
+  if (!switches::IsExperimentalAppListEnabled())
+    content_rect.set_height(rect.height() - kBorderSize);
 
   const bool selected = list_view_->IsResultViewSelected(this);
   const bool hover = state() == STATE_HOVERED || state() == STATE_PRESSED;
   if (selected)
     canvas->FillRect(content_rect, kSelectedColor);
   else if (hover)
     canvas->FillRect(content_rect, kHighlightedColor);
-  else
+  else if (!switches::IsExperimentalAppListEnabled())
     canvas->FillRect(content_rect, kContentsBackgroundColor);
 
   gfx::Rect border_bottom = gfx::SubtractRects(rect, content_rect);

ui/app_list/views/speech_view.cc

@@ -6,6 +6,7 @@
 
 #include "base/strings/utf_string_conversions.h"
 #include "third_party/skia/include/core/SkPath.h"
+#include "ui/app_list/app_list_constants.h"
 #include "ui/app_list/app_list_model.h"
 #include "ui/app_list/app_list_view_delegate.h"
 #include "ui/app_list/speech_ui_model.h"
@@ -28,8 +29,6 @@ namespace app_list {
 
 namespace {
 
-const int kShadowOffset = 1;
-const int kShadowBlur = 4;
 const int kSpeechViewMaxHeight = 300;
 const int kMicButtonMargin = 12;
 const int kTextMargin = 32;
@@ -41,7 +40,6 @@ const int kIndicatorCenterOffsetY = -1;
 const int kIndicatorRadiusMinOffset = -3;
 const int kIndicatorRadiusMax = 100;
 const int kIndicatorAnimationDuration = 100;
-const SkColor kShadowColor = SkColorSetARGB(0.3 * 255, 0, 0, 0);
 const SkColor kHintTextColor = SkColorSetRGB(119, 119, 119);
 const SkColor kResultTextColor = SkColorSetRGB(178, 178, 178);
 const SkColor kSoundLevelIndicatorColor = SkColorSetRGB(219, 219, 219);
@@ -111,9 +109,8 @@ SpeechView::SpeechView(AppListViewDelegate* delegate)
     : delegate_(delegate),
       logo_(NULL) {
   SetBorder(scoped_ptr<views::Border>(
-      new views::ShadowBorder(kShadowBlur,
-                              kShadowColor,
-                              kShadowOffset,  // Vertical offset.
+      new views::ShadowBorder(kCardShadowBlur, kCardShadowColor,
+                              kCardShadowYOffset,  // Vertical offset.
                               0)));
 
   // To keep the painting order of the border and the background, this class

ui/app_list/views/start_page_view.cc

@@ -129,6 +129,7 @@ void StartPageView::InitTilesContainer() {
   for (size_t i = 0; i < kNumStartPageTiles; ++i) {
     SearchResultTileItemView* tile_item = new SearchResultTileItemView();
     tiles_container_->AddChildView(tile_item);
+    tile_item->SetTitleBackgroundColor(kLabelBackgroundColor);
     search_result_tile_views_.push_back(tile_item);
   }
 
@@ -137,6 +138,7 @@ void StartPageView::InitTilesContainer() {
       app_list_main_view_->contents_view(),
       view_delegate_->GetModel()->top_level_item_list());
   all_apps_button_->UpdateIcon();
+  all_apps_button_->SetTitleBackgroundColor(kLabelBackgroundColor);
   tiles_container_->AddChildView(all_apps_button_);
 }
 

ui/app_list/views/tile_item_view.cc

@@ -35,8 +35,6 @@ TileItemView::TileItemView()
   ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
   title_->SetAutoColorReadabilityEnabled(false);
   title_->SetEnabledColor(kGridTitleColor);
-  title_->set_background(views::Background::CreateSolidBackground(
-      kLabelBackgroundColor));
   title_->SetFontList(rb.GetFontList(kItemTextFontStyle));
   title_->SetHorizontalAlignment(gfx::ALIGN_CENTER);
 
@@ -47,6 +45,10 @@ TileItemView::TileItemView()
 TileItemView::~TileItemView() {
 }
 
+void TileItemView::SetTitleBackgroundColor(SkColor color) {
+  title_->set_background(views::Background::CreateSolidBackground(color));
+}
+
 void TileItemView::SetIcon(const gfx::ImageSkia& icon) {
   icon_->SetImage(icon);
 }

ui/app_list/views/tile_item_view.h

@@ -28,6 +28,8 @@ class APP_LIST_EXPORT TileItemView : public views::CustomButton,
   TileItemView();
   ~TileItemView() override;
 
+  void SetTitleBackgroundColor(SkColor color);
+
  protected:
   void SetIcon(const gfx::ImageSkia& icon);