Add a paper plane icon as a reply button in the inline reply.

This CL adds the paper plane icon as the reply button.
The icon is placed to the right of the text field in the inline reply.

In this CL, the name of NotificationInputMD is changed to NotificationInputTextfieldMD,
and another container view, NotificationInputMD is added
on top of NotificationInputTextfieldMD and NotificationInputReplyButtonMD.

This CL does not include the following features.
- Change the icon color when the textfield is clicked
- Send message when the icon is clicked

Bug: 803759
Change-Id: I20fe6455a8f3184d188d93892b1fc7c03764b1f4
Reviewed-on: https://chromium-review.googlesource.com/876182Reviewed-by: Tetsui Ohkubo <tetsui@chromium.org>
Reviewed-by: Yoshiki Iguchi <yoshiki@chromium.org>
Commit-Queue: Megumi Hattori <megumihattori@google.com>
Cr-Commit-Position: refs/heads/master@{#531836}

ui/message_center/BUILD.gn

@@ -17,6 +17,7 @@ aggregate_vector_icons("message_center_vector_icons") {
     "notification_close_button.icon",
     "notification_expand_less.icon",
     "notification_expand_more.icon",
+    "notification_inline_reply.icon",
     "notification_settings_button.1x.icon",
     "notification_settings_button.icon",
     "product.icon",

ui/message_center/vector_icons/notification_inline_reply.icon

+// Copyright 2018 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.
+
+CANVAS_DIMENSIONS, 96,
+MOVE_TO, 10.04f, 82,
+LINE_TO, 86, 48,
+LINE_TO, 10.04f, 14,
+LINE_TO, 10, 40.44f,
+LINE_TO, 64.29f, 48,
+LINE_TO, 10, 55.56f,
+CLOSE,
+END
\ No newline at end of file

ui/message_center/views/notification_view_md.cc

@@ -64,7 +64,8 @@ constexpr gfx::Size kLargeImageMinSize(328, 0);
 constexpr gfx::Size kLargeImageMaxSize(328, 218);
 constexpr gfx::Insets kLeftContentPadding(2, 4, 0, 4);
 constexpr gfx::Insets kLeftContentPaddingWithIcon(2, 4, 0, 12);
-constexpr gfx::Insets kNotificationInputPadding(0, 16, 0, 16);
+constexpr gfx::Insets kInputTextfieldPadding(16, 16, 16, 0);
+constexpr gfx::Insets kInputReplyButtonPadding(0, 14, 0, 14);
 constexpr gfx::Insets kSettingsRowPadding(8, 0, 0, 0);
 constexpr gfx::Insets kSettingsRadioButtonPadding(14, 18, 14, 18);
 constexpr gfx::Insets kSettingsButtonRowPadding(8);
@@ -85,10 +86,18 @@ const SkColor kLargeImageBackgroundColor = SkColorSetRGB(0xf5, 0xf5, 0xf5);
 const SkColor kRegularTextColorMD = SkColorSetRGB(0x21, 0x21, 0x21);
 const SkColor kDimTextColorMD = SkColorSetRGB(0x75, 0x75, 0x75);
 
-// The text color and the background color of inline reply input field.
+// The background color of inline reply input field.
+const SkColor kInputContainerBackgroundColor = SkColorSetRGB(0x33, 0x67, 0xD6);
+
+// The text color of inline reply input field.
 const SkColor kInputTextColor = SkColorSetRGB(0xFF, 0xFF, 0xFF);
 const SkColor kInputPlaceholderColor = SkColorSetARGB(0x8A, 0xFF, 0xFF, 0xFF);
-const SkColor kInputBackgroundColor = SkColorSetRGB(0x33, 0x67, 0xD6);
+
+// The icon color of inline reply input field.
+const SkColor kInputReplyButtonColor = SkColorSetRGB(0xFF, 0xFF, 0xFF);
+
+// The icon size of inline reply input field.
+constexpr int kInputReplyButtonSize = 20;
 
 // Max number of lines for message_view_.
 constexpr int kMaxLinesForMessageView = 1;
@@ -146,6 +155,20 @@ class ClickActivator : public ui::EventHandler {
   DISALLOW_COPY_AND_ASSIGN(ClickActivator);
 };
 
+class NotificationInputReplyButtonMD : public views::ImageView {
+ public:
+  NotificationInputReplyButtonMD() {
+    SetImage(gfx::CreateVectorIcon(kNotificationInlineReplyIcon,
+                                   kInputReplyButtonSize,
+                                   kInputReplyButtonColor));
+    SetBorder(views::CreateEmptyBorder(kInputReplyButtonPadding));
+  }
+  ~NotificationInputReplyButtonMD() override = default;
+
+ private:
+  DISALLOW_COPY_AND_ASSIGN(NotificationInputReplyButtonMD);
+};
+
 }  // anonymous namespace
 
 // ItemView ////////////////////////////////////////////////////////////////////
@@ -356,21 +379,22 @@ NotificationButtonMD::CreateInkDropHighlight() const {
   return highlight;
 }
 
-// NotificationInputMD /////////////////////////////////////////////////////////
+// NotificationInputTextfieldMD ////////////////////////////////////////////////
 
-NotificationInputMD::NotificationInputMD(NotificationInputDelegate* delegate)
+NotificationInputTextfieldMD::NotificationInputTextfieldMD(
+    NotificationInputDelegate* delegate)
     : delegate_(delegate), index_(0) {
   set_controller(this);
   SetTextColor(kInputTextColor);
-  SetBackgroundColor(kInputBackgroundColor);
+  SetBackgroundColor(SK_ColorTRANSPARENT);
   set_placeholder_text_color(kInputPlaceholderColor);
-  SetBorder(views::CreateEmptyBorder(kNotificationInputPadding));
+  SetBorder(views::CreateEmptyBorder(kInputTextfieldPadding));
 }
 
-NotificationInputMD::~NotificationInputMD() = default;
+NotificationInputTextfieldMD::~NotificationInputTextfieldMD() = default;
 
-bool NotificationInputMD::HandleKeyEvent(views::Textfield* sender,
-                                         const ui::KeyEvent& event) {
+bool NotificationInputTextfieldMD::HandleKeyEvent(views::Textfield* sender,
+                                                  const ui::KeyEvent& event) {
   if (event.type() == ui::ET_KEY_PRESSED &&
       event.key_code() == ui::VKEY_RETURN) {
     delegate_->OnNotificationInputSubmit(index_, text());
@@ -379,7 +403,8 @@ bool NotificationInputMD::HandleKeyEvent(views::Textfield* sender,
   return event.type() == ui::ET_KEY_RELEASED;
 }
 
-void NotificationInputMD::set_placeholder(const base::string16& placeholder) {
+void NotificationInputTextfieldMD::set_placeholder(
+    const base::string16& placeholder) {
   if (placeholder.empty()) {
     set_placeholder_text(l10n_util::GetStringUTF16(
         IDS_MESSAGE_CENTER_NOTIFICATION_INLINE_REPLY_PLACEHOLDER));
@@ -388,6 +413,24 @@ void NotificationInputMD::set_placeholder(const base::string16& placeholder) {
   }
 }
 
+// NotificationInputContainerMD ////////////////////////////////////////////////
+
+NotificationInputContainerMD::NotificationInputContainerMD(
+    NotificationInputDelegate* delegate)
+    : textfield_(new NotificationInputTextfieldMD(delegate)),
+      button_(new NotificationInputReplyButtonMD()) {
+  auto* layout = SetLayoutManager(std::make_unique<views::BoxLayout>(
+      views::BoxLayout::kHorizontal, gfx::Insets(), 0));
+  SetBackground(views::CreateSolidBackground(kInputContainerBackgroundColor));
+
+  AddChildView(textfield_);
+  layout->SetFlexForView(textfield_, 1);
+
+  AddChildView(button_);
+}
+
+NotificationInputContainerMD::~NotificationInputContainerMD() = default;
+
 // InlineSettingsRadioButton ///////////////////////////////////////////////////
 
 class InlineSettingsRadioButton : public views::RadioButton {
@@ -511,10 +554,9 @@ NotificationViewMD::NotificationViewMD(const Notification& notification)
   action_buttons_row_->SetVisible(false);
   actions_row_->AddChildView(action_buttons_row_);
 
-  // |inline_reply_| is a textfield for inline reply.
-  inline_reply_ = new NotificationInputMD(this);
+  // |inline_reply_| is a container for an inline textfield.
+  inline_reply_ = new NotificationInputContainerMD(this);
   inline_reply_->SetVisible(false);
-
   actions_row_->AddChildView(inline_reply_);
 
   CreateOrUpdateViews(notification);
@@ -667,8 +709,10 @@ void NotificationViewMD::ButtonPressed(views::Button* sender,
     if (sender != action_buttons_[i])
       continue;
     if (action_buttons_[i]->is_inline_reply()) {
-      inline_reply_->set_index(i);
-      inline_reply_->set_placeholder(action_buttons_[i]->placeholder());
+      inline_reply_->textfield()->set_index(i);
+      inline_reply_->textfield()->set_placeholder(
+          action_buttons_[i]->placeholder());
+      inline_reply_->textfield()->RequestFocus();
       inline_reply_->SetVisible(true);
       action_buttons_row_->SetVisible(false);
       Layout();

ui/message_center/views/notification_view_md.h

@@ -142,11 +142,11 @@ class NotificationInputDelegate {
   virtual ~NotificationInputDelegate() = default;
 };
 
-class NotificationInputMD : public views::Textfield,
-                            public views::TextfieldController {
+class NotificationInputTextfieldMD : public views::Textfield,
+                                     public views::TextfieldController {
  public:
-  NotificationInputMD(NotificationInputDelegate* delegate);
-  ~NotificationInputMD() override;
+  NotificationInputTextfieldMD(NotificationInputDelegate* delegate);
+  ~NotificationInputTextfieldMD() override;
 
   bool HandleKeyEvent(views::Textfield* sender,
                       const ui::KeyEvent& key_event) override;
@@ -161,7 +161,21 @@ class NotificationInputMD : public views::Textfield,
   // argument of ClickOnNotificationButtonWithReply.
   size_t index_ = 0;
 
-  DISALLOW_COPY_AND_ASSIGN(NotificationInputMD);
+  DISALLOW_COPY_AND_ASSIGN(NotificationInputTextfieldMD);
+};
+
+class NotificationInputContainerMD : public views::View {
+ public:
+  NotificationInputContainerMD(NotificationInputDelegate* delegate);
+  ~NotificationInputContainerMD() override;
+
+  NotificationInputTextfieldMD* textfield() const { return textfield_; };
+
+ private:
+  NotificationInputTextfieldMD* const textfield_;
+  views::ImageView* const button_;
+
+  DISALLOW_COPY_AND_ASSIGN(NotificationInputContainerMD);
 };
 
 // View that displays all current types of notification (web, basic, image, and
@@ -279,7 +293,7 @@ class MESSAGE_CENTER_EXPORT NotificationViewMD
   views::ProgressBar* progress_bar_view_ = nullptr;
   CompactTitleMessageView* compact_title_message_view_ = nullptr;
   views::View* action_buttons_row_ = nullptr;
-  NotificationInputMD* inline_reply_ = nullptr;
+  NotificationInputContainerMD* inline_reply_ = nullptr;
 
   // Views for inline settings.
   views::RadioButton* block_all_button_ = nullptr;

ui/message_center/views/notification_view_md_unittest.cc

@@ -501,7 +501,8 @@ TEST_F(NotificationViewMDTest, TestInlineReply) {
   generator.ClickLeftButton();
   generator.ClickLeftButton();
   EXPECT_TRUE(notification_view()->inline_reply_->visible());
-  EXPECT_TRUE(notification_view()->inline_reply_->HasFocus());
+  EXPECT_TRUE(notification_view()->inline_reply_->textfield()->visible());
+  EXPECT_TRUE(notification_view()->inline_reply_->textfield()->HasFocus());
 
   // Type the text and submit.
   ui::KeyboardCode keycodes[] = {ui::VKEY_T, ui::VKEY_E, ui::VKEY_S, ui::VKEY_T,