dark_mode: Updates toggle button on color mode changes.

Changes:
- Update the toggle button in the detailed view while color mode
  changes.
- Other small polish.

Bug: 1106012
Change-Id: I72e89861e963bff51062bacd423dd61bb8a366e8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2393357Reviewed-by: Ahmed Fakhry <afakhry@chromium.org>
Commit-Queue: Min Chen <minch@chromium.org>
Cr-Commit-Position: refs/heads/master@{#805444}

ash/ash_strings.grd

@@ -330,37 +330,34 @@ This file contains the strings for ash.
       <message name="IDS_ASH_STATUS_TRAY_CAST_CAST_DESKTOP" desc="The label used in the tray popup to tell the user we are casting the desktop.">
         Casting screen to <ph name="RECEIVER_NAME">$1<ex>Living Room</ex></ph>
       </message>
-      <message name="IDS_ASH_STATUS_TRAY_DARK_MODE_BUTTON_LABEL" desc="The shorter label used for the button in the status tray to toggle the Dark Mode feature. [CHAR_LIMIT=14]">
-        Dark Mode
+      <message name="IDS_ASH_STATUS_TRAY_DARK_THEME" desc="The label used as the header in the dark theme popup. [CHAR_LIMIT=14]">
+        Dark theme
       </message>
-      <message name="IDS_ASH_STATUS_TRAY_DARK_MODE_TOGGLE_TOOLTIP" desc="The tooltip text used for the button in the status tray to toggle the Dark Mode feature on or off.">
-        Toggle Dark Mode. <ph name="STATE_TEXT">$1<ex>Dark Mode is on.</ex></ph>
+      <message name="IDS_ASH_STATUS_TRAY_DARK_THEME_TOGGLE_TOOLTIP" desc="The tooltip text used for the button in the status tray to toggle the Dark theme feature on or off.">
+        Toggle Dark theme. <ph name="STATE_TEXT">$1<ex>Dark theme is on.</ex></ph>
       </message>
-      <message name="IDS_ASH_STATUS_TRAY_DARK_MODE_ENABLED_STATE_TOOLTIP" desc="The tooltip text indicating the Dark Mode feature is on.">
-        Dark Mode is on.
+      <message name="IDS_ASH_STATUS_TRAY_DARK_THEME_ENABLED_STATE_TOOLTIP" desc="The tooltip text indicating the Dark theme feature is on.">
+        Dark theme is on
       </message>
-      <message name="IDS_ASH_STATUS_TRAY_DARK_MODE_DISABLED_STATE_TOOLTIP" desc="The tooltip text indicating the Dark Mode feature is off.">
-        Dark Mode is off.
+      <message name="IDS_ASH_STATUS_TRAY_DARK_THEME_DISABLED_STATE_TOOLTIP" desc="The tooltip text indicating the Dark theme feature is off.">
+        Dark theme is off
       </message>
-      <message name="IDS_ASH_STATUS_TRAY_DARK_MODE_SETTINGS_TOOLTIP" desc="The tooltip text used for the button in the status tray to show the Dark Mode feature settings.">
-        Show dark mode settings
+      <message name="IDS_ASH_STATUS_TRAY_DARK_THEME_SETTINGS_TOOLTIP" desc="The tooltip text used for the button in the status tray to show the Dark theme feature settings.">
+        Show dark theme settings
       </message>
-      <message name="IDS_ASH_STATUS_TRAY_DARK_MODE_OFF_STATE" desc="Button label for the Dark Mode feature." meaning="Dark Mode feature is off. [CHAR_LIMIT=14]">
+      <message name="IDS_ASH_STATUS_TRAY_DARK_THEME_OFF_STATE" desc="Button label for the Dark theme feature." meaning="Dark theme feature is off. [CHAR_LIMIT=14]">
         Off
       </message>
-      <message name="IDS_ASH_STATUS_TRAY_DARK_MODE_ON_STATE" desc="Button label for the Dark Mode feature." meaning="Dark Mode feature is on. [CHAR_LIMIT=14]">
+      <message name="IDS_ASH_STATUS_TRAY_DARK_THEME_ON_STATE" desc="Button label for the Dark theme feature." meaning="Dark theme feature is on. [CHAR_LIMIT=14]">
         On
       </message>
-      <message name="IDS_ASH_STATUS_TRAY_DARK_THEME_TITLE" desc="The title for the dark theme detailed view.">
-        Dark Theme
-      </message>
       <message name="IDS_ASH_STATUS_TRAY_DARK_THEME_COLOR_MODE" desc="The title for the dark theme detailed view.">
         Color mode
       </message>
       <message name="IDS_ASH_STATUS_TRAY_DARK_THEME_MODE_THEMED_TITLE" desc="The title for the dark theme detailed view.">
         Themed (default)
       </message>
-      <message name="IDS_ASH_STATUS_TRAY_DARK_THEME_MODE_THEMED_DESCRIPTION" desc="The description for the neutral color mode.">
+      <message name="IDS_ASH_STATUS_TRAY_DARK_THEME_MODE_THEMED_DESCRIPTION" desc="The description for the neutral color theme.">
         The themed color mode uses colors extracted from your wallpaper to lightly colorize the interface.
       </message>
       <message name="IDS_ASH_STATUS_TRAY_DARK_THEME_MODE_NEUTRAL_TITLE" desc="The title for the dark theme detailed view.">

ash/ash_strings_grd/IDS_ASH_STATUS_TRAY_DARK_MODE_BUTTON_LABEL.png.sha1

-b892fca63156aa42e5d4d2700cd4aa4764f96ce5
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_STATUS_TRAY_DARK_MODE_DISABLED_STATE_TOOLTIP.png.sha1

-59a5e1355448f6dde367ffd0ba6003357259df40
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_STATUS_TRAY_DARK_MODE_ENABLED_STATE_TOOLTIP.png.sha1

-effba266de5e3b9897f8ca0f75b62e64d7283528
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_STATUS_TRAY_DARK_MODE_OFF_STATE.png.sha1

-87c3f620147db29ff48afa7be1b2499376a0cd84
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_STATUS_TRAY_DARK_MODE_ON_STATE.png.sha1

-b892fca63156aa42e5d4d2700cd4aa4764f96ce5
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_STATUS_TRAY_DARK_MODE_SETTINGS_TOOLTIP.png.sha1

-59a5e1355448f6dde367ffd0ba6003357259df40
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_STATUS_TRAY_DARK_MODE_TOGGLE_TOOLTIP.png.sha1

-adf958e8343448faee9d7fa20015b599fc1ec86f
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_STATUS_TRAY_DARK_THEME.png.sha1

+0c5aef4db32ad764a11f3c53c274df785a552e4c
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_STATUS_TRAY_DARK_THEME_DISABLED_STATE_TOOLTIP.png.sha1

+f38fb2eba7b6651303a881e547db334cf68a8274
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_STATUS_TRAY_DARK_THEME_ENABLED_STATE_TOOLTIP.png.sha1

+f0e839e2bf2903da7fd1104ec8cd6dfdf0abc47e
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_STATUS_TRAY_DARK_THEME_OFF_STATE.png.sha1

+4f9a2c88896f07e7db89f07c374f9030d344ace8
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_STATUS_TRAY_DARK_THEME_ON_STATE.png.sha1

+5bd34e5aaf883fa1f1dc22878d2afeb8be13f5d3
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_STATUS_TRAY_DARK_THEME_SETTINGS_TOOLTIP.png.sha1

+316ac270e1a3a69aac52268465225e84567b87cd
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_STATUS_TRAY_DARK_THEME_TITLE.png.sha1

-b984fdd2b7a94169d228b51a826393fd7e953dbd
\ No newline at end of file

ash/ash_strings_grd/IDS_ASH_STATUS_TRAY_DARK_THEME_TOGGLE_TOOLTIP.png.sha1

+a3cbce9b0bd7654915d9ea33f1b1b0a151fc3388
\ No newline at end of file

ash/system/dark_mode/dark_mode_detailed_view.cc

@@ -43,23 +43,20 @@ class TrayRadioButton : public views::RadioButton {
 
 DarkModeDetailedView::DarkModeDetailedView(DetailedViewDelegate* delegate)
     : TrayDetailedView(delegate) {
-  AshColorProvider::Get()->AddObserver(this);
   CreateItems();
 }
 
-DarkModeDetailedView::~DarkModeDetailedView() {
-  AshColorProvider::Get()->RemoveObserver(this);
-}
+DarkModeDetailedView::~DarkModeDetailedView() = default;
 
 void DarkModeDetailedView::CreateItems() {
-  CreateTitleRow(IDS_ASH_STATUS_TRAY_DARK_THEME_TITLE);
+  CreateTitleRow(IDS_ASH_STATUS_TRAY_DARK_THEME);
 
   // Add toggle button.
   tri_view()->SetContainerVisible(TriView::Container::END, true);
 
   auto* ash_color_provider = AshColorProvider::Get();
   toggle_ =
-      TrayPopupUtils::CreateToggleButton(this, IDS_ASH_STATUS_TRAY_BLUETOOTH);
+      TrayPopupUtils::CreateToggleButton(this, IDS_ASH_STATUS_TRAY_DARK_THEME);
   toggle_->SetIsOn(ash_color_provider->IsDarkModeEnabled());
   tri_view()->AddView(TriView::Container::END, toggle_);
 
@@ -84,7 +81,7 @@ void DarkModeDetailedView::CreateItems() {
       std::make_unique<views::Label>(l10n_util::GetStringUTF16(
           IDS_ASH_STATUS_TRAY_DARK_THEME_MODE_NEUTRAL_DESCRIPTION))));
 
-  OnColorModeThemed(ash_color_provider->IsThemed());
+  UpdateCheckedButton(ash_color_provider->IsThemed());
   scroll_content()->SizeToPreferredSize();
   Layout();
 }
@@ -93,6 +90,16 @@ const char* DarkModeDetailedView::GetClassName() const {
   return "DarkModeDetailedView";
 }
 
+void DarkModeDetailedView::UpdateToggleButton(bool dark_mode_enabled) {
+  DCHECK(toggle_);
+  toggle_->AnimateIsOn(dark_mode_enabled);
+}
+
+void DarkModeDetailedView::UpdateCheckedButton(bool is_themed) {
+  is_themed ? themed_mode_button_->SetChecked(true)
+            : neutral_mode_button_->SetChecked(true);
+}
+
 void DarkModeDetailedView::HandleButtonPressed(views::Button* sender,
                                                const ui::Event& event) {
   auto* ash_color_provider = AshColorProvider::Get();
@@ -104,9 +111,4 @@ void DarkModeDetailedView::HandleButtonPressed(views::Button* sender,
     ash_color_provider->UpdateColorModeThemed(/*is_themed=*/false);
 }
 
-void DarkModeDetailedView::OnColorModeThemed(bool is_themed) {
-  is_themed ? themed_mode_button_->SetChecked(true)
-            : neutral_mode_button_->SetChecked(true);
-}
-
 }  // namespace ash

ash/system/dark_mode/dark_mode_detailed_view.h

@@ -5,7 +5,6 @@
 #ifndef ASH_SYSTEM_DARK_MODE_DARK_MODE_DETAILED_VIEW_H_
 #define ASH_SYSTEM_DARK_MODE_DARK_MODE_DETAILED_VIEW_H_
 
-#include "ash/system/dark_mode/color_mode_observer.h"
 #include "ash/system/tray/tray_detailed_view.h"
 
 namespace views {
@@ -18,7 +17,7 @@ namespace ash {
 // This view displays options to switch between themed and neutral
 // color mode for the system. Accessed by clicking on the dark mode
 // feature pod label button.
-class DarkModeDetailedView : public TrayDetailedView, public ColorModeObserver {
+class DarkModeDetailedView : public TrayDetailedView {
  public:
   explicit DarkModeDetailedView(DetailedViewDelegate* delegate);
   DarkModeDetailedView(const DarkModeDetailedView& other) = delete;
@@ -28,6 +27,12 @@ class DarkModeDetailedView : public TrayDetailedView, public ColorModeObserver {
   // views::View:
   const char* GetClassName() const override;
 
+  // Updates the status of |toggle_| on |dark_mode_enabled|.
+  void UpdateToggleButton(bool dark_mode_enabled);
+
+  // Updates the currently checked radio button.
+  void UpdateCheckedButton(bool is_themed);
+
  private:
   void CreateItems();
 
@@ -35,9 +40,6 @@ class DarkModeDetailedView : public TrayDetailedView, public ColorModeObserver {
   void HandleButtonPressed(views::Button* sender,
                            const ui::Event& event) override;
 
-  // ColorModeObserver:
-  void OnColorModeThemed(bool is_themed) override;
-
   views::ToggleButton* toggle_ = nullptr;
   views::RadioButton* themed_mode_button_ = nullptr;
   views::RadioButton* neutral_mode_button_ = nullptr;

ash/system/dark_mode/dark_mode_detailed_view_controller.cc

@@ -5,6 +5,7 @@
 #include "ash/system/dark_mode/dark_mode_detailed_view_controller.h"
 
 #include "ash/strings/grit/ash_strings.h"
+#include "ash/style/ash_color_provider.h"
 #include "ash/system/dark_mode/dark_mode_detailed_view.h"
 #include "ash/system/tray/detailed_view_delegate.h"
 #include "ui/base/l10n/l10n_util.h"
@@ -14,9 +15,13 @@ namespace ash {
 DarkModeDetailedViewController::DarkModeDetailedViewController(
     UnifiedSystemTrayController* tray_controller)
     : detailed_view_delegate_(
-          std::make_unique<DetailedViewDelegate>(tray_controller)) {}
+          std::make_unique<DetailedViewDelegate>(tray_controller)) {
+  AshColorProvider::Get()->AddObserver(this);
+}
 
-DarkModeDetailedViewController::~DarkModeDetailedViewController() = default;
+DarkModeDetailedViewController::~DarkModeDetailedViewController() {
+  AshColorProvider::Get()->RemoveObserver(this);
+}
 
 views::View* DarkModeDetailedViewController::CreateView() {
   DCHECK(!view_);
@@ -29,4 +34,13 @@ base::string16 DarkModeDetailedViewController::GetAccessibleName() const {
       IDS_ASH_QUICK_SETTINGS_BUBBLE_DARK_THEME_SETTINGS_ACCESSIBLE_DESCRIPTION);
 }
 
+void DarkModeDetailedViewController::OnColorModeChanged(
+    bool dark_mode_enabled) {
+  view_->UpdateToggleButton(dark_mode_enabled);
+}
+
+void DarkModeDetailedViewController::OnColorModeThemed(bool is_themed) {
+  view_->UpdateCheckedButton(is_themed);
+}
+
 }  // namespace ash

ash/system/dark_mode/dark_mode_detailed_view_controller.h

@@ -5,6 +5,7 @@
 #ifndef ASH_SYSTEM_DARK_MODE_DARK_MODE_DETAILED_VIEW_CONTROLLER_H_
 #define ASH_SYSTEM_DARK_MODE_DARK_MODE_DETAILED_VIEW_CONTROLLER_H_
 
+#include "ash/system/dark_mode/color_mode_observer.h"
 #include "ash/system/unified/detailed_view_controller.h"
 
 namespace ash {
@@ -13,7 +14,8 @@ class DetailedViewDelegate;
 class UnifiedSystemTrayController;
 
 // Controller of dark mode detailed view in UnifiedSystemTray.
-class DarkModeDetailedViewController : public DetailedViewController {
+class DarkModeDetailedViewController : public DetailedViewController,
+                                       public ColorModeObserver {
  public:
   explicit DarkModeDetailedViewController(
       UnifiedSystemTrayController* tray_controller);
@@ -27,6 +29,10 @@ class DarkModeDetailedViewController : public DetailedViewController {
   views::View* CreateView() override;
   base::string16 GetAccessibleName() const override;
 
+  // ColorModeObserver:
+  void OnColorModeChanged(bool dark_mode_enabled) override;
+  void OnColorModeThemed(bool is_themed) override;
+
  private:
   const std::unique_ptr<DetailedViewDelegate> detailed_view_delegate_;
 

ash/system/dark_mode/dark_mode_feature_pod_controller.cc

@@ -30,10 +30,9 @@ FeaturePodButton* DarkModeFeaturePodController::CreateButton() {
   DCHECK(!button_);
   button_ = new FeaturePodButton(this);
   button_->SetVectorIcon(kUnifiedMenuDarkModeIcon);
-  button_->SetLabel(
-      l10n_util::GetStringUTF16(IDS_ASH_STATUS_TRAY_DARK_MODE_BUTTON_LABEL));
+  button_->SetLabel(l10n_util::GetStringUTF16(IDS_ASH_STATUS_TRAY_DARK_THEME));
   button_->SetLabelTooltip(l10n_util::GetStringUTF16(
-      IDS_ASH_STATUS_TRAY_DARK_MODE_SETTINGS_TOOLTIP));
+      IDS_ASH_STATUS_TRAY_DARK_THEME_SETTINGS_TOOLTIP));
   // TODO(minch): Add the logic for login screen.
   button_->SetVisible(
       Shell::Get()->session_controller()->IsActiveUserSessionStarted());
@@ -44,8 +43,6 @@ FeaturePodButton* DarkModeFeaturePodController::CreateButton() {
 
 void DarkModeFeaturePodController::OnIconPressed() {
   AshColorProvider::Get()->ToggleColorMode();
-
-  // TODO(amehfooz): Add metrics recording here.
 }
 
 void DarkModeFeaturePodController::OnLabelPressed() {
@@ -53,7 +50,6 @@ void DarkModeFeaturePodController::OnLabelPressed() {
 }
 
 SystemTrayItemUmaType DarkModeFeaturePodController::GetUmaType() const {
-  // TODO(amehfooz): Add new UMA type here.
   return SystemTrayItemUmaType::UMA_DARK_MODE;
 }
 
@@ -64,14 +60,15 @@ void DarkModeFeaturePodController::OnColorModeChanged(bool dark_mode_enabled) {
 void DarkModeFeaturePodController::UpdateButton(bool dark_mode_enabled) {
   button_->SetToggled(dark_mode_enabled);
   button_->SetSubLabel(l10n_util::GetStringUTF16(
-      dark_mode_enabled ? IDS_ASH_STATUS_TRAY_DARK_MODE_ON_STATE
-                        : IDS_ASH_STATUS_TRAY_DARK_MODE_OFF_STATE));
+      dark_mode_enabled ? IDS_ASH_STATUS_TRAY_DARK_THEME_ON_STATE
+                        : IDS_ASH_STATUS_TRAY_DARK_THEME_OFF_STATE));
 
   base::string16 tooltip_state = l10n_util::GetStringUTF16(
-      dark_mode_enabled ? IDS_ASH_STATUS_TRAY_DARK_MODE_ENABLED_STATE_TOOLTIP
-                        : IDS_ASH_STATUS_TRAY_DARK_MODE_DISABLED_STATE_TOOLTIP);
+      dark_mode_enabled
+          ? IDS_ASH_STATUS_TRAY_DARK_THEME_ENABLED_STATE_TOOLTIP
+          : IDS_ASH_STATUS_TRAY_DARK_THEME_DISABLED_STATE_TOOLTIP);
   button_->SetIconTooltip(l10n_util::GetStringFUTF16(
-      IDS_ASH_STATUS_TRAY_DARK_MODE_TOGGLE_TOOLTIP, tooltip_state));
+      IDS_ASH_STATUS_TRAY_DARK_THEME_TOGGLE_TOOLTIP, tooltip_state));
 }
 
 }  // namespace ash