splitview: Update split view indicators to match mocks.

Window selector item indicator and drag indicators share some design
so created split_view_constants.h to share constants.

Animate the selector item indicator label, and the drag indicator
widget opacity so they fade in.

Change phantom windows to when selector item dragged over to drag
indicator.

mocks:
https://gallery.googleplex.com/projects/MCHbtQVoQ2HCZQc4sf-S_quE/files/MCEpUArMVI4QsSaRnFNKc4g8wMSJbxAVNpw

screenshots:
https://screenshot.googleplex.com/D6yHyySYLhb
https://screenshot.googleplex.com/zWwVzisZuPC
https://screenshot.googleplex.com/ZiYRYhM6i62

Test: manual, ash_unittests SplitViewWindowSelectorTest
Bug: 786119
Change-Id: Iedd5e9193e73c16f2d0b0c494a86e626b32705f6
Reviewed-on: https://chromium-review.googlesource.com/779940Reviewed-by: Mitsuru Oshima <oshima@chromium.org>
Reviewed-by: Xiaoqian Dai <xdai@chromium.org>
Commit-Queue: Sammie Quon <sammiequon@chromium.org>
Cr-Commit-Position: refs/heads/master@{#523286}

ash/BUILD.gn

@@ -889,12 +889,15 @@ component("ash") {
     "wm/session_state_animator.h",
     "wm/session_state_animator_impl.cc",
     "wm/session_state_animator_impl.h",
+    "wm/splitview/split_view_constants.h",
     "wm/splitview/split_view_controller.cc",
     "wm/splitview/split_view_controller.h",
     "wm/splitview/split_view_divider.cc",
     "wm/splitview/split_view_divider.h",
     "wm/splitview/split_view_overview_overlay.cc",
     "wm/splitview/split_view_overview_overlay.h",
+    "wm/splitview/split_view_utils.cc",
+    "wm/splitview/split_view_utils.h",
     "wm/stacking_controller.cc",
     "wm/stacking_controller.h",
     "wm/switchable_windows.cc",

ash/resources/vector_icons/BUILD.gn

@@ -140,7 +140,6 @@ aggregate_vector_icons("ash_vector_icons") {
     "shelf_sign_out_button.icon",
     "shelf_unlock_button.1x.icon",
     "shelf_unlock_button.icon",
-    "splitview_nosnap_warning.icon",
     "system_menu_accessibility.1x.icon",
     "system_menu_accessibility.icon",
     "system_menu_accessibility_auto_click.1x.icon",

ash/resources/vector_icons/splitview_nosnap_warning.icon

-// Copyright 2017 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.
-
-CANVAS_DIMENSIONS, 24,
-MOVE_TO, 12, 2,
-CUBIC_TO, 6.48f, 2, 2, 6.48f, 2, 12,
-R_CUBIC_TO, 0, 5.52f, 4.48f, 10, 10, 10,
-R_CUBIC_TO, 5.52f, 0, 10, -4.48f, 10, -10,
-CUBIC_TO_SHORTHAND, 17.52f, 2, 12, 2,
-CLOSE,
-R_MOVE_TO, 1, 15,
-R_H_LINE_TO, -2,
-R_V_LINE_TO, -6,
-R_H_LINE_TO, 2,
-R_V_LINE_TO, 6,
-CLOSE,
-R_MOVE_TO, 0, -8,
-R_H_LINE_TO, -2,
-V_LINE_TO, 7,
-R_H_LINE_TO, 2,
-R_V_LINE_TO, 2,
-CLOSE,
-END

ash/wm/overview/overview_window_drag_controller.cc

@@ -12,6 +12,7 @@
 #include "ash/wm/overview/scoped_transform_overview_window.h"
 #include "ash/wm/overview/window_selector.h"
 #include "ash/wm/overview/window_selector_item.h"
+#include "ash/wm/splitview/split_view_constants.h"
 #include "ash/wm/splitview/split_view_overview_overlay.h"
 #include "ash/wm/window_positioning_utils.h"
 #include "ash/wm/wm_event.h"
@@ -246,31 +247,44 @@ SplitViewController::SnapPosition OverviewWindowDragController::GetSnapPosition(
       Shell::Get()->screen_orientation_controller()->GetCurrentOrientation();
   switch (screen_orientation) {
     case blink::kWebScreenOrientationLockLandscapePrimary:
-    case blink::kWebScreenOrientationLockLandscapeSecondary:
-      area.Inset(kScreenEdgeInsetForDrag, 0);
-      if (location_in_screen.x() <= area.x())
+    case blink::kWebScreenOrientationLockLandscapeSecondary: {
+      // The window can be snapped if it reaches close enough to the screen
+      // edge of the screen (on primary axis). The edge insets are a fixed ratio
+      // of the screen plus some padding. This matches the overlay ui.
+      const int screen_edge_inset_for_drag =
+          area.width() * kHighlightScreenPrimaryAxisRatio +
+          kHighlightScreenEdgePaddingDp;
+      area.Inset(screen_edge_inset_for_drag, 0);
+      if (location_in_screen.x() <= area.x()) {
         return IsPrimaryScreenOrientation(screen_orientation)
                    ? SplitViewController::LEFT
                    : SplitViewController::RIGHT;
-      if (location_in_screen.x() >= area.right() - 1)
+      }
+      if (location_in_screen.x() >= area.right() - 1) {
         return IsPrimaryScreenOrientation(screen_orientation)
                    ? SplitViewController::RIGHT
                    : SplitViewController::LEFT;
+      }
       return SplitViewController::NONE;
-
+    }
     case blink::kWebScreenOrientationLockPortraitPrimary:
-    case blink::kWebScreenOrientationLockPortraitSecondary:
-      area.Inset(0, kScreenEdgeInsetForDrag);
-      if (location_in_screen.y() <= area.y())
+    case blink::kWebScreenOrientationLockPortraitSecondary: {
+      const int screen_edge_inset_for_drag =
+          area.height() * kHighlightScreenPrimaryAxisRatio +
+          kHighlightScreenEdgePaddingDp;
+      area.Inset(0, screen_edge_inset_for_drag);
+      if (location_in_screen.y() <= area.y()) {
         return IsPrimaryScreenOrientation(screen_orientation)
                    ? SplitViewController::RIGHT
                    : SplitViewController::LEFT;
-      if (location_in_screen.y() >= area.bottom() - 1)
+      }
+      if (location_in_screen.y() >= area.bottom() - 1) {
         return IsPrimaryScreenOrientation(screen_orientation)
                    ? SplitViewController::LEFT
                    : SplitViewController::RIGHT;
+      }
       return SplitViewController::NONE;
-
+    }
     default:
       NOTREACHED();
       return SplitViewController::NONE;

ash/wm/overview/overview_window_drag_controller.h

@@ -24,9 +24,6 @@ class WindowSelectorItem;
 // and shows/hides the phantom window accordingly.
 class ASH_EXPORT OverviewWindowDragController {
  public:
-  // Snapping distance between the dragged window with the screen edge. It's
-  // useful especially for touch events.
-  static constexpr int kScreenEdgeInsetForDrag = 200;
   // The minimum offset that will be considered as a drag event.
   static constexpr int kMinimumDragOffset = 5;
   // The minimum offset that an item must be moved before it is considered a

ash/wm/overview/rounded_rect_view.cc

@@ -9,8 +9,8 @@
 
 namespace ash {
 
-RoundedRectView::RoundedRectView(int corner_radius, SkColor background)
-    : corner_radius_(corner_radius), background_(background) {}
+RoundedRectView::RoundedRectView(int corner_radius, SkColor background_color)
+    : corner_radius_(corner_radius), background_color_(background_color) {}
 
 RoundedRectView::~RoundedRectView() = default;
 
@@ -25,7 +25,15 @@ void RoundedRectView::OnPaint(gfx::Canvas* canvas) {
   path.addRoundRect(gfx::RectToSkRect(bounds), kRadius);
 
   canvas->ClipPath(path, true);
-  canvas->DrawColor(background_);
+  canvas->DrawColor(background_color_);
+}
+
+void RoundedRectView::SetBackgroundColor(SkColor background_color) {
+  if (background_color_ == background_color)
+    return;
+
+  background_color_ = background_color;
+  SchedulePaint();
 }
 
 }  // namespace ash

ash/wm/overview/rounded_rect_view.h

@@ -19,15 +19,17 @@ namespace ash {
 //               classes and move into ui/views.
 class RoundedRectView : public views::View {
  public:
-  RoundedRectView(int corner_radius, SkColor background);
+  RoundedRectView(int corner_radius, SkColor background_color);
   ~RoundedRectView() override;
 
+  void SetBackgroundColor(SkColor background_color);
+
   // views::View:
   void OnPaint(gfx::Canvas* canvas) override;
 
  private:
   int corner_radius_;
-  SkColor background_;
+  SkColor background_color_;
 
   DISALLOW_COPY_AND_ASSIGN(RoundedRectView);
 };

ash/wm/overview/window_selector_item.cc

@@ -20,6 +20,8 @@
 #include "ash/wm/overview/window_grid.h"
 #include "ash/wm/overview/window_selector.h"
 #include "ash/wm/overview/window_selector_controller.h"
+#include "ash/wm/splitview/split_view_constants.h"
+#include "ash/wm/splitview/split_view_utils.h"
 #include "ash/wm/tablet_mode/tablet_mode_controller.h"
 #include "ash/wm/window_state.h"
 #include "base/auto_reset.h"
@@ -76,13 +78,6 @@ static int kLabelBackgroundRadius = 2;
 // Horizontal padding for the label, on both sides.
 static const int kHorizontalLabelPadding = 8;
 
-// Color of the label which identifies if a selector item can be snapped in
-// split view.
-constexpr SkColor kCannotSnapLabelColor = SkColorSetA(SK_ColorBLACK, 0xB0);
-
-// The amount of round on the cannot snap label.
-constexpr int kCannotSnapLabelRounding = 10;
-
 // Height of an item header.
 static const int kHeaderHeight = 32;
 
@@ -410,23 +405,24 @@ class WindowSelectorItem::CaptionContainerView : public views::View {
 
     // Use |cannot_snap_container_| to specify the padding surrounding
     // |cannot_snap_label_| and to give the label rounded corners.
-    auto* layout = new views::BoxLayout(views::BoxLayout::kVertical);
-    cannot_snap_container_ =
-        new RoundedRectView(kCannotSnapLabelRounding, kCannotSnapLabelColor);
-    cannot_snap_container_->SetPaintToLayer();
-    cannot_snap_container_->layer()->SetFillsBoundsOpaquely(false);
+    cannot_snap_container_ = new RoundedRectView(
+        kSplitviewLabelRoundRectRadiusDp, kSplitviewLabelBackgroundColor);
+    cannot_snap_container_->SetLayoutManager(
+        new views::BoxLayout(views::BoxLayout::kVertical,
+                             gfx::Insets(kSplitviewLabelVerticalInsetDp,
+                                         kSplitviewLabelHorizontalInsetDp)));
     cannot_snap_container_->AddChildView(cannot_snap_label_);
-    cannot_snap_container_->SetLayoutManager(layout);
     cannot_snap_container_->set_can_process_events_within_subtree(false);
-    layout->SetFlexForView(cannot_snap_label_, 1);
+    cannot_snap_container_->SetPaintToLayer();
+    cannot_snap_container_->layer()->SetFillsBoundsOpaquely(false);
+    cannot_snap_container_->layer()->SetOpacity(0.f);
     AddChildView(cannot_snap_container_);
-    cannot_snap_container_->SetVisible(false);
   }
 
   ShieldButton* listener_button() { return listener_button_; }
 
   void SetCannotSnapLabelVisibility(bool visible) {
-    cannot_snap_container_->SetVisible(visible);
+    AnimateSplitviewLabelOpacity(cannot_snap_container_->layer(), visible);
   }
 
  protected:
@@ -445,10 +441,11 @@ class WindowSelectorItem::CaptionContainerView : public views::View {
 
     // Position the cannot snap label.
     gfx::Size label_size = cannot_snap_label_->CalculatePreferredSize();
-    label_size.Enlarge(2 * kHorizontalLabelPadding,
-                       2 * kHorizontalLabelPadding);
-    if (!bounds.IsEmpty())
-      label_size.SetToMin(bounds.size());
+    label_size.set_width(
+        std::min(label_size.width() + 2 * kSplitviewLabelHorizontalInsetDp,
+                 bounds.width() - 2 * kSplitviewLabelHorizontalInsetDp));
+    label_size.set_height(
+        std::max(label_size.height(), kSplitviewLabelPreferredHeightDp));
 
     gfx::Rect cannot_snap_bounds = GetLocalBounds();
     cannot_snap_bounds.ClampToCenteredSize(label_size);
@@ -772,9 +769,8 @@ void WindowSelectorItem::CreateWindowLabel(const base::string16& title) {
   cannot_snap_label_view_ = new views::Label(title);
   cannot_snap_label_view_->SetHorizontalAlignment(gfx::ALIGN_CENTER);
   cannot_snap_label_view_->SetAutoColorReadabilityEnabled(false);
-  cannot_snap_label_view_->SetMultiLine(true);
-  cannot_snap_label_view_->SetEnabledColor(kLabelColor);
-  cannot_snap_label_view_->SetBackgroundColor(kLabelBackgroundColor);
+  cannot_snap_label_view_->SetEnabledColor(kSplitviewLabelEnabledColor);
+  cannot_snap_label_view_->SetBackgroundColor(kSplitviewLabelBackgroundColor);
   cannot_snap_label_view_->SetText(
       l10n_util::GetStringUTF16(IDS_ASH_SPLIT_VIEW_CANNOT_SNAP));
 

ash/wm/overview/window_selector_unittest.cc

@@ -28,6 +28,7 @@
 #include "ash/wm/overview/window_selector_controller.h"
 #include "ash/wm/overview/window_selector_item.h"
 #include "ash/wm/panels/panel_layout_manager.h"
+#include "ash/wm/splitview/split_view_constants.h"
 #include "ash/wm/splitview/split_view_controller.h"
 #include "ash/wm/splitview/split_view_divider.h"
 #include "ash/wm/splitview/split_view_overview_overlay.h"
@@ -2045,6 +2046,11 @@ class SplitViewWindowSelectorTest : public WindowSelectorTest {
         ->current_indicator_type();
   }
 
+  int GetEdgeInset(int screen_width) const {
+    return screen_width * kHighlightScreenPrimaryAxisRatio +
+           kHighlightScreenEdgePaddingDp;
+  }
+
  private:
   class SplitViewTestWindowDelegate : public aura::test::TestWindowDelegate {
    public:
@@ -2125,9 +2131,9 @@ TEST_F(SplitViewWindowSelectorTest, Dragging) {
   const int drag_offset = OverviewWindowDragController::kMinimumDragOffset;
   const int drag_offset_snap_region =
       OverviewWindowDragController::kMinimumDragOffsetAlreadyInSnapRegionDp;
-  const int edge_inset = OverviewWindowDragController::kScreenEdgeInsetForDrag;
   const int screen_width =
       ScreenUtil::GetDisplayWorkAreaBoundsInParent(left_window.get()).width();
+  const int edge_inset = GetEdgeInset(screen_width);
   // The selector item has a margin which does not accept events. Inset any
   // event aimed at the selector items edge so events will reach it.
   const int selector_item_inset = 20;
@@ -2317,9 +2323,9 @@ TEST_F(SplitViewWindowSelectorTest, PhantomWindowVisibility) {
   ToggleOverview();
   ASSERT_TRUE(window_selector_controller()->IsSelecting());
 
-  const int edge_inset = OverviewWindowDragController::kScreenEdgeInsetForDrag;
   const int screen_width =
       ScreenUtil::GetDisplayWorkAreaBoundsInParent(window.get()).width();
+  const int edge_inset = GetEdgeInset(screen_width);
 
   // Verify the phantom window is visible when |selector_item|'s x is in the
   // range [0, edge_inset] or [screen_width - edge_inset - 1, screen_width].
@@ -2384,7 +2390,9 @@ TEST_F(SplitViewWindowSelectorTest, SplitViewOverviewOverlayVisibility) {
   ToggleOverview();
   ASSERT_TRUE(window_selector_controller()->IsSelecting());
 
-  const int edge_inset = OverviewWindowDragController::kScreenEdgeInsetForDrag;
+  const int screen_width =
+      ScreenUtil::GetDisplayWorkAreaBoundsInParent(window1.get()).width();
+  const int edge_inset = GetEdgeInset(screen_width);
 
   // Verify that when are no snapped windows, the overlay is visible when a drag
   // is initiated and disappears when the drag reaches |edge_inset| from the
@@ -2734,18 +2742,25 @@ TEST_F(SplitViewWindowSelectorTest, OverviewUnsnappableIndicatorVisibility) {
   WindowSelectorItem* unsnappable_selector_item =
       GetWindowItemForWindow(grid_index, unsnappable_window.get());
 
-  // Note: Using IsDrawn() instead of visible() because
-  // |cannot_snap_label_view_|'s parent (which handles the padding and rounded
-  // corners) is actually the item whose visibility gets altered.
-  EXPECT_FALSE(snappable_selector_item->cannot_snap_label_view_->IsDrawn());
-  EXPECT_FALSE(unsnappable_selector_item->cannot_snap_label_view_->IsDrawn());
+  // Note: Check opacities of  |cannot_snap_label_view_|'s parent (which handles
+  // the padding and rounded corners) is actually the item whose layer's opacity
+  // gets altered.
+  ui::Layer* snappable_layer =
+      snappable_selector_item->cannot_snap_label_view_->parent()->layer();
+  ui::Layer* unsnappable_layer =
+      unsnappable_selector_item->cannot_snap_label_view_->parent()->layer();
+  ASSERT_TRUE(snappable_layer);
+  ASSERT_TRUE(unsnappable_layer);
+
+  EXPECT_EQ(0.f, snappable_layer->opacity());
+  EXPECT_EQ(0.f, unsnappable_layer->opacity());
 
   // Snap the extra snappable window to enter split view mode.
   split_view_controller()->SnapWindow(window1.get(), SplitViewController::LEFT);
   ASSERT_TRUE(split_view_controller()->IsSplitViewModeActive());
 
-  EXPECT_FALSE(snappable_selector_item->cannot_snap_label_view_->IsDrawn());
-  EXPECT_TRUE(unsnappable_selector_item->cannot_snap_label_view_->IsDrawn());
+  EXPECT_EQ(0.f, snappable_layer->opacity());
+  EXPECT_EQ(1.f, unsnappable_layer->opacity());
 }
 
 // Test that when splitview mode and overview mode are both active at the same

ash/wm/splitview/split_view_constants.h

+// Copyright 2017 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_SPLITVIEW_SPLIT_VIEW_CONSTANTS_H_
+#define ASH_WM_SPLITVIEW_SPLIT_VIEW_CONSTANTS_H_
+
+#include "ash/ash_export.h"
+#include "third_party/skia/include/core/SkColor.h"
+
+namespace ash {
+
+// The ratio between a highlight view's primary axis, and the screens
+// primary axis.
+ASH_EXPORT constexpr double kHighlightScreenPrimaryAxisRatio = 0.10;
+
+// The padding between a highlight view and the edge of the screen.
+ASH_EXPORT constexpr double kHighlightScreenEdgePaddingDp = 8;
+
+// The amount of inset to be applied on a split view label. Here horizontal and
+// vertical apply to the orientation before rotation (if there is rotation).
+constexpr int kSplitviewLabelHorizontalInsetDp = 12;
+constexpr int kSplitviewLabelVerticalInsetDp = 4;
+
+// The preferred height of a split view label.
+constexpr int kSplitviewLabelPreferredHeightDp = 24;
+
+// The amount of round applied to the corners of a split view label.
+constexpr int kSplitviewLabelRoundRectRadiusDp = 12;
+
+// Color of split view label text.
+constexpr SkColor kSplitviewLabelEnabledColor = SK_ColorWHITE;
+
+// The color for a split view label.
+constexpr SkColor kSplitviewLabelBackgroundColor =
+    SkColorSetA(SK_ColorBLACK, 0xDE);
+
+constexpr int kSplitviewAnimationDurationMs = 250;
+
+}  // namespace ash
+
+#endif  // ASH_WM_SPLITVIEW_SPLIT_VIEW_CONSTANTS_H_

ash/wm/splitview/split_view_utils.cc

+// Copyright 2017 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/splitview/split_view_utils.h"
+
+#include "ash/wm/splitview/split_view_constants.h"
+#include "ui/compositor/layer.h"
+#include "ui/compositor/layer_animator.h"
+#include "ui/compositor/scoped_layer_animation_settings.h"
+
+namespace ash {
+
+void AnimateSplitviewLabelOpacity(ui::Layer* layer, bool visible) {
+  float target_opacity = visible ? 1.f : 0.f;
+  if (layer->GetTargetOpacity() == target_opacity)
+    return;
+
+  layer->SetOpacity(1.f - target_opacity);
+  {
+    ui::LayerAnimator* animator = layer->GetAnimator();
+    animator->StopAnimating();
+    ui::ScopedLayerAnimationSettings settings(animator);
+    settings.SetTransitionDuration(
+        base::TimeDelta::FromMilliseconds(kSplitviewAnimationDurationMs));
+    settings.SetTweenType(gfx::Tween::EASE_OUT);
+    layer->SetOpacity(target_opacity);
+  }
+}
+
+}  // namespace ash

ash/wm/splitview/split_view_utils.h

+// Copyright 2017 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_SPLITVIEW_SPLIT_VIEW_UTILS_H_
+#define ASH_WM_SPLITVIEW_SPLIT_VIEW_UTILS_H_
+
+namespace ui {
+class Layer;
+}  // namespace ui
+
+namespace ash {
+
+// Animate |layer|'s opacity from 0 -> 1 if we are showing the layer, and
+// 1 -> 0 if we are hiding the layer.
+void AnimateSplitviewLabelOpacity(ui::Layer* layer, bool visible);
+
+}  // namespace ash
+
+#endif  // ASH_WM_SPLITVIEW_SPLIT_VIEW_UTILS_H_