LibWeb+WebContent: Add inspect_dom_node() IPC call

This is the IPC version of `Document::set_inspected_node()`, using a
node ID.

We return the inspected node's style properties as JSON, so that the DOM
Inspector can immediately display them.

Userland/Libraries/LibWeb/OutOfProcessWebView.cpp

@@ -402,6 +402,22 @@ void OutOfProcessWebView::inspect_dom_tree()
     client().async_inspect_dom_tree();
 }
 
+Optional<OutOfProcessWebView::DOMNodeProperties> OutOfProcessWebView::inspect_dom_node(i32 node_id)
+{
+    auto response = client().inspect_dom_node(node_id);
+    if (!response.has_style())
+        return {};
+    return DOMNodeProperties {
+        .specified_values_json = response.specified_style(),
+        .computed_values_json = response.computed_style()
+    };
+}
+
+void OutOfProcessWebView::clear_inspected_dom_node()
+{
+    client().inspect_dom_node(0);
+}
+
 void OutOfProcessWebView::js_console_initialize()
 {
     client().async_js_console_initialize();

Userland/Libraries/LibWeb/OutOfProcessWebView.h

@@ -31,7 +31,15 @@ public:
 
     void debug_request(const String& request, const String& argument = {});
     void get_source();
+
     void inspect_dom_tree();
+    struct DOMNodeProperties {
+        String specified_values_json;
+        String computed_values_json;
+    };
+    Optional<DOMNodeProperties> inspect_dom_node(i32 node_id);
+    void clear_inspected_dom_node();
+
     void js_console_initialize();
     void js_console_input(const String& js_source);
 

Userland/Services/WebContent/ClientConnection.cpp

@@ -1,5 +1,6 @@
 /*
  * Copyright (c) 2020-2021, Andreas Kling <kling@serenityos.org>
+ * Copyright (c) 2021, Sam Atkins <atkinssj@gmail.com>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
@@ -223,6 +224,43 @@ void ClientConnection::inspect_dom_tree()
     }
 }
 
+Messages::WebContentServer::InspectDomNodeResponse ClientConnection::inspect_dom_node(i32 node_id)
+{
+    if (auto* doc = page().top_level_browsing_context().document()) {
+        Web::DOM::Node* node = Web::DOM::Node::from_id(node_id);
+        if (!node || (&node->document() != doc)) {
+            doc->set_inspected_node(nullptr);
+            return { false, "", "" };
+        }
+
+        doc->set_inspected_node(node);
+
+        if (node->is_element()) {
+            auto& element = verify_cast<Web::DOM::Element>(*node);
+            if (!element.specified_css_values())
+                return { false, "", "" };
+
+            auto serialize_json = [](Web::CSS::StyleProperties const& properties) -> String {
+                StringBuilder builder;
+
+                JsonObjectSerializer serializer(builder);
+                properties.for_each_property([&](auto property_id, auto& value) {
+                    serializer.add(Web::CSS::string_from_property_id(property_id), value.to_string());
+                });
+                serializer.finish();
+
+                return builder.to_string();
+            };
+
+            String specified_values_json = serialize_json(*element.specified_css_values());
+            String computed_values_json = serialize_json(element.computed_style());
+            return { true, specified_values_json, computed_values_json };
+        }
+    }
+
+    return { false, "", "" };
+}
+
 void ClientConnection::js_console_initialize()
 {
     if (auto* document = page().top_level_browsing_context().document()) {

Userland/Services/WebContent/ClientConnection.h

@@ -49,6 +49,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 void js_console_initialize() override;
     virtual void js_console_input(String const&) override;
     virtual void run_javascript(String const&) override;

Userland/Services/WebContent/WebContentServer.ipc

@@ -27,6 +27,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)
     js_console_initialize() =|
     js_console_input(String js_source) =|