cros_next: make switch inherit from ToggleButton

Previously, we built the KnobSwitch class from scratch. However
the existing ToggleButton has similar functionalities and also
implements the animation, hover layer, ink drop layer and
animation. To avoid re-invent the wheel, we decide to make
KnobSwitch inherit from ToggleButton. This cl makes following
changes:

The changes in ui/views/controls/button/toggle_button.*:
- Change the type of thumb on/off colors and track on/off
colors from absl::optional to
absl::variant<ui::ColorId, SkColor> such that they can hold
both color ID and color value.
- Update the enabled/disabled colors when the enabled state
of ToggleButton is changed.
- Add a new has_thumb_shadow_ attribute in ToggleButton such
that the sub classes can specify if they want a thumb shadow.
- Add a new has_shadow_ attribute in ThumbView to receive the
value of has_thumb_shadow_ from ToggleButton.
- Make GetFocusRingPath, GetTrackBounds and GetThumbBounds as
virtual protected methods such the the sub classes can override
them.
- Add a protected method GetAnimationProgress for sub classes
to get the value from slide animation.

The changes in ash/style/ash_color_mixer
- Change the toggle button related colors with dynamic color Id
in ash color mixers.

The changes in ash/style/knob_switch.*
- Change the name from KnobSwitch to Switch because many people
feel the name knob switch is confusing.
- Inherit the Switch from ToggleButton and override the
GetFocusRingPath, GetTrackBounds, and GetThumbBounds.

The final effects will be shown in bug comment.

Bug: b:271330235
Change-Id: I7051484ea80656ce97cc837fef79641a4b1708ca
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4338876
Reviewed-by: Sean Kau <skau@chromium.org>
Reviewed-by: Peter Kasting <pkasting@chromium.org>
Commit-Queue: Xiaodan Zhu <zxdan@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1118466}

ash/BUILD.gn

@@ -1086,8 +1086,6 @@ component("ash") {
     "style/icon_button.h",
     "style/icon_switch.cc",
     "style/icon_switch.h",
-    "style/knob_switch.cc",
-    "style/knob_switch.h",
     "style/option_button_base.cc",
     "style/option_button_base.h",
     "style/option_button_group.cc",
@@ -1113,11 +1111,11 @@ component("ash") {
     "style/style_viewer/checkbox_instances_grid_view_factory.cc",
     "style/style_viewer/icon_button_instances_grid_view_factory.cc",
     "style/style_viewer/icon_switch_instances_grid_view_factory.cc",
-    "style/style_viewer/knob_switch_instances_grid_view_factory.cc",
     "style/style_viewer/pagination_instances_grid_view_factory.cc",
     "style/style_viewer/pill_button_instances_grid_view_factory.cc",
     "style/style_viewer/radio_button_group_instances_grid_view_factory.cc",
     "style/style_viewer/radio_button_instances_grid_view_factory.cc",
+    "style/style_viewer/switch_instances_grid_view_factory.cc",
     "style/style_viewer/system_text_instances_grid_view_factory.cc",
     "style/style_viewer/system_ui_components_grid_view.cc",
     "style/style_viewer/system_ui_components_grid_view.h",
@@ -1126,6 +1124,8 @@ component("ash") {
     "style/style_viewer/system_ui_components_style_viewer_view.h",
     "style/style_viewer/tab_slider_instances_grid_view_factory.cc",
     "style/style_viewer/typography_instances_grid_view_factory.cc",
+    "style/switch.cc",
+    "style/switch.h",
     "style/system_shadow.cc",
     "style/system_shadow.h",
     "style/system_shadow_on_nine_patch_layer.cc",

ash/style/ash_color_mixer.cc

@@ -602,6 +602,20 @@ void AddAshColorMixer(ui::ColorProvider* provider,
   mixer[kColorAshFolderItemCountBackgroundColor] =
       use_dark_color ? ui::ColorTransform(gfx::kGoogleBlue300)
                      : ui::ColorTransform(gfx::kGoogleBlue600);
+
+  mixer[ui::kColorToggleButtonThumbOn] = {cros_tokens::kCrosSysOnPrimary};
+  mixer[ui::kColorToggleButtonThumbOff] = {cros_tokens::kCrosSysOnSecondary};
+  mixer[ui::kColorToggleButtonThumbOnDisabled] =
+      ui::SetAlpha({ui::kColorToggleButtonThumbOn}, kDisabledColorOpacity);
+  mixer[ui::kColorToggleButtonThumbOffDisabled] =
+      ui::SetAlpha({ui::kColorToggleButtonThumbOff}, kDisabledColorOpacity);
+  mixer[ui::kColorToggleButtonTrackOn] = {cros_tokens::kCrosSysPrimary};
+  mixer[ui::kColorToggleButtonTrackOff] = {cros_tokens::kCrosSysSecondary};
+  mixer[ui::kColorToggleButtonTrackOnDisabled] =
+      ui::SetAlpha({ui::kColorToggleButtonTrackOn}, kDisabledColorOpacity);
+  mixer[ui::kColorToggleButtonTrackOffDisabled] =
+      ui::SetAlpha({ui::kColorToggleButtonTrackOff}, kDisabledColorOpacity);
+  mixer[ui::kColorToggleButtonHover] = {cros_tokens::kCrosSysHoverOnProminent};
 }
 
 }  // namespace ash

ash/style/style_viewer/knob_switch_instances_grid_view_factory.cc → ash/style/style_viewer/switch_instances_grid_view_factory.cc

@@ -1,11 +1,11 @@
-// Copyright 2022 The Chromium Authors
+// Copyright 2023 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 #include "ash/style/style_viewer/system_ui_components_grid_view_factories.h"
 
-#include "ash/style/knob_switch.h"
 #include "ash/style/style_viewer/system_ui_components_grid_view.h"
+#include "ash/style/switch.h"
 #include "ui/views/controls/label.h"
 
 namespace ash {
@@ -19,8 +19,8 @@ constexpr size_t kGridViewRowGroupSize = 2;
 constexpr size_t kGirdViewColGroupSize = 1;
 
 // A callback function of knob switch to show its selected state on a label.
-void ShowSwitchState(views::Label* label, bool selected) {
-  if (selected) {
+void ShowSwitchState(views::Label* label, Switch* switch_view) {
+  if (switch_view->GetIsOn()) {
     label->SetText(u"Switch is ON");
     return;
   }
@@ -30,32 +30,32 @@ void ShowSwitchState(views::Label* label, bool selected) {
 
 }  // namespace
 
-std::unique_ptr<SystemUIComponentsGridView>
-CreateKnobSwitchInstancesGridView() {
+std::unique_ptr<SystemUIComponentsGridView> CreateSwitchInstancesGridView() {
   auto grid_view = std::make_unique<SystemUIComponentsGridView>(
       kGridViewRowNum, kGridViewColNum, kGridViewRowGroupSize,
       kGirdViewColGroupSize);
 
   // A label used to show the selected state of a knob switch.
-  auto label = std::make_unique<views::Label>();
+  auto label = std::make_unique<views::Label>(u"Switch is OFF");
   label->SetAccessibleName(u"switch state");
-  auto knob_switch = std::make_unique<KnobSwitch>(
-      base::BindRepeating(&ShowSwitchState, label.get()));
-  knob_switch->SetAccessibleName(u"knob switch");
+  auto switch_view = std::make_unique<Switch>();
+  switch_view->SetCallback(
+      base::BindRepeating(&ShowSwitchState, label.get(), switch_view.get()));
+  switch_view->SetAccessibleName(u"switch");
 
   // A disabled knob switch with selected off state.
-  auto disabled_switch_off = std::make_unique<KnobSwitch>();
+  auto disabled_switch_off = std::make_unique<Switch>();
   disabled_switch_off->SetEnabled(false);
   disabled_switch_off->SetAccessibleName(u"disabled switch off");
 
   // A disabled knob switch with selected on state.
-  auto disabled_switch_on = std::make_unique<KnobSwitch>();
-  disabled_switch_on->SetSelected(true);
+  auto disabled_switch_on = std::make_unique<Switch>();
+  disabled_switch_on->SetIsOn(true);
   disabled_switch_on->SetEnabled(false);
   disabled_switch_on->SetAccessibleName(u"disabled switch on");
 
   grid_view->AddInstance(u"", std::move(label));
-  grid_view->AddInstance(u"Knob Switch", std::move(knob_switch));
+  grid_view->AddInstance(u"Switch", std::move(switch_view));
   grid_view->AddInstance(u"Disabled Switch OFF",
                          std::move(disabled_switch_off));
   grid_view->AddInstance(u"Disabled Switch ON", std::move(disabled_switch_on));

ash/style/style_viewer/system_ui_components_grid_view_factories.h

@@ -23,7 +23,7 @@ std::unique_ptr<SystemUIComponentsGridView>
 CreateRadioButtonInstancesGridView();
 std::unique_ptr<SystemUIComponentsGridView>
 CreateRadioButtonGroupInstancesGridView();
-std::unique_ptr<SystemUIComponentsGridView> CreateKnobSwitchInstancesGridView();
+std::unique_ptr<SystemUIComponentsGridView> CreateSwitchInstancesGridView();
 std::unique_ptr<SystemUIComponentsGridView> CreateTabSliderInstancesGridView();
 std::unique_ptr<SystemUIComponentsGridView>
 CreateSystemTextfieldInstancesGridView();

ash/style/style_viewer/system_ui_components_style_viewer_view.cc

@@ -167,7 +167,7 @@ void SystemUIComponentsStyleViewerView::CreateAndShowWidget() {
       u"RadioButtonGroup",
       base::BindRepeating(&CreateRadioButtonGroupInstancesGridView));
   viewer_view->AddComponent(
-      u"KnobSwitch", base::BindRepeating(&CreateKnobSwitchInstancesGridView));
+      u"Switch", base::BindRepeating(&CreateSwitchInstancesGridView));
   viewer_view->AddComponent(
       u"TabSlider", base::BindRepeating(&CreateTabSliderInstancesGridView));
   viewer_view->AddComponent(