Update the app list search result layout and change app list font.

This CL updates the search results layout and changes the app list font
to no longer be bold.

BUG=442024

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

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

7 files changed, 54 insertions, 21 deletions

diff --git a/ui/app_list/app_list_constants.cc b/ui/app_list/app_list_constants.cc
index f30016d..9f6bf17 100644
--- a/ui/app_list/app_list_constants.cc
+++ b/ui/app_list/app_list_constants.cc
@@ -23,10 +23,18 @@ const SkColor kBottomSeparatorColor = SkColorSetRGB(0xC0, 0xC0, 0xC0);
 // The color of the separator used inside dialogs in the app list.
 const SkColor kDialogSeparatorColor = SkColorSetRGB(0xD1, 0xD1, 0xD1);
 
+// Non-views Mac requires opaque colors to paint correctly.
+#if defined(OS_MACOSX) && !defined(TOOLKIT_VIEWS)
 // The mouse hover colour (3% black over kContentsBackgroundColor).
 const SkColor kHighlightedColor = SkColorSetRGB(0xEE, 0xEE, 0xEE);
 // The keyboard select colour (6% black over kContentsBackgroundColor).
 const SkColor kSelectedColor = SkColorSetRGB(0xE6, 0xE6, 0xE6);
+#else
+// The mouse hover colour (3% black).
+const SkColor kHighlightedColor = SkColorSetARGB(8, 0, 0, 0);
+// The keyboard select colour (6% black).
+const SkColor kSelectedColor = SkColorSetARGB(15, 0, 0, 0);
+#endif
 
 const SkColor kPagerHoverColor = SkColorSetRGB(0xB4, 0xB4, 0xB4);
 const SkColor kPagerNormalColor = SkColorSetRGB(0xE2, 0xE2, 0xE2);
@@ -84,7 +92,7 @@ const int kPreferredRows = 4;
 const int kGridIconDimension = 48;
 
 // Preferred search result icon sizes.
-const int kListIconSize = 32;
+const int kListIconSize = 24;
 const int kTileIconSize = 48;
 
 // Preferred number of columns and rows in the centered app list apps grid.
@@ -118,7 +126,7 @@ const size_t kMaxFolderNameChars = 40;
 
 // Font style for app item labels.
 const ui::ResourceBundle::FontStyle kItemTextFontStyle =
-    ui::ResourceBundle::SmallBoldFont;
+    ui::ResourceBundle::SmallFont;
 
 #if defined(OS_LINUX)
 #if defined(GOOGLE_CHROME_BUILD)
diff --git a/ui/app_list/views/search_box_view.cc b/ui/app_list/views/search_box_view.cc
index a590fb9..888fa68 100644
--- a/ui/app_list/views/search_box_view.cc
+++ b/ui/app_list/views/search_box_view.cc
@@ -32,7 +32,8 @@ namespace app_list {
 
 namespace {
 
-const int kPadding = 14;
+const int kPadding = 16;
+const int kInnerPadding = 24;
 const int kPreferredWidth = 360;
 const int kPreferredHeight = 48;
 
@@ -82,7 +83,7 @@ SearchBoxView::SearchBoxView(SearchBoxViewDelegate* delegate,
   AddChildView(content_container_);
 
   if (switches::IsExperimentalAppListEnabled()) {
-    SetShadow(GetShadowForZHeight(1));
+    SetShadow(GetShadowForZHeight(2));
     back_button_ = new views::ImageButton(this);
     ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
     back_button_->SetImage(
@@ -103,25 +104,21 @@ SearchBoxView::SearchBoxView(SearchBoxViewDelegate* delegate,
   }
 
   views::BoxLayout* layout =
-      new views::BoxLayout(views::BoxLayout::kHorizontal,
-                           kPadding,
-                           0,
-                           kPadding - views::Textfield::kTextPadding);
+      new views::BoxLayout(views::BoxLayout::kHorizontal, kPadding, 0,
+                           kInnerPadding - views::Textfield::kTextPadding);
   content_container_->SetLayoutManager(layout);
   layout->set_cross_axis_alignment(
       views::BoxLayout::CROSS_AXIS_ALIGNMENT_CENTER);
   layout->set_minimum_cross_axis_size(kPreferredHeight);
 
-  ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
-
   search_box_->SetBorder(views::Border::NullBorder());
-  search_box_->SetFontList(rb.GetFontList(ui::ResourceBundle::MediumFont));
   search_box_->set_placeholder_text_color(kHintTextColor);
   search_box_->set_controller(this);
   content_container_->AddChildView(search_box_);
   layout->SetFlexForView(search_box_, 1);
 
 #if !defined(OS_CHROMEOS)
+  ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
   menu_button_ = new views::MenuButton(NULL, base::string16(), this, false);
   menu_button_->SetBorder(views::Border::NullBorder());
   menu_button_->SetImage(views::Button::STATE_NORMAL,
diff --git a/ui/app_list/views/search_result_list_view.cc b/ui/app_list/views/search_result_list_view.cc
index 18e630e..0d47fd4 100644
--- a/ui/app_list/views/search_result_list_view.cc
+++ b/ui/app_list/views/search_result_list_view.cc
@@ -153,6 +153,7 @@ int SearchResultListView::Update() {
   for (size_t i = 0; i < static_cast<size_t>(results_container_->child_count());
        ++i) {
     SearchResultView* result_view = GetResultViewAt(i);
+    result_view->set_is_last_result(i == display_results.size() - 1);
     if (i < display_results.size()) {
       result_view->SetResult(display_results[i]);
       result_view->SetVisible(true);
diff --git a/ui/app_list/views/search_result_page_view.cc b/ui/app_list/views/search_result_page_view.cc
index c575635..b95b754 100644
--- a/ui/app_list/views/search_result_page_view.cc
+++ b/ui/app_list/views/search_result_page_view.cc
@@ -21,8 +21,8 @@ namespace app_list {
 
 namespace {
 
-const int kGroupSpacing = 20;
-const int kTopPadding = 5;
+const int kGroupSpacing = 6;
+const int kTopPadding = 8;
 
 // A container view that ensures the card background and the shadow are painted
 // in the correct order.
diff --git a/ui/app_list/views/search_result_tile_item_list_view.cc b/ui/app_list/views/search_result_tile_item_list_view.cc
index b6b680c..a4e0ddd 100644
--- a/ui/app_list/views/search_result_tile_item_list_view.cc
+++ b/ui/app_list/views/search_result_tile_item_list_view.cc
@@ -9,6 +9,7 @@
 #include "ui/app_list/search_result.h"
 #include "ui/app_list/views/search_result_tile_item_view.h"
 #include "ui/views/background.h"
+#include "ui/views/border.h"
 #include "ui/views/controls/textfield/textfield.h"
 #include "ui/views/layout/box_layout.h"
 
@@ -16,7 +17,8 @@ namespace {
 
 // Layout constants.
 const size_t kNumSearchResultTiles = 5;
-const int kTileSpacing = 10;
+const int kTileSpacing = 7;
+const int kTopBottomPadding = 8;
 
 }  // namespace
 
@@ -30,6 +32,8 @@ SearchResultTileItemListView::SearchResultTileItemListView(
   for (size_t i = 0; i < kNumSearchResultTiles; ++i) {
     SearchResultTileItemView* tile_item = new SearchResultTileItemView(this);
     tile_item->SetParentBackgroundColor(kCardBackgroundColor);
+    tile_item->SetBorder(views::Border::CreateEmptyBorder(
+        kTopBottomPadding, 0, kTopBottomPadding, 0));
     tile_views_.push_back(tile_item);
     AddChildView(tile_item);
   }
diff --git a/ui/app_list/views/search_result_view.cc b/ui/app_list/views/search_result_view.cc
index 1a73c14..2d5efed 100644
--- a/ui/app_list/views/search_result_view.cc
+++ b/ui/app_list/views/search_result_view.cc
@@ -25,16 +25,19 @@ namespace app_list {
 namespace {
 
 const int kPreferredWidth = 300;
-const int kPreferredHeight = 52;
-const int kIconPadding = 14;
-const int kTextTrailPadding = kIconPadding;
+const int kPreferredHeight = 56;
+const int kIconLeftPadding = 16;
+const int kIconRightPadding = 24;
+const int kTextTrailPadding = 16;
+const int kSeparatorPadding = 62;
 const int kBorderSize = 1;
+const SkColor kSeparatorColor = SkColorSetRGB(0xE1, 0xE1, 0xE1);
 
 // Extra margin at the right of the rightmost action icon.
 const int kActionButtonRightMargin = 8;
 
 int GetIconViewWidth() {
-  return kListIconSize + 2 * kIconPadding;
+  return kListIconSize + kIconLeftPadding + kIconRightPadding;
 }
 
 // Creates a RenderText of given |text| and |styles|. Caller takes ownership
@@ -71,6 +74,7 @@ const char SearchResultView::kViewClassName[] = "ui/app_list/SearchResultView";
 SearchResultView::SearchResultView(SearchResultListView* list_view)
     : views::CustomButton(this),
       result_(NULL),
+      is_last_result_(false),
       list_view_(list_view),
       icon_(new views::ImageView),
       actions_view_(new SearchResultActionsView(this)),
@@ -148,7 +152,9 @@ void SearchResultView::Layout() {
 
   gfx::Rect icon_bounds(rect);
   icon_bounds.set_width(GetIconViewWidth());
-  icon_bounds.Inset(kIconPadding, (rect.height() - kListIconSize) / 2);
+  const int top_bottom_padding = (rect.height() - kListIconSize) / 2;
+  icon_bounds.Inset(kIconLeftPadding, top_bottom_padding, kIconRightPadding,
+                    top_bottom_padding);
   icon_bounds.Intersect(rect);
   icon_->SetBoundsRect(icon_bounds);
 
@@ -215,12 +221,25 @@ void SearchResultView::OnPaint(gfx::Canvas* canvas) {
 
   const bool selected = list_view_->IsResultViewSelected(this);
   const bool hover = state() == STATE_HOVERED || state() == STATE_PRESSED;
+
+  canvas->FillRect(content_rect, switches::IsExperimentalAppListEnabled()
+                                     ? kCardBackgroundColor
+                                     : kContentsBackgroundColor);
+
+  // Possibly call FillRect a second time (these colours are partially
+  // transparent, so the previous FillRect is not redundant).
   if (selected)
     canvas->FillRect(content_rect, kSelectedColor);
   else if (hover)
     canvas->FillRect(content_rect, kHighlightedColor);
-  else if (!switches::IsExperimentalAppListEnabled())
-    canvas->FillRect(content_rect, kContentsBackgroundColor);
+
+  if (switches::IsExperimentalAppListEnabled() && !is_last_result_) {
+    gfx::Rect line_rect = content_rect;
+    line_rect.set_height(kBorderSize);
+    line_rect.set_y(content_rect.bottom() - kBorderSize);
+    line_rect.set_x(kSeparatorPadding);
+    canvas->FillRect(line_rect, kSeparatorColor);
+  }
 
   gfx::Rect border_bottom = gfx::SubtractRects(rect, content_rect);
   canvas->FillRect(border_bottom, kResultBorderColor);
diff --git a/ui/app_list/views/search_result_view.h b/ui/app_list/views/search_result_view.h
index f84f7af..10ec425 100644
--- a/ui/app_list/views/search_result_view.h
+++ b/ui/app_list/views/search_result_view.h
@@ -59,6 +59,8 @@ class SearchResultView : public views::CustomButton,
   // Clears the selected action.
   void ClearSelectedAction();
 
+  void set_is_last_result(bool is_last) { is_last_result_ = is_last; }
+
  private:
   friend class app_list::test::SearchResultListViewTest;
 
@@ -93,6 +95,8 @@ class SearchResultView : public views::CustomButton,
 
   SearchResult* result_;  // Owned by AppListModel::SearchResults.
 
+  bool is_last_result_;
+
   // Parent list view. Owned by views hierarchy.
   SearchResultListView* list_view_;