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

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

 // Copyright 2016 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 #include "ash/common/system/chromeos/ime_menu/ime_menu_tray.h"
 
 #include "ash/common/material_design/material_design_controller.h"
 #include "ash/common/session/session_state_delegate.h"
 #include "ash/common/shelf/wm_shelf_util.h"
 #include "ash/common/shell_window_ids.h"
 #include "ash/common/system/chromeos/ime_menu/ime_list_view.h"
 #include "ash/common/system/tray/fixed_sized_scroll_view.h"
 #include "ash/common/system/tray/hover_highlight_view.h"
 #include "ash/common/system/tray/system_tray_delegate.h"
 #include "ash/common/system/tray/system_tray_notifier.h"
 #include "ash/common/system/tray/tray_constants.h"
 #include "ash/common/system/tray/tray_popup_header_button.h"
 #include "ash/common/system/tray/tray_utils.h"
 #include "ash/common/wm_lookup.h"
 #include "ash/common/wm_root_window_controller.h"
 #include "ash/common/wm_shell.h"
 #include "ash/common/wm_window.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/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() {
   const int max_items = 7;
   return GetTrayConstant(TRAY_POPUP_ITEM_HEIGHT) * max_items;
 }
 
 // Shows language and input settings page.
 void ShowIMESettings() {
   SystemTrayDelegate* delegate = WmShell::Get()->system_tray_delegate();
   WmShell::Get()->RecordUserMetricsAction(UMA_STATUS_AREA_IME_SHOW_DETAILED);
   delegate->ShowIMESettings();
 }
 
 class ImeMenuLabel : public views::Label {
  public:
   ImeMenuLabel() {}
   ~ImeMenuLabel() override {}
 
   // 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 kTrayImeIconSize; }
+  int GetHeightForWidth(int width) const override {
+    return GetTrayConstant(TRAY_IME_MENU_ICON);
+  }
 
  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;
 }
 
 // The view that contains buttons shown on the bottom of IME menu.
 class ImeButtonsView : public views::View,
                        public views::ButtonListener,
                        public ViewClickListener {
  public:
   ImeButtonsView(bool show_emoji_button,
+                 bool show_handwriting_button,
                  bool show_voice_button,
-                 bool show_handwriting_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 {
     if (emoji_button_ && sender == emoji_button_) {
       // TODO(azurewei): Opens emoji palette.
     } else if (voice_button_ && sender == voice_button_) {
       // TODO(azurewei): Brings virtual keyboard for emoji input.
     } else if (handwriting_button_ && sender == handwriting_button_) {
       // TODO(azurewei): Brings virtual keyboard for handwriting input.
     } else if (settings_button_ && sender == settings_button_) {
@@ skipping 18 matching lines @@
     one_settings_button_view_ = new HoverHighlightView(this);
     one_settings_button_view_->AddLabel(
         ui::ResourceBundle::GetSharedInstance().GetLocalizedString(
             IDS_ASH_STATUS_TRAY_IME_SETTINGS),
         gfx::ALIGN_LEFT, false /* highlight */);
     AddChildView(one_settings_button_view_);
   }
 
   // Shows the UI of more than one buttons.
   void ShowButtons(bool show_emoji_button,
+                   bool show_handwriting_button,
                    bool show_voice_button,
-                   bool show_handwriting_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_handwriting_button) {
+      handwriting_button_ = CreateImeMenuButton(
+          this, gfx::VectorIconId::WRITE, IDS_ASH_STATUS_TRAY_IME_HANDWRITING);
+      AddChildView(handwriting_button_);
     }
 
     if (show_voice_button) {
-      // TODO(azurewei): Creates the proper button with icons.
-    }
-
-    if (show_handwriting_button) {
-      // TODO(azurewei): Creates the proper button with icons.
+      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* handwriting_button_;
   TrayPopupHeaderButton* voice_button_;
-  TrayPopupHeaderButton* handwriting_button_;
   TrayPopupHeaderButton* settings_button_;
   HoverHighlightView* one_settings_button_view_;
 
   DISALLOW_COPY_AND_ASSIGN(ImeButtonsView);
 };
 
 }  // namespace
 
 ImeMenuTray::ImeMenuTray(WmShelf* wm_shelf)
     : TrayBackgroundView(wm_shelf), label_(new ImeMenuLabel()) {
@@ skipping 151 matching lines @@
     label_->SetText(current_ime_.short_name);
 }
 
 void ImeMenuTray::HideImeMenuBubble() {
   bubble_.reset();
   ime_list_view_ = nullptr;
   SetDrawBackgroundAsActive(false);
 }
 
 }  // namespace ash