dark_mode: Update collapse button on spec.

Remove the special shape of the collapse button. Changing it based on
the dark mode's spec.

See recorded video at https://drive.google.com/file/d/1jUzzACXKYKjX-VLtNJMM5PrPPaJ9Pv0g/view?usp=sharing&resourcekey=0-h-Z7-5Ul0ub5kc8HN15FIQ

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

ash/system/tray/detailed_view_delegate.cc

@@ -10,7 +10,7 @@
 #include "ash/system/tray/hover_highlight_view.h"
 #include "ash/system/tray/tray_constants.h"
 #include "ash/system/tray/tray_popup_utils.h"
-#include "ash/system/unified/collapse_button.h"
+#include "ash/system/unified/custom_shape_button.h"
 #include "ash/system/unified/top_shortcut_button.h"
 #include "ash/system/unified/unified_system_tray_controller.h"
 #include "components/vector_icons/vector_icons.h"

ash/system/unified/collapse_button.cc

@@ -8,14 +8,21 @@
 #include "ash/strings/grit/ash_strings.h"
 #include "ash/style/ash_color_provider.h"
 #include "ash/system/tray/tray_constants.h"
+#include "ash/system/tray/tray_popup_utils.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/gfx/paint_vector_icon.h"
 #include "ui/gfx/scoped_canvas.h"
+#include "ui/views/animation/flood_fill_ink_drop_ripple.h"
+#include "ui/views/animation/ink_drop_impl.h"
+#include "ui/views/controls/highlight_path_generator.h"
 
 namespace ash {
 
 CollapseButton::CollapseButton(PressedCallback callback)
-    : CustomShapeButton(std::move(callback)) {}
+    : ImageButton(std::move(callback)) {
+  views::InstallCircleHighlightPathGenerator(this);
+  TrayPopupUtils::ConfigureTrayPopupButton(this);
+}
 
 CollapseButton::~CollapseButton() = default;
 
@@ -30,36 +37,43 @@ void CollapseButton::SetExpandedAmount(double expanded_amount) {
 }
 
 gfx::Size CollapseButton::CalculatePreferredSize() const {
-  return gfx::Size(kTrayItemSize, kTrayItemSize * 3 / 2);
-}
-
-SkPath CollapseButton::CreateCustomShapePath(const gfx::Rect& bounds) const {
-  SkPath path;
-  SkScalar bottom_radius = SkIntToScalar(kTrayItemSize / 2);
-  SkScalar radii[8] = {
-      0, 0, 0, 0, bottom_radius, bottom_radius, bottom_radius, bottom_radius};
-  path.addRoundRect(gfx::RectToSkRect(bounds), radii);
-  return path;
+  return gfx::Size(kTrayItemSize, kTrayItemSize);
 }
 
 void CollapseButton::PaintButtonContents(gfx::Canvas* canvas) {
-  PaintCustomShapePath(canvas);
-
   gfx::ScopedCanvas scoped(canvas);
-  canvas->Translate(gfx::Vector2d(size().width() / 2, size().height() * 2 / 3));
+  canvas->Translate(gfx::Vector2d(size().width() / 2, size().height() / 2));
   canvas->sk_canvas()->rotate(expanded_amount_ * 180.);
   gfx::ImageSkia image = GetImageToPaint();
   canvas->DrawImageInt(image, -image.width() / 2, -image.height() / 2);
 }
 
+std::unique_ptr<views::InkDrop> CollapseButton::CreateInkDrop() {
+  return TrayPopupUtils::CreateInkDrop(this);
+}
+
+std::unique_ptr<views::InkDropRipple> CollapseButton::CreateInkDropRipple()
+    const {
+  return TrayPopupUtils::CreateInkDropRipple(
+      TrayPopupInkDropStyle::FILL_BOUNDS, this,
+      GetInkDropCenterBasedOnLastEvent());
+}
+
+std::unique_ptr<views::InkDropHighlight>
+CollapseButton::CreateInkDropHighlight() const {
+  return TrayPopupUtils::CreateInkDropHighlight(this);
+}
+
 const char* CollapseButton::GetClassName() const {
   return "CollapseButton";
 }
 
 void CollapseButton::OnThemeChanged() {
-  CustomShapeButton::OnThemeChanged();
+  views::ImageButton::OnThemeChanged();
   AshColorProvider::Get()->DecorateFloatingIconButton(this,
                                                       kUnifiedMenuExpandIcon);
+  focus_ring()->SetColor(AshColorProvider::Get()->GetControlsLayerColor(
+      AshColorProvider::ControlsLayerType::kFocusRingColor));
 }
 
 }  // namespace ash

ash/system/unified/collapse_button.h

@@ -5,7 +5,7 @@
 #ifndef ASH_SYSTEM_UNIFIED_COLLAPSE_BUTTON_H_
 #define ASH_SYSTEM_UNIFIED_COLLAPSE_BUTTON_H_
 
-#include "ash/system/unified/custom_shape_button.h"
+#include "ui/views/controls/button/image_button.h"
 
 namespace ash {
 
@@ -13,7 +13,7 @@ namespace ash {
 // UnifiedSystemTrayBubble will support collapsed state where the height of the
 // bubble is smaller, and some rows and labels will be omitted.
 // By pressing the button, the state of the bubble will be toggled.
-class CollapseButton : public CustomShapeButton {
+class CollapseButton : public views::ImageButton {
  public:
   explicit CollapseButton(PressedCallback callback);
   ~CollapseButton() override;
@@ -21,10 +21,13 @@ class CollapseButton : public CustomShapeButton {
   // Change the expanded state. The icon will change.
   void SetExpandedAmount(double expanded_amount);
 
-  // CustomShapeButton:
+  // views::ImageButton:
   gfx::Size CalculatePreferredSize() const override;
-  SkPath CreateCustomShapePath(const gfx::Rect& bounds) const override;
   void PaintButtonContents(gfx::Canvas* canvas) override;
+  std::unique_ptr<views::InkDrop> CreateInkDrop() override;
+  std::unique_ptr<views::InkDropRipple> CreateInkDropRipple() const override;
+  std::unique_ptr<views::InkDropHighlight> CreateInkDropHighlight()
+      const override;
   const char* GetClassName() const override;
   void OnThemeChanged() override;
 

ash/system/unified/top_shortcuts_view.cc

@@ -224,10 +224,18 @@ TopShortcutsView::TopShortcutsView(UnifiedSystemTrayController* controller) {
   // container flex occupying all remaining space.
   layout->SetFlexForView(container_, 1);
 
-  collapse_button_ = new CollapseButton(
-      base::BindRepeating(&UnifiedSystemTrayController::ToggleExpanded,
-                          base::Unretained(controller)));
-  AddChildView(collapse_button_);
+  auto* collapse_button_container =
+      AddChildView(std::make_unique<views::View>());
+  collapse_button_ =
+      collapse_button_container->AddChildView(std::make_unique<CollapseButton>(
+          base::BindRepeating(&UnifiedSystemTrayController::ToggleExpanded,
+                              base::Unretained(controller))));
+  const gfx::Size collapse_button_size = collapse_button_->GetPreferredSize();
+  collapse_button_container->SetPreferredSize(
+      gfx::Size(collapse_button_size.width(),
+                collapse_button_size.height() + kUnifiedTopShortcutSpacing));
+  collapse_button_->SetBoundsRect(gfx::Rect(
+      gfx::Point(0, kUnifiedTopShortcutSpacing), collapse_button_size));
 }
 
 // static