VC UI: Update VC tray buttons and layout according to spec

- Add a new functionality to IconButton to allow toggled state uses a
  different vector icon. Added a toggled icon for the camera mute
  button.
- Make the toggle button floating.
- Adjust button size and spacing.

Screenshot: https://screenshot.googleplex.com/8h7pdntcnQ9JPbf

Bug: b:261201212
Change-Id: I368356f087cdbaae5cfce2075565338d2d7596af
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4084166
Reviewed-by: Alex Newcomer <newcomer@chromium.org>
Reviewed-by: Xiaodan Zhu <zxdan@chromium.org>
Reviewed-by: Evan Stade <estade@chromium.org>
Commit-Queue: Andre Le <leandre@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1081237}

ash/ash_strings.grd

@@ -1435,6 +1435,11 @@ Style notes:
         Scanning
       </message>
 
+       <!-- Video Conference tray-->
+      <message name="IDS_ASH_VIDEO_CONFERENCE_TOGGLE_BUBBLE_BUTTON_TOOLTIP" desc="The tooltip for the toggle bubble button in the video conference tray.">
+        Camera and audio controls
+      </message>
+
       <!-- Phone Hub tray-->
       <message name="IDS_ASH_PHONE_HUB_TRAY_ACCESSIBLE_NAME" desc="The accessible name of the Phone Hub tray bubble for screen readers.">
         Phone Hub

ash/ash_strings_grd/IDS_ASH_VIDEO_CONFERENCE_TOGGLE_BUBBLE_BUTTON_TOOLTIP.png.sha1

@@ -0,0 +1 @@
+55c6b4568703b2c2a5650401254bb72016345aac

ash/resources/vector_icons/BUILD.gn

@@ -501,6 +501,7 @@ aggregate_vector_icons("ash_vector_icons") {
     "unified_network_badge_vpn.icon",
     "unpinned.icon",
     "unrendered_html_placeholder.icon",
+    "video_conference_camera_muted.icon",
     "visibility.icon",
     "visibility_off.icon",
     "wallpaper.icon",

ash/resources/vector_icons/video_conference_camera_muted.icon

@@ -0,0 +1,35 @@
+// Copyright 2022 The Chromium Authors
+// 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, 2.23f, 2.31f,
+LINE_TO, 1, 3.55f,
+R_LINE_TO, 1.56f, 1.56f,
+ARC_TO, 1, 1, 0, 0, 0, 2, 6,
+R_V_LINE_TO, 8.01f,
+R_CUBIC_TO, 0, 0.55f, 0.45f, 1, 1, 1,
+R_H_LINE_TO, 9.45f,
+R_LINE_TO, 3.14f, 3.14f,
+R_LINE_TO, 1.24f, -1.24f,
+LINE_TO, 2.23f, 2.31f,
+CLOSE,
+MOVE_TO, 10.45f, 13,
+R_LINE_TO, -6, -6,
+H_LINE_TO, 4,
+R_V_LINE_TO, 6,
+R_H_LINE_TO, 6.45f,
+CLOSE,
+NEW_PATH,
+R_MOVE_TO, 12, 10,
+R_LINE_TO, 2, 2,
+LINE_TO, 18, 14.5f,
+R_V_LINE_TO, -9,
+R_LINE_TO, -4, 3,
+V_LINE_TO, 6,
+CUBIC_TO, 14, 5.45f, 13.55f, 5, 13, 5,
+H_LINE_TO, 7,
+R_LINE_TO, 2, 2,
+H_LINE_TO, 12,
+R_V_LINE_TO, 3,
+CLOSE

ash/style/icon_button.cc

@@ -150,6 +150,11 @@ void IconButton::SetVectorIcon(const gfx::VectorIcon& icon) {
   UpdateVectorIcon();
 }
 
+void IconButton::SetToggledVectorIcon(const gfx::VectorIcon& icon) {
+  toggled_icon_ = &icon;
+  UpdateVectorIcon();
+}
+
 void IconButton::SetBackgroundColor(const SkColor background_color) {
   if (background_color_ == background_color)
     return;
@@ -333,6 +338,8 @@ void IconButton::UpdateVectorIcon() {
             : static_cast<ui::ColorId>(kColorAshButtonIconColorPrimary)));
   }
 
+  const gfx::VectorIcon* icon =
+      toggled_ && toggled_icon_ ? toggled_icon_ : icon_;
   const SkColor icon_color = toggled_ ? toggled_icon_color : normal_icon_color;
   const int icon_size = icon_size_.value_or(GetIconSizeOnType(type_));
 
@@ -342,7 +349,7 @@ void IconButton::UpdateVectorIcon() {
   // assumes that toggled/disabled images changes at the same time as the normal
   // image, which it currently does.
   const gfx::ImageSkia new_normal_image =
-      gfx::CreateVectorIcon(*icon_, icon_size, icon_color);
+      gfx::CreateVectorIcon(*icon, icon_size, icon_color);
   const gfx::ImageSkia& old_normal_image =
       GetImage(views::Button::STATE_NORMAL);
   if (!new_normal_image.isNull() && !old_normal_image.isNull() &&
@@ -353,7 +360,7 @@ void IconButton::UpdateVectorIcon() {
   SetImage(views::Button::STATE_NORMAL, new_normal_image);
   SetImage(
       views::Button::STATE_DISABLED,
-      gfx::CreateVectorIcon(*icon_, icon_size,
+      gfx::CreateVectorIcon(*icon, icon_size,
                             ColorUtil::GetDisabledColor(normal_icon_color)));
 }
 

ash/style/icon_button.h

@@ -101,6 +101,11 @@ class ASH_EXPORT IconButton : public views::ImageButton {
   // states.
   void SetVectorIcon(const gfx::VectorIcon& icon);
 
+  // Sets the vector icon used when the button is toggled. If the button does
+  // not specify a toggled vector icon, it will use the same vector icon for
+  // all states.
+  void SetToggledVectorIcon(const gfx::VectorIcon& icon);
+
   // Sets the button's background color or toggled color with color value and
   // color ID when the button wants to have a different background color from
   // the default one. When both color value and color ID are set, color ID takes
@@ -151,6 +156,7 @@ class ASH_EXPORT IconButton : public views::ImageButton {
 
   const Type type_;
   const gfx::VectorIcon* icon_ = nullptr;
+  const gfx::VectorIcon* toggled_icon_ = nullptr;
 
   Delegate* delegate_ = nullptr;
 

ash/system/video_conference/video_conference_tray.cc

@@ -31,6 +31,7 @@ namespace ash {
 
 namespace {
 
+constexpr float kTrayButtonsSpacing = 4;
 constexpr float kPrivacyIndicatorRadius = 4;
 constexpr float kIndicatorBorderWidth = 1;
 
@@ -39,9 +40,9 @@ class ToggleBubbleButton : public IconButton {
  public:
   ToggleBubbleButton(VideoConferenceTray* tray, PressedCallback callback)
       : IconButton(std::move(callback),
-                   IconButton::Type::kMedium,
+                   IconButton::Type::kMediumFloating,
                    &kUnifiedMenuExpandIcon,
-                   IDS_ASH_STATUS_TRAY_SCREEN_SHARE_TITLE,
+                   IDS_ASH_VIDEO_CONFERENCE_TOGGLE_BUBBLE_BUTTON_TOOLTIP,
                    /*is_togglable=*/true,
                    /*has_border=*/true),
         tray_(tray) {}
@@ -51,13 +52,16 @@ class ToggleBubbleButton : public IconButton {
 
   // IconButton:
   void PaintButtonContents(gfx::Canvas* canvas) override {
-    const gfx::Rect rect(GetContentsBounds());
+    // Only draw the background when the button is toggled.
-    cc::PaintFlags flags;
+    if (toggled()) {
-    flags.setAntiAlias(true);
+      const gfx::Rect rect(GetContentsBounds());
-    flags.setColor(GetBackgroundColor());
+      cc::PaintFlags flags;
-    flags.setStyle(cc::PaintFlags::kFill_Style);
+      flags.setAntiAlias(true);
-    canvas->DrawCircle(gfx::PointF(rect.CenterPoint()), rect.width() / 2,
+      flags.setColor(GetBackgroundColor());
-                       flags);
+      flags.setStyle(cc::PaintFlags::kFill_Style);
+      canvas->DrawCircle(gfx::PointF(rect.CenterPoint()), rect.width() / 2,
+                         flags);
+    }
 
     // Rotate the canvas to rotate the expand indicator according to toggle
     // state and shelf alignment. Note that when shelf alignment changes,
@@ -80,13 +84,19 @@ class ToggleBubbleButton : public IconButton {
 VideoConferenceTrayButton::VideoConferenceTrayButton(
     PressedCallback callback,
     const gfx::VectorIcon* icon,
+    const gfx::VectorIcon* toggled_icon,
     const int accessible_name_id)
     : IconButton(std::move(callback),
-                 IconButton::Type::kLarge,
+                 IconButton::Type::kMedium,
                  icon,
                  accessible_name_id,
                  /*is_togglable=*/true,
-                 /*has_border=*/true) {}
+                 /*has_border=*/true) {
+  // TODO(b/261620616): Update this color according to spec.
+  SetBackgroundToggledColorId(kColorAshControlBackgroundColorAlert);
+
+  SetToggledVectorIcon(*toggled_icon);
+}
 
 VideoConferenceTrayButton::~VideoConferenceTrayButton() = default;
 
@@ -132,23 +142,26 @@ void VideoConferenceTrayButton::PaintButtonContents(gfx::Canvas* canvas) {
 VideoConferenceTray::VideoConferenceTray(Shelf* shelf)
     : TrayBackgroundView(shelf,
                          TrayBackgroundViewCatalogName::kVideoConferenceTray) {
+  tray_container()->SetSpacingBetweenChildren(kTrayButtonsSpacing);
+
   audio_icon_ = tray_container()->AddChildView(
       std::make_unique<VideoConferenceTrayButton>(
           base::BindRepeating(&VideoConferenceTray::OnAudioButtonClicked,
                               weak_ptr_factory_.GetWeakPtr()),
-          &kPrivacyIndicatorsMicrophoneIcon,
+          &kPrivacyIndicatorsMicrophoneIcon, &kPrivacyIndicatorsMicrophoneIcon,
           IDS_PRIVACY_NOTIFICATION_TITLE_MIC));
   camera_icon_ = tray_container()->AddChildView(
       std::make_unique<VideoConferenceTrayButton>(
           base::BindRepeating(&VideoConferenceTray::OnCameraButtonClicked,
                               weak_ptr_factory_.GetWeakPtr()),
-          &kPrivacyIndicatorsCameraIcon,
+          &kPrivacyIndicatorsCameraIcon, &kVideoConferenceCameraMutedIcon,
           IDS_PRIVACY_NOTIFICATION_TITLE_CAMERA));
   screen_share_icon_ = tray_container()->AddChildView(
       std::make_unique<VideoConferenceTrayButton>(
           base::BindRepeating(&VideoConferenceTray::OnScreenShareButtonClicked,
                               weak_ptr_factory_.GetWeakPtr()),
           &kPrivacyIndicatorsScreenShareIcon,
+          &kPrivacyIndicatorsScreenShareIcon,
           IDS_ASH_STATUS_TRAY_SCREEN_SHARE_TITLE));
   toggle_bubble_button_ =
       tray_container()->AddChildView(std::make_unique<ToggleBubbleButton>(

ash/system/video_conference/video_conference_tray.h

@@ -39,6 +39,7 @@ class VideoConferenceTrayButton : public IconButton {
  public:
   VideoConferenceTrayButton(PressedCallback callback,
                             const gfx::VectorIcon* icon,
+                            const gfx::VectorIcon* toggled_icon,
                             const int accessible_name_id);
 
   VideoConferenceTrayButton(const VideoConferenceTrayButton&) = delete;