Kaynağa Gözat

WebContent+LibWeb: Display resolved pseudo-element style in inspector

This also now uses the cached computed style for them, instead of
computing it fresh each time.
Sam Atkins 1 yıl önce
ebeveyn
işleme
4ec3968178

+ 2 - 2
Userland/Libraries/LibWeb/DOM/Element.cpp

@@ -607,9 +607,9 @@ CSS::RequiredInvalidationAfterStyleChange Element::recompute_style()
     return invalidation;
 }
 
-NonnullRefPtr<CSS::StyleProperties> Element::resolved_css_values()
+NonnullRefPtr<CSS::StyleProperties> Element::resolved_css_values(Optional<CSS::Selector::PseudoElement::Type> type)
 {
-    auto element_computed_style = CSS::ResolvedCSSStyleDeclaration::create(*this);
+    auto element_computed_style = CSS::ResolvedCSSStyleDeclaration::create(*this, type);
     auto properties = CSS::StyleProperties::create();
 
     for (auto i = to_underlying(CSS::first_property_id); i <= to_underlying(CSS::last_property_id); ++i) {

+ 1 - 1
Userland/Libraries/LibWeb/DOM/Element.h

@@ -186,7 +186,7 @@ public:
     CSS::StyleProperties* computed_css_values() { return m_computed_css_values.ptr(); }
     CSS::StyleProperties const* computed_css_values() const { return m_computed_css_values.ptr(); }
     void set_computed_css_values(RefPtr<CSS::StyleProperties>);
-    NonnullRefPtr<CSS::StyleProperties> resolved_css_values();
+    NonnullRefPtr<CSS::StyleProperties> resolved_css_values(Optional<CSS::Selector::PseudoElement::Type> = {});
 
     void set_pseudo_element_computed_css_values(CSS::Selector::PseudoElement::Type, RefPtr<CSS::StyleProperties>);
     RefPtr<CSS::StyleProperties> pseudo_element_computed_css_values(CSS::Selector::PseudoElement::Type);

+ 3 - 6
Userland/Services/WebContent/ConnectionFromClient.cpp

@@ -553,12 +553,9 @@ void ConnectionFromClient::inspect_dom_node(u64 page_id, i32 node_id, Optional<W
                 return;
             }
 
-            // FIXME: Pseudo-elements only exist as Layout::Nodes, which don't have style information
-            //        in a format we can use. So, we run the StyleComputer again to get the specified
-            //        values, and have to ignore the computed values and custom properties.
-            auto pseudo_element_style = page->page().focused_navigable().active_document()->style_computer().compute_style(element, pseudo_element);
-            ByteString computed_values = serialize_json(pseudo_element_style);
-            ByteString resolved_values = "{}";
+            auto pseudo_element_style = element.pseudo_element_computed_css_values(pseudo_element.value());
+            ByteString computed_values = serialize_json(*pseudo_element_style);
+            ByteString resolved_values = serialize_json(*element.resolved_css_values(pseudo_element.value()));
             ByteString custom_properties_json = serialize_custom_properties_json(element, pseudo_element);
             ByteString node_box_sizing_json = serialize_node_box_sizing_json(pseudo_element_node.ptr());