mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-08-08 01:00:05 +00:00
LibWeb: Implement progress/range-input accent color in CSS
The `AccentColor` keyword does this in a simpler way, and allows authors to override it.
This commit is contained in:
parent
3ebdb64fed
commit
4c3c907041
Notes:
github-actions[bot]
2025-03-19 10:11:10 +00:00
Author: https://github.com/AtkinsSJ
Commit: 4c3c907041
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3991
5 changed files with 3 additions and 32 deletions
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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; }
|
||||||
|
|
|
@ -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));
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue