mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-08-08 01:00:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Implement progress/range-input accent color in CSS

Browse source 
The `AccentColor` keyword does this in a simpler way, and allows authors
to override it.
This commit is contained in:
Sam Atkins 2025-03-18 16:03:06 +00:00
commit 4c3c907041
Notes: github-actions[bot] 2025-03-19 10:11:10 +00:00
5 changed files with 3 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

3
Libraries/LibWeb/CSS/Default.css
View file

@ -93,6 +93,7 @@ input[type=range] {
display: block; display: block;
position: absolute; position: absolute;
height: 100%; height: 100%;
background-color: AccentColor;
} }
&::thumb { &::thumb {
@ -104,6 +105,7 @@ input[type=range] {
border-radius: 50%; border-radius: 50%;
outline: 1px solid rgba(0, 0, 0, 0.5); outline: 1px solid rgba(0, 0, 0, 0.5);
z-index: 1; z-index: 1;
background-color: AccentColor;
} }
} }
@ -155,6 +157,7 @@ progress {
&::fill { &::fill {
display: block; display: block;
height: 100%; height: 100%;
background-color: AccentColor;
} }
} }

18
Libraries/LibWeb/HTML/HTMLInputElement.cpp
View file

@ -1276,24 +1276,6 @@ void HTMLInputElement::create_range_input_shadow_tree()
add_event_listener_without_options(UIEvents::EventNames::mousedown, DOM::IDLEventListener::create(realm(), mousedown_callback)); add_event_listener_without_options(UIEvents::EventNames::mousedown, DOM::IDLEventListener::create(realm(), mousedown_callback));
} }
void HTMLInputElement::computed_properties_changed()
{
auto appearance = computed_properties()->appearance();
if (appearance == CSS::Appearance::None)
return;
auto accent_color = MUST(String::from_utf8(CSS::string_from_keyword(CSS::Keyword::Accentcolor)));
auto const& accent_color_property = computed_properties()->property(CSS::PropertyID::AccentColor);
if (accent_color_property.has_color())
accent_color = accent_color_property.to_string(CSS::CSSStyleValue::SerializationMode::Normal);
if (m_slider_progress_element)
MUST(m_slider_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() void HTMLInputElement::user_interaction_did_change_input_value()
{ {
// https://html.spec.whatwg.org/multipage/input.html#common-input-element-events // https://html.spec.whatwg.org/multipage/input.html#common-input-element-events

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

@ -268,7 +268,6 @@ private:
// ^DOM::Element // ^DOM::Element
virtual i32 default_tab_index_value() const override; virtual i32 default_tab_index_value() const override;
virtual void computed_properties_changed() override;
// https://html.spec.whatwg.org/multipage/input.html#image-button-state-(type=image):dimension-attributes // 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; } virtual bool supports_dimension_attributes() const override { return type_state() == TypeAttributeState::ImageButton; }

12
Libraries/LibWeb/HTML/HTMLProgressElement.cpp
View file

@ -133,16 +133,4 @@ void HTMLProgressElement::update_progress_value_element()
MUST(m_progress_value_element->style_for_bindings()->set_property(CSS::PropertyID::Width, MUST(String::formatted("{}%", position() * 100)))); MUST(m_progress_value_element->style_for_bindings()->set_property(CSS::PropertyID::Width, MUST(String::formatted("{}%", position() * 100))));
} }
void HTMLProgressElement::computed_properties_changed()
{
auto accent_color = MUST(String::from_utf8(CSS::string_from_keyword(CSS::Keyword::Accentcolor)));
auto const& accent_color_property = computed_properties()->property(CSS::PropertyID::AccentColor);
if (accent_color_property.has_color())
accent_color = accent_color_property.to_string(Web::CSS::CSSStyleValue::SerializationMode::Normal);
if (m_progress_value_element)
MUST(m_progress_value_element->style_for_bindings()->set_property(CSS::PropertyID::BackgroundColor, accent_color));
}
} }

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

@ -44,7 +44,6 @@ private:
// ^DOM::Node // ^DOM::Node
virtual bool is_html_progress_element() const final { return true; } virtual bool is_html_progress_element() const final { return true; }
virtual void computed_properties_changed() override;
virtual void initialize(JS::Realm&) override; virtual void initialize(JS::Realm&) override;
virtual void visit_edges(Cell::Visitor&) override; virtual void visit_edges(Cell::Visitor&) override;