Update the UI of setting button on 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_image_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"
@@ skipping 47 matching lines @@
   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));
   return button;
 }
 
-// The IME menu settings view when there's only one button on the menu. It shows
-// the setting gear left-aligned with label.
-class ImeSettingButtonView : public ActionableView {
- public:
-  ImeSettingButtonView() {
-    SetLayoutManager(new views::BoxLayout(views::BoxLayout::kHorizontal,
-                                          kTrayPopupPaddingHorizontal, 0,
-                                          kTrayPopupPaddingBetweenItems));
-
-    ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
-    views::ImageView* icon =
-        new FixedSizedImageView(0, GetTrayConstant(TRAY_POPUP_ITEM_HEIGHT));
-    icon->SetImage(rb.GetImageNamed(IDR_AURA_UBER_TRAY_SETTINGS).ToImageSkia());
-    AddChildView(icon);
-
-    base::string16 text =
-        rb.GetLocalizedString(IDS_ASH_STATUS_TRAY_INPUT_SETTINGS);
-    views::Label* label = new views::Label(text);
-    AddChildView(label);
-    SetAccessibleName(text);
-  }
-
-  ~ImeSettingButtonView() override {}
-
-  // ActionableView.
-  bool PerformAction(const ui::Event& event) override {
-    ShowIMESettings();
-    return true;
-  }
-
- private:
-  DISALLOW_COPY_AND_ASSIGN(ImeSettingButtonView);
-};
-
-class ImeButtonsView : public views::View, public views::ButtonListener {
+// 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_voice_button,
                  bool show_handwriting_button,
                  bool show_settings_button) {
-    set_background(
-        views::Background::CreateSolidBackground(kHeaderBackgroundColor));
     SetBorder(
         views::Border::CreateSolidSidedBorder(1, 0, 0, 0, kBorderDarkColor));
 
-    auto* box_layout = new views::BoxLayout(
-        views::BoxLayout::kHorizontal, kTrayImeBottomRowPadding,
-        kTrayImeBottomRowPadding, kTrayImeBottomRowPaddingBetweenItems);
-    box_layout->SetDefaultFlex(1);
-    SetLayoutManager(box_layout);
-
-    if (show_emoji_button) {
-      // TODO(azurewei): Creates the proper button with icons.
+    // 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) {
+      ShowOneSettingButton();
+    } else {
+      ShowButtons(show_emoji_button, show_voice_button, show_handwriting_button,
+                  show_settings_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.
-    }
-
-    if (show_settings_button) {
-      // If there's only one button, we show the gear icon with text. Otherwise,
-      // just show the icon.
-      if (!show_emoji_button && !show_voice_button &&
-          !show_handwriting_button) {
-        settings_button_with_text_ = new ImeSettingButtonView();
-        AddChildView(settings_button_with_text_);
-      } else {
-        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);
-        AddChildView(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);
   }
 
   // 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_) {
       ShowIMESettings();
     }
   }
 
+  // ViewClickListener:
+  void OnViewClicked(views::View* sender) override {
+    if (one_settings_button_view_ && sender == one_settings_button_view_) {
+      ShowIMESettings();
+    }
+  }
+
  private:
+  // Shows the UI of one settings button.
+  void ShowOneSettingButton() {
+    auto* box_layout =
+        new views::BoxLayout(views::BoxLayout::kHorizontal, 0, 0, 0);
+    box_layout->SetDefaultFlex(1);
+    SetLayoutManager(box_layout);
+    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_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);
+    SetLayoutManager(box_layout);
+
+    if (show_emoji_button) {
+      // TODO(azurewei): Creates the proper button with icons.
+    }
+
+    if (show_voice_button) {
+      // TODO(azurewei): Creates the proper button with icons.
+    }
+
+    if (show_handwriting_button) {
+      // TODO(azurewei): Creates the proper button with icons.
+    }
+
+    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);
+      AddChildView(settings_button_);
+    }
+  }
+
   TrayPopupHeaderButton* emoji_button_;
   TrayPopupHeaderButton* voice_button_;
   TrayPopupHeaderButton* handwriting_button_;
   TrayPopupHeaderButton* settings_button_;
-  ImeSettingButtonView* settings_button_with_text_;
+  HoverHighlightView* one_settings_button_view_;
 
   DISALLOW_COPY_AND_ASSIGN(ImeButtonsView);
 };
 
 }  // namespace
 
 ImeMenuTray::ImeMenuTray(WmShelf* wm_shelf)
     : TrayBackgroundView(wm_shelf), label_(new ImeMenuLabel()) {
   SetupLabelForTray(label_);
   tray_container()->AddChildView(label_);
@@ skipping 149 matching lines @@
     label_->SetText(current_ime_.short_name);
 }
 
 void ImeMenuTray::HideImeMenuBubble() {
   bubble_.reset();
   ime_list_view_ = nullptr;
   SetDrawBackgroundAsActive(false);
 }
 
 }  // namespace ash