Adds emoji/handwriting/vocie buttons on opt-in IME menu.

ash/common/system/chromeos/ime_menu/ime_menu_tray.cc

Index: ash/common/system/chromeos/ime_menu/ime_menu_tray.cc
diff --git a/ash/common/system/chromeos/ime_menu/ime_menu_tray.cc b/ash/common/system/chromeos/ime_menu/ime_menu_tray.cc
index 6defd83cdc7e06b58e5413e14f2ea3480baf0199..cff797ff253526ce541df6fe36f09d7ec01d8c83 100644
--- a/ash/common/system/chromeos/ime_menu/ime_menu_tray.cc
+++ b/ash/common/system/chromeos/ime_menu/ime_menu_tray.cc
@@ -25,12 +25,24 @@
 #include "grit/ash_strings.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/base/resource/resource_bundle.h"
+#include "ui/gfx/color_palette.h"
+#include "ui/gfx/paint_vector_icon.h"
+#include "ui/gfx/vector_icons_public.h"
 #include "ui/views/controls/label.h"
 #include "ui/views/layout/box_layout.h"
 
 namespace ash {
 
 namespace {
+// The button icon size in dp.
+const int kButtonIconSize = 20;

[tdanderson, 2016/09/19 15:44:34]

There is already a constant kMenuIconSize in tray_constants that is used by
different surfaces. Can you please use that one instead?

[Azure Wei, 2016/09/20 01:05:45]

Done.

+
+// The height of the button view in dp.
+const int kButtonViewHeight = 56;

[tdanderson, 2016/09/19 15:44:34]

I have a CL in progress that will be adding kMenuButtonSize = 48 in
tray_constants. Would you mind making that change here? You can then return
kMenuButtonSize + 2 * kButtonInsideBorderSpacing in GetHeightForWidth().

[Azure Wei, 2016/09/20 01:05:44]

Done.

+
+// The additional space between the child view area and the host button view
+// border in dp.
+const int kButtonInsideBorderSpacing = 4;

[tdanderson, 2016/09/19 15:44:34]

This padding constant of 4 will be seen a lot in Ash MD. Can you please add a
TODO(tdanderson): move this constant into tray_constants and share across
different UI surfaces?

[Azure Wei, 2016/09/20 01:05:45]

Done.

 
 // Returns the max height of ImeListView.
 int GetImeListViewMaxHeight() {
@@ -52,29 +64,25 @@ class ImeMenuLabel : public views::Label {
 
   // views:Label:
   gfx::Size GetPreferredSize() const override {
-    return gfx::Size(kTrayImeIconSize, kTrayImeIconSize);
+    const int tray_constant = GetTrayConstant(TRAY_IME_MENU_ICON);
+    return gfx::Size(tray_constant, tray_constant);
+  }
+  int GetHeightForWidth(int width) const override {
+    return GetTrayConstant(TRAY_IME_MENU_ICON);
   }
-  int GetHeightForWidth(int width) const override { return kTrayImeIconSize; }
 
  private:
   DISALLOW_COPY_AND_ASSIGN(ImeMenuLabel);
 };
 
 TrayPopupHeaderButton* CreateImeMenuButton(views::ButtonListener* listener,
-                                           int enabled_resource_id,
-                                           int disabled_resource_id,
-                                           int enabled_resource_id_hover,
-                                           int disabled_resource_id_hover,
-                                           int accessible_name_id,
-                                           int message_id,
-                                           int right_border) {
-  TrayPopupHeaderButton* button =
-      new TrayPopupHeaderButton(listener, enabled_resource_id,
-                                disabled_resource_id, enabled_resource_id_hover,
-                                disabled_resource_id_hover, accessible_name_id);
-  button->SetTooltipText(l10n_util::GetStringUTF16(message_id));
-  button->SetBorder(views::Border::CreateSolidSidedBorder(0, 0, 0, right_border,
-                                                          kBorderDarkColor));
+                                           gfx::VectorIconId vector_id,
+                                           int accessible_name_id) {
+  TrayPopupHeaderButton* button = new TrayPopupHeaderButton(
+      listener,
+      CreateVectorIcon(vector_id, kButtonIconSize, gfx::kChromeIconGrey),

[tdanderson, 2016/09/19 15:44:34]

Please use kMenuIconColor (found in tray_constants) instead of
gfx::kChromeIconGrey here.

[Azure Wei, 2016/09/20 01:05:45]

Done.

+      accessible_name_id);
+  button->SetTooltipText(l10n_util::GetStringUTF16(accessible_name_id));
   return button;
 }
 
@@ -84,35 +92,27 @@ class ImeButtonsView : public views::View,
                        public ViewClickListener {
  public:
   ImeButtonsView(bool show_emoji_button,
-                 bool show_voice_button,
                  bool show_handwriting_button,
+                 bool show_voice_button,
                  bool show_settings_button) {
     SetBorder(
         views::Border::CreateSolidSidedBorder(1, 0, 0, 0, kBorderDarkColor));
 
     // If there's only one settings button, the bottom should be a label with
     // normal background. Otherwise, show button icons with header background.
-    if (show_settings_button && !show_emoji_button && !show_voice_button &&
-        !show_handwriting_button) {
+    if (show_settings_button && !show_emoji_button &&
+        !show_handwriting_button && !show_voice_button) {
       ShowOneSettingButton();
     } else {
-      ShowButtons(show_emoji_button, show_voice_button, show_handwriting_button,
+      ShowButtons(show_emoji_button, show_handwriting_button, show_voice_button,
                   show_settings_button);
     }
-    // TODO(azurewei): Add logic of switching between the two states when the
-    // menu is shown.
   }
 
   ~ImeButtonsView() override {}
 
   // views::View:
-  gfx::Size GetPreferredSize() const override {
-    int size = GetTrayConstant(TRAY_POPUP_ITEM_HEIGHT);
-    return gfx::Size(size, size);
-  }
-  int GetHeightForWidth(int width) const override {
-    return GetTrayConstant(TRAY_POPUP_ITEM_HEIGHT);
-  }
+  int GetHeightForWidth(int width) const override { return kButtonViewHeight; }
 
   // views::ButtonListener:
   void ButtonPressed(views::Button* sender, const ui::Event& event) override {
@@ -151,41 +151,42 @@ class ImeButtonsView : public views::View,
 
   // Shows the UI of more than one buttons.
   void ShowButtons(bool show_emoji_button,
-                   bool show_voice_button,
                    bool show_handwriting_button,
+                   bool show_voice_button,
                    bool show_settings_button) {
-    set_background(
-        views::Background::CreateSolidBackground(kHeaderBackgroundColor));
-    auto* box_layout = new views::BoxLayout(
-        views::BoxLayout::kHorizontal, kTrayImeBottomRowPadding,
-        kTrayImeBottomRowPadding, kTrayImeBottomRowPaddingBetweenItems);
-    box_layout->SetDefaultFlex(1);
+    auto* box_layout = new views::BoxLayout(views::BoxLayout::kHorizontal,
+                                            kButtonInsideBorderSpacing,
+                                            kButtonInsideBorderSpacing, 0);
     SetLayoutManager(box_layout);
 
     if (show_emoji_button) {
-      // TODO(azurewei): Creates the proper button with icons.
+      emoji_button_ = CreateImeMenuButton(this, gfx::VectorIconId::EMOTICON,
+                                          IDS_ASH_STATUS_TRAY_IME_EMOJI);
+      AddChildView(emoji_button_);
     }
 
-    if (show_voice_button) {
-      // TODO(azurewei): Creates the proper button with icons.
+    if (show_handwriting_button) {
+      handwriting_button_ = CreateImeMenuButton(
+          this, gfx::VectorIconId::WRITE, IDS_ASH_STATUS_TRAY_IME_HANDWRITING);
+      AddChildView(handwriting_button_);
     }
 
-    if (show_handwriting_button) {
-      // TODO(azurewei): Creates the proper button with icons.
+    if (show_voice_button) {
+      voice_button_ = CreateImeMenuButton(this, gfx::VectorIconId::MICROPHONE,
+                                          IDS_ASH_STATUS_TRAY_IME_VOICE);
+      AddChildView(voice_button_);
     }
 
     if (show_settings_button) {
-      settings_button_ = CreateImeMenuButton(
-          this, IDR_AURA_UBER_TRAY_SETTINGS, IDR_AURA_UBER_TRAY_SETTINGS,
-          IDR_AURA_UBER_TRAY_SETTINGS, IDR_AURA_UBER_TRAY_SETTINGS,
-          IDS_ASH_STATUS_TRAY_SETTINGS, IDS_ASH_STATUS_TRAY_SETTINGS, 0);
+      settings_button_ = CreateImeMenuButton(this, gfx::VectorIconId::SETTINGS,

[tdanderson, 2016/09/19 15:44:34]

The preexisting settings icon actually doesn't look very good when drawn on a
20x20 pixel grid. I'm in the process of modifying this icon and can update this
call site myself - can you please add a TODO(tdanderson): update this icon ?

[Azure Wei, 2016/09/20 01:05:45]

Done.

+                                             IDS_ASH_STATUS_TRAY_IME_SETTINGS);
       AddChildView(settings_button_);
     }
   }
 
   TrayPopupHeaderButton* emoji_button_;
-  TrayPopupHeaderButton* voice_button_;
   TrayPopupHeaderButton* handwriting_button_;
+  TrayPopupHeaderButton* voice_button_;
   TrayPopupHeaderButton* settings_button_;
   HoverHighlightView* one_settings_button_view_;