Improved appearance of app list folders.

The folder image now consists of a white circle with a grey shadow,
rather than a simple grey circle.

Also slightly darkened the entire app list background from #fafafa to

BUG=425444

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

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

chrome/browser/resources/app_list/start_page.css

@@ -5,7 +5,7 @@
 html,
 body,
 #start-page {
-  background-color: rgb(250, 250, 250);
+  background-color: rgb(245, 245, 245);
   height: 100%;
   margin: 0;
   overflow: hidden;

ui/app_list/app_list_constants.cc

@@ -6,7 +6,7 @@
 
 namespace app_list {
 
-const SkColor kContentsBackgroundColor = SkColorSetRGB(0xFA, 0xFA, 0xFA);
+const SkColor kContentsBackgroundColor = SkColorSetRGB(0xF5, 0xF5, 0xF5);
 const SkColor kSearchBoxBackground = SK_ColorWHITE;
 
 // In Windows, transparent background color will cause ugly text rendering,
@@ -43,7 +43,12 @@ const SkColor kGridTitleHoverColor = kGridTitleColor;
 const SkColor kFolderTitleColor = SkColorSetRGB(0x33, 0x33, 0x33);
 const SkColor kFolderTitleHintTextColor = SkColorSetRGB(0xA0, 0xA0, 0xA0);
 // Color of the folder ink bubble.
-const SkColor kFolderBubbleColor = SkColorSetRGB(0xD7, 0xD7, 0xD7);
+const SkColor kFolderBubbleColor = SK_ColorWHITE;
+// Color of the folder bubble shadow.
+const SkColor kFolderShadowColor = SkColorSetRGB(0xBF, 0xBF, 0xBF);
+const float kFolderBubbleRadius = 22;
+const float kFolderShadowRadius = 22.5;
+const float kFolderShadowOffsetY = 1;
 
 // Duration in milliseconds for page transition.
 const int kPageTransitionDurationInMs = 180;

ui/app_list/app_list_constants.h

@@ -38,6 +38,10 @@ APP_LIST_EXPORT extern const SkColor kGridTitleHoverColor;
 APP_LIST_EXPORT extern const SkColor kFolderTitleColor;
 APP_LIST_EXPORT extern const SkColor kFolderTitleHintTextColor;
 APP_LIST_EXPORT extern const SkColor kFolderBubbleColor;
+APP_LIST_EXPORT extern const SkColor kFolderShadowColor;
+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 kPageTransitionDurationInMs;
 APP_LIST_EXPORT extern const int kOverscrollPageTransitionDurationMs;

ui/app_list/folder_image_source.cc

@@ -88,13 +88,20 @@ void FolderImageSource::DrawIcon(gfx::Canvas* canvas,
 }
 
 void FolderImageSource::Draw(gfx::Canvas* canvas) {
-  // Draw folder circle.
-  gfx::Point center = gfx::Point(size().width() / 2, size().height() / 2);
+  // Draw circle for folder shadow.
+  gfx::PointF shadow_center(size().width() / 2, size().height() / 2);
   SkPaint paint;
   paint.setStyle(SkPaint::kFill_Style);
   paint.setAntiAlias(true);
+  paint.setColor(kFolderShadowColor);
+  canvas->sk_canvas()->drawCircle(
+      shadow_center.x(), shadow_center.y(), kFolderShadowRadius, paint);
+  // Draw circle for folder bubble.
+  gfx::PointF bubble_center(shadow_center);
+  bubble_center.Offset(0, -kFolderShadowOffsetY);
   paint.setColor(kFolderBubbleColor);
-  canvas->DrawCircle(center, size().width() / 2, paint);
+  canvas->sk_canvas()->drawCircle(
+      bubble_center.x(), bubble_center.y(), kFolderBubbleRadius, paint);
 
   if (icons_.size() == 0)
     return;