Give Ash material design tray items the correct size and layout

ash/shelf/overflow_button.cc

Index: ash/shelf/overflow_button.cc
diff --git a/ash/shelf/overflow_button.cc b/ash/shelf/overflow_button.cc
index 45130f723213c5343beea48cfee63971836ffb84..2480e6137eafeda75da461cd3acc4d325eb09744 100644
--- a/ash/shelf/overflow_button.cc
+++ b/ash/shelf/overflow_button.cc
@@ -81,18 +81,16 @@ void OverflowButton::PaintBackground(gfx::Canvas* canvas,
 
     // TODO(bruthig|tdanderson): The background should be changed using a
     // fade in/out animation.
-    const int kCornerRadius = 2;
-
     SkPaint background_paint;
     background_paint.setFlags(SkPaint::kAntiAlias_Flag);
     background_paint.setColor(background_color);
-    canvas->DrawRoundRect(bounds, kCornerRadius, background_paint);
+    canvas->DrawRoundRect(bounds, kTrayRoundedBorderRadius, background_paint);
 
     if (shelf_->IsShowingOverflowBubble()) {
       SkPaint highlight_paint;
       highlight_paint.setFlags(SkPaint::kAntiAlias_Flag);
       highlight_paint.setColor(kShelfButtonActivatedHighlightColor);
-      canvas->DrawRoundRect(bounds, kCornerRadius, highlight_paint);
+      canvas->DrawRoundRect(bounds, kTrayRoundedBorderRadius, highlight_paint);
     }
   } else {
     ResourceBundle& rb = ResourceBundle::GetSharedInstance();
@@ -145,14 +143,13 @@ gfx::Rect OverflowButton::CalculateButtonBounds() {
   ResourceBundle& rb = ResourceBundle::GetSharedInstance();
   if (MaterialDesignController::IsShelfMaterial()) {
     if (shelf_->IsHorizontalAlignment()) {
-      bounds = gfx::Rect((bounds.x() + (bounds.width() - kShelfItemSizeMD) / 2),
-                         bounds.y() + (bounds.height() - kShelfItemSizeMD) / 2,
-                         kShelfItemSizeMD, kShelfItemSizeMD);
+      bounds = gfx::Rect((bounds.x() + (bounds.width() - kTrayItemSize) / 2),

[James Cook, 2016/06/27 18:04:12]

It's odd that you're using a constant named "tray" in code that is sizing a
shelf item that isn't related to the system tray. Maybe continue to use separate
constants? Or come up with a name that implies both?

[tdanderson, 2016/06/27 21:29:42]

This has been in the back of my mind for a while now. I realize "the shelf" and
"the tray [area]" are two different surfaces, but I definitely want to share the
same constant to reinforce the fact that 32dp is a standard size used in MD.
Unfortunately I can't think of any (good) names that don't contain either
"shelf" or "tray". 

Then there is the question of where the constant should live; there is a handful
of constants common to both (button size, icon color, button background when
shelf is transparent, etc) that may benefit from being moved to a new constants
file.

WDYT?

[James Cook, 2016/06/27 22:53:21]

Yeah, I can't think of a good shared name either.

Visually the "shelf" is a superset of shelf+tray, so if there are shared
constants I would name them "shelf" and stick them somewhere shelf-y.

[tdanderson, 2016/06/28 16:32:44]

As discussed, in this CL I will un-blur the lines between the shelf using tray
constants and vice versa. However the longer term plan is to refactor all common
constants to a separate place. Filed crbug.com/623987 to track that work.

+                         bounds.y() + (bounds.height() - kTrayItemSize) / 2,
+                         kTrayItemSize, kTrayItemSize);
     } else {
-      bounds =
-          gfx::Rect(bounds.x() + ((bounds.height() - kShelfItemSizeMD) / 2),
-                    bounds.y() + (bounds.width() - kShelfItemSizeMD) / 2,
-                    kShelfItemSizeMD, kShelfItemSizeMD);
+      bounds = gfx::Rect(bounds.x() + ((bounds.height() - kTrayItemSize) / 2),

[yiyix, 2016/06/27 18:39:43]

May create a constant for (bounds.height() - kTrayItemSize) / 2 and
(bounds.width() - kTrayItemSize) / 2)?

[tdanderson, 2016/06/27 21:29:42]

Done.

+                         bounds.y() + (bounds.width() - kTrayItemSize) / 2,
+                         kTrayItemSize, kTrayItemSize);
     }
   } else {
     const gfx::ImageSkia* background =