[Multipaste] Add ink drop ripple to the delete button

This CL adds the ink drop ripple to the delete button. In order to
achieve this, we create a new class called `DeleteButtonContainer`
to paint the delete button background. Otherwise, because the ink drop
ripple's layer is beneath the host view, the delete button's background
will be placed above the ink drop ripple's layer.

Due to the view hierarchy's change, this CL also modifies the api
function provided by ContentsView to install the delete button.

Bug: 1152815
Change-Id: I083850f41d15cb9c2c1974d84c217fcc93f83fed
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2568152
Commit-Queue: Andrew Xu <andrewxu@chromium.org>
Reviewed-by: David Black <dmblack@google.com>
Cr-Commit-Position: refs/heads/master@{#833550}

ash/clipboard/views/clipboard_history_bitmap_item_view.cc

@@ -197,7 +197,6 @@ class ClipboardHistoryBitmapItemView::BitmapContentsView
 
     auto delete_button =
         std::make_unique<ClipboardHistoryDeleteButton>(container_);
-    delete_button->SetVisible(false);
     delete_button->SetProperty(
         views::kMarginsKey,
         ClipboardHistoryViews::kBitmapItemDeleteButtonMargins);

ash/clipboard/views/clipboard_history_delete_button.cc

@@ -9,6 +9,8 @@
 #include "ash/resources/vector_icons/vector_icons.h"
 #include "ash/style/ash_color_provider.h"
 #include "ash/style/scoped_light_mode_as_default.h"
+#include "ui/views/animation/ink_drop.h"
+#include "ui/views/controls/highlight_path_generator.h"
 
 namespace ash {
 ClipboardHistoryDeleteButton::ClipboardHistoryDeleteButton(
@@ -24,6 +26,22 @@ ClipboardHistoryDeleteButton::ClipboardHistoryDeleteButton(
   SetImageVerticalAlignment(views::ImageButton::ALIGN_MIDDLE);
   SetPreferredSize(gfx::Size(ClipboardHistoryViews::kDeleteButtonSizeDip,
                              ClipboardHistoryViews::kDeleteButtonSizeDip));
+  SetVisible(false);
+  SetInkDropMode(views::InkDropHostView::InkDropMode::ON);
+  ink_drop_container_ =
+      AddChildView(std::make_unique<views::InkDropContainerView>());
+
+  // Typically we should not create a layer for a view used in the clipboard
+  // history menu. Because if a layer extends outside of the menu's bounds, it
+  // does not get cut (in addition, due to the lack of ownership, it is hard to
+  // change this behavior). However, it is safe to paint to layer here since the
+  // default visibility is false,
+  SetPaintToLayer();
+  layer()->SetFillsBoundsOpaquely(false);
+
+  // The ink drop ripple should be circular.
+  views::InstallFixedSizeCircleHighlightPathGenerator(
+      this, ClipboardHistoryViews::kDeleteButtonSizeDip / 2);
 }
 
 ClipboardHistoryDeleteButton::~ClipboardHistoryDeleteButton() = default;
@@ -32,6 +50,16 @@ const char* ClipboardHistoryDeleteButton::GetClassName() const {
   return "DeleteButton";
 }
 
+void ClipboardHistoryDeleteButton::AddLayerBeneathView(ui::Layer* layer) {
+  ink_drop_container_->AddLayerBeneathView(layer);
+}
+
+std::unique_ptr<views::InkDrop> ClipboardHistoryDeleteButton::CreateInkDrop() {
+  std::unique_ptr<views::InkDrop> ink_drop = views::Button::CreateInkDrop();
+  ink_drop->SetShowHighlightOnHover(false);
+  return ink_drop;
+}
+
 void ClipboardHistoryDeleteButton::OnThemeChanged() {
   // Use the light mode as default because the light mode is the default mode of
   // the native theme which decides the context menu's background color.
@@ -41,5 +69,15 @@ void ClipboardHistoryDeleteButton::OnThemeChanged() {
   views::ImageButton::OnThemeChanged();
   AshColorProvider::Get()->DecorateCloseButton(
       this, ClipboardHistoryViews::kDeleteButtonSizeDip, kCloseButtonIcon);
+
+  const AshColorProvider::RippleAttributes ripple_attributes =
+      AshColorProvider::Get()->GetRippleAttributes();
+  SetInkDropBaseColor(ripple_attributes.base_color);
+  SetInkDropVisibleOpacity(ripple_attributes.inkdrop_opacity);
 }
+
+void ClipboardHistoryDeleteButton::RemoveLayerBeneathView(ui::Layer* layer) {
+  ink_drop_container_->RemoveLayerBeneathView(layer);
+}
+
 }  // namespace ash

ash/clipboard/views/clipboard_history_delete_button.h

@@ -7,6 +7,10 @@
 
 #include "ui/views/controls/button/image_button.h"
 
+namespace views {
+class InkDropContainerView;
+}  // namespace views
+
 namespace ash {
 class ClipboardHistoryItemView;
 
@@ -23,7 +27,14 @@ class ClipboardHistoryDeleteButton : public views::ImageButton {
  private:
   // views::ImageButton:
   const char* GetClassName() const override;
+  void AddLayerBeneathView(ui::Layer* layer) override;
+  std::unique_ptr<views::InkDrop> CreateInkDrop() override;
   void OnThemeChanged() override;
+  void RemoveLayerBeneathView(ui::Layer* layer) override;
+
+  // Used to accommodate the ink drop layer. It ensures that the ink drop is
+  // above the view background.
+  views::InkDropContainerView* ink_drop_container_ = nullptr;
 };
 }  // namespace ash
 

ash/clipboard/views/clipboard_history_text_item_view.cc

@@ -46,7 +46,6 @@ class ClipboardHistoryTextItemView::TextContentsView
   ClipboardHistoryDeleteButton* CreateDeleteButton() override {
     auto delete_button =
         std::make_unique<ClipboardHistoryDeleteButton>(container());
-    delete_button->SetVisible(false);
     delete_button->SetProperty(
         views::kMarginsKey,
         ClipboardHistoryViews::kDefaultItemDeleteButtonMargins);