Add gradient mask to holding space item labels

This CL applies a gradient mask to fade the label so that the
pin icon appears to cover the label instead of resizing the label.

Bug: 1137959
Change-Id: I6bbfed603bc7f41b8a266e72a00ed55a74849556
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2543370
Commit-Queue: Ahmed Mehfooz <amehfooz@chromium.org>
Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Reviewed-by: David Black <dmblack@google.com>
Cr-Commit-Position: refs/heads/master@{#829041}

ash/public/cpp/holding_space/holding_space_constants.h

@@ -21,6 +21,7 @@ constexpr int kHoldingSpaceChipChildSpacing = 8;
 constexpr int kHoldingSpaceChipHeight = 40;
 constexpr int kHoldingSpaceChipIconSize = 24;
 constexpr int kHoldingSpaceChipWidth = 160;
+constexpr int kHoldingSpaceChipLabelMaskGradientWidth = 16;
 constexpr int kHoldingSpaceChipsPerRow = 2;
 constexpr int kHoldingSpaceColumnSpacing = 8;
 constexpr int kHoldingSpaceColumnWidth = 160;

ash/system/holding_space/holding_space_item_chip_view.cc

@@ -10,12 +10,65 @@
 #include "ash/style/ash_color_provider.h"
 #include "ash/system/holding_space/holding_space_item_view.h"
 #include "ash/system/tray/tray_popup_utils.h"
+#include "ui/compositor/paint_recorder.h"
+#include "ui/gfx/skia_paint_util.h"
 #include "ui/views/controls/label.h"
 #include "ui/views/layout/box_layout.h"
+#include "ui/views/layout/fill_layout.h"
 #include "ui/views/metadata/metadata_impl_macros.h"
 
 namespace ash {
 
+class HoldingSpaceItemChipView::LabelMaskLayerOwner : public ui::LayerDelegate {
+ public:
+  LabelMaskLayerOwner() : layer_(ui::LAYER_TEXTURED) {
+    layer_.set_delegate(this);
+    layer_.SetFillsBoundsOpaquely(false);
+  }
+
+  LabelMaskLayerOwner(const LabelMaskLayerOwner&) = delete;
+  LabelMaskLayerOwner& operator=(const LabelMaskLayerOwner&) = delete;
+
+  ~LabelMaskLayerOwner() override { layer_.set_delegate(nullptr); }
+
+  ui::Layer* layer() { return &layer_; }
+
+ private:
+  // ui::LayerDelegate:
+  void OnPaintLayer(const ui::PaintContext& context) override {
+    const gfx::Size size = layer()->size();
+
+    views::PaintInfo paint_info =
+        views::PaintInfo::CreateRootPaintInfo(context, size);
+    const auto& paint_recording_size = paint_info.paint_recording_size();
+
+    // Pass the scale factor when constructing `PaintRecorder` so the mask layer
+    // size is not incorrectly rounded (see https://crbug.com/921274).
+    ui::PaintRecorder recorder(
+        context, paint_info.paint_recording_size(),
+        static_cast<float>(paint_recording_size.width()) / size.width(),
+        static_cast<float>(paint_recording_size.height()) / size.height(),
+        /*cache*/ nullptr);
+
+    cc::PaintFlags flags;
+    flags.setAntiAlias(false);
+
+    gfx::Point gradient_end(size.width() - kHoldingSpacePinIconSize, 0);
+    gfx::Point gradient_start(
+        gradient_end.x() - kHoldingSpaceChipLabelMaskGradientWidth,
+        gradient_end.y());
+    flags.setShader(gfx::CreateGradientShader(
+        gradient_start, gradient_end, SK_ColorBLACK, SK_ColorTRANSPARENT));
+
+    recorder.canvas()->DrawRect(gfx::Rect(size), flags);
+  }
+
+  void OnDeviceScaleFactorChanged(float old_device_scale_factor,
+                                  float new_device_scale_factor) override {}
+
+  ui::Layer layer_;
+};
+
 HoldingSpaceItemChipView::HoldingSpaceItemChipView(
     HoldingSpaceItemViewDelegate* delegate,
     const HoldingSpaceItem* item)
@@ -31,14 +84,27 @@ HoldingSpaceItemChipView::HoldingSpaceItemChipView(
   image_ = AddChildView(std::make_unique<RoundedImageView>(
       kHoldingSpaceChipIconSize / 2, RoundedImageView::Alignment::kLeading));
 
-  label_ = AddChildView(std::make_unique<views::Label>(item->text()));
+  label_and_pin_button_container_ =
+      AddChildView(std::make_unique<views::View>());
+  layout->SetFlexForView(label_and_pin_button_container_, 1);
+
+  label_and_pin_button_container_->SetLayoutManager(
+      std::make_unique<views::FillLayout>());
+
+  label_ = label_and_pin_button_container_->AddChildView(
+      std::make_unique<views::Label>(item->text()));
   label_->SetElideBehavior(gfx::ELIDE_MIDDLE);
   label_->SetHorizontalAlignment(gfx::HorizontalAlignment::ALIGN_LEFT);
   label_->SetEnabledColor(AshColorProvider::Get()->GetContentLayerColor(
       AshColorProvider::ContentLayerType::kTextColorPrimary));
   TrayPopupUtils::SetLabelFontList(
       label_, TrayPopupUtils::FontStyle::kDetailedViewLabel);
-  layout->SetFlexForView(label_, 1);
+
+  label_mask_layer_owner_ = std::make_unique<LabelMaskLayerOwner>();
+
+  label_->SetPaintToLayer();
+  label_->layer()->SetFillsBoundsOpaquely(false);
+  label_->layer()->SetMaskLayer(label_mask_layer_owner_->layer());
 
   // Subscribe to be notified of changes to `item_`'s image.
   image_subscription_ =
@@ -47,11 +113,34 @@ HoldingSpaceItemChipView::HoldingSpaceItemChipView(
 
   UpdateImage();
 
-  AddPin(/*parent=*/this);
+  views::View* pin_button_container =
+      label_and_pin_button_container_->AddChildView(
+          std::make_unique<views::View>());
+
+  auto* pin_layout =
+      pin_button_container->SetLayoutManager(std::make_unique<views::BoxLayout>(
+          views::BoxLayout::Orientation::kHorizontal));
+  pin_layout->set_main_axis_alignment(
+      views::BoxLayout::MainAxisAlignment::kEnd);
+  pin_layout->set_cross_axis_alignment(
+      views::BoxLayout::CrossAxisAlignment::kCenter);
+
+  AddPin(/*parent=*/pin_button_container);
 }
 
 HoldingSpaceItemChipView::~HoldingSpaceItemChipView() = default;
 
+void HoldingSpaceItemChipView::OnPinVisiblityChanged(bool pin_visible) {
+  if (label_mask_layer_owner_->layer()->bounds() !=
+      label_and_pin_button_container_->bounds()) {
+    // Mask layer has the same size as the label container so that the gradient
+    // ends at the end of the container.
+    label_mask_layer_owner_->layer()->SetBounds(
+        label_and_pin_button_container_->bounds());
+  }
+  label_mask_layer_owner_->layer()->SetVisible(pin_visible);
+}
+
 void HoldingSpaceItemChipView::UpdateImage() {
   image_->SetImage(
       item()->image().image_skia(),

ash/system/holding_space/holding_space_item_chip_view.h

@@ -35,10 +35,18 @@ class ASH_EXPORT HoldingSpaceItemChipView : public HoldingSpaceItemView {
   ~HoldingSpaceItemChipView() override;
 
  private:
+  class LabelMaskLayerOwner;
+
+  // HoldingSpaceItemView:
+  void OnPinVisiblityChanged(bool pin_visible) override;
+
   void UpdateImage();
 
+  std::unique_ptr<LabelMaskLayerOwner> label_mask_layer_owner_;
+
   RoundedImageView* image_ = nullptr;
   views::Label* label_ = nullptr;
+  views::View* label_and_pin_button_container_ = nullptr;
 
   std::unique_ptr<HoldingSpaceImage::Subscription> image_subscription_;
 };

ash/system/holding_space/holding_space_item_view.cc

@@ -319,6 +319,7 @@ void HoldingSpaceItemView::OnPinPressed() {
 void HoldingSpaceItemView::UpdatePin() {
   if (!IsMouseHovered()) {
     pin_->SetVisible(false);
+    OnPinVisiblityChanged(false);
     return;
   }
 
@@ -328,6 +329,7 @@ void HoldingSpaceItemView::UpdatePin() {
 
   pin_->SetToggled(!is_item_pinned);
   pin_->SetVisible(true);
+  OnPinVisiblityChanged(true);
 }
 
 BEGIN_METADATA(HoldingSpaceItemView, views::InkDropHostView)

ash/system/holding_space/holding_space_item_view.h

@@ -63,6 +63,7 @@ class ASH_EXPORT HoldingSpaceItemView : public views::InkDropHostView {
 
  protected:
   views::ToggleImageButton* AddPin(views::View* parent);
+  virtual void OnPinVisiblityChanged(bool pin_visible) {}
 
  private:
   void OnPaintFocus(gfx::Canvas* canvas, gfx::Size size);