Skip to content

Commit

Permalink
fix: improve caption button appearance on Windows 11
Browse files Browse the repository at this point in the history 
https://chromium-review.googlesource.com/c/chromium/src/+/4428171
  • Loading branch information
@codebytere
codebytere committed Mar 11, 2024
1 parent c0f9d0e commit f26dc47
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 59 deletions.
5 changes: 2 additions & 3 deletions shell/browser/ui/views/win_caption_button.cc
View file
Expand Up @@ -163,7 +163,7 @@ void WinCaptionButton::PaintSymbol(gfx::Canvas* canvas) {
gfx::ScopedCanvas scoped_canvas(canvas);
const float scale = canvas->UndoDeviceScaleFactor();

const int symbol_size_pixels = std::round(10 * scale);
const int symbol_size_pixels = base::ClampRound(10 * scale);
gfx::RectF bounds_rect(GetContentsBounds());
bounds_rect.Scale(scale);
gfx::Rect symbol_rect(gfx::ToEnclosingRect(bounds_rect));
Expand All @@ -174,8 +174,7 @@ void WinCaptionButton::PaintSymbol(gfx::Canvas* canvas) {
flags.setAntiAlias(false);
flags.setColor(symbol_color);
flags.setStyle(cc::PaintFlags::kStroke_Style);
// Stroke width jumps up a pixel every time we reach a new integral scale.
const int stroke_width = std::floor(scale);
const int stroke_width = base::ClampRound(scale);
flags.setStrokeWidth(stroke_width);

switch (button_type_) {
Expand Down
107 changes: 55 additions & 52 deletions shell/browser/ui/views/win_icon_painter.cc
View file
Expand Up @@ -7,46 +7,26 @@
#include "base/numerics/safe_conversions.h"
#include "ui/gfx/color_utils.h"
#include "ui/gfx/geometry/rect_conversions.h"
#include "ui/gfx/geometry/rrect_f.h"
#include "ui/gfx/geometry/skia_conversions.h"
#include "ui/gfx/scoped_canvas.h"

namespace {

// Canvas::DrawRect's stroke can bleed out of |rect|'s bounds, so this draws a
// rectangle inset such that the result is constrained to |rect|'s size.
// The rounded rect corner radius for MaximizeIcon and RestoreIcon in
// Windows 11.
constexpr float kWin11RoundedCornerRadius = 1.5f;

void DrawRect(gfx::Canvas* canvas,
const gfx::Rect& rect,
const cc::PaintFlags& flags) {
gfx::RectF rect_f(rect);
float stroke_half_width = flags.getStrokeWidth() / 2;
rect_f.Inset(stroke_half_width);
canvas->DrawRect(rect_f, flags);
}

void DrawRoundRect(gfx::Canvas* canvas,
const gfx::Rect& rect,
float radius,
const cc::PaintFlags& flags) {
gfx::RectF rect_f(rect);
// The rect is used as a bounding box, and the stroke is kept within.
float stroke_half_width = flags.getStrokeWidth() / 2;
rect_f.Inset(stroke_half_width);
canvas->DrawRoundRect(rect_f, radius, flags);
}

// Draws a path containing the top and right edges of a rounded rectangle.
void DrawRoundRectEdges(gfx::Canvas* canvas,
const gfx::Rect& rect,
float radius,
const cc::PaintFlags& flags) {
gfx::RectF symbol_rect_f(rect);
float stroke_half_width = flags.getStrokeWidth() / 2;
symbol_rect_f.Inset(stroke_half_width);
SkPath path;
path.moveTo(symbol_rect_f.x(), symbol_rect_f.y());
path.arcTo(symbol_rect_f.right(), symbol_rect_f.y(), symbol_rect_f.right(),
symbol_rect_f.y() + radius, radius);
path.lineTo(symbol_rect_f.right(), symbol_rect_f.bottom());
canvas->DrawPath(path, flags);
canvas->DrawRect(rect_f, flags);
}

} // namespace
Expand All @@ -58,7 +38,7 @@ WinIconPainter::~WinIconPainter() = default;

void WinIconPainter::PaintMinimizeIcon(gfx::Canvas* canvas,
const gfx::Rect& symbol_rect,
const cc::PaintFlags& flags) {
cc::PaintFlags& flags) {
const int y = symbol_rect.CenterPoint().y();
const gfx::Point p1 = gfx::Point(symbol_rect.x(), y);
const gfx::Point p2 = gfx::Point(symbol_rect.right(), y);
Expand All @@ -67,13 +47,13 @@ void WinIconPainter::PaintMinimizeIcon(gfx::Canvas* canvas,

void WinIconPainter::PaintMaximizeIcon(gfx::Canvas* canvas,
const gfx::Rect& symbol_rect,
const cc::PaintFlags& flags) {
cc::PaintFlags& flags) {
DrawRect(canvas, symbol_rect, flags);
}

void WinIconPainter::PaintRestoreIcon(gfx::Canvas* canvas,
const gfx::Rect& symbol_rect,
const cc::PaintFlags& flags) {
cc::PaintFlags& flags) {
const int separation = base::ClampFloor(2 * canvas->image_scale());
gfx::Rect icon_rect = symbol_rect;
icon_rect.Inset(gfx::Insets::TLBR(separation, 0, 0, separation));
Expand All @@ -89,7 +69,7 @@ void WinIconPainter::PaintRestoreIcon(gfx::Canvas* canvas,

void WinIconPainter::PaintCloseIcon(gfx::Canvas* canvas,
const gfx::Rect& symbol_rect,
const cc::PaintFlags& flags) {
cc::PaintFlags& flags) {
// TODO(bsep): This sometimes draws misaligned at fractional device scales
// because the button's origin isn't necessarily aligned to pixels.
cc::PaintFlags paint_flags = flags;
Expand All @@ -109,32 +89,55 @@ Win11IconPainter::~Win11IconPainter() = default;

void Win11IconPainter::PaintMaximizeIcon(gfx::Canvas* canvas,
const gfx::Rect& symbol_rect,
const cc::PaintFlags& flags) {
cc::PaintFlags paint_flags = flags;
paint_flags.setAntiAlias(true);
cc::PaintFlags& flags) {
gfx::RectF rect_f(symbol_rect);
flags.setAntiAlias(true);
const float corner_radius =
base::ClampFloor(kWin11RoundedCornerRadius * canvas->image_scale());

const float corner_radius = canvas->image_scale();
DrawRoundRect(canvas, symbol_rect, corner_radius, flags);
// The symbol rect is used as a bounding box, and the stroke is kept within.
float stroke_half_width = flags.getStrokeWidth() / 2;
rect_f.Inset(stroke_half_width);
}

void Win11IconPainter::PaintRestoreIcon(gfx::Canvas* canvas,
const gfx::Rect& symbol_rect,
const cc::PaintFlags& flags) {
const int separation = base::ClampFloor(2 * canvas->image_scale());
gfx::Rect icon_rect = symbol_rect;
icon_rect.Inset(gfx::Insets::TLBR(separation, 0, 0, separation));

cc::PaintFlags paint_flags = flags;
paint_flags.setAntiAlias(true);

// Bottom left ("in front") rounded square.
const float bottom_rect_radius = canvas->image_scale();
DrawRoundRect(canvas, icon_rect, bottom_rect_radius, flags);

// Top right ("behind") top+right edges of rounded square (2.5x).
icon_rect.Offset(separation, -separation);
cc::PaintFlags& flags) {
gfx::RectF rect_f(symbol_rect);
const float separation = 2.0f * canvas->image_scale();
const int round_rect_radius =
base::ClampFloor(kWin11RoundedCornerRadius * canvas->image_scale());
const int top_rect_upper_right_radius = 2 * round_rect_radius;
flags.setAntiAlias(true);

// The symbol rect is used as a bounding box, and the stroke is kept within.
const float stroke_half_width = flags.getStrokeWidth() / 2;
rect_f.Inset(stroke_half_width);

const float top_rect_radius = 2.5f * canvas->image_scale();
DrawRoundRectEdges(canvas, icon_rect, top_rect_radius, flags);
// Shrink the rect to make space for the top rect.
rect_f.Inset(gfx::InsetsF::TLBR(separation, 0, 0, separation));

gfx::RRectF rrect(rect_f, round_rect_radius);

// Bottom ("in front") rounded square.
canvas->sk_canvas()->drawRRect(SkRRect(rrect), flags);

// The top rounded square is clipped to only draw the top and right edges,
// and give corners a flat base. The clip rect sits right below the bottom
// half of the stroke.
gfx::RRectF clip_rrect(rrect);
const float clip_rect_growth = separation - stroke_half_width;
// The upper-right corner radius doesn't need to be updated because |Outset|
// does that for us.
clip_rrect.Outset(clip_rect_growth);
canvas->sk_canvas()->clipRRect(SkRRect(clip_rrect), SkClipOp::kDifference,
true);

// Top ("behind") rounded square.
rrect.Offset(separation, -separation);
rrect.SetCornerRadii(gfx::RRectF::Corner::kUpperRight,
top_rect_upper_right_radius,
top_rect_upper_right_radius);
canvas->sk_canvas()->drawRRect(SkRRect(rrect), flags);
}
} // namespace electron
9 changes: 5 additions & 4 deletions shell/browser/ui/views/win_icon_painter.h
View file
Expand Up @@ -10,6 +10,7 @@

namespace electron {

// Copied from chrome/browser/ui/views/frame/windows_icon_painter.h
class WinIconPainter {
public:
WinIconPainter();
Expand All @@ -22,22 +23,22 @@ class WinIconPainter {
// Paints the minimize icon for the button
virtual void PaintMinimizeIcon(gfx::Canvas* canvas,
const gfx::Rect& symbol_rect,
const cc::PaintFlags& flags);
cc::PaintFlags& flags);

// Paints the maximize icon for the button
virtual void PaintMaximizeIcon(gfx::Canvas* canvas,
const gfx::Rect& symbol_rect,
const cc::PaintFlags& flags);
cc::PaintFlags& flags);

// Paints the restore icon for the button
virtual void PaintRestoreIcon(gfx::Canvas* canvas,
const gfx::Rect& symbol_rect,
const cc::PaintFlags& flags);
cc::PaintFlags& flags);

// Paints the close icon for the button
virtual void PaintCloseIcon(gfx::Canvas* canvas,
const gfx::Rect& symbol_rect,
const cc::PaintFlags& flags);
cc::PaintFlags& flags);
};

class Win11IconPainter : public WinIconPainter {
Expand Down

0 comments on commit f26dc47

Please sign in to comment.