1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 20:07:34 +00:00

Browser+LibWeb+WebContent: Show style for pseudo-elements :^)

This expands the InspectorWidget::Selection to include an optional
PseudoElement, which is then passed over IPC to request style
information for it.

As noted, this has some pretty big limitations because pseudo-elements
don't have DOM nodes:
- Declared style has to be recalculated when it's requested.
- We don't display the computed style.
- We don't display custom properties.
This commit is contained in:
Sam Atkins 2022-03-04 16:29:05 +00:00 committed by Andreas Kling
parent 2c970b9516
commit 0326ad34df
9 changed files with 69 additions and 20 deletions

View file

@ -245,7 +245,7 @@ void ConnectionFromClient::inspect_dom_tree()
}
}
Messages::WebContentServer::InspectDomNodeResponse ConnectionFromClient::inspect_dom_node(i32 node_id)
Messages::WebContentServer::InspectDomNodeResponse ConnectionFromClient::inspect_dom_node(i32 node_id, Optional<Web::CSS::Selector::PseudoElement> const& pseudo_element)
{
auto& top_context = page().top_level_browsing_context();
@ -261,6 +261,7 @@ Messages::WebContentServer::InspectDomNodeResponse ConnectionFromClient::inspect
return { false, "", "", "", "" };
}
// FIXME: Pass the pseudo-element here.
node->document().set_inspected_node(node);
if (node->is_element()) {
@ -326,6 +327,23 @@ Messages::WebContentServer::InspectDomNodeResponse ConnectionFromClient::inspect
MUST(serializer.finish());
return builder.to_string();
};
if (pseudo_element.has_value()) {
auto pseudo_element_node = element.get_pseudo_element_node(pseudo_element.value());
if (pseudo_element_node.is_null())
return { false, "", "", "", "" };
// 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().focused_context().active_document()->style_computer().compute_style(element, pseudo_element);
String specified_values_json = serialize_json(pseudo_element_style);
String computed_values_json = "{}";
String custom_properties_json = "{}";
String node_box_sizing_json = "{}";
return { true, specified_values_json, computed_values_json, custom_properties_json, node_box_sizing_json };
}
String specified_values_json = serialize_json(*element.specified_css_values());
String computed_values_json = serialize_json(element.computed_style());
String custom_properties_json = serialize_custom_properties_json(element);

View file

@ -55,7 +55,7 @@ private:
virtual void debug_request(String const&, String const&) override;
virtual void get_source() override;
virtual void inspect_dom_tree() override;
virtual Messages::WebContentServer::InspectDomNodeResponse inspect_dom_node(i32) override;
virtual Messages::WebContentServer::InspectDomNodeResponse inspect_dom_node(i32 node_id, Optional<Web::CSS::Selector::PseudoElement> const& pseudo_element) override;
virtual Messages::WebContentServer::GetHoveredNodeIdResponse get_hovered_node_id() override;
virtual Messages::WebContentServer::DumpLayoutTreeResponse dump_layout_tree() override;
virtual void set_content_filters(Vector<String> const&) override;

View file

@ -2,6 +2,7 @@
#include <LibCore/AnonymousBuffer.h>
#include <LibGfx/ShareableBitmap.h>
#include <LibWeb/CSS/PreferredColorScheme.h>
#include <LibWeb/CSS/Selector.h>
endpoint WebContentServer
{
@ -29,7 +30,7 @@ endpoint WebContentServer
debug_request(String request, String argument) =|
get_source() =|
inspect_dom_tree() =|
inspect_dom_node(i32 node_id) => (bool has_style, String specified_style, String computed_style, String custom_properties, String node_box_sizing)
inspect_dom_node(i32 node_id, Optional<Web::CSS::Selector::PseudoElement> pseudo_element) => (bool has_style, String specified_style, String computed_style, String custom_properties, String node_box_sizing)
get_hovered_node_id() => (i32 node_id)
js_console_input(String js_source) =|
js_console_request_messages(i32 start_index) =|