LibWeb: Replace DrawTriangleWave with StrokePathUsingColor

There's no need to have separate display list item for drawing triangle
wave when we could simply use StrokePathUsingColor. By switching to
StrokePathUsingColor we could also reduce painting because it supports
filtering out by bounding box.

Author: kalenikaliaksandr

Libraries/LibWeb/Painting/DisplayList.cpp

@@ -223,7 +223,6 @@ void DisplayListPlayer::execute_impl(DisplayList& display_list, ScrollStateSnaps
         else HANDLE_COMMAND(DrawLine, draw_line)
         else HANDLE_COMMAND(ApplyBackdropFilter, apply_backdrop_filter)
         else HANDLE_COMMAND(DrawRect, draw_rect)
-        else HANDLE_COMMAND(DrawTriangleWave, draw_triangle_wave)
         else HANDLE_COMMAND(AddRoundedRectClip, add_rounded_rect_clip)
         else HANDLE_COMMAND(AddMask, add_mask)
         else HANDLE_COMMAND(PaintScrollBar, paint_scrollbar)

Libraries/LibWeb/Painting/DisplayList.h

@@ -64,7 +64,6 @@ class DisplayListPlayer {
     virtual void draw_line(DrawLine const&) = 0;
     virtual void apply_backdrop_filter(ApplyBackdropFilter const&) = 0;
     virtual void draw_rect(DrawRect const&) = 0;
-    virtual void draw_triangle_wave(DrawTriangleWave const&) = 0;
     virtual void add_rounded_rect_clip(AddRoundedRectClip const&) = 0;
     virtual void add_mask(AddMask const&) = 0;
     virtual void paint_nested_display_list(PaintNestedDisplayList const&) = 0;

Libraries/LibWeb/Painting/DisplayListCommand.cpp

@@ -182,11 +182,6 @@ void DrawRect::dump(StringBuilder& builder) const
     builder.appendff("DrawRect rect={} color={} rough={}", rect, color, rough);
 }
 
-void DrawTriangleWave::dump(StringBuilder& builder) const
-{
-    builder.appendff("DrawTriangleWave p1={} p2={} color={} amplitude={} thickness={}", p1, p2, color, amplitude, thickness);
-}
-
 void AddRoundedRectClip::dump(StringBuilder& builder) const
 {
     builder.appendff("AddRoundedRectClip rect={}", border_rect);

Libraries/LibWeb/Painting/DisplayListCommand.h

@@ -382,21 +382,6 @@ struct PaintConicGradient {
     void dump(StringBuilder&) const;
 };
 
-struct DrawTriangleWave {
-    Gfx::IntPoint p1;
-    Gfx::IntPoint p2;
-    Color color;
-    int amplitude;
-    int thickness;
-
-    void translate_by(Gfx::IntPoint const& offset)
-    {
-        p1.translate_by(offset);
-        p2.translate_by(offset);
-    }
-    void dump(StringBuilder&) const;
-};
-
 struct AddRoundedRectClip {
     CornerRadii corner_radii;
     Gfx::IntRect border_rect;
@@ -530,7 +515,6 @@ using DisplayListCommand = Variant<
     DrawLine,
     ApplyBackdropFilter,
     DrawRect,
-    DrawTriangleWave,
     AddRoundedRectClip,
     AddMask,
     PaintNestedDisplayList,

Libraries/LibWeb/Painting/DisplayListPlayerSkia.cpp

@@ -872,75 +872,6 @@ void DisplayListPlayerSkia::paint_conic_gradient(PaintConicGradient const& comma
     surface().canvas().drawRect(to_skia_rect(rect), paint);
 }
 
-void DisplayListPlayerSkia::draw_triangle_wave(DrawTriangleWave const& command)
-{
-    // FIXME: Support more than horizontal waves
-    if (command.p1.y() != command.p2.y()) {
-        dbgln("FIXME: Support more than horizontal waves");
-        return;
-    }
-
-    auto& canvas = surface().canvas();
-    auto from = to_skia_point(command.p1);
-    auto to = to_skia_point(command.p2);
-
-    SkPaint paint;
-    paint.setAntiAlias(true);
-    paint.setStyle(SkPaint::kStroke_Style);
-    paint.setStrokeWidth(command.thickness);
-    paint.setStrokeJoin(SkPaint::kRound_Join);
-    paint.setStrokeCap(SkPaint::kRound_Cap);
-    paint.setColor(to_skia_color(command.color));
-
-    SkPath path;
-    path.moveTo(from);
-
-    float const wavelength = command.amplitude * 2.0f;
-    float const half_wavelength = command.amplitude;
-    float const quarter_wavelength = command.amplitude / 2.0f;
-
-    auto position = from;
-    auto remaining = abs(to.x() - position.x());
-    while (remaining > wavelength) {
-        // Draw a whole wave
-        path.lineTo(position.x() + quarter_wavelength, position.y() - quarter_wavelength);
-        path.lineTo(position.x() + quarter_wavelength + half_wavelength, position.y() + quarter_wavelength);
-        path.lineTo(position.x() + wavelength, position.y());
-        position.offset(wavelength, 0);
-        remaining = abs(to.x() - position.x());
-    }
-
-    // Up
-    if (remaining > quarter_wavelength) {
-        path.lineTo(position.x() + quarter_wavelength, position.y() - quarter_wavelength);
-        position.offset(quarter_wavelength, 0);
-        remaining = abs(to.x() - position.x());
-    } else if (remaining >= 1) {
-        auto fraction = remaining / quarter_wavelength;
-        path.lineTo(position.x() + (fraction * quarter_wavelength), position.y() - (fraction * quarter_wavelength));
-        remaining = 0;
-    }
-
-    // Down
-    if (remaining > half_wavelength) {
-        path.lineTo(position.x() + half_wavelength, position.y() + quarter_wavelength);
-        position.offset(half_wavelength, 0);
-        remaining = abs(to.x() - position.x());
-    } else if (remaining >= 1) {
-        auto fraction = remaining / half_wavelength;
-        path.lineTo(position.x() + (fraction * half_wavelength), position.y() - quarter_wavelength + (fraction * half_wavelength));
-        remaining = 0;
-    }
-
-    // Back to middle
-    if (remaining >= 1) {
-        auto fraction = remaining / quarter_wavelength;
-        path.lineTo(position.x() + (fraction * quarter_wavelength), position.y() + ((1 - fraction) * quarter_wavelength));
-    }
-
-    canvas.drawPath(path, paint);
-}
-
 void DisplayListPlayerSkia::add_rounded_rect_clip(AddRoundedRectClip const& command)
 {
     auto rounded_rect = to_skia_rrect(command.border_rect, command.corner_radii);

Libraries/LibWeb/Painting/DisplayListPlayerSkia.h

@@ -51,7 +51,6 @@ class DisplayListPlayerSkia final : public DisplayListPlayer {
     void draw_rect(DrawRect const&) override;
     void paint_radial_gradient(PaintRadialGradient const&) override;
     void paint_conic_gradient(PaintConicGradient const&) override;
-    void draw_triangle_wave(DrawTriangleWave const&) override;
     void add_rounded_rect_clip(AddRoundedRectClip const&) override;
     void add_mask(AddMask const&) override;
     void paint_scrollbar(PaintScrollBar const&) override;

Libraries/LibWeb/Painting/DisplayListRecorder.cpp

@@ -433,21 +433,6 @@ void DisplayListRecorder::fill_rect_with_rounded_corners(Gfx::IntRect const& a_r
         { bottom_left_radius, bottom_left_radius });
 }
 
-void DisplayListRecorder::draw_triangle_wave(Gfx::IntPoint a_p1, Gfx::IntPoint a_p2, Color color, int amplitude, int thickness = 1)
-{
-    // Skia treats zero thickness as a special case and will draw a hairline, while we want to draw nothing.
-    if (!thickness)
-        return;
-    if (color.alpha() == 0)
-        return;
-    APPEND(DrawTriangleWave {
-        .p1 = a_p1,
-        .p2 = a_p2,
-        .color = color,
-        .amplitude = amplitude,
-        .thickness = thickness });
-}
-
 void DisplayListRecorder::paint_scrollbar(int scroll_frame_id, Gfx::IntRect gutter_rect, Gfx::IntRect thumb_rect, CSSPixelFraction scroll_size, Color thumb_color, Color track_color, bool vertical)
 {
     APPEND(PaintScrollBar {

Libraries/LibWeb/Painting/DisplayListRecorder.h

@@ -144,8 +144,6 @@ class DisplayListRecorder {
     void fill_rect_with_rounded_corners(Gfx::IntRect const& a_rect, Color color, int radius);
     void fill_rect_with_rounded_corners(Gfx::IntRect const& a_rect, Color color, int top_left_radius, int top_right_radius, int bottom_right_radius, int bottom_left_radius);
 
-    void draw_triangle_wave(Gfx::IntPoint a_p1, Gfx::IntPoint a_p2, Color color, int amplitude, int thickness);
-
     void paint_scrollbar(int scroll_frame_id, Gfx::IntRect gutter_rect, Gfx::IntRect thumb_rect, CSSPixelFraction scroll_size, Color thumb_color, Color track_color, bool vertical);
 
     void apply_opacity(float opacity);

Libraries/LibWeb/Painting/PaintableBox.cpp

@@ -734,9 +734,65 @@ void paint_cursor_if_needed(DisplayListRecordingContext& context, TextPaintable
     context.display_list_recorder().fill_rect(cursor_device_rect, caret_color);
 }
 
+static Gfx::Path build_triangle_wave_path(Gfx::IntPoint from, Gfx::IntPoint to, float amplitude)
+{
+    Gfx::Path path;
+    if (from.y() != to.y()) {
+        dbgln("FIXME: Support more than horizontal waves");
+        return path;
+    }
+
+    path.move_to(from.to_type<float>());
+
+    float const wavelength = amplitude * 2.0f;
+    float const half_wavelength = amplitude;
+    float const quarter_wavelength = amplitude / 2.0f;
+
+    auto position = from.to_type<float>();
+    auto remaining = abs(to.x() - position.x());
+    while (remaining > wavelength) {
+        // Draw a whole wave
+        path.line_to({ position.x() + quarter_wavelength, position.y() - quarter_wavelength });
+        path.line_to({ position.x() + quarter_wavelength + half_wavelength, position.y() + quarter_wavelength });
+        path.line_to({ position.x() + wavelength, (float)position.y() });
+        position.translate_by({ wavelength, 0 });
+        remaining = abs(to.x() - position.x());
+    }
+
+    // Up
+    if (remaining > quarter_wavelength) {
+        path.line_to({ position.x() + quarter_wavelength, position.y() - quarter_wavelength });
+        position.translate_by({ quarter_wavelength, 0 });
+        remaining = abs(to.x() - position.x());
+    } else if (remaining >= 1) {
+        auto fraction = remaining / quarter_wavelength;
+        path.line_to({ position.x() + (fraction * quarter_wavelength), position.y() - (fraction * quarter_wavelength) });
+        remaining = 0;
+    }
+
+    // Down
+    if (remaining > half_wavelength) {
+        path.line_to({ position.x() + half_wavelength, position.y() + quarter_wavelength });
+        position.translate_by(half_wavelength, 0);
+        remaining = abs(to.x() - position.x());
+    } else if (remaining >= 1) {
+        auto fraction = remaining / half_wavelength;
+        path.line_to({ position.x() + (fraction * half_wavelength), position.y() - quarter_wavelength + (fraction * half_wavelength) });
+        remaining = 0;
+    }
+
+    // Back to middle
+    if (remaining >= 1) {
+        auto fraction = remaining / quarter_wavelength;
+        path.line_to({ position.x() + (fraction * quarter_wavelength), position.y() + ((1 - fraction) * quarter_wavelength) });
+    }
+
+    return path;
+}
+
 void paint_text_decoration(DisplayListRecordingContext& context, TextPaintable const& paintable, PaintableFragment const& fragment)
 {
-    auto& painter = context.display_list_recorder();
+    auto& recorder = context.display_list_recorder();
     auto& font = fragment.layout_node().first_available_font();
     auto fragment_box = fragment.absolute_rect();
     CSSPixels glyph_height = CSSPixels::nearest_value_for(font.pixel_size());
@@ -796,7 +852,7 @@ void paint_text_decoration(DisplayListRecordingContext& context, TextPaintable c
 
         switch (line_style) {
         case CSS::TextDecorationStyle::Solid:
-            painter.draw_line(line_start_point.to_type<int>(), line_end_point.to_type<int>(), line_color, device_line_thickness.value(), Gfx::LineStyle::Solid);
+            recorder.draw_line(line_start_point.to_type<int>(), line_end_point.to_type<int>(), line_color, device_line_thickness.value(), Gfx::LineStyle::Solid);
             break;
         case CSS::TextDecorationStyle::Double:
             switch (line) {
@@ -814,14 +870,14 @@ void paint_text_decoration(DisplayListRecordingContext& context, TextPaintable c
                 VERIFY_NOT_REACHED();
             }
 
-            painter.draw_line(line_start_point.to_type<int>(), line_end_point.to_type<int>(), line_color, device_line_thickness.value());
-            painter.draw_line(line_start_point.translated(0, device_line_thickness + 1).to_type<int>(), line_end_point.translated(0, device_line_thickness + 1).to_type<int>(), line_color, device_line_thickness.value());
+            recorder.draw_line(line_start_point.to_type<int>(), line_end_point.to_type<int>(), line_color, device_line_thickness.value());
+            recorder.draw_line(line_start_point.translated(0, device_line_thickness + 1).to_type<int>(), line_end_point.translated(0, device_line_thickness + 1).to_type<int>(), line_color, device_line_thickness.value());
             break;
         case CSS::TextDecorationStyle::Dashed:
-            painter.draw_line(line_start_point.to_type<int>(), line_end_point.to_type<int>(), line_color, device_line_thickness.value(), Gfx::LineStyle::Dashed);
+            recorder.draw_line(line_start_point.to_type<int>(), line_end_point.to_type<int>(), line_color, device_line_thickness.value(), Gfx::LineStyle::Dashed);
             break;
         case CSS::TextDecorationStyle::Dotted:
-            painter.draw_line(line_start_point.to_type<int>(), line_end_point.to_type<int>(), line_color, device_line_thickness.value(), Gfx::LineStyle::Dotted);
+            recorder.draw_line(line_start_point.to_type<int>(), line_end_point.to_type<int>(), line_color, device_line_thickness.value(), Gfx::LineStyle::Dotted);
             break;
         case CSS::TextDecorationStyle::Wavy:
             auto amplitude = device_line_thickness.value() * 3;
@@ -841,7 +897,16 @@ void paint_text_decoration(DisplayListRecordingContext& context, TextPaintable c
             default:
                 VERIFY_NOT_REACHED();
             }
-            painter.draw_triangle_wave(line_start_point.to_type<int>(), line_end_point.to_type<int>(), line_color, amplitude, device_line_thickness.value());
+            recorder.stroke_path({
+                .cap_style = Gfx::Path::CapStyle::Round,
+                .join_style = Gfx::Path::JoinStyle::Round,
+                .miter_limit = 0,
+                .dash_array = {},
+                .dash_offset = 0,
+                .path = build_triangle_wave_path(line_start_point.to_type<int>(), line_end_point.to_type<int>(), amplitude),
+                .color = line_color,
+                .thickness = static_cast<float>(device_line_thickness.value()),
+            });
             break;
         }
     }