Implement part of aura menu spec described in:

http://www.corp.google.com/~kenmoore/mocks/chromeos/Misc_2012/Menus/markup1/menu4.html
The following are implemented:
min distance between item and shortcut: 20px
divider 1px solid color #dadada
2px above/below divider
20px right margin: between arrow/shortcut to right edge of menu
28 px left margin: between label and left edge of menu, with or without icon
icon/checkmarks: 8 px left margin.
submenu: overlap 3 px horizotally, this include the edge of the submenu and parent menu border, which are 1 px each.
submenu arrow: 20px right margin.

BUG=122858
TEST=Aura menu UI changes conform to aura menu spec as described above.

Review URL: https://chromiumcodereview.appspot.com/10387014

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@135843 0039d316-1c4b-4281-b951-d872f2087c98

10 files changed, 52 insertions, 19 deletions

diff --git a/ui/gfx/native_theme.h b/ui/gfx/native_theme.h
index 8e7cdfa..2a83dba 100644
--- a/ui/gfx/native_theme.h
+++ b/ui/gfx/native_theme.h
@@ -231,6 +231,7 @@ class UI_EXPORT NativeTheme {
     kColorId_EnabledMenuItemForegroundColor,
     kColorId_DisabledMenuItemForegroundColor,
     kColorId_FocusedMenuItemBackgroundColor,
+    kColorId_MenuSeparatorColor,
     // Label
     kColorId_LabelEnabledColor,
     kColorId_LabelDisabledColor,
diff --git a/ui/gfx/native_theme_aura.cc b/ui/gfx/native_theme_aura.cc
index 51683513..978c52d 100644
--- a/ui/gfx/native_theme_aura.cc
+++ b/ui/gfx/native_theme_aura.cc
@@ -32,6 +32,7 @@ const SkColor kTextButtonHoverColor = kTextButtonEnabledColor;
 const SkColor kEnabledMenuItemForegroundColor = kTextButtonEnabledColor;
 const SkColor kDisabledMenuItemForegroundColor = kTextButtonDisabledColor;
 const SkColor kFocusedMenuItemBackgroundColor = SkColorSetRGB(0xF1, 0xF1, 0xF1);
+const SkColor kMenuSeparatorColor = SkColorSetRGB(0xDA, 0xDA, 0xDA);
 // Label:
 const SkColor kLabelEnabledColor = kTextButtonEnabledColor;
 const SkColor kLabelDisabledColor = kTextButtonDisabledColor;
@@ -102,6 +103,8 @@ SkColor NativeThemeAura::GetSystemColor(ColorId color_id) const {
       return kDisabledMenuItemForegroundColor;
     case kColorId_FocusedMenuItemBackgroundColor:
       return kFocusedMenuItemBackgroundColor;
+    case kColorId_MenuSeparatorColor:
+      return kMenuSeparatorColor;
 
     // Label
     case kColorId_LabelEnabledColor:
diff --git a/ui/gfx/native_theme_win.cc b/ui/gfx/native_theme_win.cc
index 8182cc1..28574a2 100644
--- a/ui/gfx/native_theme_win.cc
+++ b/ui/gfx/native_theme_win.cc
@@ -46,6 +46,7 @@ const SkColor kTextButtonHoverColor = kTextButtonEnabledColor;
 const SkColor kEnabledMenuItemForegroundColor = kTextButtonEnabledColor;
 const SkColor kDisabledMenuItemForegroundColor = kTextButtonDisabledColor;
 const SkColor kFocusedMenuItemBackgroundColor = SkColorSetRGB(246, 249, 253);
+const SkColor kMenuSeparatorColor = SkColorSetARGB(50, 0, 0, 0);
 // Label:
 const SkColor kLabelEnabledColor = color_utils::GetSysSkColor(COLOR_WINDOWTEXT);
 const SkColor kLabelDisabledColor = color_utils::GetSysSkColor(COLOR_GRAYTEXT);
@@ -403,6 +404,8 @@ SkColor NativeThemeWin::GetSystemColor(ColorId color_id) const {
       return kDisabledMenuItemForegroundColor;
     case kColorId_FocusedMenuItemBackgroundColor:
       return kFocusedMenuItemBackgroundColor;
+    case kColorId_MenuSeparatorColor:
+      return kMenuSeparatorColor;
 
     // Label
     case kColorId_LabelEnabledColor:
diff --git a/ui/views/controls/menu/menu_config.cc b/ui/views/controls/menu/menu_config.cc
index 4f62288..bc097ce 100644
--- a/ui/views/controls/menu/menu_config.cc
+++ b/ui/views/controls/menu/menu_config.cc
@@ -16,6 +16,7 @@ MenuConfig::MenuConfig()
     : text_color(SK_ColorBLACK),
       submenu_horizontal_margin_size(3),
       submenu_vertical_margin_size(3),
+      submenu_horizontal_inset(3),
       item_top_margin(3),
       item_bottom_margin(4),
       item_no_icon_top_margin(1),
@@ -38,7 +39,9 @@ MenuConfig::MenuConfig()
       scroll_arrow_height(3),
       label_to_accelerator_padding(10),
       item_min_height(0),
-      show_accelerators(true) {
+      show_accelerators(true),
+      always_use_icon_to_label_padding(false),
+      align_arrow_and_shortcut(false) {
   // Use 40px tall menu items when running in touch optimized mode.
   if (CommandLine::ForCurrentProcess()->HasSwitch(
       switches::kTouchOptimizedUI)) {
diff --git a/ui/views/controls/menu/menu_config.h b/ui/views/controls/menu/menu_config.h
index 5659214..1306dae 100644
--- a/ui/views/controls/menu/menu_config.h
+++ b/ui/views/controls/menu/menu_config.h
@@ -37,6 +37,11 @@ struct VIEWS_EXPORT MenuConfig {
   // Submenu vertical margin size.
   int submenu_vertical_margin_size;
 
+  // Submenu horizontal inset with parent menu. This is the horizontal overlap
+  // between the submenu and its parent menu, not including the borders of
+  // submenu and parent menu.
+  int submenu_horizontal_inset;
+
   // Margins between the top of the item and the label.
   int item_top_margin;
 
@@ -100,6 +105,12 @@ struct VIEWS_EXPORT MenuConfig {
   // Whether the keyboard accelerators are visible.
   bool show_accelerators;
 
+  // True if icon to label padding is always added with or without icon.
+  bool always_use_icon_to_label_padding;
+
+  // True if submenu arrow and shortcut right edge should be aligned.
+  bool align_arrow_and_shortcut;
+
  private:
   // Creates and configures a new MenuConfig as appropriate for the current
   // platform.
diff --git a/ui/views/controls/menu/menu_config_views.cc b/ui/views/controls/menu/menu_config_views.cc
index 3f40629..0142240 100644
--- a/ui/views/controls/menu/menu_config_views.cc
+++ b/ui/views/controls/menu/menu_config_views.cc
@@ -19,14 +19,23 @@ MenuConfig* MenuConfig::Create() {
       gfx::NativeTheme::kColorId_EnabledMenuItemForegroundColor);
   config->submenu_horizontal_margin_size = 0;
   config->submenu_vertical_margin_size = 2;
+  config->submenu_horizontal_inset = 1;
   ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
   config->font = rb.GetFont(ResourceBundle::BaseFont);
+  config->item_left_margin = 8;
+  config->arrow_to_edge_padding = 20;
+  config->icon_to_label_padding = 4;
+  config->separator_height = 5;
   config->arrow_width = rb.GetImageNamed(IDR_MENU_ARROW).ToSkBitmap()->width();
   const SkBitmap* check = rb.GetImageNamed(IDR_MENU_CHECK).ToSkBitmap();
   // Add 4 to force some padding between check and label.
   config->check_width = check->width() + 4;
   config->check_height = check->height();
   config->item_min_height = 30;
+  config->label_to_arrow_padding = 20;
+  config->label_to_accelerator_padding = 20;
+  config->always_use_icon_to_label_padding = true;
+  config->align_arrow_and_shortcut = true;
 
   return config;
 }
diff --git a/ui/views/controls/menu/menu_controller.cc b/ui/views/controls/menu/menu_controller.cc
index fd34193..592d724 100644
--- a/ui/views/controls/menu/menu_controller.cc
+++ b/ui/views/controls/menu/menu_controller.cc
@@ -45,9 +45,6 @@ static const int kShowDelay = 400;
 // Amount of time from when the drop exits the menu and the menu is hidden.
 static const int kCloseOnExitTime = 1200;
 
-// Amount to inset submenus.
-static const int kSubmenuHorizontalInset = 3;
-
 namespace views {
 
 namespace {
@@ -1576,25 +1573,27 @@ gfx::Rect MenuController::CalculateMenuBounds(MenuItemView* item,
     bool layout_is_rtl = base::i18n::IsRTL();
     bool create_on_the_right = (prefer_leading && !layout_is_rtl) ||
                                (!prefer_leading && layout_is_rtl);
+    int submenu_horizontal_inset =
+            MenuConfig::instance().submenu_horizontal_inset;
 
     if (create_on_the_right) {
-      x = item_loc.x() + item->width() - kSubmenuHorizontalInset;
+      x = item_loc.x() + item->width() - submenu_horizontal_inset;
       if (state_.monitor_bounds.width() != 0 &&
           x + pref.width() > state_.monitor_bounds.right()) {
         if (layout_is_rtl)
           *is_leading = true;
         else
           *is_leading = false;
-        x = item_loc.x() - pref.width() + kSubmenuHorizontalInset;
+        x = item_loc.x() - pref.width() + submenu_horizontal_inset;
       }
     } else {
-      x = item_loc.x() - pref.width() + kSubmenuHorizontalInset;
+      x = item_loc.x() - pref.width() + submenu_horizontal_inset;
       if (state_.monitor_bounds.width() != 0 && x < state_.monitor_bounds.x()) {
         if (layout_is_rtl)
           *is_leading = false;
         else
           *is_leading = true;
-        x = item_loc.x() + item->width() - kSubmenuHorizontalInset;
+        x = item_loc.x() + item->width() - submenu_horizontal_inset;
       }
     }
     y = item_loc.y() - MenuConfig::instance().submenu_vertical_margin_size;
diff --git a/ui/views/controls/menu/menu_item_view.cc b/ui/views/controls/menu/menu_item_view.cc
index 04ec3ce..ddaf133 100644
--- a/ui/views/controls/menu/menu_item_view.cc
+++ b/ui/views/controls/menu/menu_item_view.cc
@@ -537,17 +537,21 @@ void MenuItemView::UpdateMenuPartSizes(bool has_icons) {
   MenuConfig::Reset();
   const MenuConfig& config = MenuConfig::instance();
 
-  item_right_margin_ = config.label_to_arrow_padding + config.arrow_width +
-      config.arrow_to_edge_padding;
+  if (config.align_arrow_and_shortcut)
+    item_right_margin_ = config.arrow_to_edge_padding;
+  else
+    item_right_margin_ = config.label_to_arrow_padding + config.arrow_width +
+                         config.arrow_to_edge_padding;
 
-  if (has_icons) {
+  if (config.always_use_icon_to_label_padding)
     label_start_ = config.item_left_margin + config.check_width +
                    config.icon_to_label_padding;
-  } else {
+  else
     // If there are no icons don't pad by the icon to label padding. This
     // makes us look close to system menus.
-    label_start_ = config.item_left_margin + config.check_width;
-  }
+    label_start_ = config.item_left_margin + config.check_width +
+                   (has_icons ? config.icon_to_label_padding : 0);
+
   if (config.render_gutter)
     label_start_ += config.gutter_width + config.gutter_to_label;
 
diff --git a/ui/views/controls/menu/menu_item_view_views.cc b/ui/views/controls/menu/menu_item_view_views.cc
index 1b3e491..0c6cc49 100644
--- a/ui/views/controls/menu/menu_item_view_views.cc
+++ b/ui/views/controls/menu/menu_item_view_views.cc
@@ -97,8 +97,8 @@ void MenuItemView::PaintButton(gfx::Canvas* canvas, PaintButtonMode mode) {
 
   // Render the submenu indicator (arrow).
   if (HasSubmenu()) {
-    gfx::Rect arrow_bounds(this->width() - item_right_margin_ +
-                           config.label_to_arrow_padding,
+    gfx::Rect arrow_bounds(this->width() - config.arrow_width -
+                               config.arrow_to_edge_padding,
                            top_margin + (available_height -
                                          config.arrow_width) / 2,
                            config.arrow_width, height());
diff --git a/ui/views/controls/menu/menu_separator_views.cc b/ui/views/controls/menu/menu_separator_views.cc
index 839b806..484825f 100644
--- a/ui/views/controls/menu/menu_separator_views.cc
+++ b/ui/views/controls/menu/menu_separator_views.cc
@@ -6,21 +6,21 @@
 
 #include "third_party/skia/include/core/SkColor.h"
 #include "ui/gfx/canvas.h"
+#include "ui/gfx/native_theme.h"
 #include "ui/views/controls/menu/menu_config.h"
 
 namespace {
 
 const int kSeparatorHeight = 1;
 
-const SkColor kSeparatorColor = SkColorSetARGB(50, 0, 0, 0);
-
 }  // namespace
 
 namespace views {
 
 void MenuSeparator::OnPaint(gfx::Canvas* canvas) {
   canvas->FillRect(gfx::Rect(0, height() / 2, width(), kSeparatorHeight),
-                   kSeparatorColor);
+      gfx::NativeTheme::instance()->GetSystemColor(
+          gfx::NativeTheme::kColorId_MenuSeparatorColor));
 }
 
 gfx::Size MenuSeparator::GetPreferredSize() {