Multipaste: Add keyboard shortcut icon inline with text.

This CL adds text to the nudge view and an inline icon to represent the
key to press to activate the keyboard shortcut. The icon shows as either
a search icon or a launcher icon, depending on what the device supports.
If the launcher icon is to be shown, then the icon is changed depending
on if assistant is available.

Bug: 1105541
Change-Id: Ieaad19c899af545f38410350ece2d30a48409a11
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2463869Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Commit-Queue: Matthew Mourgos <mmourgos@chromium.org>
Cr-Commit-Position: refs/heads/master@{#816375}

ash/ash_strings.grd

@@ -2999,6 +2999,17 @@ Here are some things you can try to get started.
       <message name="IDS_ASH_SWITCH_TO_LAPTOP_MODE" desc="Alert of switching to laptop mode.">
         Switched to laptop mode
       </message>
+
+      <!-- Multipaste -->
+      <message name="IDS_ASH_MULTIPASTE_CONTEXTUAL_NUDGE" desc="The label used for the multipaste nudge, to be seen once the user copies and pastes multiple times in a short time span.">
+        Press <ph name="SHORTCUT_KEY_NAME">$1<ex>Launcher</ex></ph> + V to view your clipboard. The last 5 items you've copied are saved to your clipboard.
+      </message>
+      <message name="IDS_ASH_MULTIPASTE_CONTEXTUAL_NUDGE_LAUNCHER_KEY" desc="The name of the first key to be used for the keyboard shortcut for activating multipaste, when the device has a launcher key.">
+        Launcher
+      </message>
+      <message name="IDS_ASH_MULTIPASTE_CONTEXTUAL_NUDGE_SEARCH_KEY" desc="The name of the first key to be used for the keyboard shortcut for activating multipaste, when the device has a search key.">
+        Search
+      </message>
     </messages>
   </release>
 </grit>

ash/ash_strings_grd/IDS_ASH_MULTIPASTE_CONTEXTUAL_NUDGE.png.sha1

+d456fd44797415b8ea9c4826046515891e9118e3
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_MULTIPASTE_CONTEXTUAL_NUDGE_LAUNCHER_KEY.png.sha1

+d456fd44797415b8ea9c4826046515891e9118e3
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_MULTIPASTE_CONTEXTUAL_NUDGE_SEARCH_KEY.png.sha1

+5b624c0c0d59d33775ce9c990a0e91cade5dc868
\ No newline at end of file

ash/clipboard/clipboard_nudge.cc

@@ -9,13 +9,16 @@
 #include "ash/public/cpp/shell_window_ids.h"
 #include "ash/resources/vector_icons/vector_icons.h"
 #include "ash/shell.h"
+#include "ash/strings/grit/ash_strings.h"
 #include "ash/style/ash_color_provider.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/chromeos/events/keyboard_layout_util.h"
 #include "ui/gfx/color_palette.h"
 #include "ui/gfx/paint_vector_icon.h"
+#include "ui/views/border.h"
 #include "ui/views/controls/image_view.h"
 #include "ui/views/controls/label.h"
+#include "ui/views/controls/styled_label.h"
 #include "ui/wm/core/coordinate_conversion.h"
 
 namespace ash {
@@ -32,7 +35,7 @@ constexpr int kNudgeBlurRadius = 30;
 constexpr int kClipboardIconSize = 20;
 
 // The size of the keyboard shortcut icon.
-constexpr int kKeyboardShortcutIconSize = 16;
+constexpr int kKeyboardShortcutIconSize = 14;
 
 // The minimum width of the label.
 constexpr int kMinLabelWidth = 200;
@@ -46,6 +49,13 @@ constexpr int kIconLabelSpacing = 16;
 // The padding which separates the nudge's border with its inner contents.
 constexpr int kNudgePadding = 16;
 
+bool IsAssistantAvailable() {
+  AssistantStateBase* state = AssistantState::Get();
+  return state->allowed_state() ==
+             chromeos::assistant::AssistantAllowedState::ALLOWED &&
+         state->settings_enabled().value_or(false);
+}
+
 }  // namespace
 
 class ClipboardNudge::ClipboardNudgeView : public views::View {
@@ -69,25 +79,67 @@ class ClipboardNudge::ClipboardNudgeView : public views::View {
     clipboard_icon_->SetImage(
         gfx::CreateVectorIcon(kClipboardIcon, icon_color));
 
-    label_ = AddChildView(std::make_unique<views::Label>());
+    label_ = AddChildView(std::make_unique<views::StyledLabel>());
     label_->SetPaintToLayer();
     label_->layer()->SetFillsBoundsOpaquely(false);
-    label_->SetMultiLine(true);
     label_->SetPosition(gfx::Point(
         kNudgePadding + kClipboardIconSize + kIconLabelSpacing, kNudgePadding));
-    label_->SetHorizontalAlignment(gfx::ALIGN_LEFT);
-    label_->SetVerticalAlignment(gfx::ALIGN_TOP);
-    label_->SetEnabledColor(AshColorProvider::Get()->GetContentLayerColor(
-        AshColorProvider::ContentLayerType::kTextColorPrimary));
-    label_->SetBackgroundColor(SK_ColorTRANSPARENT);
-
-    // TODO(mmourgos): Create and set text for |label_|.
-    label_->SetSize(gfx::Size(kMinLabelWidth, kKeyboardShortcutIconSize));
+
+    bool use_launcher_key = ui::DeviceUsesKeyboardLayout2();
+
+    // Set the keyboard shortcut icon depending on whether search button or
+    // launcher button is being used.
+    gfx::ImageSkia shortcut_icon;
+    if (use_launcher_key) {
+      if (IsAssistantAvailable()) {
+        shortcut_icon = gfx::CreateVectorIcon(gfx::IconDescription(
+            kClipboardLauncherOuterIcon, kKeyboardShortcutIconSize, icon_color,
+            &kClipboardLauncherInnerIcon));
+      } else {
+        shortcut_icon =
+            gfx::CreateVectorIcon(kClipboardLauncherNoAssistantIcon,
+                                  kKeyboardShortcutIconSize, icon_color);
+      }
+    } else {
+      shortcut_icon = gfx::CreateVectorIcon(
+          kClipboardSearchIcon, kKeyboardShortcutIconSize, icon_color);
+    }
+    std::unique_ptr<views::ImageView> keyboard_shortcut_icon;
+    keyboard_shortcut_icon = std::make_unique<views::ImageView>();
+    keyboard_shortcut_icon->SetImage(shortcut_icon);
+    keyboard_shortcut_icon->SetBorder(views::CreateEmptyBorder(2, 4, 0, -2));
+
+    // Set the text for |label_|.
+    base::string16 shortcut_key = l10n_util::GetStringUTF16(
+        use_launcher_key ? IDS_ASH_MULTIPASTE_CONTEXTUAL_NUDGE_LAUNCHER_KEY
+                         : IDS_ASH_MULTIPASTE_CONTEXTUAL_NUDGE_SEARCH_KEY);
+    size_t offset;
+    base::string16 label_text = l10n_util::GetStringFUTF16(
+        IDS_ASH_MULTIPASTE_CONTEXTUAL_NUDGE, shortcut_key, &offset);
+    offset = offset + shortcut_key.length();
+    label_->SetText(label_text);
+
+    // Set the color of the text surrounding the shortcut icon.
+    views::StyledLabel::RangeStyleInfo text_color;
+    text_color.override_color = AshColorProvider::Get()->GetContentLayerColor(
+        AshColorProvider::ContentLayerType::kTextColorPrimary);
+    label_->AddStyleRange(gfx::Range(0, offset), text_color);
+    label_->AddStyleRange(gfx::Range(offset + 1, label_text.length()),
+                          text_color);
+
+    // Add the shortcut icon to |label_|.
+    views::StyledLabel::RangeStyleInfo icon_style;
+    icon_style.custom_view = keyboard_shortcut_icon.get();
+    label_->AddCustomView(std::move(keyboard_shortcut_icon));
+    label_->AddStyleRange(gfx::Range(offset, offset + 1), icon_style);
+
+    label_->SizeToFit(kMinLabelWidth);
+    label_->SetDisplayedOnBackgroundColor(SK_ColorTRANSPARENT);
   }
 
   ~ClipboardNudgeView() override = default;
 
-  views::Label* label_ = nullptr;
+  views::StyledLabel* label_ = nullptr;
   views::ImageView* clipboard_icon_ = nullptr;
 };
 

ash/resources/vector_icons/BUILD.gn

@@ -38,6 +38,10 @@ aggregate_vector_icons2("ash_vector_icons") {
     "check_circle.icon",
     "chevron_right.icon",
     "clipboard.icon",
+    "clipboard_launcher_inner.icon",
+    "clipboard_launcher_no_assistant.icon",
+    "clipboard_launcher_outer.icon",
+    "clipboard_search.icon",
     "close_button.icon",
     "copy.icon",
     "dark_theme_color_mode.icon",

ash/resources/vector_icons/clipboard_launcher_inner.icon

+CANVAS_DIMENSIONS, 20,
+MOVE_TO, 8, 13,
+ARC_TO, 5, 5, 0, 1, 1, 8, 3,
+R_ARC_TO, 5, 5, 0, 0, 1, 0, 10,
+CLOSE
\ No newline at end of file

ash/resources/vector_icons/clipboard_launcher_no_assistant.icon

+CANVAS_DIMENSIONS, 20,
+MOVE_TO, 8, 15,
+ARC_TO, 7, 7, 0, 1, 1, 8, 1,
+R_ARC_TO, 7, 7, 0, 0, 1, 0, 14,
+CLOSE,
+R_MOVE_TO, 0, -1.61f,
+R_ARC_TO, 5.39f, 5.39f, 0, 1, 0, 0, -10.77f,
+R_ARC_TO, 5.39f, 5.39f, 0, 0, 0, 0, 10.77f,
+CLOSE
\ No newline at end of file

ash/resources/vector_icons/clipboard_launcher_outer.icon

+CANVAS_DIMENSIONS, 20,
+MOVE_TO, 8, 16,
+ARC_TO, 8, 8, 0, 1, 1, 8, 0,
+R_ARC_TO, 8, 8, 0, 0, 1, 0, 16,
+CLOSE,
+R_MOVE_TO, 0, -1,
+ARC_TO, 7, 7, 0, 1, 0, 8, 1,
+R_ARC_TO, 7, 7, 0, 0, 0, 0, 14,
+CLOSE
\ No newline at end of file

ash/resources/vector_icons/clipboard_search.icon

+CANVAS_DIMENSIONS, 20,
+MOVE_TO, 15.49f, 14,
+R_LINE_TO, -3.73f, -3.73f,
+CUBIC_TO, 12.53f, 9.2f, 13, 7.91f, 13, 6.5f,
+ARC_TO, 6.5f, 6.5f, 0, 1, 0, 6.5f, 13,
+R_CUBIC_TO, 1.41f, 0, 2.7f, -0.47f, 3.77f, -1.24f,
+LINE_TO, 14, 15.49f,
+LINE_TO, 15.49f, 14,
+CLOSE,
+MOVE_TO, 2, 6.5f,
+CUBIC_TO, 2, 4.01f, 4.01f, 2, 6.5f, 2,
+CUBIC_TO_SHORTHAND, 11, 4.01f, 11, 6.5f,
+CUBIC_TO_SHORTHAND, 8.99f, 11, 6.5f, 11,
+CUBIC_TO_SHORTHAND, 2, 8.99f, 2, 6.5f,
+CLOSE
\ No newline at end of file