Commit e9eed233 authored by Mohamed Amir Yosef's avatar Mohamed Amir Yosef Committed by Commit Bot

[Passwords] Polishing the move banner in the Move bubble

This CL is doing the follow changes:
1- Change the avatar size to be 48 instead of 40. 40 was the size of
profile photo in the old (deprecated) profile menu.
2- Add a border and a background to the favicon badge to protect
against favicons with transparent background.
3- Add 2 pixels paddings around the whole badge not to avoid having the
border very close to the favicon. (border is an extra 1 pixel)
4- Make the border color a softer version of the icon color.s

Screenshots:
- Favicon with solid background
-- Light mode: https://screenshot.googleplex.com/BuBQtRtznjE8Hmh
-- Dark mode: https://screenshot.googleplex.com/3qSaFau5Zmb3eok

- Favicon with transparent background
-- Light mode: https://screenshot.googleplex.com/6qeXwuk3vZDpiJA
-- Dark mode: https://screenshot.googleplex.com/47ruimEcaZ3HYbC


Bug: 1100814
Change-Id: I6f3284bc5f1fe0e3b1cb09cf4c2677d9edc10b3b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2470524
Commit-Queue: Mohamed Amir Yosef <mamir@chromium.org>
Reviewed-by: default avatarVasilii Sukhanov <vasilii@chromium.org>
Cr-Commit-Position: refs/heads/master@{#817095}
parent 802de8ae
......@@ -14,7 +14,6 @@
#include "chrome/browser/ui/views/accessibility/non_accessible_image_view.h"
#include "chrome/browser/ui/views/chrome_layout_provider.h"
#include "chrome/browser/ui/views/chrome_typography.h"
#include "chrome/browser/ui/views/profiles/badged_profile_photo.h"
#include "chrome/grit/generated_resources.h"
#include "chrome/grit/theme_resources.h"
#include "components/password_manager/core/common/password_manager_features.h"
......@@ -37,36 +36,58 @@
namespace {
constexpr int kImageSize = BadgedProfilePhoto::kImageSize;
constexpr int kImageSize = 48;
// An image source that represents a circle of the given size, color and style.
class CircleImageSource : public gfx::CanvasImageSource {
// An image source that adds a circular border and an optional circular
// background to the given image.
class BackgroundBorderAdderImageSource : public gfx::CanvasImageSource {
public:
CircleImageSource(int size, SkColor color, cc::PaintFlags::Style style)
: gfx::CanvasImageSource(gfx::Size(size, size)),
color_(color),
style_(style) {}
~CircleImageSource() override = default;
BackgroundBorderAdderImageSource(const gfx::ImageSkia& image,
bool add_background,
base::Optional<SkColor> background_color,
SkColor border_color,
int radius)
: gfx::CanvasImageSource(gfx::Size(radius, radius)),
image_(image),
add_background_(add_background),
background_color_(background_color),
border_color_(border_color) {}
~BackgroundBorderAdderImageSource() override = default;
void Draw(gfx::Canvas* canvas) override;
private:
const SkColor color_;
const cc::PaintFlags::Style style_;
const gfx::ImageSkia image_;
const bool add_background_;
const base::Optional<SkColor> background_color_;
const SkColor border_color_;
};
void CircleImageSource::Draw(gfx::Canvas* canvas) {
void BackgroundBorderAdderImageSource::Draw(gfx::Canvas* canvas) {
constexpr int kBorderThickness = 1;
float radius = size().width() / 2.0f;
cc::PaintFlags flags;
flags.setStyle(style_);
flags.setAntiAlias(true);
flags.setColor(color_);
float half_thickness = kBorderThickness / 2.0f;
gfx::SizeF size_f(size());
gfx::RectF bounds(size_f);
bounds.Inset(half_thickness, half_thickness);
canvas->DrawRoundRect(bounds, radius, flags);
// Draw the background
if (add_background_) {
DCHECK(background_color_);
cc::PaintFlags background_flags;
background_flags.setStyle(cc::PaintFlags::kFill_Style);
background_flags.setAntiAlias(true);
background_flags.setColor(background_color_.value());
canvas->DrawRoundRect(bounds, radius, background_flags);
}
// Draw the image
canvas->DrawImageInt(image_, (size().width() - image_.width()) / 2,
(size().height() - image_.height()) / 2);
// Draw the border
cc::PaintFlags border_flags;
border_flags.setStyle(cc::PaintFlags::kStroke_Style);
border_flags.setAntiAlias(true);
border_flags.setColor(border_color_);
canvas->DrawRoundRect(bounds, radius, border_flags);
}
// A class represting an image with a badge. By default, the image is the globe
......@@ -130,35 +151,32 @@ gfx::ImageSkia ImageWithBadge::GetBadge() {
}
void ImageWithBadge::Render() {
constexpr int kBadgePadding = 6;
const SkColor kBackgroundColor = GetNativeTheme()->GetSystemColor(
ui::NativeTheme::kColorId_BubbleBackground);
// Make the border color a softer version of the icon color.
const SkColor kBorderColor =
SkColorSetA(GetNativeTheme()->GetSystemColor(
ui::NativeTheme::kColorId_DefaultIconColor),
96);
gfx::Image rounded_badge = profiles::GetSizedAvatarIcon(
gfx::Image(GetBadge()),
/*is_rectangle=*/true, /*width=*/gfx::kFaviconSize,
/*height=*/gfx::kFaviconSize, profiles::SHAPE_CIRCLE);
gfx::ImageSkia badge_background =
gfx::CanvasImageSource::MakeImageSkia<CircleImageSource>(
gfx::kFaviconSize,
GetNativeTheme()->GetSystemColor(
ui::NativeTheme::kColorId_BubbleBackground),
cc::PaintFlags::kFill_Style);
gfx::ImageSkia rounded_badge_with_background =
gfx::ImageSkiaOperations::CreateSuperimposedImage(
badge_background, *rounded_badge.ToImageSkia());
gfx::ImageSkia main_image_border =
gfx::CanvasImageSource::MakeImageSkia<CircleImageSource>(
kImageSize,
GetNativeTheme()->GetSystemColor(
ui::NativeTheme::kColorId_DefaultIconColor),
cc::PaintFlags::kStroke_Style);
gfx::ImageSkia rounded_badge_with_background_and_border =
gfx::CanvasImageSource::MakeImageSkia<BackgroundBorderAdderImageSource>(
*rounded_badge.ToImageSkia(), /*add_background=*/true,
kBackgroundColor, kBorderColor, gfx::kFaviconSize + kBadgePadding);
gfx::ImageSkia main_image_with_border =
gfx::ImageSkiaOperations::CreateSuperimposedImage(GetMainImage(),
main_image_border);
gfx::CanvasImageSource::MakeImageSkia<BackgroundBorderAdderImageSource>(
GetMainImage(), /*add_background=*/false,
/*background_color=*/base::nullopt, kBorderColor, kImageSize);
gfx::ImageSkia badged_image = gfx::ImageSkiaOperations::CreateIconWithBadge(
main_image_with_border, rounded_badge_with_background);
main_image_with_border, rounded_badge_with_background_and_border);
SetImage(badged_image);
}
......
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