Add dark / light mode colors for system tray

This change adds kIconSystemMenu, kIconSystemMenuToggled types to the
ash color provider.
These colors are utilized in the tray with dark mode being default.

Bug: 960118
Change-Id: I4cf9da17454aa25619a172aca8b038569a0a7849
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2013723
Commit-Queue: Ahmed Mehfooz <amehfooz@chromium.org>
Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Reviewed-by: Tim Song <tengs@chromium.org>
Reviewed-by: Peter Kasting <pkasting@chromium.org>
Cr-Commit-Position: refs/heads/master@{#734365}

ash/style/ash_color_provider.cc

@@ -253,6 +253,14 @@ SkColor AshColorProvider::GetContentLayerColorImpl(
       light_color = gfx::kGoogleBlue600;
       dark_color = gfx::kGoogleBlue300;
       break;
+    case ContentLayerType::kIconSystemMenu:
+      light_color = gfx::kGoogleGrey700;
+      dark_color = gfx::kGoogleGrey200;
+      break;
+    case ContentLayerType::kIconSystemMenuToggled:
+      light_color = gfx::kGoogleGrey200;
+      dark_color = gfx::kGoogleGrey900;
+      break;
   }
   return color_mode == AshColorMode::kLight ? light_color : dark_color;
 }

ash/style/ash_color_provider.h

@@ -88,6 +88,11 @@ class ASH_EXPORT AshColorProvider {
     // Color for prominent icon button, e.g, "Add connection" icon button inside
     // VPN detailed view.
     kProminentIconButton,
+
+    // Color for system menu icon buttons with inverted dark mode colors, e.g,
+    // FeaturePodIconButton
+    kIconSystemMenu,
+    kIconSystemMenuToggled,
   };
 
   // Attributes of ripple, includes the base color, opacity of inkdrop and

ash/system/network/network_feature_pod_button.cc

@@ -141,12 +141,20 @@ const char* NetworkFeaturePodButton::GetClassName() const {
 }
 
 void NetworkFeaturePodButton::Update() {
-  bool animating = false;
+  bool image_animating = false;
+  bool toggled_image_animating = false;
+
   gfx::ImageSkia image =
+      Shell::Get()->system_tray_model()->active_network_icon()->GetImage(
+          ActiveNetworkIcon::Type::kSingle, network_icon::ICON_TYPE_FEATURE_POD,
+          &image_animating);
+
+  gfx::ImageSkia image_toggled =
       Shell::Get()->system_tray_model()->active_network_icon()->GetImage(
           ActiveNetworkIcon::Type::kSingle,
-          network_icon::ICON_TYPE_DEFAULT_VIEW, &animating);
-  if (animating)
+          network_icon::ICON_TYPE_FEATURE_POD_TOGGLED,
+          &toggled_image_animating);
+  if (image_animating || toggled_image_animating)
     network_icon::NetworkIconAnimation::GetInstance()->AddObserver(this);
   else
     network_icon::NetworkIconAnimation::GetInstance()->RemoveObserver(this);
@@ -159,6 +167,7 @@ void NetworkFeaturePodButton::Update() {
                                 DeviceStateType::kEnabled;
   SetToggled(toggled);
   icon_button()->SetImage(views::Button::STATE_NORMAL, image);
+  icon_button()->SetToggledImage(views::Button::STATE_NORMAL, &image_toggled);
 
   base::string16 network_name;
   if (network) {

ash/system/network/network_icon.cc

@@ -448,11 +448,24 @@ NetworkIconImpl* FindAndUpdateImageImpl(const NetworkStateProperties* network,
 // Public interface
 
 SkColor GetDefaultColorForIconType(IconType icon_type) {
-  const bool light_icon = icon_type == ICON_TYPE_TRAY_OOBE;
-  return AshColorProvider::Get()->GetContentLayerColor(
-      AshColorProvider::ContentLayerType::kIconPrimary,
-      light_icon ? AshColorProvider::AshColorMode::kLight
-                 : AshColorProvider::AshColorMode::kDark);
+  switch (icon_type) {
+    case ICON_TYPE_TRAY_OOBE:
+      return AshColorProvider::Get()->GetContentLayerColor(
+          AshColorProvider::ContentLayerType::kIconPrimary,
+          AshColorProvider::AshColorMode::kLight);
+    case ICON_TYPE_FEATURE_POD:
+      return AshColorProvider::Get()->GetContentLayerColor(
+          AshColorProvider::ContentLayerType::kIconSystemMenu,
+          AshColorProvider::AshColorMode::kDark);
+    case ICON_TYPE_FEATURE_POD_TOGGLED:
+      return AshColorProvider::Get()->GetContentLayerColor(
+          AshColorProvider::ContentLayerType::kIconSystemMenuToggled,
+          AshColorProvider::AshColorMode::kDark);
+    default:
+      return AshColorProvider::Get()->GetContentLayerColor(
+          AshColorProvider::ContentLayerType::kIconPrimary,
+          AshColorProvider::AshColorMode::kDark);
+  }
 }
 
 const gfx::ImageSkia GetBasicImage(IconType icon_type,

ash/system/network/network_icon.h

@@ -24,7 +24,11 @@ enum IconType {
   ICON_TYPE_TRAY_REGULAR,  // light icons with VPN badges, used outside of OOBE
   ICON_TYPE_DEFAULT_VIEW,  // dark icons with VPN badges
   ICON_TYPE_LIST,          // dark icons without VPN badges; in-line status
-  ICON_TYPE_MENU_LIST,     // dark icons without VPN badges; separate status
+  ICON_TYPE_FEATURE_POD,   // icons in the network feature pod button in system
+                           // menu
+  ICON_TYPE_FEATURE_POD_TOGGLED,  // toggled icons in the network feature pod
+                                  // button in system menu
+  ICON_TYPE_MENU_LIST,  // dark icons without VPN badges; separate status
 };
 
 // Strength of a wireless signal.

ash/system/unified/feature_pod_button.cc

@@ -55,7 +55,7 @@ void ConfigureFeaturePodLabel(views::Label* label,
 
 FeaturePodIconButton::FeaturePodIconButton(views::ButtonListener* listener,
                                            bool is_togglable)
-    : views::ImageButton(listener), is_togglable_(is_togglable) {
+    : views::ToggleImageButton(listener), is_togglable_(is_togglable) {
   SetPreferredSize(kUnifiedFeaturePodIconSize);
   SetBorder(views::CreateEmptyBorder(kUnifiedFeaturePodIconPadding));
   SetImageHorizontalAlignment(ALIGN_CENTER);
@@ -73,7 +73,7 @@ void FeaturePodIconButton::SetToggled(bool toggled) {
     return;
 
   toggled_ = toggled;
-  SchedulePaint();
+  views::ToggleImageButton::SetToggled(toggled);
 }
 
 void FeaturePodIconButton::PaintButtonContents(gfx::Canvas* canvas) {
@@ -82,14 +82,14 @@ void FeaturePodIconButton::PaintButtonContents(gfx::Canvas* canvas) {
   flags.setAntiAlias(true);
 
   const AshColorProvider* color_provider = AshColorProvider::Get();
-  SkColor color = color_provider->DeprecatedGetControlsLayerColor(
+  SkColor color = color_provider->GetControlsLayerColor(
       AshColorProvider::ControlsLayerType::kInactiveControlBackground,
-      kUnifiedMenuButtonColor);
+      AshColorMode::kDark);
   if (GetEnabled()) {
     if (toggled_) {
-      color = color_provider->DeprecatedGetControlsLayerColor(
+      color = color_provider->GetControlsLayerColor(
           AshColorProvider::ControlsLayerType::kActiveControlBackground,
-          kUnifiedMenuButtonColorActive);
+          AshColorMode::kDark);
     }
   } else {
     color = AshColorProvider::GetDisabledColor(color);
@@ -326,11 +326,19 @@ double FeaturePodButton::GetOpacityForExpandedAmount(double expanded_amount) {
 
 void FeaturePodButton::SetVectorIcon(const gfx::VectorIcon& icon) {
   const SkColor icon_color = AshColorProvider::Get()->GetContentLayerColor(
-      ContentLayerType::kIconPrimary, AshColorMode::kDark);
+      ContentLayerType::kIconSystemMenu, AshColorMode::kDark);
+  const SkColor toggled_color = AshColorProvider::Get()->GetContentLayerColor(
+      ContentLayerType::kIconSystemMenuToggled, AshColorMode::kDark);
+
   icon_button_->SetImage(
       views::Button::STATE_NORMAL,
       gfx::CreateVectorIcon(icon, kUnifiedFeaturePodVectorIconSize,
                             icon_color));
+  icon_button_->SetToggledImage(
+      views::Button::STATE_NORMAL,
+      new gfx::ImageSkia(gfx::CreateVectorIcon(
+          icon, kUnifiedFeaturePodVectorIconSize, toggled_color)));
+
   icon_button_->SetImage(
       views::Button::STATE_DISABLED,
       gfx::CreateVectorIcon(icon, kUnifiedFeaturePodVectorIconSize,

ash/system/unified/feature_pod_button.h

@@ -20,8 +20,8 @@ namespace ash {
 
 class FeaturePodControllerBase;
 
-// ImageButon internally used in FeaturePodButton. Should not be used directly.
-class FeaturePodIconButton : public views::ImageButton {
+// ImageButton internally used in FeaturePodButton. Should not be used directly.
+class FeaturePodIconButton : public views::ToggleImageButton {
  public:
   FeaturePodIconButton(views::ButtonListener* listener, bool is_togglable);
   ~FeaturePodIconButton() override;

ash/system/unified/unified_slider_view.cc

@@ -7,11 +7,14 @@
 #include "ash/style/ash_color_provider.h"
 #include "ash/style/default_color_constants.h"
 #include "ash/system/tray/tray_popup_utils.h"
-#include "ash/system/unified/top_shortcut_button.h"
+#include "ash/system/unified/unified_system_tray_view.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/gfx/canvas.h"
 #include "ui/gfx/paint_vector_icon.h"
 #include "ui/views/accessibility/view_accessibility.h"
+#include "ui/views/animation/flood_fill_ink_drop_ripple.h"
+#include "ui/views/animation/ink_drop_highlight.h"
+#include "ui/views/animation/ink_drop_impl.h"
 #include "ui/views/animation/ink_drop_mask.h"
 #include "ui/views/border.h"
 #include "ui/views/controls/highlight_path_generator.h"
@@ -21,18 +24,36 @@
 
 namespace ash {
 
+using ContentLayerType = AshColorProvider::ContentLayerType;
+using AshColorMode = AshColorProvider::AshColorMode;
+
 namespace {
 
 views::Slider* CreateSlider(UnifiedSliderListener* listener, bool readonly) {
   if (readonly)
     return new ReadOnlySlider();
 
-  return new views::Slider(listener);
+  return new SystemSlider(listener);
 }
 
 }  // namespace
 
-ReadOnlySlider::ReadOnlySlider() : Slider(nullptr) {}
+SystemSlider::SystemSlider(views::SliderListener* listener)
+    : views::Slider(listener) {}
+
+SkColor SystemSlider::GetThumbColor() const {
+  return AshColorProvider::Get()->GetControlsLayerColor(
+      AshColorProvider::ControlsLayerType::kActiveControlBackground,
+      AshColorProvider::AshColorMode::kDark);
+}
+
+SkColor SystemSlider::GetTroughColor() const {
+  return AshColorProvider::Get()->GetControlsLayerColor(
+      AshColorProvider::ControlsLayerType::kInactiveControlBackground,
+      AshColorProvider::AshColorMode::kDark);
+}
+
+ReadOnlySlider::ReadOnlySlider() : SystemSlider(nullptr) {}
 
 bool ReadOnlySlider::OnMousePressed(const ui::MouseEvent& event) {
   return false;
@@ -57,7 +78,14 @@ void ReadOnlySlider::OnGestureEvent(ui::GestureEvent* event) {}
 UnifiedSliderButton::UnifiedSliderButton(views::ButtonListener* listener,
                                          const gfx::VectorIcon& icon,
                                          int accessible_name_id)
-    : TopShortcutButton(listener, accessible_name_id) {
+    : views::ToggleImageButton(listener) {
+  SetImageHorizontalAlignment(ALIGN_CENTER);
+  SetImageVerticalAlignment(ALIGN_MIDDLE);
+  if (accessible_name_id)
+    SetTooltipText(l10n_util::GetStringUTF16(accessible_name_id));
+
+  TrayPopupUtils::ConfigureTrayPopupButton(this);
+
   SetVectorIcon(icon);
   SetBorder(views::CreateEmptyBorder(kUnifiedCircularButtonFocusPadding));
   views::InstallCircleHighlightPathGenerator(this);
@@ -75,18 +103,24 @@ const char* UnifiedSliderButton::GetClassName() const {
 }
 
 void UnifiedSliderButton::SetVectorIcon(const gfx::VectorIcon& icon) {
+  const SkColor toggled_color = AshColorProvider::Get()->GetContentLayerColor(
+      ContentLayerType::kIconSystemMenuToggled, AshColorMode::kDark);
   const SkColor icon_color = AshColorProvider::Get()->GetContentLayerColor(
-      AshColorProvider::ContentLayerType::kIconPrimary,
-      AshColorProvider::AshColorMode::kDark);
+      ContentLayerType::kIconSystemMenu, AshColorMode::kDark);
+
   SetImage(views::Button::STATE_NORMAL,
            gfx::CreateVectorIcon(icon, icon_color));
+
+  toggled_icon_ = gfx::CreateVectorIcon(icon, toggled_color);
+  SetToggledImage(views::Button::STATE_NORMAL, &toggled_icon_);
+
   SetImage(views::Button::STATE_DISABLED,
            gfx::CreateVectorIcon(icon, icon_color));
 }
 
 void UnifiedSliderButton::SetToggled(bool toggled) {
   toggled_ = toggled;
-  SchedulePaint();
+  views::ToggleImageButton::SetToggled(toggled);
 }
 
 void UnifiedSliderButton::PaintButtonContents(gfx::Canvas* canvas) {
@@ -95,12 +129,12 @@ void UnifiedSliderButton::PaintButtonContents(gfx::Canvas* canvas) {
   flags.setAntiAlias(true);
   flags.setColor(
       toggled_
-          ? AshColorProvider::Get()->DeprecatedGetControlsLayerColor(
+          ? AshColorProvider::Get()->GetControlsLayerColor(
                 AshColorProvider::ControlsLayerType::kActiveControlBackground,
-                kUnifiedMenuButtonColorActive)
-          : AshColorProvider::Get()->DeprecatedGetControlsLayerColor(
+                AshColorProvider::AshColorMode::kDark)
+          : AshColorProvider::Get()->GetControlsLayerColor(
                 AshColorProvider::ControlsLayerType::kInactiveControlBackground,
-                kUnifiedMenuButtonColor));
+                AshColorProvider::AshColorMode::kDark));
   flags.setStyle(cc::PaintFlags::kFill_Style);
   canvas->DrawCircle(gfx::PointF(rect.CenterPoint()), kTrayItemSize / 2, flags);
 
@@ -114,10 +148,29 @@ std::unique_ptr<views::InkDropMask> UnifiedSliderButton::CreateInkDropMask()
       size(), bounds.CenterPoint(), bounds.width() / 2);
 }
 
+std::unique_ptr<views::InkDrop> UnifiedSliderButton::CreateInkDrop() {
+  return TrayPopupUtils::CreateInkDrop(this);
+}
+
+std::unique_ptr<views::InkDropRipple> UnifiedSliderButton::CreateInkDropRipple()
+    const {
+  return TrayPopupUtils::CreateInkDropRipple(
+      TrayPopupInkDropStyle::FILL_BOUNDS, this,
+      GetInkDropCenterBasedOnLastEvent(),
+      UnifiedSystemTrayView::GetBackgroundColor());
+}
+
+std::unique_ptr<views::InkDropHighlight>
+UnifiedSliderButton::CreateInkDropHighlight() const {
+  return TrayPopupUtils::CreateInkDropHighlight(
+      TrayPopupInkDropStyle::FILL_BOUNDS, this,
+      UnifiedSystemTrayView::GetBackgroundColor());
+}
+
 void UnifiedSliderButton::GetAccessibleNodeData(ui::AXNodeData* node_data) {
   if (!GetEnabled())
     return;
-  TopShortcutButton::GetAccessibleNodeData(node_data);
+  views::ToggleImageButton::GetAccessibleNodeData(node_data);
   node_data->role = ax::mojom::Role::kToggleButton;
   node_data->SetCheckedState(toggled_ ? ax::mojom::CheckedState::kTrue
                                       : ax::mojom::CheckedState::kFalse);

ash/system/unified/unified_slider_view.h

@@ -23,9 +23,19 @@ class UnifiedSliderListener : public views::ButtonListener,
   ~UnifiedSliderListener() override = default;
 };
 
+// Custom slider for the system menu to use different color scheme.
+class SystemSlider : public views::Slider {
+ public:
+  explicit SystemSlider(views::SliderListener* listener);
+
+ private:
+  SkColor GetThumbColor() const override;
+  SkColor GetTroughColor() const override;
+};
+
 // A slider that ignores inputs.
 // TODO(tetsui): Move to anonymous namespace.
-class ReadOnlySlider : public views::Slider {
+class ReadOnlySlider : public SystemSlider {
  public:
   ReadOnlySlider();
 
@@ -44,7 +54,7 @@ class ReadOnlySlider : public views::Slider {
 };
 
 // A button used in a slider row of UnifiedSystemTray. The button is togglable.
-class UnifiedSliderButton : public TopShortcutButton {
+class UnifiedSliderButton : public views::ToggleImageButton {
  public:
   UnifiedSliderButton(views::ButtonListener* listener,
                       const gfx::VectorIcon& icon,
@@ -63,17 +73,23 @@ class UnifiedSliderButton : public TopShortcutButton {
   // views::Button:
   const char* GetClassName() const override;
 
-  // views::ImageButton:
+  // views::ToggleImageButton:
   std::unique_ptr<views::InkDropMask> CreateInkDropMask() const override;
+  std::unique_ptr<views::InkDrop> CreateInkDrop() override;
+  std::unique_ptr<views::InkDropRipple> CreateInkDropRipple() const override;
+  std::unique_ptr<views::InkDropHighlight> CreateInkDropHighlight()
+      const override;
 
-  // TopShortcutButton:
   void PaintButtonContents(gfx::Canvas* canvas) override;
   void GetAccessibleNodeData(ui::AXNodeData* node_data) override;
 
  private:
-  // Ture if the button is currently toggled.
+  // True if the button is currently toggled.
   bool toggled_ = false;
 
+  // Icon used when the button is toggled.
+  gfx::ImageSkia toggled_icon_;
+
   DISALLOW_COPY_AND_ASSIGN(UnifiedSliderButton);
 };
 

ui/views/controls/slider.h

@@ -114,8 +114,8 @@ class VIEWS_EXPORT Slider : public View, public gfx::AnimationDelegate {
 
   void NotifyPendingAccessibilityValueChanged();
 
-  SkColor GetThumbColor() const;
-  SkColor GetTroughColor() const;
+  virtual SkColor GetThumbColor() const;
+  virtual SkColor GetTroughColor() const;
   int GetSliderExtraPadding() const;
 
   SliderListener* listener_;