dark_mode: Live update of dark theme detailed view.

Only elements in "Dark theme" detailed view got live updated. We can add
other elements later if necessary.
See recorded video:
https://drive.google.com/file/d/1L9WIaefJsmYZJkZ7dToIaamAItd0H0op/view?usp=sharing&resourcekey=0-TTa-8PRjR8KdAcQzVAC5UQ

Bug: 1131543
Change-Id: Id68fcb43eb1c5a3a748e409e2020fd7b1ede9f50
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2539437Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Commit-Queue: Min Chen <minch@chromium.org>
Cr-Commit-Position: refs/heads/master@{#827879}

ash/system/dark_mode/dark_mode_detailed_view.cc

@@ -47,12 +47,16 @@ class TrayRadioButton : public views::RadioButton {
   }
 };
 
+SkColor GetLabelColor() {
+  return AshColorProvider::Get()->GetContentLayerColor(
+      AshColorProvider::ContentLayerType::kTextColorSecondary);
+}
+
 void SetupLabel(views::Label* label) {
   label->SetBorder(views::CreateEmptyBorder(kTraySubLabelPadding));
   label->SetMultiLine(true);
   label->SetHorizontalAlignment(gfx::HorizontalAlignment::ALIGN_LEFT);
-  label->SetEnabledColor(AshColorProvider::Get()->GetContentLayerColor(
-      AshColorProvider::ContentLayerType::kTextColorSecondary));
+  label->SetEnabledColor(GetLabelColor());
 }
 
 }  // namespace
@@ -89,9 +93,10 @@ void DarkModeDetailedView::CreateItems() {
                               base::Unretained(AshColorProvider::Get()), true),
           l10n_util::GetStringUTF16(
               IDS_ASH_STATUS_TRAY_DARK_THEME_MODE_THEMED_TITLE)));
-  SetupLabel(scroll_content()->AddChildView(
+  themed_label_ = scroll_content()->AddChildView(
       std::make_unique<views::Label>(l10n_util::GetStringUTF16(
-          IDS_ASH_STATUS_TRAY_DARK_THEME_MODE_THEMED_DESCRIPTION))));
+          IDS_ASH_STATUS_TRAY_DARK_THEME_MODE_THEMED_DESCRIPTION)));
+  SetupLabel(themed_label_);
 
   neutral_mode_button_ =
       scroll_content()->AddChildView(std::make_unique<TrayRadioButton>(
@@ -99,9 +104,10 @@ void DarkModeDetailedView::CreateItems() {
                               base::Unretained(AshColorProvider::Get()), false),
           l10n_util::GetStringUTF16(
               IDS_ASH_STATUS_TRAY_DARK_THEME_MODE_NEUTRAL_TITLE)));
-  SetupLabel(scroll_content()->AddChildView(
+  neutral_label_ = scroll_content()->AddChildView(
       std::make_unique<views::Label>(l10n_util::GetStringUTF16(
-          IDS_ASH_STATUS_TRAY_DARK_THEME_MODE_NEUTRAL_DESCRIPTION))));
+          IDS_ASH_STATUS_TRAY_DARK_THEME_MODE_NEUTRAL_DESCRIPTION)));
+  SetupLabel(neutral_label_);
 
   UpdateCheckedButton(ash_color_provider->IsThemed());
   scroll_content()->SizeToPreferredSize();
@@ -112,6 +118,12 @@ const char* DarkModeDetailedView::GetClassName() const {
   return "DarkModeDetailedView";
 }
 
+void DarkModeDetailedView::OnThemeChanged() {
+  TrayDetailedView::OnThemeChanged();
+  themed_label_->SetEnabledColor(GetLabelColor());
+  neutral_label_->SetEnabledColor(GetLabelColor());
+}
+
 void DarkModeDetailedView::UpdateToggleButton(bool dark_mode_enabled) {
   DCHECK(toggle_);
   toggle_->AnimateIsOn(dark_mode_enabled);

ash/system/dark_mode/dark_mode_detailed_view.h

@@ -8,6 +8,7 @@
 #include "ash/system/tray/tray_detailed_view.h"
 
 namespace views {
+class Label;
 class RadioButton;
 class ToggleButton;
 }  // namespace views
@@ -26,6 +27,7 @@ class DarkModeDetailedView : public TrayDetailedView {
 
   // views::View:
   const char* GetClassName() const override;
+  void OnThemeChanged() override;
 
   // Updates the status of |toggle_| on |dark_mode_enabled|.
   void UpdateToggleButton(bool dark_mode_enabled);
@@ -39,6 +41,8 @@ class DarkModeDetailedView : public TrayDetailedView {
   views::ToggleButton* toggle_ = nullptr;
   views::RadioButton* themed_mode_button_ = nullptr;
   views::RadioButton* neutral_mode_button_ = nullptr;
+  views::Label* themed_label_ = nullptr;
+  views::Label* neutral_label_ = nullptr;
 };
 
 }  // namespace ash

ash/system/tray/detailed_view_delegate.cc

@@ -60,14 +60,17 @@ void ConfigureTitleTriView(TriView* tri_view, TriView::Container container) {
                        gfx::Size(0, kUnifiedDetailedViewTitleRowHeight));
 }
 
+gfx::ImageSkia CreateBackButtonIcon() {
+  return gfx::CreateVectorIcon(kUnifiedMenuArrowBackIcon,
+                               AshColorProvider::Get()->GetContentLayerColor(
+                                   ContentLayerType::kIconColorPrimary));
+}
+
 class BackButton : public CustomShapeButton {
  public:
   BackButton(views::Button::PressedCallback callback)
       : CustomShapeButton(std::move(callback)) {
-    gfx::ImageSkia image =
-        gfx::CreateVectorIcon(kUnifiedMenuArrowBackIcon,
-                              AshColorProvider::Get()->GetContentLayerColor(
-                                  ContentLayerType::kIconColorPrimary));
+    gfx::ImageSkia image = CreateBackButtonIcon();
     SetImage(views::Button::STATE_NORMAL, image);
     SetImageHorizontalAlignment(ALIGN_RIGHT);
     SetImageVerticalAlignment(ALIGN_MIDDLE);
@@ -84,6 +87,11 @@ class BackButton : public CustomShapeButton {
     return gfx::Size(kTrayItemSize * 3 / 2, kTrayItemSize);
   }
 
+  void OnThemeChanged() override {
+    CustomShapeButton::OnThemeChanged();
+    SetImage(views::Button::STATE_NORMAL, CreateBackButtonIcon());
+  }
+
   SkPath CreateCustomShapePath(const gfx::Rect& bounds) const override {
     SkPath path;
     SkScalar bottom_radius = SkIntToScalar(kTrayItemSize / 2);
@@ -128,12 +136,13 @@ TriView* DetailedViewDelegate::CreateTitleRow(int string_id) {
   ConfigureTitleTriView(tri_view, TriView::Container::CENTER);
   ConfigureTitleTriView(tri_view, TriView::Container::END);
 
-  auto* label = TrayPopupUtils::CreateDefaultLabel();
-  label->SetText(l10n_util::GetStringUTF16(string_id));
-  label->SetEnabledColor(AshColorProvider::Get()->GetContentLayerColor(
+  title_label_ = TrayPopupUtils::CreateDefaultLabel();
+  title_label_->SetText(l10n_util::GetStringUTF16(string_id));
+  title_label_->SetEnabledColor(AshColorProvider::Get()->GetContentLayerColor(
       AshColorProvider::ContentLayerType::kTextColorPrimary));
-  TrayPopupUtils::SetLabelFontList(label, TrayPopupUtils::FontStyle::kTitle);
-  tri_view->AddView(TriView::Container::CENTER, label);
+  TrayPopupUtils::SetLabelFontList(title_label_,
+                                   TrayPopupUtils::FontStyle::kTitle);
+  tri_view->AddView(TriView::Container::CENTER, title_label_);
   tri_view->SetContainerVisible(TriView::Container::END, false);
   tri_view->SetBorder(
       views::CreateEmptyBorder(kUnifiedDetailedViewTitlePadding));
@@ -142,12 +151,12 @@ TriView* DetailedViewDelegate::CreateTitleRow(int string_id) {
 }
 
 views::View* DetailedViewDelegate::CreateTitleSeparator() {
-  views::Separator* separator = new views::Separator();
-  separator->SetColor(AshColorProvider::Get()->GetContentLayerColor(
+  title_separator_ = new views::Separator();
+  title_separator_->SetColor(AshColorProvider::Get()->GetContentLayerColor(
       ContentLayerType::kSeparatorColor));
-  separator->SetBorder(views::CreateEmptyBorder(
+  title_separator_->SetBorder(views::CreateEmptyBorder(
       kTitleRowProgressBarHeight - views::Separator::kThickness, 0, 0, 0));
-  return separator;
+  return title_separator_;
 }
 
 void DetailedViewDelegate::ShowStickyHeaderSeparator(views::View* view,
@@ -226,4 +235,15 @@ views::Button* DetailedViewDelegate::CreateHelpButton(
   return button;
 }
 
+void DetailedViewDelegate::UpdateColors() {
+  if (title_label_) {
+    title_label_->SetEnabledColor(AshColorProvider::Get()->GetContentLayerColor(
+        AshColorProvider::ContentLayerType::kTextColorPrimary));
+  }
+  if (title_separator_) {
+    title_separator_->SetColor(AshColorProvider::Get()->GetContentLayerColor(
+        ContentLayerType::kSeparatorColor));
+  }
+}
+
 }  // namespace ash

ash/system/tray/detailed_view_delegate.h

@@ -17,6 +17,7 @@ struct VectorIcon;
 }  // namespace gfx
 
 namespace views {
+class Label;
 class Separator;
 class View;
 }  // namespace views
@@ -95,9 +96,16 @@ class ASH_EXPORT DetailedViewDelegate {
   virtual views::Button* CreateHelpButton(
       views::Button::PressedCallback callback);
 
+  // Update the colors that need to be updated while switching between dark and
+  // light mode.
+  virtual void UpdateColors();
+
  private:
   UnifiedSystemTrayController* const tray_controller_;
 
+  views::Label* title_label_ = nullptr;
+  views::Separator* title_separator_ = nullptr;
+
   DISALLOW_COPY_AND_ASSIGN(DetailedViewDelegate);
 };
 

ash/system/tray/tray_detailed_view.cc

@@ -382,19 +382,20 @@ TriView* TrayDetailedView::AddScrollListSubHeader(const gfx::VectorIcon& icon,
   TrayPopupUtils::ConfigureAsStickyHeader(header);
 
   auto* color_provider = AshColorProvider::Get();
-  views::Label* label = TrayPopupUtils::CreateDefaultLabel();
-  label->SetText(l10n_util::GetStringUTF16(text_id));
-  label->SetEnabledColor(color_provider->GetContentLayerColor(
+  sub_header_label_ = TrayPopupUtils::CreateDefaultLabel();
+  sub_header_label_->SetText(l10n_util::GetStringUTF16(text_id));
+  sub_header_label_->SetEnabledColor(color_provider->GetContentLayerColor(
       AshColorProvider::ContentLayerType::kTextColorPrimary));
-  TrayPopupUtils::SetLabelFontList(label,
+  TrayPopupUtils::SetLabelFontList(sub_header_label_,
                                    TrayPopupUtils::FontStyle::kSubHeader);
-  header->AddView(TriView::Container::CENTER, label);
+  header->AddView(TriView::Container::CENTER, sub_header_label_);
 
-  views::ImageView* image_view = TrayPopupUtils::CreateMainImageView();
-  image_view->SetImage(gfx::CreateVectorIcon(
+  sub_header_image_view_ = TrayPopupUtils::CreateMainImageView();
+  sub_header_icon_ = &icon;
+  sub_header_image_view_->SetImage(gfx::CreateVectorIcon(
       icon, color_provider->GetContentLayerColor(
                 AshColorProvider::ContentLayerType::kIconColorPrimary)));
-  header->AddView(TriView::Container::START, image_view);
+  header->AddView(TriView::Container::START, sub_header_image_view_);
 
   scroll_content_->AddChildView(header);
   return header;
@@ -497,4 +498,21 @@ const char* TrayDetailedView::GetClassName() const {
   return "TrayDetailedView";
 }
 
+void TrayDetailedView::OnThemeChanged() {
+  views::View::OnThemeChanged();
+  delegate_->UpdateColors();
+
+  auto* color_provider = AshColorProvider::Get();
+  if (sub_header_label_) {
+    sub_header_label_->SetEnabledColor(color_provider->GetContentLayerColor(
+        AshColorProvider::ContentLayerType::kTextColorPrimary));
+  }
+  if (sub_header_image_view_) {
+    sub_header_image_view_->SetImage(gfx::CreateVectorIcon(
+        *sub_header_icon_,
+        color_provider->GetContentLayerColor(
+            AshColorProvider::ContentLayerType::kIconColorPrimary)));
+  }
+}
+
 }  // namespace ash

ash/system/tray/tray_detailed_view.h

@@ -21,6 +21,8 @@ struct VectorIcon;
 namespace views {
 class BoxLayout;
 class Button;
+class ImageView;
+class Label;
 class ProgressBar;
 class ScrollView;
 class Separator;
@@ -48,6 +50,7 @@ class ASH_EXPORT TrayDetailedView : public views::View,
   void Layout() override;
   int GetHeightForWidth(int width) const override;
   const char* GetClassName() const override;
+  void OnThemeChanged() override;
 
   // Exposes the layout manager of this view to give control to subclasses.
   views::BoxLayout* box_layout() { return box_layout_; }
@@ -163,6 +166,10 @@ class ASH_EXPORT TrayDetailedView : public views::View,
   // The back button that appears in the material design title row. Not owned.
   views::Button* back_button_ = nullptr;
 
+  views::Label* sub_header_label_ = nullptr;
+  views::ImageView* sub_header_image_view_ = nullptr;
+  const gfx::VectorIcon* sub_header_icon_ = nullptr;
+
   DISALLOW_COPY_AND_ASSIGN(TrayDetailedView);
 };