[Live Caption] Add Live Caption toggle button to ChromeOS volume slider.

Introduce a Live Caption toggle image button in the volume slider. This
UI follows the Android pattern of offering a Live Caption button in the
volume controls, enabling easy access to toggle the feature on and off.

This CL does a few things:
1. Moves the live_caption icon from chrome/app/vector_icons to
components/vector_icons so that it can be shared with chrome and ash,
and renames it as live_caption_on.
2. Introduces a new icon, live_caption_off.
3. Introduces a LiveCaptionButton in the UnifiedVolumeView.
4. Since the new LiveCaptionButton shares code with the MoreButton,
introduces a new template, UnifiedVolumeViewButton, which contains the
shared ink drop and color code.
5. Defines the kLiveCaptionEnabled pref name in ash (synced with the
chrome pref).
6. Introduces a new toggle_background to the ToggleImageButton which
allows buttons to toggle their background color when the toggled state
changes.

Screenshots:
Live Caption off: https://screenshot.googleplex.com/BRoxxFsssg9f6ix
Live Caption on: https://screenshot.googleplex.com/58TfboB96UU273Z

Bug: 1055150, 1111002
AX-Relnotes: N/A (feature has not launched yet)
Change-Id: Ie8b3736eaee3a2fc4ba841de8d98dd8c95495e95
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2571481Reviewed-by: Mike Pinkerton <pinkerton@chromium.org>
Reviewed-by: Elly Fong-Jones <ellyjones@chromium.org>
Reviewed-by: Tetsui Ohkubo <tetsui@chromium.org>
Commit-Queue: Abigail Klein <abigailbklein@google.com>
Cr-Commit-Position: refs/heads/master@{#833763}

ash/ash_prefs.cc

@@ -88,6 +88,9 @@ void RegisterProfilePrefs(PrefRegistrySimple* registry, bool for_test) {
     registry->RegisterBooleanPref(
         chromeos::prefs::kSuggestedContentEnabled, true,
         user_prefs::PrefRegistrySyncable::SYNCABLE_OS_PREF);
+    registry->RegisterBooleanPref(
+        prefs::kLiveCaptionEnabled, false,
+        user_prefs::PrefRegistrySyncable::SYNCABLE_OS_PREF);
   }
 }
 

ash/ash_strings.grd

@@ -1701,6 +1701,17 @@ This file contains the strings for ash.
         Mic jack
       </message>
 
+      <!-- Status tray Live Caption strings. -->
+      <message name="IDS_ASH_STATUS_TRAY_LIVE_CAPTION_TOGGLE_TOOLTIP" desc="The tooltip text used for the button in the status tray to toggle the Live Caption feature on or off.">
+        Toggle Live Caption. <ph name="STATE_TEXT">$1<ex>Live Caption is on.</ex></ph>
+      </message>
+      <message name="IDS_ASH_STATUS_TRAY_LIVE_CAPTION_ENABLED_STATE_TOOLTIP" desc="The tooltip text indicating the Live Caption feature is on.">
+        Live Caption is on.
+      </message>
+      <message name="IDS_ASH_STATUS_TRAY_LIVE_CAPTION_DISABLED_STATE_TOOLTIP" desc="The tooltip text indicating the Live Caption feature is off.">
+        Live Caption is off.
+      </message>
+
       <message name="IDS_AURA_SET_DESKTOP_WALLPAPER" desc="The label used for change wallpaper in context menu">
         Set wallpaper
       </message>

ash/ash_strings_grd/IDS_ASH_STATUS_TRAY_LIVE_CAPTION_DISABLED_STATE_TOOLTIP.png.sha1

+22cea29cf438b1550a0c70d262e23977fbc7c970
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_STATUS_TRAY_LIVE_CAPTION_ENABLED_STATE_TOOLTIP.png.sha1

+83265cf1191c34a9015b0ac7baf743a75a06fb56
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_STATUS_TRAY_LIVE_CAPTION_TOGGLE_TOOLTIP.png.sha1

+83265cf1191c34a9015b0ac7baf743a75a06fb56
\ No newline at end of file

ash/public/cpp/ash_pref_names.cc

@@ -135,6 +135,9 @@ const char kAccessibilityTabletModeShelfNavigationButtonsEnabled[] =
     "settings.a11y.tablet_mode_shelf_nav_buttons_enabled";
 // A boolean pref which determines whether dictation is enabled.
 const char kAccessibilityDictationEnabled[] = "settings.a11y.dictation";
+// Whether the Live Caption feature is enabled.
+const char kLiveCaptionEnabled[] =
+    "accessibility.captions.live_caption_enabled";
 // A boolean pref which determines whether the accessibility menu shows
 // regardless of the state of a11y features.
 const char kShouldAlwaysShowAccessibilityMenu[] = "settings.a11y.enable_menu";

ash/public/cpp/ash_pref_names.h

@@ -52,6 +52,7 @@ ASH_PUBLIC_EXPORT extern const char
 ASH_PUBLIC_EXPORT extern const char
     kAccessibilityTabletModeShelfNavigationButtonsEnabled[];
 ASH_PUBLIC_EXPORT extern const char kAccessibilityDictationEnabled[];
+ASH_PUBLIC_EXPORT extern const char kLiveCaptionEnabled[];
 ASH_PUBLIC_EXPORT extern const char kShouldAlwaysShowAccessibilityMenu[];
 
 ASH_PUBLIC_EXPORT extern const char kContextualTooltips[];

ash/system/audio/unified_volume_view.h

@@ -35,6 +35,10 @@ class UnifiedVolumeView : public UnifiedSliderView,
   // UnifiedSliderView:
   void ChildVisibilityChanged(views::View* child) override;
 
+  // views::Button::PressedCallback
+  void OnLiveCaptionButtonPressed();
+
+  views::ToggleImageButton* const live_caption_button_;
   views::Button* const more_button_;
 
   DISALLOW_COPY_AND_ASSIGN(UnifiedVolumeView);

chrome/app/vector_icons/BUILD.gn

@@ -64,7 +64,6 @@ aggregate_vector_icons("chrome_vector_icons") {
     "keyboard_arrow_right.icon",
     "keyboard_arrow_up.icon",
     "laptop.icon",
-    "live_caption.icon",
     "media_toolbar_button.icon",
     "media_toolbar_button_touch.icon",
     "mixed_content.icon",

chrome/browser/ui/views/global_media_controls/media_dialog_view.cc

@@ -11,7 +11,6 @@
 #include "base/bind.h"
 #include "base/metrics/histogram_functions.h"
 #include "base/strings/utf_string_conversions.h"
-#include "chrome/app/vector_icons/vector_icons.h"
 #include "chrome/browser/profiles/profile.h"
 #include "chrome/browser/ui/global_media_controls/media_notification_service.h"
 #include "chrome/browser/ui/global_media_controls/overlay_media_notification.h"
@@ -23,6 +22,7 @@
 #include "chrome/common/pref_names.h"
 #include "chrome/grit/generated_resources.h"
 #include "components/sync_preferences/pref_service_syncable.h"
+#include "components/vector_icons/vector_icons.h"
 #include "media/base/media_switches.h"
 #include "services/media_session/public/mojom/media_session.mojom.h"
 #include "ui/base/l10n/l10n_util.h"
@@ -254,9 +254,9 @@ void MediaDialogView::Init() {
   }
 
   auto live_caption_image = std::make_unique<views::ImageView>();
-  live_caption_image->SetImage(
-      gfx::CreateVectorIcon(kLiveCaptionIcon, kLiveCaptionImageWidthDip,
-                            SkColor(gfx::kGoogleGrey700)));
+  live_caption_image->SetImage(gfx::CreateVectorIcon(
+      vector_icons::kLiveCaptionOnIcon, kLiveCaptionImageWidthDip,
+      SkColor(gfx::kGoogleGrey700)));
   live_caption_container->AddChildView(std::move(live_caption_image));
 
   auto live_caption_title = std::make_unique<views::Label>(
@@ -281,9 +281,9 @@ void MediaDialogView::Init() {
     live_caption_title_->SetVisible(false);
   }
 
-  auto live_caption_button =
-      std::make_unique<views::ToggleButton>(base::BindRepeating(
-          &MediaDialogView::LiveCaptionButtonPressed, base::Unretained(this)));
+  auto live_caption_button = std::make_unique<views::ToggleButton>(
+      base::BindRepeating(&MediaDialogView::OnLiveCaptionButtonPressed,
+                          base::Unretained(this)));
   live_caption_button->SetIsOn(
       profile_->GetPrefs()->GetBoolean(prefs::kLiveCaptionEnabled));
   live_caption_button->SetAccessibleName(live_caption_title_->GetText());
@@ -305,7 +305,7 @@ void MediaDialogView::WindowClosing() {
   }
 }
 
-void MediaDialogView::LiveCaptionButtonPressed(const ui::Event& event) {
+void MediaDialogView::OnLiveCaptionButtonPressed() {
   bool enabled = !profile_->GetPrefs()->GetBoolean(prefs::kLiveCaptionEnabled);
   ToggleLiveCaption(enabled);
   base::UmaHistogramBoolean(

chrome/browser/ui/views/global_media_controls/media_dialog_view.h

@@ -92,7 +92,7 @@ class MediaDialogView : public views::BubbleDialogDelegateView,
   void WindowClosing() override;
 
   // views::Button::PressedCallback
-  void LiveCaptionButtonPressed(const ui::Event& event);
+  void OnLiveCaptionButtonPressed();
 
   void ToggleLiveCaption(bool enabled);
   void UpdateBubbleSize();

components/vector_icons/BUILD.gn

@@ -46,6 +46,8 @@ aggregate_vector_icons("components_vector_icons") {
     "insert_drive_file_outline.icon",
     "launch.icon",
     "lightbulb_outline.icon",
+    "live_caption_off.icon",
+    "live_caption_on.icon",
     "location_on.icon",
     "lock.icon",
     "media_next_track.icon",

components/vector_icons/live_caption_off.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, 20,
+MOVE_TO, 3.5f, 4,
+H_LINE_TO, 4,
+R_LINE_TO, 2, 2,
+H_LINE_TO, 4,
+R_V_LINE_TO, 8,
+R_H_LINE_TO, 10,
+R_LINE_TO, 2, 2,
+H_LINE_TO, 3.5f,
+ARC_TO, 1.5f, 1.5f, 0, 0, 1, 2, 14.5f,
+R_V_LINE_TO, -9,
+ARC_TO, 1.5f, 1.5f, 0, 0, 1, 3.5f, 4,
+CLOSE,
+MOVE_TO, 9, 10,
+V_LINE_TO, 9,
+R_LINE_TO, 1, 1,
+H_LINE_TO, 9,
+CLOSE,
+R_MOVE_TO, 6, -2,
+R_H_LINE_TO, -4.17f,
+R_LINE_TO, 2, 2,
+H_LINE_TO, 15,
+V_LINE_TO, 8,
+CLOSE,
+R_MOVE_TO, 1, -2,
+R_V_LINE_TO, 7.17f,
+R_LINE_TO, 1.89f, 1.89f,
+R_CUBIC_TO, 0.07f, -0.17f, 0.11f, -0.36f, 0.11f, -0.56f,
+R_V_LINE_TO, -9,
+ARC_TO, 1.5f, 1.5f, 0, 0, 0, 16.5f, 4,
+H_LINE_TO, 6.83f,
+R_LINE_TO, 2, 2,
+H_LINE_TO, 16,
+CLOSE,
+MOVE_TO, 5, 8,
+R_H_LINE_TO, 3,
+R_V_LINE_TO, 2,
+H_LINE_TO, 5,
+V_LINE_TO, 8,
+CLOSE,
+R_MOVE_TO, 6, 3,
+R_V_LINE_TO, 2,
+H_LINE_TO, 5,
+R_V_LINE_TO, -2,
+R_H_LINE_TO, 6,
+CLOSE,
+NEW_PATH,
+MOVE_TO, 1, 3,
+R_LINE_TO, 1.41f, -1.41f,
+R_LINE_TO, 15.56f, 15.56f,
+R_LINE_TO, -1.41f, 1.41f,
+CLOSE

chrome/app/vector_icons/live_caption.icon → components/vector_icons/live_caption_on.icon

@@ -4,42 +4,42 @@
 
 CANVAS_DIMENSIONS, 20,
 MOVE_TO, 2, 5.5f,
-CUBIC_TO, 2, 4.67f, 2.67f, 4, 3.5f, 4,
-H_LINE_TO, 16.5f,
-CUBIC_TO, 17.33f, 4, 18, 4.67f, 18, 5.5f,
-V_LINE_TO, 14.5f,
-CUBIC_TO, 18, 15.33f, 17.33f, 16, 16.5f, 16,
-H_LINE_TO, 3.5f,
-CUBIC_TO, 2.67f, 16, 2, 15.33f, 2, 14.5f,
-V_LINE_TO, 5.5f,
+ARC_TO, 1.5f, 1.5f, 0, 0, 1, 3.5f, 4,
+R_H_LINE_TO, 13,
+ARC_TO, 1.5f, 1.5f, 0, 0, 1, 18, 5.5f,
+R_V_LINE_TO, 9,
+R_ARC_TO, 1.5f, 1.5f, 0, 0, 1, -1.5f, 1.5f,
+R_H_LINE_TO, -13,
+ARC_TO, 1.5f, 1.5f, 0, 0, 1, 2, 14.5f,
+R_V_LINE_TO, -9,
 CLOSE,
 MOVE_TO, 4, 6,
-H_LINE_TO, 16,
-V_LINE_TO, 14,
+R_H_LINE_TO, 12,
+R_V_LINE_TO, 8,
 H_LINE_TO, 4,
 V_LINE_TO, 6,
 CLOSE,
-MOVE_TO, 5, 8,
-H_LINE_TO, 9,
-V_LINE_TO, 10,
+R_MOVE_TO, 1, 2,
+R_H_LINE_TO, 4,
+R_V_LINE_TO, 2,
 H_LINE_TO, 5,
 V_LINE_TO, 8,
 CLOSE,
-MOVE_TO, 5, 11,
-H_LINE_TO, 12,
-V_LINE_TO, 13,
+R_MOVE_TO, 0, 3,
+R_H_LINE_TO, 7,
+R_V_LINE_TO, 2,
 H_LINE_TO, 5,
-V_LINE_TO, 11,
+R_V_LINE_TO, -2,
 CLOSE,
-MOVE_TO, 15, 11,
-H_LINE_TO, 13,
-V_LINE_TO, 13,
-H_LINE_TO, 15,
-V_LINE_TO, 11,
+R_MOVE_TO, 10, 0,
+R_H_LINE_TO, -2,
+R_V_LINE_TO, 2,
+R_H_LINE_TO, 2,
+R_V_LINE_TO, -2,
 CLOSE,
-MOVE_TO, 10, 8,
-H_LINE_TO, 15,
-V_LINE_TO, 10,
-H_LINE_TO, 10,
+R_MOVE_TO, -5, -3,
+R_H_LINE_TO, 5,
+R_V_LINE_TO, 2,
+R_H_LINE_TO, -5,
 V_LINE_TO, 8,
 CLOSE

ui/views/controls/button/image_button.cc

@@ -13,6 +13,7 @@
 #include "ui/gfx/canvas.h"
 #include "ui/gfx/image/image_skia_operations.h"
 #include "ui/gfx/scoped_canvas.h"
+#include "ui/views/background.h"
 #include "ui/views/metadata/metadata_impl_macros.h"
 #include "ui/views/painter.h"
 #include "ui/views/widget/widget.h"
@@ -246,6 +247,11 @@ void ToggleImageButton::SetToggledImage(ButtonState image_state,
   }
 }
 
+void ToggleImageButton::SetToggledBackground(std::unique_ptr<Background> b) {
+  toggled_background_ = std::move(b);
+  SchedulePaint();
+}
+
 base::string16 ToggleImageButton::GetToggledTooltipText() const {
   return toggled_tooltip_text_;
 }
@@ -290,6 +296,15 @@ void ToggleImageButton::SetImage(ButtonState image_state,
   PreferredSizeChanged();
 }
 
+void ToggleImageButton::OnPaintBackground(gfx::Canvas* canvas) {
+  if (toggled_ && toggled_background_) {
+    TRACE_EVENT0("views", "View::OnPaintBackground");
+    toggled_background_->Paint(canvas, this);
+  } else {
+    ImageButton::OnPaintBackground(canvas);
+  }
+}
+
 ////////////////////////////////////////////////////////////////////////////////
 // ToggleImageButton, View overrides:
 

ui/views/controls/button/image_button.h

@@ -138,6 +138,11 @@ class VIEWS_EXPORT ToggleImageButton : public ImageButton {
   // before the button is toggled.
   void SetToggledImage(ButtonState state, const gfx::ImageSkia* image);
 
+  // Like Views::SetBackground(), but to set the background color used for the
+  // "has been toggled" state.
+  void SetToggledBackground(std::unique_ptr<Background> b);
+  Background* toggled_background() { return toggled_background_.get(); }
+
   // Get/Set the tooltip text displayed when the button is toggled.
   base::string16 GetToggledTooltipText() const;
   void SetToggledTooltipText(const base::string16& tooltip);
@@ -153,6 +158,7 @@ class VIEWS_EXPORT ToggleImageButton : public ImageButton {
   // Overridden from View:
   base::string16 GetTooltipText(const gfx::Point& p) const override;
   void GetAccessibleNodeData(ui::AXNodeData* node_data) override;
+  void OnPaintBackground(gfx::Canvas* canvas) override;
 
  private:
   // The parent class's images_ member is used for the current images,
@@ -163,6 +169,8 @@ class VIEWS_EXPORT ToggleImageButton : public ImageButton {
   // True if the button is currently toggled.
   bool toggled_ = false;
 
+  std::unique_ptr<Background> toggled_background_;
+
   // The parent class's tooltip_text_ is displayed when not toggled, and
   // this one is shown when toggled.
   base::string16 toggled_tooltip_text_;