gd: Update the record game buttons' colors and icons

After a user starts recording the game window, update the record game
buttons' UI. In the toolbar, the record game button icon updates
to the stop button. In the main menu view, the record game button icon
updates to the stop button, and its sublabel shows the recording
duration.

Update feature_tile.h to optionally set the background and foreground
colors of the toggled and un-toggled states.

Bug: b:295070122, b:300989493, b:300989554
Test: Manual test and ash unit tests

Change-Id: I1458d6223abd05078f5584ee24c3a6a972f36164
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4875518
Reviewed-by: Ahmed Fakhry <afakhry@chromium.org>
Commit-Queue: Prameet Shah <phshah@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1199303}

ash/ash_strings.grd

@@ -7113,6 +7113,9 @@ To shut down the device, press and hold the power button on the device again.
       <message name="IDS_ASH_GAME_DASHBOARD_RECORD_GAME_TILE_BUTTON_TITLE" translateable="false" desc="The display name for the Game Dashboard record game tile.">
         Record game
       </message>
+      <message name="IDS_ASH_GAME_DASHBOARD_RECORD_GAME_TILE_BUTTON_RECORDING_TITLE" translateable="false" desc="The display name for the Game Dashboard record game tile when the window is being recorded.">
+        Recording
+      </message>
       <message name="IDS_ASH_GAME_DASHBOARD_SCREENSHOT_TILE_BUTTON_TITLE" translateable="false" desc="The display name for the Game Dashboard screenshot tile.">
         Take screenshot
       </message>

ash/ash_strings_grd/IDS_ASH_GAME_DASHBOARD_RECORD_GAME_TILE_BUTTON_RECORDING_TITLE.png.sha1

@@ -0,0 +1 @@
+18dff70ca95a21d190a920ef7b03e962a63f535b

ash/game_dashboard/game_dashboard_context.h

@@ -52,6 +52,10 @@ class ASH_EXPORT GameDashboardContext : public views::ViewObserver {
     return toolbar_snap_location_;
   }
 
+  const std::u16string& recording_duration() const {
+    return recording_duration_;
+  }
+
   // Reassigns the new `toolbar_snap_location_` and performs an animation as the
   // toolbar moves to its new location.
   void SetToolbarSnapLocation(ToolbarSnapLocation new_location);

ash/game_dashboard/game_dashboard_main_menu_view.cc

@@ -259,8 +259,7 @@ void GameDashboardMainMenuView::OnRecordingEnded() {
 
 void GameDashboardMainMenuView::UpdateRecordingDuration(
     const std::u16string& duration) {
-  // TODO(b/295070122): Update `record_game_tile_`'s sub-label text to
-  // `duration`.
+  record_game_tile_->SetSubLabel(duration);
 }
 
 void GameDashboardMainMenuView::OnToolbarTilePressed() {
@@ -420,6 +419,13 @@ void GameDashboardMainMenuView::AddShortcutTilesRow() {
         l10n_util::GetStringUTF16(
             IDS_ASH_GAME_DASHBOARD_RECORD_GAME_TILE_BUTTON_TITLE),
         /*sub_label=*/absl::nullopt));
+    record_game_tile_->SetBackgroundColorId(
+        cros_tokens::kCrosSysSystemOnBaseOpaque);
+    record_game_tile_->SetForegroundColorId(cros_tokens::kCrosSysOnSurface);
+    record_game_tile_->SetBackgroundToggledColorId(
+        cros_tokens::kCrosSysSystemNegativeContainer);
+    record_game_tile_->SetForegroundToggledColorId(
+        cros_tokens::kCrosSysSystemOnNegativeContainer);
     UpdateRecordGameTile(
         GameDashboardController::Get()->active_recording_context() == context_);
   }
@@ -632,9 +638,19 @@ void GameDashboardMainMenuView::UpdateRecordGameTile(
   record_game_tile_->SetEnabled(
       is_recording_game_window ||
       !CaptureModeController::Get()->is_recording_in_progress());
+
+  record_game_tile_->SetVectorIcon(is_recording_game_window
+                                       ? kCaptureModeCircleStopIcon
+                                       : kGdRecordGameIcon);
+  record_game_tile_->SetLabel(l10n_util::GetStringUTF16(
+      is_recording_game_window
+          ? IDS_ASH_GAME_DASHBOARD_RECORD_GAME_TILE_BUTTON_RECORDING_TITLE
+          : IDS_ASH_GAME_DASHBOARD_RECORD_GAME_TILE_BUTTON_TITLE));
+  if (is_recording_game_window) {
+    record_game_tile_->SetSubLabel(context_->recording_duration());
+  }
+  record_game_tile_->SetSubLabelVisibility(is_recording_game_window);
   record_game_tile_->SetToggled(is_recording_game_window);
-  // TODO(b/273641154): Update record_game_tile_'s UI to reflect the updated
-  // state.
 }
 
 BEGIN_METADATA(GameDashboardMainMenuView, views::BubbleDialogDelegateView)

ash/game_dashboard/game_dashboard_toolbar_view.cc

@@ -53,7 +53,7 @@ std::unique_ptr<IconButton> CreateIconButton(base::RepeatingClosure callback,
                                              bool is_togglable) {
   // TODO(b/290696780): Update logic so the toolbar can drag from icon buttons.
   auto button = std::make_unique<IconButton>(
-      std::move(callback), IconButton::Type::kSmallFloating, icon, text,
+      std::move(callback), IconButton::Type::kMedium, icon, text,
       /*is_togglable=*/is_togglable, /*has_border=*/true);
   button->SetID(view_id);
   return button;
@@ -347,6 +347,13 @@ void GameDashboardToolbarView::AddShortcutTiles() {
         l10n_util::GetStringUTF16(
             IDS_ASH_GAME_DASHBOARD_RECORD_GAME_TILE_BUTTON_TITLE),
         /*is_togglable=*/true));
+    record_game_button_->SetVectorIcon(kGdRecordGameIcon);
+    record_game_button_->SetIconColorId(cros_tokens::kCrosSysOnSurface);
+
+    record_game_button_->SetBackgroundToggledColorId(
+        cros_tokens::kCrosSysError);
+    record_game_button_->SetToggledVectorIcon(kCaptureModeCircleStopIcon);
+    record_game_button_->SetIconToggledColorId(cros_tokens::kCrosSysOnError);
     UpdateRecordGameButton(
         GameDashboardController::Get()->active_recording_context() == context_);
   }
@@ -397,8 +404,6 @@ void GameDashboardToolbarView::UpdateRecordGameButton(
       is_recording_game_window ||
       !CaptureModeController::Get()->is_recording_in_progress());
   record_game_button_->SetToggled(is_recording_game_window);
-  // TODO(b/273641154): Update record_game_button_'s UI to reflect the updated
-  // state.
 }
 
 void GameDashboardToolbarView::OnWindowPropertyChanged(aura::Window* window,

ash/system/unified/feature_tile.cc

@@ -237,10 +237,15 @@ void FeatureTile::UpdateColors() {
   ui::ColorId foreground_optional_color;
 
   if (GetEnabled()) {
-    background_color = toggled_ ? cros_tokens::kCrosSysSystemPrimaryContainer
-                                : cros_tokens::kCrosSysSystemOnBase;
-    foreground_color = toggled_ ? cros_tokens::kCrosSysSystemOnPrimaryContainer
-                                : cros_tokens::kCrosSysOnSurface;
+    background_color =
+        toggled_
+            ? background_toggled_color_.value_or(
+                  cros_tokens::kCrosSysSystemPrimaryContainer)
+            : background_color_.value_or(cros_tokens::kCrosSysSystemOnBase);
+    foreground_color =
+        toggled_ ? foreground_toggled_color_.value_or(
+                       cros_tokens::kCrosSysSystemOnPrimaryContainer)
+                 : foreground_color_.value_or(cros_tokens::kCrosSysOnSurface);
     foreground_optional_color =
         toggled_ ? cros_tokens::kCrosSysSystemOnPrimaryContainer
                  : cros_tokens::kCrosSysOnSurfaceVariant;
@@ -297,6 +302,47 @@ void FeatureTile::SetVectorIcon(const gfx::VectorIcon& icon) {
   icon_button_->SetImageModel(views::Button::STATE_DISABLED, image_model);
 }
 
+void FeatureTile::SetBackgroundColorId(ui::ColorId background_color_id) {
+  if (background_color_ == background_color_id) {
+    return;
+  }
+  background_color_ = background_color_id;
+  if (!toggled_) {
+    UpdateColors();
+  }
+}
+void FeatureTile::SetBackgroundToggledColorId(
+    ui::ColorId background_toggled_color_id) {
+  if (background_toggled_color_ == background_toggled_color_id) {
+    return;
+  }
+  background_toggled_color_ = background_toggled_color_id;
+  if (toggled_) {
+    UpdateColors();
+  }
+}
+
+void FeatureTile::SetForegroundColorId(ui::ColorId foreground_color_id) {
+  if (foreground_color_ == foreground_color_id) {
+    return;
+  }
+  foreground_color_ = foreground_color_id;
+  if (!toggled_) {
+    UpdateColors();
+  }
+}
+
+void FeatureTile::SetForegroundToggledColorId(
+    ui::ColorId foreground_toggled_color_id) {
+  if (foreground_toggled_color_ == foreground_toggled_color_id) {
+    return;
+  }
+  foreground_toggled_color_ = foreground_toggled_color_id;
+  if (toggled_) {
+    UpdateColors();
+  }
+}
+
 void FeatureTile::SetImage(gfx::ImageSkia image) {
   auto image_model = ui::ImageModel::FromImageSkia(image);
   icon_button_->SetImageModel(views::Button::STATE_NORMAL, image_model);
@@ -370,8 +416,9 @@ ui::ColorId FeatureTile::GetIconColorId() const {
   if (!GetEnabled()) {
     return cros_tokens::kCrosSysDisabled;
   }
-  return toggled_ ? cros_tokens::kCrosSysSystemOnPrimaryContainer
-                  : cros_tokens::kCrosSysOnSurface;
+  return toggled_ ? foreground_toggled_color_.value_or(
+                        cros_tokens::kCrosSysSystemOnPrimaryContainer)
+                  : foreground_color_.value_or(cros_tokens::kCrosSysOnSurface);
 }
 
 void FeatureTile::UpdateIconButtonRippleColors() {

ash/system/unified/feature_tile.h

@@ -10,6 +10,7 @@
 #include "base/memory/raw_ptr.h"
 #include "base/memory/weak_ptr.h"
 #include "ui/base/metadata/metadata_header_macros.h"
+#include "ui/color/color_id.h"
 #include "ui/views/controls/button/button.h"
 
 namespace gfx {
@@ -101,6 +102,16 @@ class ASH_EXPORT FeatureTile : public views::Button {
   // Sets the vector icon.
   void SetVectorIcon(const gfx::VectorIcon& icon);
 
+  // Sets the button's background color or toggled color with color ID when the
+  // button wants to have a different background color from the default one.
+  void SetBackgroundColorId(ui::ColorId background_color_id);
+  void SetBackgroundToggledColorId(ui::ColorId background_toggled_color_id);
+
+  // Sets the button's foreground color or toggled color with color ID when the
+  // button wants to have a different foreground color from the default one.
+  void SetForegroundColorId(ui::ColorId foreground_color_id);
+  void SetForegroundToggledColorId(ui::ColorId foreground_toggled_color_id);
+
   // Sets the tile icon from an ImageSkia.
   void SetImage(gfx::ImageSkia image);
 
@@ -159,6 +170,12 @@ class ASH_EXPORT FeatureTile : public views::Button {
   // The vector icon for the tile, if one is set.
   raw_ptr<const gfx::VectorIcon, ExperimentalAsh> vector_icon_ = nullptr;
 
+  // Customized value for the tile's background color and foreground color.
+  absl::optional<ui::ColorId> background_color_;
+  absl::optional<ui::ColorId> background_toggled_color_;
+  absl::optional<ui::ColorId> foreground_color_;
+  absl::optional<ui::ColorId> foreground_toggled_color_;
+
   // Owned by views hierarchy.
   raw_ptr<views::ImageButton, ExperimentalAsh> icon_button_ = nullptr;
   raw_ptr<views::Label, ExperimentalAsh> label_ = nullptr;