Commit 3a1ad4a1 authored by Jennifer Apacible's avatar Jennifer Apacible Committed by Commit Bot

[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: default avatarMounir Lamouri <mlamouri@chromium.org>
Cr-Commit-Position: refs/heads/master@{#582271}
parent cfe635ce
...@@ -2936,6 +2936,8 @@ jumbo_split_static_library("ui") { ...@@ -2936,6 +2936,8 @@ jumbo_split_static_library("ui") {
"views/login_handler_views.cc", "views/login_handler_views.cc",
"views/login_view.cc", "views/login_view.cc",
"views/login_view.h", "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.cc",
"views/overlay/overlay_window_views.h", "views/overlay/overlay_window_views.h",
"views/page_info/chosen_object_view.cc", "views/page_info/chosen_object_view.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
// 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_
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
#include "base/memory/ptr_util.h" #include "base/memory/ptr_util.h"
#include "chrome/app/vector_icons/vector_icons.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 "chrome/grit/generated_resources.h"
#include "content/public/browser/picture_in_picture_window_controller.h" #include "content/public/browser/picture_in_picture_window_controller.h"
#include "content/public/browser/web_contents.h" #include "content/public/browser/web_contents.h"
...@@ -40,9 +41,6 @@ const int kOverlayBorderThickness = 5; ...@@ -40,9 +41,6 @@ const int kOverlayBorderThickness = 5;
// screen's width and height. // screen's width and height.
const float kPlayPauseControlRatioToWindow = 0.3; const float kPlayPauseControlRatioToWindow = 0.3;
const int kCloseButtonMargin = 8;
const int kCloseButtonSize = 24;
const int kMinPlayPauseButtonSize = 48; const int kMinPlayPauseButtonSize = 48;
// Colors for the control buttons. // Colors for the control buttons.
...@@ -135,7 +133,7 @@ OverlayWindowViews::OverlayWindowViews( ...@@ -135,7 +133,7 @@ OverlayWindowViews::OverlayWindowViews(
window_background_view_(new views::View()), window_background_view_(new views::View()),
video_view_(new views::View()), video_view_(new views::View()),
controls_background_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)) { play_pause_controls_view_(new views::ToggleImageButton(this)) {
views::Widget::InitParams params(views::Widget::InitParams::TYPE_WINDOW); views::Widget::InitParams params(views::Widget::InitParams::TYPE_WINDOW);
params.ownership = views::Widget::InitParams::WIDGET_OWNS_NATIVE_WIDGET; params.ownership = views::Widget::InitParams::WIDGET_OWNS_NATIVE_WIDGET;
...@@ -226,30 +224,6 @@ void OverlayWindowViews::SetUpViews() { ...@@ -226,30 +224,6 @@ void OverlayWindowViews::SetUpViews() {
GetControlsBackgroundLayer()->SetColor(gfx::kGoogleGrey900); GetControlsBackgroundLayer()->SetColor(gfx::kGoogleGrey900);
GetControlsBackgroundLayer()->SetOpacity(0.43f); 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. ------------------------------------- // views::View that toggles play/pause. -------------------------------------
play_pause_controls_view_->SetImageAlignment( play_pause_controls_view_->SetImageAlignment(
views::ImageButton::ALIGN_CENTER, views::ImageButton::ALIGN_MIDDLE); views::ImageButton::ALIGN_CENTER, views::ImageButton::ALIGN_MIDDLE);
...@@ -327,9 +301,7 @@ void OverlayWindowViews::UpdateControlsBounds() { ...@@ -327,9 +301,7 @@ void OverlayWindowViews::UpdateControlsBounds() {
controls_background_view_->SetBoundsRect( controls_background_view_->SetBoundsRect(
gfx::Rect(gfx::Point(0, 0), GetBounds().size())); gfx::Rect(gfx::Point(0, 0), GetBounds().size()));
close_controls_view_->SetPosition(gfx::Point( close_controls_view_->SetPosition(GetBounds().size());
GetBounds().size().width() - kCloseButtonSize - kCloseButtonMargin,
kCloseButtonMargin));
play_pause_controls_view_->SetBoundsRect(gfx::Rect( play_pause_controls_view_->SetBoundsRect(gfx::Rect(
gfx::Point( gfx::Point(
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
#include "ui/views/widget/widget.h" #include "ui/views/widget/widget.h"
namespace views { namespace views {
class ImageButton; class CloseImageButton;
class ToggleImageButton; class ToggleImageButton;
} // namespace views } // namespace views
...@@ -144,7 +144,7 @@ class OverlayWindowViews : public content::OverlayWindow, ...@@ -144,7 +144,7 @@ class OverlayWindowViews : public content::OverlayWindow,
std::unique_ptr<views::View> window_background_view_; std::unique_ptr<views::View> window_background_view_;
std::unique_ptr<views::View> video_view_; std::unique_ptr<views::View> video_view_;
std::unique_ptr<views::View> controls_background_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_; std::unique_ptr<views::ToggleImageButton> play_pause_controls_view_;
DISALLOW_COPY_AND_ASSIGN(OverlayWindowViews); DISALLOW_COPY_AND_ASSIGN(OverlayWindowViews);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment