From 9da3e298185eabd4e819d7c0f03beb0a4d4060ed Mon Sep 17 00:00:00 2001 From: simonkrauter Date: Sat, 13 Jul 2024 18:01:32 -0300 Subject: [PATCH] LibWeb: Make scrollbar thumbs visible on dark background Previously, the scrollbar thumbs were (almost) invisible, when the page background color was similar to the scrollbar thumb color (DarkGray). Now, in addition to the filled rounded rectangle, the scrollbar thumbs are painted with a 1px solid LightGrey border. On a white or light color background the border stays invisible. --- .../Libraries/LibWeb/Painting/PaintableBox.cpp | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/Userland/Libraries/LibWeb/Painting/PaintableBox.cpp b/Userland/Libraries/LibWeb/Painting/PaintableBox.cpp index 195ad881e35..50180e06c80 100644 --- a/Userland/Libraries/LibWeb/Painting/PaintableBox.cpp +++ b/Userland/Libraries/LibWeb/Painting/PaintableBox.cpp @@ -340,13 +340,28 @@ void PaintableBox::paint(PaintContext& context, PaintPhase phase) const auto scrollbar_width = computed_values().scrollbar_width(); if (phase == PaintPhase::Overlay && scrollbar_width != CSS::ScrollbarWidth::None) { auto color = Color(Color::NamedColor::DarkGray).with_alpha(128); + auto border_color = Color(Color::NamedColor::LightGray).with_alpha(128); + auto borders_data = BordersDataDevicePixels { + .top = BorderDataDevicePixels { border_color, CSS::LineStyle::Solid, 1 }, + .right = BorderDataDevicePixels { border_color, CSS::LineStyle::Solid, 1 }, + .bottom = BorderDataDevicePixels { border_color, CSS::LineStyle::Solid, 1 }, + .left = BorderDataDevicePixels { border_color, CSS::LineStyle::Solid, 1 }, + }; int thumb_corner_radius = static_cast(context.rounded_device_pixels(scrollbar_thumb_thickness / 2)); + CornerRadii corner_radii = { + .top_left = Gfx::AntiAliasingPainter::CornerRadius { thumb_corner_radius, thumb_corner_radius }, + .top_right = Gfx::AntiAliasingPainter::CornerRadius { thumb_corner_radius, thumb_corner_radius }, + .bottom_right = Gfx::AntiAliasingPainter::CornerRadius { thumb_corner_radius, thumb_corner_radius }, + .bottom_left = Gfx::AntiAliasingPainter::CornerRadius { thumb_corner_radius, thumb_corner_radius }, + }; if (auto thumb_rect = scroll_thumb_rect(ScrollDirection::Horizontal); thumb_rect.has_value()) { auto thumb_device_rect = context.enclosing_device_rect(thumb_rect.value()); + paint_all_borders(context.display_list_recorder(), thumb_device_rect, corner_radii, borders_data); context.display_list_recorder().fill_rect_with_rounded_corners(thumb_device_rect.to_type(), color, thumb_corner_radius); } if (auto thumb_rect = scroll_thumb_rect(ScrollDirection::Vertical); thumb_rect.has_value()) { auto thumb_device_rect = context.enclosing_device_rect(thumb_rect.value()); + paint_all_borders(context.display_list_recorder(), thumb_device_rect, corner_radii, borders_data); context.display_list_recorder().fill_rect_with_rounded_corners(thumb_device_rect.to_type(), color, thumb_corner_radius); } }