Add new arrow right icon for SuggestionView and minor adjustments

Adjusting color, paddings and font-size to match spec.

Current view: http://screen/7kkHnq2NMqY
See spec in bug

Bug: 1106644
Change-Id: I7281430568f30e6fc96403443d05d622849d8d39
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2303936Reviewed-by: Evan Stade <estade@chromium.org>
Reviewed-by: Darren Shen <shend@chromium.org>
Commit-Queue: My Nguyen <myy@chromium.org>
Cr-Commit-Position: refs/heads/master@{#789837}

chrome/app/vector_icons/BUILD.gn

@@ -58,6 +58,7 @@ aggregate_vector_icons("chrome_vector_icons") {
     "input.icon",
     "key.icon",
     "keyboard_arrow_down.icon",
+    "keyboard_arrow_right.icon",
     "keyboard_arrow_up.icon",
     "laptop.icon",
     "media_toolbar_button.icon",

chrome/app/vector_icons/keyboard_arrow_right.icon

+// Copyright 2020 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, 24,
+MOVE_TO, 9.71f, 18.71f,
+R_LINE_TO, -1.42f, -1.42f,
+R_LINE_TO, 5.3f, -5.29f,
+R_LINE_TO, -5.3f, -5.29f,
+R_LINE_TO, 1.42f, -1.42f,
+R_LINE_TO, 6.7f, 6.71f,
+CLOSE

chrome/browser/chromeos/input_method/ui/suggestion_view.cc

@@ -24,11 +24,11 @@ namespace {
 // TODO(crbug/1094843): Use localised strings.
 const char kEnter[] = "Enter";
 
-const int kAnnotationLabelChildSpacing = 6;
-const int kArrowIconSize = 16;
-const int kDownIconHorizontalPadding = 4;
-const int kDownIconSize = 18;
-const int kEnterKeyHorizontalPadding = 4;
+const int kAnnotationLabelChildSpacing = 4;
+const int kArrowIconSize = 14;
+const int kDownIconHorizontalPadding = 2;
+const int kDownIconSize = 16;
+const int kEnterKeyHorizontalPadding = 2;
 
 // Creates the index label, and returns it (never returns nullptr).
 // The label text is not set in this function.
@@ -82,9 +82,13 @@ std::unique_ptr<views::View> CreateKeyContainer() {
   auto container = std::make_unique<views::View>();
   container->SetLayoutManager(std::make_unique<views::BoxLayout>(
       views::BoxLayout::Orientation::kHorizontal));
+  // TODO(crbug/1099044): Use color from ash_color_provider and move SetBorder
+  // to OnThemeChanged
+  const SkColor kKeyContainerBorderColor =
+      SkColorSetA(SK_ColorBLACK, 0x24);  // 14%
   container->SetBorder(views::CreateRoundedRectBorder(
       kAnnotationBorderThickness, kAnnotationCornerRadius, gfx::Insets(),
-      kSuggestionColor));
+      kKeyContainerBorderColor));
   return container;
 }
 
@@ -181,7 +185,7 @@ void SuggestionView::OnThemeChanged() {
                             GetNativeTheme()->GetSystemColor(
                                 ui::NativeTheme::kColorId_DefaultIconColor)));
   arrow_icon_->SetImage(
-      gfx::CreateVectorIcon(kForwardArrowTouchIcon, kArrowIconSize,
+      gfx::CreateVectorIcon(kKeyboardArrowRightIcon, kArrowIconSize,
                             GetNativeTheme()->GetSystemColor(
                                 ui::NativeTheme::kColorId_DefaultIconColor)));
   views::View::OnThemeChanged();

chrome/browser/chromeos/input_method/ui/suggestion_view.h

@@ -24,7 +24,7 @@ struct SuggestionDetails;
 
 // Font-related constants
 constexpr char kFontStyle[] = "Roboto";
-constexpr int kSuggestionFontSize = 14;
+constexpr int kSuggestionFontSize = 13;
 constexpr int kAnnotationFontSize = 10;
 constexpr int kIndexFontSize = 10;