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..a29109a03e88fb892cbd8daa66c8da6ec0ba578f 100644
--- a/ash/common/system/chromeos/ime_menu/ime_menu_tray.cc
+++ b/ash/common/system/chromeos/ime_menu/ime_menu_tray.cc
@@ -20,17 +20,24 @@
 #include "ash/common/wm_root_window_controller.h"
 #include "ash/common/wm_shell.h"
 #include "ash/common/wm_window.h"
+#include "ash/resources/vector_icons/vector_icons.h"
 #include "base/strings/utf_string_conversions.h"
 #include "grit/ash_resources.h"
 #include "grit/ash_strings.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/base/resource/resource_bundle.h"
+#include "ui/gfx/paint_vector_icon.h"
+#include "ui/gfx/vector_icons_public.h"

[tdanderson, 2016/09/20 13:11:12]

nit: this is not needed since you're including vector_icons.h

[Azure Wei, 2016/09/20 14:43:57]

This is needed by settings button.

 #include "ui/views/controls/label.h"
 #include "ui/views/layout/box_layout.h"
 
 namespace ash {
 
 namespace {
+// The additional space between the child view area and the host button view
+// border in dp.
+// TODO(tdanderson): Move this to tray_constants.
+const int kButtonInsideBorderSpacing = 4;
 
 // Returns the max height of ImeListView.
 int GetImeListViewMaxHeight() {
@@ -52,29 +59,28 @@ 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,
+                                           const gfx::ImageSkia& image,
                                            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));
+      new TrayPopupHeaderButton(listener, image, accessible_name_id);
+  button->SetTooltipText(l10n_util::GetStringUTF16(accessible_name_id));
+  if (!MaterialDesignController::IsShelfMaterial()) {
+    button->SetBorder(views::Border::CreateSolidSidedBorder(
+        0, 0, 0, right_border, kBorderDarkColor));
+  }
   return button;
 }
 
@@ -84,34 +90,28 @@ 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);
+    return kMenuButtonSize + 2 * kButtonInsideBorderSpacing;
   }
 
   // views::ButtonListener:
@@ -151,41 +151,54 @@ 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);
+    if (!MaterialDesignController::IsShelfMaterial()) {

[tdanderson, 2016/09/20 13:11:12]

Since the changes here are for the buttons inside the IME menu, this should
instead be checking IsSystemTrayMenuMaterial(). That's what we're using to
develop the changes to the system menu, including the IME detailed view (which
the opt-in menu shares the input method rows with).

Line 80 is fine as-is since IsShelfMaterial() is used for the appearance of the
app buttons and tray buttons within the bounds of the shelf.

[Azure Wei, 2016/09/20 14:43:57]

Done.

+      set_background(
+          views::Background::CreateSolidBackground(kHeaderBackgroundColor));
+      box_layout->SetDefaultFlex(1);
+    }
     SetLayoutManager(box_layout);
 
+    const int right_border = 1;
     if (show_emoji_button) {
-      // TODO(azurewei): Creates the proper button with icons.
+      emoji_button_ = CreateImeMenuButton(
+          this, CreateVectorIcon(kImeMenuEmoticonIcon, kMenuIconColor),
+          IDS_ASH_STATUS_TRAY_IME_EMOJI, right_border);
+      AddChildView(emoji_button_);
     }
 
-    if (show_voice_button) {
-      // TODO(azurewei): Creates the proper button with icons.
+    if (show_handwriting_button) {
+      handwriting_button_ = CreateImeMenuButton(
+          this, CreateVectorIcon(kImeMenuWriteIcon, kMenuIconColor),
+          IDS_ASH_STATUS_TRAY_IME_HANDWRITING, right_border);
+      AddChildView(handwriting_button_);
     }
 
-    if (show_handwriting_button) {
-      // TODO(azurewei): Creates the proper button with icons.
+    if (show_voice_button) {
+      voice_button_ = CreateImeMenuButton(
+          this, CreateVectorIcon(kImeMenuMicrophoneIcon, kMenuIconColor),
+          IDS_ASH_STATUS_TRAY_IME_VOICE, right_border);
+      AddChildView(voice_button_);
     }
 
     if (show_settings_button) {
+      // TODO(tdanderson): update this settings icon.
       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);
+          this, CreateVectorIcon(gfx::VectorIconId::SETTINGS, kMenuIconSize,
+                                 kMenuIconColor),
+          IDS_ASH_STATUS_TRAY_IME_SETTINGS, 0);
       AddChildView(settings_button_);
     }
   }
 
   TrayPopupHeaderButton* emoji_button_;
-  TrayPopupHeaderButton* voice_button_;
   TrayPopupHeaderButton* handwriting_button_;
+  TrayPopupHeaderButton* voice_button_;
   TrayPopupHeaderButton* settings_button_;
   HoverHighlightView* one_settings_button_view_;