mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 22:57:44 +00:00
LibWeb: Implement the CSS outline
property :^)
...along with `outline-color`, `outline-style`, and `outline-width`. This re-uses the existing border-painting code, which seems to work well enough! This replaces the previous code for drawing focus-outlines, with generic outline painting for any elements that want it. Focus outlines are now instead supported by this code in Default.css: ```css :focus-visible { outline: auto; } ```
This commit is contained in:
parent
5640779838
commit
fe7e797483
15 changed files with 174 additions and 40 deletions
|
@ -1,6 +1,6 @@
|
|||
/*
|
||||
* Copyright (c) 2020, Andreas Kling <kling@serenityos.org>
|
||||
* Copyright (c) 2021-2022, Sam Atkins <atkinssj@serenityos.org>
|
||||
* Copyright (c) 2021-2023, Sam Atkins <atkinssj@serenityos.org>
|
||||
* Copyright (c) 2022, MacDue <macdue@dueutil.tech>
|
||||
*
|
||||
* SPDX-License-Identifier: BSD-2-Clause
|
||||
|
@ -10,6 +10,8 @@
|
|||
#include <LibGfx/AntiAliasingPainter.h>
|
||||
#include <LibGfx/Painter.h>
|
||||
#include <LibGfx/Path.h>
|
||||
#include <LibWeb/DOM/Document.h>
|
||||
#include <LibWeb/Layout/Node.h>
|
||||
#include <LibWeb/Painting/BorderPainting.h>
|
||||
#include <LibWeb/Painting/PaintContext.h>
|
||||
|
||||
|
@ -627,4 +629,27 @@ void paint_all_borders(PaintContext& context, CSSPixelRect const& bordered_rect,
|
|||
}
|
||||
}
|
||||
|
||||
Optional<BordersData> borders_data_for_outline(Layout::Node const& layout_node, Color outline_color, CSS::OutlineStyle outline_style, CSSPixels outline_width)
|
||||
{
|
||||
CSS::LineStyle line_style;
|
||||
if (outline_style == CSS::OutlineStyle::Auto) {
|
||||
// `auto` lets us do whatever we want for the outline. 2px of the link colour seems reasonable.
|
||||
line_style = CSS::LineStyle::Dotted;
|
||||
outline_color = layout_node.document().link_color();
|
||||
outline_width = 2;
|
||||
} else {
|
||||
line_style = CSS::value_id_to_line_style(CSS::to_value_id(outline_style)).value_or(CSS::LineStyle::None);
|
||||
}
|
||||
|
||||
if (outline_color.alpha() == 0 || line_style == CSS::LineStyle::None || outline_width == 0)
|
||||
return {};
|
||||
|
||||
CSS::BorderData border_data {
|
||||
.color = outline_color,
|
||||
.line_style = line_style,
|
||||
.width = outline_width,
|
||||
};
|
||||
return BordersData { border_data, border_data, border_data, border_data };
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
/*
|
||||
* Copyright (c) 2020, Andreas Kling <kling@serenityos.org>
|
||||
* Copyright (c) 2021-2023, Sam Atkins <atkinssj@serenityos.org>
|
||||
*
|
||||
* SPDX-License-Identifier: BSD-2-Clause
|
||||
*/
|
||||
|
@ -55,6 +56,11 @@ struct BorderRadiiData {
|
|||
bottom_right.shrink(right, bottom);
|
||||
bottom_left.shrink(left, bottom);
|
||||
}
|
||||
|
||||
inline void inflate(CSSPixels top, CSSPixels right, CSSPixels bottom, CSSPixels left)
|
||||
{
|
||||
shrink(-top, -right, -bottom, -left);
|
||||
}
|
||||
};
|
||||
|
||||
BorderRadiiData normalized_border_radii_data(Layout::Node const&, CSSPixelRect const&, CSS::BorderRadiusData top_left_radius, CSS::BorderRadiusData top_right_radius, CSS::BorderRadiusData bottom_right_radius, CSS::BorderRadiusData bottom_left_radius);
|
||||
|
@ -72,6 +78,9 @@ struct BordersData {
|
|||
CSS::BorderData left;
|
||||
};
|
||||
|
||||
// Returns OptionalNone if there is no outline to paint.
|
||||
Optional<BordersData> borders_data_for_outline(Layout::Node const&, Color outline_color, CSS::OutlineStyle outline_style, CSSPixels outline_width);
|
||||
|
||||
RefPtr<Gfx::Bitmap> get_cached_corner_bitmap(DevicePixelSize corners_size);
|
||||
|
||||
void paint_border(PaintContext& context, BorderEdge edge, DevicePixelRect const& rect, Gfx::AntiAliasingPainter::CornerRadius const& radius, Gfx::AntiAliasingPainter::CornerRadius const& opposite_radius, BordersData const& borders_data, Gfx::Path& path, bool last);
|
||||
|
|
|
@ -86,7 +86,7 @@ void InlinePaintable::paint(PaintContext& context, PaintPhase phase) const
|
|||
});
|
||||
}
|
||||
|
||||
if (phase == PaintPhase::Border) {
|
||||
auto paint_border_or_outline = [&](Optional<BordersData> outline_data = {}) {
|
||||
auto top_left_border_radius = computed_values().border_top_left_radius();
|
||||
auto top_right_border_radius = computed_values().border_top_right_radius();
|
||||
auto bottom_right_border_radius = computed_values().border_bottom_right_radius();
|
||||
|
@ -115,13 +115,31 @@ void InlinePaintable::paint(PaintContext& context, PaintPhase phase) const
|
|||
absolute_fragment_rect.set_width(absolute_fragment_rect.width() + extra_end_width);
|
||||
}
|
||||
|
||||
auto bordered_rect = absolute_fragment_rect.inflated(borders_data.top.width, borders_data.right.width, borders_data.bottom.width, borders_data.left.width);
|
||||
auto border_radii_data = normalized_border_radii_data(layout_node(), bordered_rect, top_left_border_radius, top_right_border_radius, bottom_right_border_radius, bottom_left_border_radius);
|
||||
auto borders_rect = absolute_fragment_rect.inflated(borders_data.top.width, borders_data.right.width, borders_data.bottom.width, borders_data.left.width);
|
||||
auto border_radii_data = normalized_border_radii_data(layout_node(), borders_rect, top_left_border_radius, top_right_border_radius, bottom_right_border_radius, bottom_left_border_radius);
|
||||
|
||||
paint_all_borders(context, bordered_rect, border_radii_data, borders_data);
|
||||
if (outline_data.has_value()) {
|
||||
border_radii_data.inflate(outline_data->top.width, outline_data->right.width, outline_data->bottom.width, outline_data->left.width);
|
||||
borders_rect.inflate(outline_data->top.width, outline_data->right.width, outline_data->bottom.width, outline_data->left.width);
|
||||
paint_all_borders(context, borders_rect, border_radii_data, *outline_data);
|
||||
} else {
|
||||
paint_all_borders(context, borders_rect, border_radii_data, borders_data);
|
||||
}
|
||||
|
||||
return IterationDecision::Continue;
|
||||
});
|
||||
};
|
||||
|
||||
if (phase == PaintPhase::Border) {
|
||||
paint_border_or_outline();
|
||||
}
|
||||
|
||||
if (phase == PaintPhase::Outline) {
|
||||
auto outline_width = computed_values().outline_width().to_px(layout_node());
|
||||
auto maybe_outline_data = borders_data_for_outline(layout_node(), computed_values().outline_color(), computed_values().outline_style(), outline_width);
|
||||
if (maybe_outline_data.has_value()) {
|
||||
paint_border_or_outline(maybe_outline_data.value());
|
||||
}
|
||||
}
|
||||
|
||||
if (phase == PaintPhase::Overlay && layout_node().document().inspected_layout_node() == &layout_node()) {
|
||||
|
|
|
@ -170,6 +170,16 @@ void PaintableBox::paint(PaintContext& context, PaintPhase phase) const
|
|||
paint_border(context);
|
||||
}
|
||||
|
||||
if (phase == PaintPhase::Outline) {
|
||||
auto outline_width = computed_values().outline_width().to_px(layout_node());
|
||||
auto borders_data = borders_data_for_outline(layout_node(), computed_values().outline_color(), computed_values().outline_style(), outline_width);
|
||||
if (borders_data.has_value()) {
|
||||
auto border_radius_data = normalized_border_radii_data(ShrinkRadiiForBorders::No);
|
||||
border_radius_data.inflate(outline_width, outline_width, outline_width, outline_width);
|
||||
paint_all_borders(context, absolute_border_box_rect().inflated(outline_width, outline_width, outline_width, outline_width), border_radius_data, borders_data.value());
|
||||
}
|
||||
}
|
||||
|
||||
if (phase == PaintPhase::Overlay && should_clip_rect)
|
||||
context.painter().restore();
|
||||
|
||||
|
@ -216,12 +226,6 @@ void PaintableBox::paint(PaintContext& context, PaintPhase phase) const
|
|||
context.painter().draw_rect(size_text_device_rect, context.palette().threed_shadow1());
|
||||
context.painter().draw_text(size_text_device_rect, size_text, font, Gfx::TextAlignment::Center, context.palette().color(Gfx::ColorRole::TooltipText));
|
||||
}
|
||||
|
||||
if (phase == PaintPhase::Outline && layout_box().dom_node() && layout_box().dom_node()->is_element() && verify_cast<DOM::Element>(*layout_box().dom_node()).is_focused()) {
|
||||
// FIXME: Implement this as `outline` using :focus-visible in the default UA stylesheet to make it possible to override/disable.
|
||||
auto focus_outline_rect = context.enclosing_device_rect(absolute_border_box_rect()).inflated(4, 4);
|
||||
context.painter().draw_focus_rect(focus_outline_rect.to_type<int>(), context.palette().focus_outline());
|
||||
}
|
||||
}
|
||||
|
||||
BordersData PaintableBox::remove_element_kind_from_borders_data(PaintableBox::BordersDataWithElementKind borders_data)
|
||||
|
@ -639,25 +643,6 @@ void PaintableWithLines::paint(PaintContext& context, PaintPhase phase) const
|
|||
if (corner_clipper.has_value())
|
||||
corner_clipper->blit_corner_clipping(context.painter());
|
||||
}
|
||||
|
||||
// FIXME: Merge this loop with the above somehow..
|
||||
if (phase == PaintPhase::Outline) {
|
||||
for (auto& line_box : m_line_boxes) {
|
||||
for (auto& fragment : line_box.fragments()) {
|
||||
auto* node = fragment.layout_node().dom_node();
|
||||
if (!node)
|
||||
continue;
|
||||
auto* parent = node->parent_element();
|
||||
if (!parent)
|
||||
continue;
|
||||
if (parent->is_focused()) {
|
||||
// FIXME: Implement this as `outline` using :focus-visible in the default UA stylesheet to make it possible to override/disable.
|
||||
auto focus_outline_rect = context.enclosing_device_rect(fragment.absolute_rect()).to_type<int>().inflated(4, 4);
|
||||
context.painter().draw_focus_rect(focus_outline_rect, context.palette().focus_outline());
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
bool PaintableWithLines::handle_mousewheel(Badge<EventHandler>, CSSPixelPoint, unsigned, unsigned, int wheel_delta_x, int wheel_delta_y)
|
||||
|
|
|
@ -124,9 +124,7 @@ void StackingContext::paint_descendants(PaintContext& context, Layout::Node cons
|
|||
paint_descendants(context, child, phase);
|
||||
break;
|
||||
case StackingContextPaintPhase::FocusAndOverlay:
|
||||
if (context.has_focus()) {
|
||||
paint_node(child, context, PaintPhase::Outline);
|
||||
}
|
||||
paint_node(child, context, PaintPhase::Outline);
|
||||
paint_node(child, context, PaintPhase::Overlay);
|
||||
paint_descendants(context, child, phase);
|
||||
break;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue