LibWeb: Don't compute full style for ::before/::after unless matched
Before this patch, we would build full computed style for these pseudo elements, for every DOM element, even if no ::before/::after selector actually matched. This was a colossal waste of time, and we can also just not do that. Instead, just abort pseudo element style resolution early if no relevant selectors matched. :^)
This commit is contained in:
parent
a58d84407f
commit
3e970540b4
Notes:
sideshowbarker
2024-07-17 07:09:53 +09:00
Author: https://github.com/awesomekling Commit: https://github.com/SerenityOS/serenity/commit/3e970540b4
3 changed files with 36 additions and 5 deletions
|
@ -867,7 +867,7 @@ static ErrorOr<void> cascade_custom_properties(DOM::Element& element, Vector<Mat
|
|||
}
|
||||
|
||||
// https://www.w3.org/TR/css-cascade/#cascading
|
||||
ErrorOr<void> StyleComputer::compute_cascaded_values(StyleProperties& style, DOM::Element& element, Optional<CSS::Selector::PseudoElement> pseudo_element) const
|
||||
ErrorOr<void> StyleComputer::compute_cascaded_values(StyleProperties& style, DOM::Element& element, Optional<CSS::Selector::PseudoElement> pseudo_element, bool& did_match_any_pseudo_element_rules) const
|
||||
{
|
||||
// First, we collect all the CSS rules whose selectors match `element`:
|
||||
MatchingRuleSet matching_rule_set;
|
||||
|
@ -876,6 +876,11 @@ ErrorOr<void> StyleComputer::compute_cascaded_values(StyleProperties& style, DOM
|
|||
matching_rule_set.author_rules = collect_matching_rules(element, CascadeOrigin::Author, pseudo_element);
|
||||
sort_matching_rules(matching_rule_set.author_rules);
|
||||
|
||||
if (pseudo_element.has_value() && matching_rule_set.author_rules.is_empty() && matching_rule_set.user_agent_rules.is_empty()) {
|
||||
did_match_any_pseudo_element_rules = false;
|
||||
return {};
|
||||
}
|
||||
|
||||
// Then we resolve all the CSS custom properties ("variables") for this element:
|
||||
// FIXME: Look into how custom properties should interact with pseudo elements and support that properly.
|
||||
if (!pseudo_element.has_value())
|
||||
|
@ -1400,12 +1405,27 @@ NonnullRefPtr<StyleProperties> StyleComputer::create_document_style() const
|
|||
}
|
||||
|
||||
ErrorOr<NonnullRefPtr<StyleProperties>> StyleComputer::compute_style(DOM::Element& element, Optional<CSS::Selector::PseudoElement> pseudo_element) const
|
||||
{
|
||||
auto style = TRY(compute_style_impl(element, move(pseudo_element), ComputeStyleMode::Normal));
|
||||
return style.release_nonnull();
|
||||
}
|
||||
|
||||
ErrorOr<RefPtr<StyleProperties>> StyleComputer::compute_pseudo_element_style_if_needed(DOM::Element& element, Optional<CSS::Selector::PseudoElement> pseudo_element) const
|
||||
{
|
||||
return compute_style_impl(element, move(pseudo_element), ComputeStyleMode::CreatePseudoElementStyleIfNeeded);
|
||||
}
|
||||
|
||||
ErrorOr<RefPtr<StyleProperties>> StyleComputer::compute_style_impl(DOM::Element& element, Optional<CSS::Selector::PseudoElement> pseudo_element, ComputeStyleMode mode) const
|
||||
{
|
||||
build_rule_cache_if_needed();
|
||||
|
||||
auto style = StyleProperties::create();
|
||||
// 1. Perform the cascade. This produces the "specified style"
|
||||
TRY(compute_cascaded_values(style, element, pseudo_element));
|
||||
bool did_match_any_pseudo_element_rules = false;
|
||||
TRY(compute_cascaded_values(style, element, pseudo_element, did_match_any_pseudo_element_rules));
|
||||
|
||||
if (mode == ComputeStyleMode::CreatePseudoElementStyleIfNeeded && !did_match_any_pseudo_element_rules)
|
||||
return nullptr;
|
||||
|
||||
// 2. Compute the font, since that may be needed for font-relative CSS units
|
||||
compute_font(style, &element, pseudo_element);
|
||||
|
|
|
@ -56,7 +56,9 @@ public:
|
|||
DOM::Document const& document() const { return m_document; }
|
||||
|
||||
NonnullRefPtr<StyleProperties> create_document_style() const;
|
||||
|
||||
ErrorOr<NonnullRefPtr<StyleProperties>> compute_style(DOM::Element&, Optional<CSS::Selector::PseudoElement> = {}) const;
|
||||
ErrorOr<RefPtr<StyleProperties>> compute_pseudo_element_style_if_needed(DOM::Element&, Optional<CSS::Selector::PseudoElement>) const;
|
||||
|
||||
// https://www.w3.org/TR/css-cascade/#origin
|
||||
enum class CascadeOrigin {
|
||||
|
@ -78,7 +80,13 @@ public:
|
|||
void load_fonts_from_sheet(CSSStyleSheet const&);
|
||||
|
||||
private:
|
||||
ErrorOr<void> compute_cascaded_values(StyleProperties&, DOM::Element&, Optional<CSS::Selector::PseudoElement>) const;
|
||||
enum class ComputeStyleMode {
|
||||
Normal,
|
||||
CreatePseudoElementStyleIfNeeded,
|
||||
};
|
||||
|
||||
ErrorOr<RefPtr<StyleProperties>> compute_style_impl(DOM::Element&, Optional<CSS::Selector::PseudoElement>, ComputeStyleMode) const;
|
||||
ErrorOr<void> compute_cascaded_values(StyleProperties&, DOM::Element&, Optional<CSS::Selector::PseudoElement>, bool& did_match_any_pseudo_element_rules) const;
|
||||
void compute_font(StyleProperties&, DOM::Element const*, Optional<CSS::Selector::PseudoElement>) const;
|
||||
void compute_defaulted_values(StyleProperties&, DOM::Element const*, Optional<CSS::Selector::PseudoElement>) const;
|
||||
void absolutize_values(StyleProperties&, DOM::Element const*, Optional<CSS::Selector::PseudoElement>) const;
|
||||
|
|
|
@ -154,7 +154,10 @@ ErrorOr<void> TreeBuilder::create_pseudo_element_if_needed(DOM::Element& element
|
|||
auto& document = element.document();
|
||||
auto& style_computer = document.style_computer();
|
||||
|
||||
auto pseudo_element_style = TRY(style_computer.compute_style(element, pseudo_element));
|
||||
auto pseudo_element_style = TRY(style_computer.compute_pseudo_element_style_if_needed(element, pseudo_element));
|
||||
if (!pseudo_element_style)
|
||||
return {};
|
||||
|
||||
auto pseudo_element_content = pseudo_element_style->content();
|
||||
auto pseudo_element_display = pseudo_element_style->display();
|
||||
// ::before and ::after only exist if they have content. `content: normal` computes to `none` for them.
|
||||
|
@ -164,7 +167,7 @@ ErrorOr<void> TreeBuilder::create_pseudo_element_if_needed(DOM::Element& element
|
|||
|| pseudo_element_content.type == CSS::ContentData::Type::None)
|
||||
return {};
|
||||
|
||||
auto pseudo_element_node = DOM::Element::create_layout_node_for_display_type(document, pseudo_element_display, pseudo_element_style, nullptr);
|
||||
auto pseudo_element_node = DOM::Element::create_layout_node_for_display_type(document, pseudo_element_display, *pseudo_element_style, nullptr);
|
||||
if (!pseudo_element_node)
|
||||
return {};
|
||||
|
||||
|
|
Loading…
Add table
Reference in a new issue