From 9df8e1f22468884db353f55d10823cd3d15c511b Mon Sep 17 00:00:00 2001
From: simonkrauter <trustable@disroot.org>
Date: Thu, 11 Jul 2024 17:47:25 -0300
Subject: [PATCH] LibWeb: Support `accent-color` for range input and progress
 element

Fixes #466
---
 Userland/Libraries/LibWeb/CSS/Default.css        |  4 ----
 .../Libraries/LibWeb/HTML/HTMLInputElement.cpp   | 16 +++++++++++++++-
 .../Libraries/LibWeb/HTML/HTMLInputElement.h     |  1 +
 .../LibWeb/HTML/HTMLProgressElement.cpp          | 15 +++++++++++++++
 .../Libraries/LibWeb/HTML/HTMLProgressElement.h  |  1 +
 5 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/Userland/Libraries/LibWeb/CSS/Default.css b/Userland/Libraries/LibWeb/CSS/Default.css
index 6ece888bfe0..4d57cc5444b 100644
--- a/Userland/Libraries/LibWeb/CSS/Default.css
+++ b/Userland/Libraries/LibWeb/CSS/Default.css
@@ -100,7 +100,6 @@ input[type=range]::-webkit-slider-thumb {
     height: 16px;
     transform: translateX(-50%);
     border-radius: 50%;
-    background-color: AccentColor;
     outline: 1px solid rgba(0, 0, 0, 0.5);
     z-index: 1;
 }
@@ -143,9 +142,6 @@ progress::-webkit-progress-bar {
     background-color: Background;
     border: 1px solid rgba(0, 0, 0, 0.5);
 }
-progress::-webkit-progress-value {
-    background-color: AccentColor;
-}
 
 /* 15.3.1 Hidden elements
  * https://html.spec.whatwg.org/multipage/rendering.html#hidden-elements
diff --git a/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp b/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp
index 30313855556..371940ba070 100644
--- a/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp
+++ b/Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp
@@ -998,7 +998,6 @@ void HTMLInputElement::create_range_input_shadow_tree()
         display: block;
         position: absolute;
         height: 100%;
-        background-color: AccentColor;
     )~~~"_string));
     MUST(slider_runnable_track->append_child(*m_range_progress_element));
 
@@ -1087,6 +1086,21 @@ void HTMLInputElement::create_range_input_shadow_tree()
     add_event_listener_without_options(UIEvents::EventNames::mousedown, DOM::IDLEventListener::create(realm(), mousedown_callback));
 }
 
+void HTMLInputElement::computed_css_values_changed()
+{
+    auto palette = document().page().palette();
+    auto accent_color = palette.color(ColorRole::Accent).to_string();
+
+    auto accent_color_property = computed_css_values()->property(CSS::PropertyID::AccentColor);
+    if (accent_color_property->has_color())
+        accent_color = accent_color_property->to_string();
+
+    if (m_range_progress_element)
+        MUST(m_range_progress_element->style_for_bindings()->set_property(CSS::PropertyID::BackgroundColor, accent_color));
+    if (m_slider_thumb)
+        MUST(m_slider_thumb->style_for_bindings()->set_property(CSS::PropertyID::BackgroundColor, accent_color));
+}
+
 void HTMLInputElement::user_interaction_did_change_input_value()
 {
     // https://html.spec.whatwg.org/multipage/input.html#common-input-element-events
diff --git a/Userland/Libraries/LibWeb/HTML/HTMLInputElement.h b/Userland/Libraries/LibWeb/HTML/HTMLInputElement.h
index 139b8f2c226..bdf8a49367c 100644
--- a/Userland/Libraries/LibWeb/HTML/HTMLInputElement.h
+++ b/Userland/Libraries/LibWeb/HTML/HTMLInputElement.h
@@ -212,6 +212,7 @@ class HTMLInputElement final
 
     // ^DOM::Element
     virtual i32 default_tab_index_value() const override;
+    virtual void computed_css_values_changed() override;
 
     // https://html.spec.whatwg.org/multipage/input.html#image-button-state-(type=image):dimension-attributes
     virtual bool supports_dimension_attributes() const override { return type_state() == TypeAttributeState::ImageButton; }
diff --git a/Userland/Libraries/LibWeb/HTML/HTMLProgressElement.cpp b/Userland/Libraries/LibWeb/HTML/HTMLProgressElement.cpp
index 2af5bed8a08..e4f1ce5bfa2 100644
--- a/Userland/Libraries/LibWeb/HTML/HTMLProgressElement.cpp
+++ b/Userland/Libraries/LibWeb/HTML/HTMLProgressElement.cpp
@@ -7,12 +7,14 @@
  */
 
 #include <LibWeb/Bindings/HTMLProgressElementPrototype.h>
+#include <LibWeb/CSS/StyleProperties.h>
 #include <LibWeb/DOM/Document.h>
 #include <LibWeb/DOM/ElementFactory.h>
 #include <LibWeb/DOM/ShadowRoot.h>
 #include <LibWeb/HTML/HTMLProgressElement.h>
 #include <LibWeb/HTML/Numbers.h>
 #include <LibWeb/Namespace.h>
+#include <LibWeb/Page/Page.h>
 
 namespace Web::HTML {
 
@@ -119,4 +121,17 @@ void HTMLProgressElement::update_progress_value_element()
         MUST(m_progress_value_element->style_for_bindings()->set_property(CSS::PropertyID::Width, MUST(String::formatted("{}%", position() * 100))));
 }
 
+void HTMLProgressElement::computed_css_values_changed()
+{
+    auto palette = document().page().palette();
+    auto accent_color = palette.color(ColorRole::Accent).to_string();
+
+    auto accent_color_property = computed_css_values()->property(CSS::PropertyID::AccentColor);
+    if (accent_color_property->has_color())
+        accent_color = accent_color_property->to_string();
+
+    if (m_progress_value_element)
+        MUST(m_progress_value_element->style_for_bindings()->set_property(CSS::PropertyID::BackgroundColor, accent_color));
+}
+
 }
diff --git a/Userland/Libraries/LibWeb/HTML/HTMLProgressElement.h b/Userland/Libraries/LibWeb/HTML/HTMLProgressElement.h
index de8f266f83f..5bfc35e561b 100644
--- a/Userland/Libraries/LibWeb/HTML/HTMLProgressElement.h
+++ b/Userland/Libraries/LibWeb/HTML/HTMLProgressElement.h
@@ -42,6 +42,7 @@ class HTMLProgressElement final : public HTMLElement {
 
     // ^DOM::Node
     virtual bool is_html_progress_element() const final { return true; }
+    virtual void computed_css_values_changed() override;
 
     virtual void initialize(JS::Realm&) override;
     virtual void visit_edges(Cell::Visitor&) override;