mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 11:27:35 +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:
parent
2c970b9516
commit
0326ad34df
9 changed files with 69 additions and 20 deletions
|
@ -182,22 +182,39 @@ void DOMTreeModel::map_dom_nodes_to_parent(JsonObject const* parent, JsonObject
|
|||
});
|
||||
}
|
||||
|
||||
GUI::ModelIndex DOMTreeModel::index_for_node(i32 node_id) const
|
||||
GUI::ModelIndex DOMTreeModel::index_for_node(i32 node_id, Optional<Web::CSS::Selector::PseudoElement> pseudo_element) const
|
||||
{
|
||||
auto node = m_node_id_to_dom_node_map.get(node_id).value_or(nullptr);
|
||||
if (node) {
|
||||
auto* parent = get_parent(*node);
|
||||
if (!parent)
|
||||
return {};
|
||||
auto parent_children = get_children(*parent);
|
||||
for (size_t i = 0; i < parent_children->size(); i++) {
|
||||
if (&parent_children->at(i).as_object() == node) {
|
||||
return create_index(i, 0, node);
|
||||
if (pseudo_element.has_value()) {
|
||||
// Find pseudo-element child of the node.
|
||||
auto node_children = get_children(*node);
|
||||
for (size_t i = 0; i < node_children->size(); i++) {
|
||||
auto& child = node_children->at(i).as_object();
|
||||
if (!child.has("pseudo-element"))
|
||||
continue;
|
||||
|
||||
auto child_pseudo_element = child.get("pseudo-element");
|
||||
if (!child_pseudo_element.is_i32())
|
||||
continue;
|
||||
|
||||
if (child_pseudo_element.as_i32() == to_underlying(pseudo_element.value()))
|
||||
return create_index(i, 0, &child);
|
||||
}
|
||||
} else {
|
||||
auto* parent = get_parent(*node);
|
||||
if (!parent)
|
||||
return {};
|
||||
auto parent_children = get_children(*parent);
|
||||
for (size_t i = 0; i < parent_children->size(); i++) {
|
||||
if (&parent_children->at(i).as_object() == node) {
|
||||
return create_index(i, 0, node);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dbgln("Didn't find index for node {}!", node_id);
|
||||
dbgln("Didn't find index for node {}, pseudo-element {}!", node_id, pseudo_element.has_value() ? CSS::pseudo_element_name(pseudo_element.value()) : "NONE");
|
||||
return {};
|
||||
}
|
||||
|
||||
|
|
|
@ -10,6 +10,7 @@
|
|||
#include <AK/HashMap.h>
|
||||
#include <AK/JsonObject.h>
|
||||
#include <LibGUI/Model.h>
|
||||
#include <LibWeb/CSS/Selector.h>
|
||||
#include <LibWeb/Forward.h>
|
||||
|
||||
namespace Web {
|
||||
|
@ -30,7 +31,7 @@ public:
|
|||
virtual GUI::ModelIndex index(int row, int column, const GUI::ModelIndex& parent = GUI::ModelIndex()) const override;
|
||||
virtual GUI::ModelIndex parent_index(const GUI::ModelIndex&) const override;
|
||||
|
||||
GUI::ModelIndex index_for_node(i32 node_id) const;
|
||||
GUI::ModelIndex index_for_node(i32 node_id, Optional<Web::CSS::Selector::PseudoElement> pseudo_element) const;
|
||||
|
||||
private:
|
||||
DOMTreeModel(JsonObject, GUI::TreeView&);
|
||||
|
|
|
@ -439,9 +439,9 @@ void OutOfProcessWebView::inspect_dom_tree()
|
|||
client().async_inspect_dom_tree();
|
||||
}
|
||||
|
||||
Optional<OutOfProcessWebView::DOMNodeProperties> OutOfProcessWebView::inspect_dom_node(i32 node_id)
|
||||
Optional<OutOfProcessWebView::DOMNodeProperties> OutOfProcessWebView::inspect_dom_node(i32 node_id, Optional<CSS::Selector::PseudoElement> pseudo_element)
|
||||
{
|
||||
auto response = client().inspect_dom_node(node_id);
|
||||
auto response = client().inspect_dom_node(node_id, pseudo_element);
|
||||
if (!response.has_style())
|
||||
return {};
|
||||
return DOMNodeProperties {
|
||||
|
@ -454,7 +454,7 @@ Optional<OutOfProcessWebView::DOMNodeProperties> OutOfProcessWebView::inspect_do
|
|||
|
||||
void OutOfProcessWebView::clear_inspected_dom_node()
|
||||
{
|
||||
client().inspect_dom_node(0);
|
||||
client().inspect_dom_node(0, {});
|
||||
}
|
||||
|
||||
i32 OutOfProcessWebView::get_hovered_node_id()
|
||||
|
|
|
@ -9,6 +9,7 @@
|
|||
#include <AK/URL.h>
|
||||
#include <LibGUI/AbstractScrollableWidget.h>
|
||||
#include <LibGUI/Widget.h>
|
||||
#include <LibWeb/CSS/Selector.h>
|
||||
#include <LibWeb/Page/Page.h>
|
||||
#include <LibWeb/WebViewHooks.h>
|
||||
|
||||
|
@ -40,7 +41,7 @@ public:
|
|||
String custom_properties_json;
|
||||
String node_box_sizing_json;
|
||||
};
|
||||
Optional<DOMNodeProperties> inspect_dom_node(i32 node_id);
|
||||
Optional<DOMNodeProperties> inspect_dom_node(i32 node_id, Optional<CSS::Selector::PseudoElement>);
|
||||
void clear_inspected_dom_node();
|
||||
i32 get_hovered_node_id();
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue