LibWeb: Re-implement checkbox painting using the UA stylesheet

The checkbox provided by ClassicStylePainter is not scaling-aware and
generally unflexible, instead use the UA default stylesheet with a
handful of properties, the same way we already style buttons and text
inputs.

Thanks to Xexxa for the nice checkmark image!

Co-Authored-By: Xexxa <93391300+Xexxa@users.noreply.github.com>

3 files changed, 19 insertions, 15 deletions

diff --git a/Userland/Libraries/LibWeb/CSS/Default.css b/Userland/Libraries/LibWeb/CSS/Default.css
index c42ad12640..7baf6dfc2c 100644
--- a/Userland/Libraries/LibWeb/CSS/Default.css
+++ b/Userland/Libraries/LibWeb/CSS/Default.css
@@ -64,6 +64,25 @@ button:hover, input[type=submit]:hover, input[type=button]:hover, input[type=res
     background-color: -libweb-palette-hover-highlight;
 }
 
+input[type=checkbox] {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    margin: 2px;
+    border: 1px solid -libweb-palette-threed-shadow1;
+}
+
+input[type=checkbox]:checked {
+    /*
+    This roughly resembles ClassicStylePainter's paint_check_box() while uncoupling the styling from LibGfx, similar to
+    <button> above. This is a simple checkmark that still looks ok at 2x scale.
+    Eventually we should respect the `accent-color` property here, which may require going back to an implementation via
+    CheckBoxPaintable::paint().
+    */
+    image-rendering: pixelated;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAABHNCSVQICAgIfAhkiAAAAEhJREFUKFNjYBgs4D/MIYxEuAiuGKiWkZAGFMUgw5mQbECWBAljKAYJwmxAl0Tnw81FdhK6DcgGYtWA0xlw1TgY2GzCoZQWwgCU1woFwvnCFQAAAABJRU5ErkJggg==);
+}
+
 option {
     display: none;
 }
diff --git a/Userland/Libraries/LibWeb/Painting/CheckBoxPaintable.cpp b/Userland/Libraries/LibWeb/Painting/CheckBoxPaintable.cpp
index b566a4d2b2..22c95bdf8d 100644
--- a/Userland/Libraries/LibWeb/Painting/CheckBoxPaintable.cpp
+++ b/Userland/Libraries/LibWeb/Painting/CheckBoxPaintable.cpp
@@ -5,7 +5,6 @@
  */
 
 #include <LibGUI/Event.h>
-#include <LibGfx/StylePainter.h>
 #include <LibWeb/HTML/BrowsingContext.h>
 #include <LibWeb/HTML/HTMLImageElement.h>
 #include <LibWeb/Layout/CheckBox.h>
@@ -34,16 +33,4 @@ Layout::CheckBox& CheckBoxPaintable::layout_box()
     return static_cast<Layout::CheckBox&>(layout_node());
 }
 
-void CheckBoxPaintable::paint(PaintContext& context, PaintPhase phase) const
-{
-    if (!is_visible())
-        return;
-
-    PaintableBox::paint(context, phase);
-
-    auto const& checkbox = static_cast<HTML::HTMLInputElement const&>(layout_box().dom_node());
-    if (phase == PaintPhase::Foreground)
-        Gfx::StylePainter::paint_check_box(context.painter(), context.enclosing_device_rect(absolute_rect()).to_type<int>(), context.palette(), layout_box().dom_node().enabled(), checkbox.checked(), being_pressed());
-}
-
 }
diff --git a/Userland/Libraries/LibWeb/Painting/CheckBoxPaintable.h b/Userland/Libraries/LibWeb/Painting/CheckBoxPaintable.h
index 262ad8eade..4c1a91e34d 100644
--- a/Userland/Libraries/LibWeb/Painting/CheckBoxPaintable.h
+++ b/Userland/Libraries/LibWeb/Painting/CheckBoxPaintable.h
@@ -17,8 +17,6 @@ class CheckBoxPaintable final : public LabelablePaintable {
 public:
     static JS::NonnullGCPtr<CheckBoxPaintable> create(Layout::CheckBox const&);
 
-    virtual void paint(PaintContext&, PaintPhase) const override;
-
     Layout::CheckBox const& layout_box() const;
     Layout::CheckBox& layout_box();