[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.cc

@@ -4,14 +4,23 @@
 
 #include "ash/system/audio/unified_volume_view.h"
 
+#include <cmath>
+#include <memory>
+#include <utility>
+
 #include "ash/public/cpp/ash_features.h"
+#include "ash/public/cpp/ash_pref_names.h"
 #include "ash/resources/vector_icons/vector_icons.h"
+#include "ash/session/session_controller_impl.h"
+#include "ash/shell.h"
 #include "ash/strings/grit/ash_strings.h"
 #include "ash/style/ash_color_provider.h"
 #include "ash/system/tray/tray_popup_utils.h"
 #include "base/i18n/rtl.h"
 #include "base/stl_util.h"
+#include "components/prefs/pref_service.h"
 #include "components/vector_icons/vector_icons.h"
+#include "media/base/media_switches.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/gfx/canvas.h"
 #include "ui/gfx/image/image_skia_operations.h"
@@ -21,6 +30,7 @@
 #include "ui/views/animation/ink_drop_impl.h"
 #include "ui/views/animation/ink_drop_mask.h"
 #include "ui/views/background.h"
+#include "ui/views/controls/button/image_button_factory.h"
 #include "ui/views/controls/highlight_path_generator.h"
 #include "ui/views/controls/image_view.h"
 #include "ui/views/layout/box_layout.h"
@@ -53,38 +63,29 @@ const gfx::VectorIcon& GetVolumeIconForLevel(float level) {
   return *kVolumeLevelIcons[index];
 }
 
-SkColor GetBackgroundColorOfMoreButton() {
-  return AshColorProvider::Get()->GetControlsLayerColor(
-      AshColorProvider::ControlsLayerType::kControlBackgroundColorInactive);
-}
-
-class MoreButton : public views::Button {
+// A template class for the UnifiedVolumeView buttons, used by the More and
+// Live Caption buttons. |T| must be a subtype of |views::Button|.
+template <typename T>
+class UnifiedVolumeViewButton : public T {
  public:
-  explicit MoreButton(PressedCallback callback)
-      : views::Button(std::move(callback)) {
-    SetLayoutManager(std::make_unique<views::BoxLayout>(
-        views::BoxLayout::Orientation::kHorizontal,
-        gfx::Insets((kTrayItemSize -
-                     GetDefaultSizeOfVectorIcon(vector_icons::kHeadsetIcon)) /
-                    2),
-        2));
-
-    if (!features::IsSystemTrayMicGainSettingEnabled()) {
-      headset_image_ = AddChildView(std::make_unique<views::ImageView>());
-      headset_image_->SetCanProcessEventsWithinSubtree(false);
-    }
-    more_image_ = AddChildView(std::make_unique<views::ImageView>());
-    more_image_->SetCanProcessEventsWithinSubtree(false);
-    SetTooltipText(l10n_util::GetStringUTF16(IDS_ASH_STATUS_TRAY_AUDIO));
+  static_assert(std::is_base_of<views::Button, T>::value,
+                "T must be a subtype of views::Button");
+
+  // A constructor that forwards |args| to |T|'s constructor, so |args| are the
+  // exact same as required by |T|'s constructor. It sets up the ink drop on the
+  // view.
+  template <typename... Args>
+  explicit UnifiedVolumeViewButton(Args... args)
+      : T(std::forward<Args>(args)...) {
     TrayPopupUtils::ConfigureTrayPopupButton(this);
 
     views::InstallRoundRectHighlightPathGenerator(this, gfx::Insets(),
                                                   kTrayItemCornerRadius);
-    SetBackground(views::CreateRoundedRectBackground(
-        GetBackgroundColorOfMoreButton(), kTrayItemCornerRadius));
+    T::SetBackground(views::CreateRoundedRectBackground(GetBackgroundColor(),
+                                                        kTrayItemCornerRadius));
   }
 
-  ~MoreButton() override = default;
+  ~UnifiedVolumeViewButton() override = default;
 
   std::unique_ptr<views::InkDrop> CreateInkDrop() override {
     return TrayPopupUtils::CreateInkDrop(this);
@@ -93,7 +94,7 @@ class MoreButton : public views::Button {
   std::unique_ptr<views::InkDropRipple> CreateInkDropRipple() const override {
     return TrayPopupUtils::CreateInkDropRipple(
         TrayPopupInkDropStyle::FILL_BOUNDS, this,
-        GetInkDropCenterBasedOnLastEvent());
+        T::GetInkDropCenterBasedOnLastEvent());
   }
 
   std::unique_ptr<views::InkDropHighlight> CreateInkDropHighlight()
@@ -101,13 +102,109 @@ class MoreButton : public views::Button {
     return TrayPopupUtils::CreateInkDropHighlight(this);
   }
 
+  void OnThemeChanged() override {
+    T::OnThemeChanged();
+    auto* color_provider = AshColorProvider::Get();
+    T::focus_ring()->SetColor(color_provider->GetControlsLayerColor(
+        AshColorProvider::ControlsLayerType::kFocusRingColor));
+    T::background()->SetNativeControlColor(GetBackgroundColor());
+  }
+
+  SkColor GetIconColor() {
+    return AshColorProvider::Get()->GetContentLayerColor(
+        AshColorProvider::ContentLayerType::kButtonIconColor);
+  }
+
+  SkColor GetBackgroundColor() {
+    return AshColorProvider::Get()->GetControlsLayerColor(
+        AshColorProvider::ControlsLayerType::kControlBackgroundColorInactive);
+  }
+};
+
+class LiveCaptionButton
+    : public UnifiedVolumeViewButton<views::ToggleImageButton> {
+ public:
+  explicit LiveCaptionButton(PressedCallback callback)
+      : UnifiedVolumeViewButton(std::move(callback)) {
+    DCHECK_EQ(GetDefaultSizeOfVectorIcon(vector_icons::kLiveCaptionOffIcon),
+              GetDefaultSizeOfVectorIcon(vector_icons::kLiveCaptionOnIcon));
+    int icon_size =
+        GetDefaultSizeOfVectorIcon(vector_icons::kLiveCaptionOnIcon);
+    SetBorder(
+        views::CreateEmptyBorder(gfx::Insets((kTrayItemSize - icon_size) / 2)));
+    SetImageHorizontalAlignment(ALIGN_CENTER);
+    SetImageVerticalAlignment(ALIGN_MIDDLE);
+
+    SetTooltipText(l10n_util::GetStringFUTF16(
+        IDS_ASH_STATUS_TRAY_LIVE_CAPTION_TOGGLE_TOOLTIP,
+        l10n_util::GetStringUTF16(
+            IDS_ASH_STATUS_TRAY_LIVE_CAPTION_DISABLED_STATE_TOOLTIP)));
+    SetToggledTooltipText(l10n_util::GetStringFUTF16(
+        IDS_ASH_STATUS_TRAY_LIVE_CAPTION_TOGGLE_TOOLTIP,
+        l10n_util::GetStringUTF16(
+            IDS_ASH_STATUS_TRAY_LIVE_CAPTION_ENABLED_STATE_TOOLTIP)));
+
+    SetToggledBackground(views::CreateRoundedRectBackground(
+        GetToggledBackgroundColor(), kTrayItemCornerRadius));
+  }
+
+  ~LiveCaptionButton() override = default;
+
+  const char* GetClassName() const override { return "LiveCaptionButton"; }
+
+  void OnThemeChanged() override {
+    UnifiedVolumeViewButton::OnThemeChanged();
+    const int icon_size =
+        GetDefaultSizeOfVectorIcon(vector_icons::kLiveCaptionOnIcon);
+    views::SetImageFromVectorIconWithColor(
+        this, vector_icons::kLiveCaptionOffIcon, icon_size, GetIconColor());
+    views::SetToggledImageFromVectorIconWithColor(
+        this, vector_icons::kLiveCaptionOnIcon, icon_size,
+        GetToggledIconColor(), GetToggledIconColor());
+    toggled_background()->SetNativeControlColor(GetToggledBackgroundColor());
+  }
+
+  SkColor GetToggledIconColor() {
+    return AshColorProvider::Get()->GetContentLayerColor(
+        AshColorProvider::ContentLayerType::kButtonIconColorPrimary);
+  }
+
+  SkColor GetToggledBackgroundColor() {
+    return AshColorProvider::Get()->GetControlsLayerColor(
+        AshColorProvider::ControlsLayerType::kControlBackgroundColorActive);
+  }
+
+ private:
+  DISALLOW_COPY_AND_ASSIGN(LiveCaptionButton);
+};
+
+class MoreButton : public UnifiedVolumeViewButton<views::Button> {
+ public:
+  explicit MoreButton(PressedCallback callback)
+      : UnifiedVolumeViewButton(std::move(callback)) {
+    SetLayoutManager(std::make_unique<views::BoxLayout>(
+        views::BoxLayout::Orientation::kHorizontal,
+        gfx::Insets((kTrayItemSize -
+                     GetDefaultSizeOfVectorIcon(vector_icons::kHeadsetIcon)) /
+                    2),
+        2));
+
+    if (!features::IsSystemTrayMicGainSettingEnabled()) {
+      headset_image_ = AddChildView(std::make_unique<views::ImageView>());
+      headset_image_->SetCanProcessEventsWithinSubtree(false);
+    }
+    more_image_ = AddChildView(std::make_unique<views::ImageView>());
+    more_image_->SetCanProcessEventsWithinSubtree(false);
+    SetTooltipText(l10n_util::GetStringUTF16(IDS_ASH_STATUS_TRAY_AUDIO));
+  }
+
+  ~MoreButton() override = default;
+
   const char* GetClassName() const override { return "MoreButton"; }
 
   void OnThemeChanged() override {
-    views::Button::OnThemeChanged();
-    auto* color_provider = AshColorProvider::Get();
-    const SkColor icon_color = color_provider->GetContentLayerColor(
-        AshColorProvider::ContentLayerType::kIconColorPrimary);
+    UnifiedVolumeViewButton::OnThemeChanged();
+    const SkColor icon_color = GetIconColor();
     if (headset_image_) {
       headset_image_->SetImage(
           CreateVectorIcon(vector_icons::kHeadsetIcon, icon_color));
@@ -118,9 +215,6 @@ class MoreButton : public views::Button {
                              : SkBitmapOperations::ROTATION_90_CW;
     more_image_->SetImage(gfx::ImageSkiaOperations::CreateRotatedImage(
         CreateVectorIcon(kUnifiedMenuExpandIcon, icon_color), icon_rotation));
-    focus_ring()->SetColor(color_provider->GetControlsLayerColor(
-        AshColorProvider::ControlsLayerType::kFocusRingColor));
-    background()->SetNativeControlColor(GetBackgroundColorOfMoreButton());
   }
 
  private:
@@ -141,11 +235,15 @@ UnifiedVolumeView::UnifiedVolumeView(
                         controller,
                         kSystemMenuVolumeHighIcon,
                         IDS_ASH_STATUS_TRAY_VOLUME_SLIDER_LABEL),
+      live_caption_button_(new LiveCaptionButton(
+          base::BindRepeating(&UnifiedVolumeView::OnLiveCaptionButtonPressed,
+                              base::Unretained(this)))),
       more_button_(new MoreButton(
           base::BindRepeating(&UnifiedVolumeSliderController::Delegate::
                                   OnAudioSettingsButtonClicked,
                               base::Unretained(delegate)))) {
   CrasAudioHandler::Get()->AddAudioObserver(this);
+  AddChildViewAt(live_caption_button_, 0);
   AddChildView(more_button_);
   Update(false /* by_user */);
 }
@@ -178,6 +276,12 @@ void UnifiedVolumeView::Update(bool by_user) {
   button()->SetTooltipText(l10n_util::GetStringFUTF16(
       IDS_ASH_STATUS_TRAY_VOLUME, state_tooltip_text));
 
+  live_caption_button_->SetVisible(
+      base::FeatureList::IsEnabled(media::kLiveCaption));
+  live_caption_button_->SetToggled(
+      Shell::Get()->session_controller()->GetActivePrefService()->GetBoolean(
+          prefs::kLiveCaptionEnabled));
+
   more_button_->SetVisible(CrasAudioHandler::Get()->has_alternative_input() ||
                            CrasAudioHandler::Get()->has_alternative_output() ||
                            features::IsSystemTrayMicGainSettingEnabled());
@@ -220,4 +324,12 @@ void UnifiedVolumeView::ChildVisibilityChanged(views::View* child) {
   Layout();
 }
 
+void UnifiedVolumeView::OnLiveCaptionButtonPressed() {
+  PrefService* prefs =
+      Shell::Get()->session_controller()->GetActivePrefService();
+  bool enabled = !prefs->GetBoolean(prefs::kLiveCaptionEnabled);
+  prefs->SetBoolean(prefs::kLiveCaptionEnabled, enabled);
+  live_caption_button_->SetToggled(enabled);
+}
+
 }  // namespace ash

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_;