[Picture in Picture] Update close button style.

This change updates the close button style. The color of the 'x' is now
white. There is no background unless the user hovers over the icon. In
this case, there is a grey circular background.

As part of this change, CloseIconButton is created to account for the
hover behavior.

Bug: 872098
Change-Id: I90a53c5e42d6377db4ee45b47633689315865c18
Reviewed-on: https://chromium-review.googlesource.com/1168732
Commit-Queue: apacible <apacible@chromium.org>
Reviewed-by: Mounir Lamouri <mlamouri@chromium.org>
Cr-Commit-Position: refs/heads/master@{#582271}

chrome/browser/ui/BUILD.gn

@@ -2936,6 +2936,8 @@ jumbo_split_static_library("ui") {
       "views/login_handler_views.cc",
       "views/login_view.cc",
       "views/login_view.h",
+      "views/overlay/close_image_button.cc",
+      "views/overlay/close_image_button.h",
       "views/overlay/overlay_window_views.cc",
       "views/overlay/overlay_window_views.h",
       "views/page_info/chosen_object_view.cc",

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

+// Copyright 2018 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 "chrome/browser/ui/views/overlay/close_image_button.h"
+
+#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/l10n/l10n_util.h"
+#include "ui/display/display.h"
+#include "ui/display/screen.h"
+#include "ui/gfx/color_palette.h"
+#include "ui/gfx/paint_vector_icon.h"
+#include "ui/views/vector_icons.h"
+
+namespace {
+
+const int kCloseButtonMargin = 8;
+const int kCloseButtonSize = 24;
+
+constexpr SkColor kCloseBgColor = gfx::kGoogleGrey700;
+constexpr SkColor kCloseIconColor = SK_ColorWHITE;
+
+}  // namespace
+
+namespace views {
+
+CloseImageButton::CloseImageButton(ButtonListener* listener)
+    : ImageButton(listener),
+      close_background_(
+          gfx::CreateVectorIcon(kPictureInPictureControlBackgroundIcon,
+                                kCloseButtonSize,
+                                kCloseBgColor)) {
+  SetImageAlignment(views::ImageButton::ALIGN_CENTER,
+                    views::ImageButton::ALIGN_MIDDLE);
+  SetBackgroundImageAlignment(views::ImageButton::ALIGN_LEFT,
+                              views::ImageButton::ALIGN_TOP);
+  SetSize(gfx::Size(kCloseButtonSize, kCloseButtonSize));
+  SetImage(views::Button::STATE_NORMAL,
+           gfx::CreateVectorIcon(views::kIcCloseIcon,
+                                 std::round(kCloseButtonSize * 2.0 / 3.0),
+                                 kCloseIconColor));
+
+  // Accessibility.
+  SetFocusForPlatform();
+  const base::string16 close_button_label(
+      l10n_util::GetStringUTF16(IDS_PICTURE_IN_PICTURE_CLOSE_CONTROL_TEXT));
+  SetAccessibleName(close_button_label);
+  SetTooltipText(close_button_label);
+  SetInstallFocusRingOnFocus(true);
+}
+
+void CloseImageButton::StateChanged(ButtonState old_state) {
+  ImageButton::StateChanged(old_state);
+
+  if (state() == STATE_HOVERED || state() == STATE_PRESSED)
+    SetBackgroundImage(kCloseBgColor, &close_background_, &close_background_);
+  else
+    SetBackgroundImage(kCloseBgColor, nullptr, nullptr);
+}
+
+void CloseImageButton::OnFocus() {
+  ImageButton::OnFocus();
+  SetBackgroundImage(kCloseBgColor, &close_background_, &close_background_);
+}
+
+void CloseImageButton::OnBlur() {
+  ImageButton::OnBlur();
+  SetBackgroundImage(kCloseBgColor, nullptr, nullptr);
+}
+
+void CloseImageButton::SetPosition(const gfx::Size& size) {
+  ImageButton::SetPosition(
+      gfx::Point(size.width() - kCloseButtonSize - kCloseButtonMargin,
+                 kCloseButtonMargin));
+}
+
+}  // namespace views

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

+// Copyright 2018 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 CHROME_BROWSER_UI_VIEWS_OVERLAY_CLOSE_IMAGE_BUTTON_H_
+#define CHROME_BROWSER_UI_VIEWS_OVERLAY_CLOSE_IMAGE_BUTTON_H_
+
+#include "ui/views/controls/button/image_button.h"
+
+namespace views {
+
+// An image button representing a white close button. When the user interacts
+// with the button, a grey circular background appears as an indicator.
+class CloseImageButton : public views::ImageButton {
+ public:
+  explicit CloseImageButton(ButtonListener* listener);
+  ~CloseImageButton() override = default;
+
+  // views::Button:
+  void StateChanged(ButtonState old_state) override;
+
+  // views::View:
+  void OnFocus() override;
+  void OnBlur() override;
+
+  // Sets the position of itself with an offset from the given window size.
+  void SetPosition(const gfx::Size& size);
+
+ private:
+  const gfx::ImageSkia close_background_;
+
+  DISALLOW_COPY_AND_ASSIGN(CloseImageButton);
+};
+
+}  // namespace views
+
+#endif  // CHROME_BROWSER_UI_VIEWS_OVERLAY_CLOSE_IMAGE_BUTTON_H_

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

@@ -8,6 +8,7 @@
 
 #include "base/memory/ptr_util.h"
 #include "chrome/app/vector_icons/vector_icons.h"
+#include "chrome/browser/ui/views/overlay/close_image_button.h"
 #include "chrome/grit/generated_resources.h"
 #include "content/public/browser/picture_in_picture_window_controller.h"
 #include "content/public/browser/web_contents.h"
@@ -40,9 +41,6 @@ const int kOverlayBorderThickness = 5;
 // screen's width and height.
 const float kPlayPauseControlRatioToWindow = 0.3;
 
-const int kCloseButtonMargin = 8;
-const int kCloseButtonSize = 24;
-
 const int kMinPlayPauseButtonSize = 48;
 
 // Colors for the control buttons.
@@ -135,7 +133,7 @@ OverlayWindowViews::OverlayWindowViews(
       window_background_view_(new views::View()),
       video_view_(new views::View()),
       controls_background_view_(new views::View()),
-      close_controls_view_(new views::ImageButton(this)),
+      close_controls_view_(new views::CloseImageButton(this)),
       play_pause_controls_view_(new views::ToggleImageButton(this)) {
   views::Widget::InitParams params(views::Widget::InitParams::TYPE_WINDOW);
   params.ownership = views::Widget::InitParams::WIDGET_OWNS_NATIVE_WIDGET;
@@ -226,30 +224,6 @@ void OverlayWindowViews::SetUpViews() {
   GetControlsBackgroundLayer()->SetColor(gfx::kGoogleGrey900);
   GetControlsBackgroundLayer()->SetOpacity(0.43f);
 
-  // views::View that closes the window. --------------------------------------
-  close_controls_view_->SetImageAlignment(views::ImageButton::ALIGN_CENTER,
-                                          views::ImageButton::ALIGN_MIDDLE);
-  close_controls_view_->SetBackgroundImageAlignment(
-      views::ImageButton::ALIGN_LEFT, views::ImageButton::ALIGN_TOP);
-  close_controls_view_->SetSize(gfx::Size(kCloseButtonSize, kCloseButtonSize));
-  close_controls_view_->SetImage(
-      views::Button::STATE_NORMAL,
-      gfx::CreateVectorIcon(views::kIcCloseIcon,
-                            std::round(kCloseButtonSize * 2.0 / 3.0),
-                            kControlIconColor));
-  const gfx::ImageSkia close_background = gfx::CreateVectorIcon(
-      kPictureInPictureControlBackgroundIcon, kCloseButtonSize, kBgColor);
-  close_controls_view_->SetBackgroundImage(kBgColor, &close_background,
-                                           &close_background);
-
-  // Accessibility.
-  close_controls_view_->SetFocusForPlatform();  // Make button focusable.
-  const base::string16 close_button_label(
-      l10n_util::GetStringUTF16(IDS_PICTURE_IN_PICTURE_CLOSE_CONTROL_TEXT));
-  close_controls_view_->SetAccessibleName(close_button_label);
-  close_controls_view_->SetTooltipText(close_button_label);
-  close_controls_view_->SetInstallFocusRingOnFocus(true);
-
   // views::View that toggles play/pause. -------------------------------------
   play_pause_controls_view_->SetImageAlignment(
       views::ImageButton::ALIGN_CENTER, views::ImageButton::ALIGN_MIDDLE);
@@ -327,9 +301,7 @@ void OverlayWindowViews::UpdateControlsBounds() {
   controls_background_view_->SetBoundsRect(
       gfx::Rect(gfx::Point(0, 0), GetBounds().size()));
 
-  close_controls_view_->SetPosition(gfx::Point(
-      GetBounds().size().width() - kCloseButtonSize - kCloseButtonMargin,
-      kCloseButtonMargin));
+  close_controls_view_->SetPosition(GetBounds().size());
 
   play_pause_controls_view_->SetBoundsRect(gfx::Rect(
       gfx::Point(

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

@@ -12,7 +12,7 @@
 #include "ui/views/widget/widget.h"
 
 namespace views {
-class ImageButton;
+class CloseImageButton;
 class ToggleImageButton;
 }  // namespace views
 
@@ -144,7 +144,7 @@ class OverlayWindowViews : public content::OverlayWindow,
   std::unique_ptr<views::View> window_background_view_;
   std::unique_ptr<views::View> video_view_;
   std::unique_ptr<views::View> controls_background_view_;
-  std::unique_ptr<views::ImageButton> close_controls_view_;
+  std::unique_ptr<views::CloseImageButton> close_controls_view_;
   std::unique_ptr<views::ToggleImageButton> play_pause_controls_view_;
 
   DISALLOW_COPY_AND_ASSIGN(OverlayWindowViews);