[Picture in Picture] Force resizing when resize handle is clicked

This CL changes the hit testing in OverlayWindowViews to force resizing
when the user clicks on the resize handle. Before this CL, the resize
handle was only used as an indicator of the ability to drag.

This CL also increases the size of the resize handler to match the tap
target of 36px defined in the spec, while adjusting the icon to adapt
to this. This CL also moves the icon slightly away from the corner to
match the spec.

Bug: 905864
Change-Id: I0d99c2ceff0f00ad51b268aa3803514552044f59
Reviewed-on: https://chromium-review.googlesource.com/c/1338867Reviewed-by: Evan Stade <estade@chromium.org>
Reviewed-by: Mounir Lamouri <mlamouri@chromium.org>
Commit-Queue: Tommy Steimel <steimel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#609300}

chrome/app/vector_icons/resize_handle.icon

@@ -2,10 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-CANVAS_DIMENSIONS, 15,
+CANVAS_DIMENSIONS, 21,
 STROKE, 2.f,
-MOVE_TO, 2, 2,
+MOVE_TO, 5, 5,
 R_LINE_TO, 11.31f, 11.31f,
-MOVE_TO, 9, 2,
+MOVE_TO, 12, 5,
 R_LINE_TO, 4.24f, 4.24f,
 CLOSE

chrome/browser/picture_in_picture/picture_in_picture_window_controller_browsertest.cc

@@ -40,6 +40,7 @@
 #include "ash/accelerators/accelerator_controller.h"
 #include "ash/shell.h"
 #include "ui/base/accelerators/accelerator.h"
+#include "ui/base/hit_test.h"
 #endif
 
 using ::testing::_;
@@ -1623,6 +1624,8 @@ IN_PROC_BROWSER_TEST_F(PictureInPictureWindowControllerBrowserTest,
   // The resize button should be in the top left corner.
   EXPECT_GT(center.x(), resize_button_position.x());
   EXPECT_GT(center.y(), resize_button_position.y());
+  // The resize button hit test should start a top left resizing drag.
+  EXPECT_EQ(HTTOPLEFT, overlay_window_views->GetResizeHTComponent());
 
   // Move the window to the bottom left corner.
   gfx::Rect bottom_left_bounds(0, bottom_right_bounds.y(),
@@ -1640,6 +1643,8 @@ IN_PROC_BROWSER_TEST_F(PictureInPictureWindowControllerBrowserTest,
   // The resize button should be in the top right corner.
   EXPECT_LT(center.x(), resize_button_position.x());
   EXPECT_GT(center.y(), resize_button_position.y());
+  // The resize button hit test should start a top right resizing drag.
+  EXPECT_EQ(HTTOPRIGHT, overlay_window_views->GetResizeHTComponent());
 
   // Move the window to the top right corner.
   gfx::Rect top_right_bounds(bottom_right_bounds.x(), 0,
@@ -1657,6 +1662,8 @@ IN_PROC_BROWSER_TEST_F(PictureInPictureWindowControllerBrowserTest,
   // The resize button should be in the bottom left corner.
   EXPECT_GT(center.x(), resize_button_position.x());
   EXPECT_LT(center.y(), resize_button_position.y());
+  // The resize button hit test should start a bottom left resizing drag.
+  EXPECT_EQ(HTBOTTOMLEFT, overlay_window_views->GetResizeHTComponent());
 
   // Move the window to the top left corner.
   gfx::Rect top_left_bounds(0, 0, bottom_right_bounds.width(),
@@ -1673,6 +1680,8 @@ IN_PROC_BROWSER_TEST_F(PictureInPictureWindowControllerBrowserTest,
   // The resize button should be in the bottom right corner.
   EXPECT_LT(center.x(), resize_button_position.x());
   EXPECT_LT(center.y(), resize_button_position.y());
+  // The resize button hit test should start a bottom right resizing drag.
+  EXPECT_EQ(HTBOTTOMRIGHT, overlay_window_views->GetResizeHTComponent());
 }
 
 #endif  // defined(OS_CHROMEOS)

chrome/browser/ui/views/overlay/overlay_window_views.cc

@@ -117,6 +117,13 @@ class OverlayWindowFrameView : public views::NonClientFrameView {
       return window_component;
     }
 
+#if defined(OS_CHROMEOS)
+    // If the resize handle is clicked on, we want to force the hit test to
+    // force a resize drag.
+    if (window->GetResizeHandleControlsBounds().Contains(point))
+      return window->GetResizeHTComponent();
+#endif
+
     // Allows for dragging and resizing the window.
     return (window_component == HTNOWHERE) ? HTCAPTION : window_component;
   }
@@ -810,6 +817,10 @@ gfx::Rect OverlayWindowViews::GetCloseControlsBounds() {
   return close_controls_view_->GetMirroredBounds();
 }
 
+gfx::Rect OverlayWindowViews::GetResizeHandleControlsBounds() {
+  return resize_handle_view_->GetMirroredBounds();
+}
+
 gfx::Rect OverlayWindowViews::GetPlayPauseControlsBounds() {
   return play_pause_controls_view_->GetMirroredBounds();
 }
@@ -826,6 +837,10 @@ gfx::Rect OverlayWindowViews::GetSecondCustomControlsBounds() {
   return second_custom_controls_view_->GetMirroredBounds();
 }
 
+int OverlayWindowViews::GetResizeHTComponent() const {
+  return resize_handle_view_->GetHTComponent();
+}
+
 ui::Layer* OverlayWindowViews::GetControlsScrimLayer() {
   return controls_scrim_view_->layer();
 }

chrome/browser/ui/views/overlay/overlay_window_views.h

@@ -65,10 +65,15 @@ class OverlayWindowViews : public content::OverlayWindow,
 
   // Gets the bounds of the controls.
   gfx::Rect GetCloseControlsBounds();
+  gfx::Rect GetResizeHandleControlsBounds();
   gfx::Rect GetPlayPauseControlsBounds();
   gfx::Rect GetFirstCustomControlsBounds();
   gfx::Rect GetSecondCustomControlsBounds();
 
+  // Gets the proper hit test component when the hit point is on the resize
+  // handle in order to force a drag-to-resize.
+  int GetResizeHTComponent() const;
+
   views::ToggleImageButton* play_pause_controls_view_for_testing() const;
   gfx::Point close_image_position_for_testing() const;
   gfx::Point resize_handle_position_for_testing() const;

chrome/browser/ui/views/overlay/resize_handle_button.cc

@@ -7,6 +7,7 @@
 #include "chrome/app/vector_icons/vector_icons.h"
 #include "chrome/grit/generated_resources.h"
 #include "third_party/skia/include/core/SkColor.h"
+#include "ui/base/hit_test.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/gfx/color_palette.h"
 #include "ui/gfx/image/image_skia_operations.h"
@@ -16,7 +17,8 @@
 
 namespace {
 
-const int kResizeHandleButtonSize = 16;
+const int kResizeHandleButtonSize = 36;
+const int kResizeHandleImageSize = 18;
 
 constexpr SkColor kResizeHandleIconColor = SK_ColorWHITE;
 
@@ -26,8 +28,8 @@ namespace views {
 
 ResizeHandleButton::ResizeHandleButton(ButtonListener* listener)
     : ImageButton(listener) {
-  SetImageAlignment(views::ImageButton::ALIGN_CENTER,
-                    views::ImageButton::ALIGN_MIDDLE);
+  SetImageAlignment(views::ImageButton::ALIGN_LEFT,
+                    views::ImageButton::ALIGN_TOP);
   SetSize(gfx::Size(kResizeHandleButtonSize, kResizeHandleButtonSize));
   SetImageForQuadrant(OverlayWindowViews::WindowQuadrant::kBottomRight);
 
@@ -42,6 +44,22 @@ ResizeHandleButton::ResizeHandleButton(ButtonListener* listener)
 
 ResizeHandleButton::~ResizeHandleButton() = default;
 
+int ResizeHandleButton::GetHTComponent() const {
+  if (!current_quadrant_)
+    return HTNOWHERE;
+
+  switch (current_quadrant_.value()) {
+    case OverlayWindowViews::WindowQuadrant::kBottomLeft:
+      return HTTOPRIGHT;
+    case OverlayWindowViews::WindowQuadrant::kBottomRight:
+      return HTTOPLEFT;
+    case OverlayWindowViews::WindowQuadrant::kTopLeft:
+      return HTBOTTOMRIGHT;
+    case OverlayWindowViews::WindowQuadrant::kTopRight:
+      return HTBOTTOMLEFT;
+  }
+}
+
 void ResizeHandleButton::SetPosition(
     const gfx::Size& size,
     OverlayWindowViews::WindowQuadrant quadrant) {
@@ -77,19 +95,27 @@ void ResizeHandleButton::SetImageForQuadrant(
   current_quadrant_ = quadrant;
 
   gfx::ImageSkia icon = gfx::CreateVectorIcon(
-      kResizeHandleIcon, kResizeHandleButtonSize, kResizeHandleIconColor);
+      kResizeHandleIcon, kResizeHandleImageSize, kResizeHandleIconColor);
   switch (quadrant) {
     case OverlayWindowViews::WindowQuadrant::kBottomLeft:
+      SetImageAlignment(views::ImageButton::ALIGN_RIGHT,
+                        views::ImageButton::ALIGN_TOP);
       break;
     case OverlayWindowViews::WindowQuadrant::kBottomRight:
+      SetImageAlignment(views::ImageButton::ALIGN_LEFT,
+                        views::ImageButton::ALIGN_TOP);
       icon = gfx::ImageSkiaOperations::CreateRotatedImage(
           icon, SkBitmapOperations::ROTATION_270_CW);
       break;
     case OverlayWindowViews::WindowQuadrant::kTopLeft:
+      SetImageAlignment(views::ImageButton::ALIGN_RIGHT,
+                        views::ImageButton::ALIGN_BOTTOM);
       icon = gfx::ImageSkiaOperations::CreateRotatedImage(
           icon, SkBitmapOperations::ROTATION_90_CW);
       break;
     case OverlayWindowViews::WindowQuadrant::kTopRight:
+      SetImageAlignment(views::ImageButton::ALIGN_LEFT,
+                        views::ImageButton::ALIGN_BOTTOM);
       icon = gfx::ImageSkiaOperations::CreateRotatedImage(
           icon, SkBitmapOperations::ROTATION_180_CW);
       break;

chrome/browser/ui/views/overlay/resize_handle_button.h

@@ -18,6 +18,7 @@ class ResizeHandleButton : public views::ImageButton {
 
   void SetPosition(const gfx::Size& size,
                    OverlayWindowViews::WindowQuadrant quadrant);
+  int GetHTComponent() const;
 
  private:
   void SetImageForQuadrant(OverlayWindowViews::WindowQuadrant quadrant);