Desks: Update the style of the bar items border

This CL implements the new specs of the mini_views and the new desk
button borders, which are designed to have a gap between the view's
contents and the border so it's more obvious against white/light
contents or background.

Only the active, highlighted, or hovered-over mini_views will have borders.

Demo: https://bugs.chromium.org/p/chromium/issues/detail?id=996490#c9

BUG=1001230, 996490
TEST=Manually

Change-Id: Iedd05a55ec36b9c6193c80f36e1d0d252ef93412
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1796112
Commit-Queue: Ahmed Fakhry <afakhry@chromium.org>
Reviewed-by: Sammie Quon <sammiequon@chromium.org>
Cr-Commit-Position: refs/heads/master@{#695407}

ash/BUILD.gn

@@ -1106,6 +1106,8 @@ component("ash") {
     "wm/desks/desk_preview_view.h",
     "wm/desks/desks_animations.cc",
     "wm/desks/desks_animations.h",
+    "wm/desks/desks_bar_item_border.cc",
+    "wm/desks/desks_bar_item_border.h",
     "wm/desks/desks_bar_view.cc",
     "wm/desks/desks_bar_view.h",
     "wm/desks/desks_controller.cc",

ash/wm/desks/desk_mini_view.cc

@@ -25,11 +25,10 @@ namespace {
 
 constexpr int kLabelPreviewSpacing = 8;
 
-constexpr int kCloseButtonMargin = 4;
+constexpr int kCloseButtonMargin = 8;
 
-constexpr SkColor kActiveColor = SkColorSetA(SK_ColorWHITE, 0xCC);  // 80%
-
-constexpr SkColor kInactiveColor = SkColorSetA(SK_ColorWHITE, 0x33);  // 20%
+constexpr SkColor kActiveColor = SK_ColorWHITE;
+constexpr SkColor kInactiveColor = SK_ColorTRANSPARENT;
 
 constexpr SkColor kDraggedOverColor = SkColorSetARGB(0xFF, 0x5B, 0xBC, 0xFF);
 

ash/wm/desks/desk_preview_view.cc

@@ -4,18 +4,24 @@
 
 #include "ash/wm/desks/desk_preview_view.h"
 
+#include <memory>
+
 #include "ash/multi_user/multi_user_window_manager_impl.h"
 #include "ash/public/cpp/window_properties.h"
 #include "ash/wallpaper/wallpaper_base_view.h"
 #include "ash/wm/desks/desk_mini_view.h"
+#include "ash/wm/desks/desks_bar_item_border.h"
 #include "ash/wm/window_state.h"
 #include "base/containers/flat_map.h"
 #include "ui/compositor/layer.h"
 #include "ui/compositor/layer_tree_owner.h"
+#include "ui/compositor/layer_type.h"
 #include "ui/compositor/paint_recorder.h"
 #include "ui/gfx/canvas.h"
+#include "ui/gfx/geometry/insets.h"
 #include "ui/gfx/geometry/rounded_corners_f.h"
 #include "ui/gfx/skia_paint_util.h"
+#include "ui/views/border.h"
 
 namespace ash {
 
@@ -25,8 +31,8 @@ namespace {
 // TODO(afakhry): Change the height to be dynamic according to the new specs.
 constexpr int kDeskPreviewHeight = 64;
 
-// The desk preview border size in dips.
-constexpr int kBorderSize = 2;
+// The corner radius of the border in dips.
+constexpr int kBorderCornerRadius = 6;
 
 // The rounded corner radii, also in dips.
 constexpr int kCornerRadius = 4;
@@ -194,7 +200,6 @@ class DeskPreviewView::ShadowRenderer : public ui::LayerDelegate {
 
 DeskPreviewView::DeskPreviewView(DeskMiniView* mini_view)
     : mini_view_(mini_view),
-      background_view_(new views::View),
       wallpaper_preview_(new DeskWallpaperPreview),
       desk_mirrored_contents_view_(new views::View),
       force_occlusion_tracker_visible_(
@@ -203,19 +208,14 @@ DeskPreviewView::DeskPreviewView(DeskMiniView* mini_view)
       shadow_delegate_(std::make_unique<ShadowRenderer>()) {
   DCHECK(mini_view_);
 
-  SetPaintToLayer(ui::LAYER_NOT_DRAWN);
+  SetPaintToLayer(ui::LAYER_TEXTURED);
+  layer()->SetFillsBoundsOpaquely(false);
   layer()->SetMasksToBounds(false);
 
   shadow_layer_.SetFillsBoundsOpaquely(false);
   layer()->Add(&shadow_layer_);
   shadow_layer_.set_delegate(shadow_delegate_.get());
 
-  background_view_->SetPaintToLayer(ui::LAYER_SOLID_COLOR);
-  auto* background_layer = background_view_->layer();
-  background_layer->SetRoundedCornerRadius(kCornerRadii);
-  background_layer->SetIsFastRoundedCorner(true);
-  AddChildView(background_view_);
-
   wallpaper_preview_->SetPaintToLayer();
   auto* wallpaper_preview_layer = wallpaper_preview_->layer();
   wallpaper_preview_layer->SetFillsBoundsOpaquely(false);
@@ -231,6 +231,10 @@ DeskPreviewView::DeskPreviewView(DeskMiniView* mini_view)
   contents_view_layer->SetIsFastRoundedCorner(true);
   AddChildView(desk_mirrored_contents_view_);
 
+  auto border = std::make_unique<DesksBarItemBorder>(kBorderCornerRadius);
+  border_ptr_ = border.get();
+  SetBorder(std::move(border));
+
   RecreateDeskContentsMirrorLayers();
 }
 
@@ -242,7 +246,8 @@ int DeskPreviewView::GetHeight() {
 }
 
 void DeskPreviewView::SetBorderColor(SkColor color) {
-  background_view_->layer()->SetColor(color);
+  border_ptr_->set_color(color);
+  SchedulePaint();
 }
 
 void DeskPreviewView::RecreateDeskContentsMirrorLayers() {
@@ -278,11 +283,9 @@ const char* DeskPreviewView::GetClassName() const {
 }
 
 void DeskPreviewView::Layout() {
-  gfx::Rect bounds = GetLocalBounds();
+  gfx::Rect bounds = GetContentsBounds();
   shadow_delegate_->set_bounds(bounds);
   shadow_layer_.SetBounds(shadow_delegate_->GetPaintedBounds());
-  background_view_->SetBoundsRect(bounds);
-  bounds.Inset(kBorderSize, kBorderSize);
   wallpaper_preview_->SetBoundsRect(bounds);
   desk_mirrored_contents_view_->SetBoundsRect(bounds);
 

ash/wm/desks/desk_preview_view.h

@@ -15,6 +15,7 @@ class LayerTreeOwner;
 
 namespace ash {
 
+class DesksBarItemBorder;
 class DeskMiniView;
 class WallpaperBaseView;
 
@@ -49,17 +50,12 @@ class WallpaperBaseView;
 //        |      without the dimming and blur that overview mode adds.
 //        |
 //        |
-//     `background_view_`'s layer: A solid color layer to paint a background
-//      behind everything else, simulating a colored border around the view.
+//     `shadow_layer_`: A layer that paints a shadow behind this view.
 //
-// `background_view_` has the same size as this view, while `wallpaper_preview_`
-// and `desk_mirrored_contents_view_` are inset by an amount equal to the border
-// size from all sides (See `kBorderSize`).
-//
-// Note that both |background_view_| and |wallpaper_preview_| paint to layers
-// with rounded corners. In order to use the fast rounded corners implementation
-// we must make them sibling layers, rather than one being a descendant of the
-// other. Otherwise, this will trigger a render surface.
+// Note that both |desk_mirrored_contents_view_| and |wallpaper_preview_| paint
+// to layers with rounded corners. In order to use the fast rounded corners
+// implementation we must make them sibling layers, rather than one being a
+// descendant of the other. Otherwise, this will trigger a render surface.
 class DeskPreviewView : public views::View {
  public:
   explicit DeskPreviewView(DeskMiniView* mini_view);
@@ -83,10 +79,6 @@ class DeskPreviewView : public views::View {
 
   DeskMiniView* const mini_view_;
 
-  // A view to paint a background color behind the |wallpaper_preview_| to
-  // simulate a border. Owned by the views hierarchy.
-  views::View* background_view_;
-
   // A view that paints the wallpaper in the mini_view. It avoids the dimming
   // and blur overview mode adds to the original wallpaper. Owned by the views
   // hierarchy.
@@ -97,6 +89,10 @@ class DeskPreviewView : public views::View {
   // tree. Owned by the views hierarchy.
   views::View* desk_mirrored_contents_view_;
 
+  // Owned by this View via `View::border_`. This is just a convenient pointer
+  // to it.
+  DesksBarItemBorder* border_ptr_;
+
   // Owns the layer tree of the desk's contents mirrored layers.
   std::unique_ptr<ui::LayerTreeOwner> desk_mirrored_contents_layer_tree_owner_;
 

ash/wm/desks/desks_bar_item_border.cc

+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#include "ash/wm/desks/desks_bar_item_border.h"
+
+#include "cc/paint/paint_flags.h"
+#include "ui/gfx/canvas.h"
+#include "ui/gfx/geometry/rect_f.h"
+#include "ui/views/view.h"
+
+namespace ash {
+
+namespace {
+
+// The desk preview border size and padding in dips.
+constexpr int kBorderSize = 2;
+constexpr int kBorderPadding = 2;
+
+}  // namespace
+
+DesksBarItemBorder::DesksBarItemBorder(int corner_radius)
+    : corner_radius_(corner_radius) {}
+
+void DesksBarItemBorder::Paint(const views::View& view, gfx::Canvas* canvas) {
+  if (color_ == SK_ColorTRANSPARENT)
+    return;
+
+  cc::PaintFlags flags;
+  flags.setStrokeWidth(kBorderSize);
+  flags.setColor(color_);
+  flags.setStyle(cc::PaintFlags::kStroke_Style);
+  flags.setAntiAlias(true);
+
+  gfx::RectF bounds(view.GetLocalBounds());
+  // The following inset is needed for the rounded corners of the border to
+  // look correct. Otherwise, the borders will be painted at the edge of the
+  // view, resulting in this border looking chopped.
+  bounds.Inset(kBorderSize / 2, kBorderSize / 2);
+  canvas->DrawRoundRect(bounds, corner_radius_, flags);
+}
+
+gfx::Insets DesksBarItemBorder::GetInsets() const {
+  constexpr gfx::Insets kInsets{kBorderSize + kBorderPadding};
+  return kInsets;
+}
+
+gfx::Size DesksBarItemBorder::GetMinimumSize() const {
+  constexpr gfx::Size kMinSize{2 * (kBorderSize + kBorderPadding),
+                               2 * (kBorderSize + kBorderPadding)};
+  return kMinSize;
+}
+
+}  // namespace ash

ash/wm/desks/desks_bar_item_border.h

+// Copyright 2019 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+#ifndef ASH_WM_DESKS_DESKS_BAR_ITEM_BORDER_H_
+#define ASH_WM_DESKS_DESKS_BAR_ITEM_BORDER_H_
+
+#include "base/macros.h"
+#include "third_party/skia/include/core/SkColor.h"
+#include "ui/views/border.h"
+
+namespace ash {
+
+// Defines a border to be used on the views of the desks bar, such as the
+// DeskPreviewView and the NewDeskButton. This paints a border around the view
+// with an empty gap (padding) in-between, so that the border is more obvious
+// against white or light backgrounds. If a |SK_ColorTRANSPARENT| was provided,
+// it will paint nothing.
+class DesksBarItemBorder : public views::Border {
+ public:
+  explicit DesksBarItemBorder(int corner_radius);
+  ~DesksBarItemBorder() override = default;
+
+  void set_color(SkColor color) { color_ = color; }
+
+  // views::Border:
+  void Paint(const views::View& view, gfx::Canvas* canvas) override;
+  gfx::Insets GetInsets() const override;
+  gfx::Size GetMinimumSize() const override;
+
+ private:
+  const int corner_radius_;
+
+  SkColor color_ = SK_ColorTRANSPARENT;
+
+  DISALLOW_COPY_AND_ASSIGN(DesksBarItemBorder);
+};
+
+}  // namespace ash
+
+#endif  // ASH_WM_DESKS_DESKS_BAR_ITEM_BORDER_H_

ash/wm/desks/desks_bar_view.cc

@@ -225,7 +225,7 @@ void DesksBarView::Layout() {
   if (mini_views_.empty())
     return;
 
-  constexpr int kMiniViewsSpacing = 8;
+  constexpr int kMiniViewsSpacing = 12;
   const gfx::Size mini_view_size = mini_views_[0]->GetPreferredSize();
   const int total_width =
       mini_views_.size() * (mini_view_size.width() + kMiniViewsSpacing) -

ash/wm/desks/desks_unittests.cc

@@ -1354,7 +1354,7 @@ TEST_F(DesksTest, NewDeskButtonStateAndColor) {
   const SkColor disabled_background_color =
       AshColorProvider::GetDisabledColor(background_color);
   EXPECT_TRUE(new_desk_button->GetEnabled());
-  EXPECT_EQ(background_color, new_desk_button->background()->get_color());
+  EXPECT_EQ(background_color, new_desk_button->GetBackgroundColorForTesting());
 
   const gfx::Point button_center =
       new_desk_button->GetBoundsInScreen().CenterPoint();
@@ -1362,7 +1362,7 @@ TEST_F(DesksTest, NewDeskButtonStateAndColor) {
   event_generator->MoveMouseTo(button_center);
   event_generator->ClickLeftButton();
   EXPECT_TRUE(new_desk_button->GetEnabled());
-  EXPECT_EQ(background_color, new_desk_button->background()->get_color());
+  EXPECT_EQ(background_color, new_desk_button->GetBackgroundColorForTesting());
 
   // Tests that adding desks until we reach the desks limit should change the
   // state and color of the new desk button.
@@ -1374,7 +1374,7 @@ TEST_F(DesksTest, NewDeskButtonStateAndColor) {
   }
   EXPECT_FALSE(new_desk_button->GetEnabled());
   EXPECT_EQ(disabled_background_color,
-            new_desk_button->background()->get_color());
+            new_desk_button->GetBackgroundColorForTesting());
 }
 
 class TabletModeDesksTest : public DesksTest {

ash/wm/desks/new_desk_button.cc

@@ -4,12 +4,14 @@
 
 #include "ash/wm/desks/new_desk_button.h"
 
+#include <memory>
 #include <utility>
 
 #include "ash/resources/vector_icons/vector_icons.h"
 #include "ash/shell.h"
 #include "ash/strings/grit/ash_strings.h"
 #include "ash/style/ash_color_provider.h"
+#include "ash/wm/desks/desks_bar_item_border.h"
 #include "ash/wm/desks/desks_bar_view.h"
 #include "ash/wm/desks/desks_controller.h"
 #include "ash/wm/desks/desks_util.h"
@@ -18,6 +20,7 @@
 #include "ash/wm/overview/overview_session.h"
 #include "base/strings/utf_string_conversions.h"
 #include "ui/base/l10n/l10n_util.h"
+#include "ui/gfx/canvas.h"
 #include "ui/gfx/color_palette.h"
 #include "ui/gfx/paint_vector_icon.h"
 #include "ui/views/animation/ink_drop_impl.h"
@@ -45,10 +48,6 @@ constexpr SkColor kTextAndIconColor = gfx::kGoogleGrey200;
 constexpr SkColor kDisabledTextAndIconColor =
     SkColorSetA(kTextAndIconColor, 0x61);
 
-// The color of the highlight when this button is selected via
-// tabbing.
-constexpr int kHighlightThicknessDp = 2;
-
 }  // namespace
 
 NewDeskButton::NewDeskButton(views::ButtonListener* listener)
@@ -69,6 +68,11 @@ NewDeskButton::NewDeskButton(views::ButtonListener* listener)
   set_has_ink_drop_action_on_click(true);
   set_ink_drop_visible_opacity(kInkDropVisibleOpacity);
   SetFocusPainter(nullptr);
+
+  auto border = std::make_unique<DesksBarItemBorder>(kCornerRadius);
+  border_ptr_ = border.get();
+  SetBorder(std::move(border));
+
   UpdateButtonState();
   UpdateBorderState();
 }
@@ -85,14 +89,12 @@ void NewDeskButton::UpdateButtonState() {
   }
   SetEnabled(enabled);
 
-  const SkColor background_color =
-      AshColorProvider::Get()->GetControlsLayerColor(
-          AshColorProvider::ControlsLayerType::kInactiveControlBackground,
-          AshColorProvider::AshColorMode::kDark);
-  const SkColor disabled_background_color =
-      AshColorProvider::GetDisabledColor(background_color);
-  SetBackground(views::CreateRoundedRectBackground(
-      enabled ? background_color : disabled_background_color, kCornerRadius));
+  background_color_ = AshColorProvider::Get()->GetControlsLayerColor(
+      AshColorProvider::ControlsLayerType::kInactiveControlBackground,
+      AshColorProvider::AshColorMode::kDark);
+  if (!enabled)
+    background_color_ = AshColorProvider::GetDisabledColor(background_color_);
+  SchedulePaint();
 }
 
 void NewDeskButton::OnButtonPressed() {
@@ -107,6 +109,15 @@ const char* NewDeskButton::GetClassName() const {
   return "NewDeskButton";
 }
 
+void NewDeskButton::OnPaintBackground(gfx::Canvas* canvas) {
+  // Paint a background that takes into account this view's insets.
+  cc::PaintFlags flags;
+  flags.setAntiAlias(true);
+  flags.setStyle(cc::PaintFlags::kFill_Style);
+  flags.setColor(background_color_);
+  canvas->DrawRoundRect(gfx::RectF(GetContentsBounds()), kCornerRadius, flags);
+}
+
 std::unique_ptr<views::InkDrop> NewDeskButton::CreateInkDrop() {
   auto ink_drop = CreateDefaultFloodFillInkDropImpl();
   ink_drop->SetShowHighlightOnHover(false);
@@ -126,7 +137,7 @@ SkColor NewDeskButton::GetInkDropBaseColor() const {
 }
 
 std::unique_ptr<views::InkDropMask> NewDeskButton::CreateInkDropMask() const {
-  return std::make_unique<views::RoundRectInkDropMask>(size(), gfx::Insets(),
+  return std::make_unique<views::RoundRectInkDropMask>(size(), GetInsets(),
                                                        kCornerRadius);
 }
 
@@ -168,16 +179,12 @@ void NewDeskButton::OnViewUnhighlighted() {
 }
 
 void NewDeskButton::UpdateBorderState() {
-  if (IsViewHighlighted() && DesksController::Get()->CanCreateDesks()) {
-    SetBorder(views::CreateRoundedRectBorder(
-        kHighlightThicknessDp, kCornerRadius,
-        GetNativeTheme()->GetSystemColor(
-            ui::NativeTheme::kColorId_FocusedBorderColor)));
-  } else {
-    // Use an empty border when this view is not highlighted otherwise the text
-    // will shift when unhighlighted.
-    SetBorder(views::CreateEmptyBorder(gfx::Insets(kHighlightThicknessDp)));
-  }
+  border_ptr_->set_color(
+      (IsViewHighlighted() && DesksController::Get()->CanCreateDesks())
+          ? GetNativeTheme()->GetSystemColor(
+                ui::NativeTheme::kColorId_FocusedBorderColor)
+          : SK_ColorTRANSPARENT);
+  SchedulePaint();
 }
 
 }  // namespace ash

ash/wm/desks/new_desk_button.h

@@ -14,6 +14,8 @@
 
 namespace ash {
 
+class DesksBarItemBorder;
+
 // A button view that shows up in the top-right corner of the screen when
 // overview mode is on, which is used to create a new virtual desk.
 class ASH_EXPORT NewDeskButton
@@ -30,6 +32,7 @@ class ASH_EXPORT NewDeskButton
 
   // LabelButton:
   const char* GetClassName() const override;
+  void OnPaintBackground(gfx::Canvas* canvas) override;
   std::unique_ptr<views::InkDrop> CreateInkDrop() override;
   std::unique_ptr<views::InkDropHighlight> CreateInkDropHighlight()
       const override;
@@ -47,9 +50,17 @@ class ASH_EXPORT NewDeskButton
   bool OnViewHighlighted() override;
   void OnViewUnhighlighted() override;
 
+  SkColor GetBackgroundColorForTesting() const { return background_color_; }
+
  private:
   void UpdateBorderState();
 
+  // Owned by this View via `View::border_`. This is just a convenient pointer
+  // to it.
+  DesksBarItemBorder* border_ptr_;
+
+  SkColor background_color_;
+
   DISALLOW_COPY_AND_ASSIGN(NewDeskButton);
 };