0ct0pu5/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

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

Browse source 
Fixes #466
This commit is contained in:
simonkrauter 2024-07-11 17:47:25 -03:00 • committed by Sam Atkins
parent 5c315b532e
commit 9df8e1f224
Notes: sideshowbarker 2024-07-17 03:00:02 +09:00
5 changed files with 32 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
Userland/Libraries/LibWeb/CSS/Default.css
View file

@ -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

16
Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp
View file

@ -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

1
Userland/Libraries/LibWeb/HTML/HTMLInputElement.h
View file

@ -212,6 +212,7 @@ private:
// ^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; }

15
Userland/Libraries/LibWeb/HTML/HTMLProgressElement.cpp
View file

@ -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));
}
}

1
Userland/Libraries/LibWeb/HTML/HTMLProgressElement.h
View file

@ -42,6 +42,7 @@ private:
// ^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;