LibWeb: Grey out invisible nodes in the DOM inspector

This makes it easier to navigate large DOM trees where
some nodes have display: none

2 files changed, 4 insertions, 0 deletions

diff --git a/Userland/Libraries/LibWeb/DOM/Node.cpp b/Userland/Libraries/LibWeb/DOM/Node.cpp
index 364c4ea69c..71220abf93 100644
--- a/Userland/Libraries/LibWeb/DOM/Node.cpp
+++ b/Userland/Libraries/LibWeb/DOM/Node.cpp
@@ -793,6 +793,8 @@ void Node::serialize_tree_as_json(JsonObjectSerializer<StringBuilder>& object) c
         MUST(object.add("data"sv, static_cast<DOM::Comment const&>(*this).data()));
     }
 
+    MUST((object.add("visible"sv, !!layout_node())));
+
     if (has_child_nodes()) {
         auto children = MUST(object.add_array("children"));
         for_each_child([&children](DOM::Node& child) {
diff --git a/Userland/Libraries/LibWeb/DOMTreeModel.cpp b/Userland/Libraries/LibWeb/DOMTreeModel.cpp
index cd8a9302f5..dbfca80b34 100644
--- a/Userland/Libraries/LibWeb/DOMTreeModel.cpp
+++ b/Userland/Libraries/LibWeb/DOMTreeModel.cpp
@@ -126,6 +126,8 @@ GUI::Variant DOMTreeModel::data(const GUI::ModelIndex& index, GUI::ModelRole rol
             return m_tree_view.palette().syntax_comment();
         if (type == "pseudo-element"sv)
             return m_tree_view.palette().syntax_type();
+        if (!node.get("visible").to_bool(true))
+            return m_tree_view.palette().syntax_comment();
         return {};
     }