LibWeb: Paint a frame around (system) <progress> elements

This makes them look a bit more like a progress bar, especially
on white backgrounds (for the default theme) where you otherwise
cannot see the unfilled part of the bar.

1 files changed, 4 insertions, 2 deletions

diff --git a/Userland/Libraries/LibWeb/Painting/ProgressPaintable.cpp b/Userland/Libraries/LibWeb/Painting/ProgressPaintable.cpp
index e79749c5cf..785fc34e81 100644
--- a/Userland/Libraries/LibWeb/Painting/ProgressPaintable.cpp
+++ b/Userland/Libraries/LibWeb/Painting/ProgressPaintable.cpp
@@ -30,8 +30,10 @@ void ProgressPaintable::paint(PaintContext& context, PaintPhase phase) const
         return;
 
     if (phase == PaintPhase::Foreground) {
-        // FIXME: This does not support floating point value() and max()
-        Gfx::StylePainter::paint_progressbar(context.painter(), enclosing_int_rect(absolute_rect()), context.palette(), 0, layout_box().dom_node().max(), layout_box().dom_node().value(), ""sv);
+        auto progress_rect = absolute_rect().to_rounded<int>();
+        auto frame_thickness = min(min(progress_rect.width(), progress_rect.height()) / 6, 3);
+        Gfx::StylePainter::paint_progressbar(context.painter(), progress_rect.shrunken(frame_thickness, frame_thickness), context.palette(), 0, round_to<int>(layout_box().dom_node().max()), round_to<int>(layout_box().dom_node().value()), ""sv);
+        Gfx::StylePainter::paint_frame(context.painter(), progress_rect, context.palette(), Gfx::FrameShape::Box, Gfx::FrameShadow::Raised, frame_thickness);
     }
 }