mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-12-08 06:09:58 +00:00
66263f142b
Before this change, we've been maintaining various StyleComputer caches at the document level. This made sense for old-school documents without shadow trees, since all the style information was document-wide anyway. However, documents with many shadow trees ended up suffering since any time you mutated a style sheet inside a shadow tree, *all* style caches for the entire document would get invalidated. This was particularly expensive on Reddit, which has tons of shadow trees with their own style elements. Every time we'd create one of their custom elements, we'd invalidate the document-level "rule cache" and have to rebuild it, taking about ~60ms each time (ouch). This commit introduces a new object called StyleScope. Every Document and ShadowRoot has its own StyleScope. Rule caches etc are moved from StyleComputer to StyleScope. Rule cache invalidation now happens at StyleScope level. As an example, rule cache rebuilds now take ~1ms on Reddit instead of ~60ms. This is largely a mechanical change, moving things around, but there's one key detail to be aware of: due to the :host selector, which works across the shadow DOM boundary and reaches from inside a shadow tree out into the light tree, there are various places where we have to check both the shadow tree's StyleScope *and* the document-level StyleScope in order to get all rules that may apply.
80 lines
2.2 KiB
C++
80 lines
2.2 KiB
C++
/*
|
|
* Copyright (c) 2024, Sam Atkins <sam@ladybird.org>
|
|
*
|
|
* SPDX-License-Identifier: BSD-2-Clause
|
|
*/
|
|
|
|
#include "CSSLayerBlockRule.h"
|
|
#include <LibWeb/Bindings/CSSLayerBlockRulePrototype.h>
|
|
#include <LibWeb/Bindings/Intrinsics.h>
|
|
#include <LibWeb/CSS/Serialize.h>
|
|
|
|
namespace Web::CSS {
|
|
|
|
GC_DEFINE_ALLOCATOR(CSSLayerBlockRule);
|
|
|
|
GC::Ref<CSSLayerBlockRule> CSSLayerBlockRule::create(JS::Realm& realm, FlyString name, CSSRuleList& rules)
|
|
{
|
|
return realm.create<CSSLayerBlockRule>(realm, move(name), rules);
|
|
}
|
|
|
|
FlyString CSSLayerBlockRule::next_unique_anonymous_layer_name()
|
|
{
|
|
static u64 s_anonymous_layer_id = 0;
|
|
return MUST(String::formatted("#{}", ++s_anonymous_layer_id));
|
|
}
|
|
|
|
CSSLayerBlockRule::CSSLayerBlockRule(JS::Realm& realm, FlyString name, CSSRuleList& rules)
|
|
: CSSGroupingRule(realm, rules, Type::LayerBlock)
|
|
, m_name(move(name))
|
|
{
|
|
if (m_name.is_empty()) {
|
|
m_name_internal = next_unique_anonymous_layer_name();
|
|
} else {
|
|
m_name_internal = m_name;
|
|
}
|
|
}
|
|
|
|
void CSSLayerBlockRule::initialize(JS::Realm& realm)
|
|
{
|
|
WEB_SET_PROTOTYPE_FOR_INTERFACE(CSSLayerBlockRule);
|
|
Base::initialize(realm);
|
|
}
|
|
|
|
String CSSLayerBlockRule::serialized() const
|
|
{
|
|
// AD-HOC: No spec yet, so this is based on the @media serialization algorithm.
|
|
StringBuilder builder;
|
|
builder.append("@layer"sv);
|
|
if (!m_name.is_empty())
|
|
builder.appendff(" {}", m_name);
|
|
|
|
builder.append(" {\n"sv);
|
|
// AD-HOC: All modern browsers omit the ending newline if there are no CSS rules, so let's do the same.
|
|
if (css_rules().length() == 0) {
|
|
builder.append('}');
|
|
return builder.to_string_without_validation();
|
|
}
|
|
|
|
for (size_t i = 0; i < css_rules().length(); i++) {
|
|
auto rule = css_rules().item(i);
|
|
if (i != 0)
|
|
builder.append("\n"sv);
|
|
builder.append(" "sv);
|
|
builder.append(rule->css_text());
|
|
}
|
|
|
|
builder.append("\n}"sv);
|
|
|
|
return builder.to_string_without_validation();
|
|
}
|
|
|
|
FlyString CSSLayerBlockRule::internal_qualified_name(Badge<StyleScope>) const
|
|
{
|
|
auto const& parent_name = parent_layer_internal_qualified_name();
|
|
if (parent_name.is_empty())
|
|
return m_name_internal;
|
|
return MUST(String::formatted("{}.{}", parent_name, m_name_internal));
|
|
}
|
|
|
|
}
|