LibWeb: Support accent-color for range input and progress element

Fixes #466
LadybirdBrowser · Jul 15, 2024 · 9df8e1f · 9df8e1f
1 parent 5c315b5
commit 9df8e1f
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;