mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-08-22 02:09:24 +00:00
LibWeb: Split StyleComputer work into two phases with separate outputs
Before this change, StyleComputer would essentially take a DOM element, find all the CSS rules that apply to it, and resolve the computed value for each CSS property for that element. This worked great, but it meant we had to do all the work of selector matching and cascading every time. To enable new optimizations, this change introduces a break in the middle of this process where we've produced a "CascadedProperties". This object contains the result of the cascade, before we've begun turning cascaded values into computed values. The cascaded properties are now stored with each element, which will later allow us to do partial updates without re-running the full StyleComputer machine. This will be particularly valuable for re-implementing CSS inheritance, which is extremely heavy today. Note that CSS animations and CSS transitions operate entirely on the computed values, even though the cascade order would have you believe they happen earlier. I'm not confident we have the right architecture for this, but that's a separate issue.
This commit is contained in:
parent
4d9f17eddf
commit
ed7f4664c2
Notes:
github-actions[bot]
2024-12-22 09:14:00 +00:00
Author: https://github.com/awesomekling
Commit: ed7f4664c2
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2995
60 changed files with 663 additions and 385 deletions
|
@ -101,8 +101,10 @@ void Element::visit_edges(Cell::Visitor& visitor)
|
|||
visitor.visit(m_class_list);
|
||||
visitor.visit(m_shadow_root);
|
||||
visitor.visit(m_custom_element_definition);
|
||||
visitor.visit(m_cascaded_properties);
|
||||
if (m_pseudo_element_data) {
|
||||
for (auto& pseudo_element : *m_pseudo_element_data) {
|
||||
visitor.visit(pseudo_element.cascaded_properties);
|
||||
visitor.visit(pseudo_element.layout_node);
|
||||
}
|
||||
}
|
||||
|
@ -2273,6 +2275,28 @@ size_t Element::attribute_list_size() const
|
|||
return m_attributes->length();
|
||||
}
|
||||
|
||||
GC::Ptr<CSS::CascadedProperties> Element::cascaded_properties(Optional<CSS::Selector::PseudoElement::Type> pseudo_element) const
|
||||
{
|
||||
if (pseudo_element.has_value()) {
|
||||
auto pseudo_element_data = get_pseudo_element(pseudo_element.value());
|
||||
if (pseudo_element_data.has_value())
|
||||
return pseudo_element_data->cascaded_properties;
|
||||
return nullptr;
|
||||
}
|
||||
return m_cascaded_properties;
|
||||
}
|
||||
|
||||
void Element::set_cascaded_properties(Optional<CSS::Selector::PseudoElement::Type> pseudo_element, GC::Ptr<CSS::CascadedProperties> cascaded_properties)
|
||||
{
|
||||
if (pseudo_element.has_value()) {
|
||||
if (pseudo_element.value() >= CSS::Selector::PseudoElement::Type::KnownPseudoElementCount)
|
||||
return;
|
||||
ensure_pseudo_element(pseudo_element.value()).cascaded_properties = cascaded_properties;
|
||||
} else {
|
||||
m_cascaded_properties = cascaded_properties;
|
||||
}
|
||||
}
|
||||
|
||||
void Element::set_computed_css_values(Optional<CSS::StyleProperties> style)
|
||||
{
|
||||
m_computed_css_values = move(style);
|
||||
|
|
|
@ -13,6 +13,7 @@
|
|||
#include <LibWeb/Bindings/ElementPrototype.h>
|
||||
#include <LibWeb/Bindings/Intrinsics.h>
|
||||
#include <LibWeb/Bindings/ShadowRootPrototype.h>
|
||||
#include <LibWeb/CSS/CascadedProperties.h>
|
||||
#include <LibWeb/CSS/CountersSet.h>
|
||||
#include <LibWeb/CSS/Selector.h>
|
||||
#include <LibWeb/CSS/StyleInvalidation.h>
|
||||
|
@ -172,7 +173,7 @@ public:
|
|||
// https://html.spec.whatwg.org/multipage/embedded-content-other.html#dimension-attributes
|
||||
virtual bool supports_dimension_attributes() const { return false; }
|
||||
|
||||
virtual void apply_presentational_hints(CSS::StyleProperties&) const { }
|
||||
virtual void apply_presentational_hints(GC::Ref<CSS::CascadedProperties>) const { }
|
||||
|
||||
void run_attribute_change_steps(FlyString const& local_name, Optional<String> const& old_value, Optional<String> const& value, Optional<FlyString> const& namespace_);
|
||||
|
||||
|
@ -189,6 +190,9 @@ public:
|
|||
void set_computed_css_values(Optional<CSS::StyleProperties>);
|
||||
CSS::StyleProperties resolved_css_values(Optional<CSS::Selector::PseudoElement::Type> = {});
|
||||
|
||||
[[nodiscard]] GC::Ptr<CSS::CascadedProperties> cascaded_properties(Optional<CSS::Selector::PseudoElement::Type>) const;
|
||||
void set_cascaded_properties(Optional<CSS::Selector::PseudoElement::Type>, GC::Ptr<CSS::CascadedProperties>);
|
||||
|
||||
void set_pseudo_element_computed_css_values(CSS::Selector::PseudoElement::Type, Optional<CSS::StyleProperties>);
|
||||
Optional<CSS::StyleProperties&> pseudo_element_computed_css_values(CSS::Selector::PseudoElement::Type);
|
||||
|
||||
|
@ -410,11 +414,14 @@ private:
|
|||
GC::Ptr<DOMTokenList> m_class_list;
|
||||
GC::Ptr<ShadowRoot> m_shadow_root;
|
||||
|
||||
GC::Ptr<CSS::CascadedProperties> m_cascaded_properties;
|
||||
|
||||
Optional<CSS::StyleProperties> m_computed_css_values;
|
||||
HashMap<FlyString, CSS::StyleProperty> m_custom_properties;
|
||||
|
||||
struct PseudoElement {
|
||||
GC::Ptr<Layout::NodeWithStyle> layout_node;
|
||||
GC::Ptr<CSS::CascadedProperties> cascaded_properties;
|
||||
Optional<CSS::StyleProperties> computed_css_values;
|
||||
HashMap<FlyString, CSS::StyleProperty> custom_properties;
|
||||
};
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue