RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 23:27:35 +00:00
Code Issues Activity Actions

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

11
Userland/Applications/Browser/InspectorWidget.cpp
View file

@ -46,12 +46,19 @@ void InspectorWidget::set_selection(GUI::ModelIndex const index)
auto* json = static_cast<JsonObject const*>(index.internal_data());
VERIFY(json);
Selection selection { json->get("id").to_i32() };
Selection selection {};
if (json->has_u32("pseudo-element")) {
selection.dom_node_id = json->get("parent-id").to_i32();
selection.pseudo_element = static_cast<Web::CSS::Selector::PseudoElement>(json->get("pseudo-element").to_u32());
} else {
selection.dom_node_id = json->get("id").to_i32();
}
if (selection == m_selection)
return;
m_selection = move(selection);
auto maybe_inspected_node_properties = m_web_view->inspect_dom_node(m_inspected_node_id);
auto maybe_inspected_node_properties = m_web_view->inspect_dom_node(m_selection.dom_node_id, m_selection.pseudo_element);
if (maybe_inspected_node_properties.has_value()) {
auto inspected_node_properties = maybe_inspected_node_properties.value();
load_style_json(inspected_node_properties.specified_values_json, inspected_node_properties.computed_values_json, inspected_node_properties.custom_properties_json);

6
Userland/Applications/Browser/InspectorWidget.h
View file

@ -10,6 +10,7 @@
#include "ElementSizePreviewWidget.h"
#include <LibGUI/Widget.h>
#include <LibWeb/CSS/Selector.h>
#include <LibWeb/Forward.h>
#include <LibWeb/Layout/BoxModelMetrics.h>
@ -20,14 +21,17 @@ class InspectorWidget final : public GUI::Widget {
public:
struct Selection {
i32 dom_node_id { 0 };
Optional<Web::CSS::Selector::PseudoElement> pseudo_element {};
bool operator==(Selection const& other) const
{
return dom_node_id == other.dom_node_id;
return dom_node_id == other.dom_node_id && pseudo_element == other.pseudo_element;
}
String to_string() const
{
if (pseudo_element.has_value())
return String::formatted("id: {}, pseudo: {}", dom_node_id, Web::CSS::pseudo_element_name(pseudo_element.value()));
return String::formatted("id: {}", dom_node_id);
}
};