Browser: Display style properties in DOM Inspector

This makes use of the new `inspect_dom_node()` IPC call.

3 files changed, 48 insertions, 3 deletions

diff --git a/Userland/Applications/Browser/InspectorWidget.cpp b/Userland/Applications/Browser/InspectorWidget.cpp
index 4e95216359..82c5ae4a8f 100644
--- a/Userland/Applications/Browser/InspectorWidget.cpp
+++ b/Userland/Applications/Browser/InspectorWidget.cpp
@@ -14,13 +14,35 @@
 #include <LibWeb/DOM/Document.h>
 #include <LibWeb/DOM/Element.h>
 #include <LibWeb/DOMTreeModel.h>
+#include <LibWeb/OutOfProcessWebView.h>
 #include <LibWeb/StylePropertiesModel.h>
 
 namespace Browser {
 
-void InspectorWidget::set_inspected_node(GUI::ModelIndex const)
+void InspectorWidget::set_inspected_node(GUI::ModelIndex const index)
 {
-    // FIXME: Handle this for OutOfProcessWebView
+    auto* json = static_cast<JsonObject const*>(index.internal_data());
+    i32 inspected_node = json ? json->get("id").to_i32() : 0;
+    if (inspected_node == m_inspected_node_id)
+        return;
+    m_inspected_node_id = inspected_node;
+
+    m_dom_tree_view->set_cursor(index, GUI::AbstractView::SelectionUpdate::Set);
+    m_dom_tree_view->expand_all_parents_of(index);
+
+    auto maybe_inspected_node_properties = m_web_view->inspect_dom_node(m_inspected_node_id);
+    if (maybe_inspected_node_properties.has_value()) {
+        auto inspected_node_properties = maybe_inspected_node_properties.value();
+        m_inspected_node_specified_values_json = inspected_node_properties.specified_values_json;
+        m_inspected_node_computed_values_json = inspected_node_properties.computed_values_json;
+        m_style_table_view->set_model(Web::StylePropertiesModel::create(m_inspected_node_specified_values_json.value().view()));
+        m_computed_style_table_view->set_model(Web::StylePropertiesModel::create(m_inspected_node_computed_values_json.value().view()));
+    } else {
+        m_inspected_node_specified_values_json.clear();
+        m_inspected_node_computed_values_json.clear();
+        m_style_table_view->set_model(nullptr);
+        m_computed_style_table_view->set_model(nullptr);
+    }
 }
 
 InspectorWidget::InspectorWidget()
@@ -64,4 +86,17 @@ void InspectorWidget::set_dom_json(String json)
     // m_layout_tree_view->set_model(Web::LayoutTreeModel::create(*document));
 }
 
+void InspectorWidget::set_dom_node_properties_json(i32 node_id, String specified_values_json, String computed_values_json)
+{
+    if (node_id != m_inspected_node_id) {
+        dbgln("Got data for the wrong node id! Wanted {}, got {}", m_inspected_node_id, node_id);
+        return;
+    }
+
+    m_inspected_node_specified_values_json = specified_values_json;
+    m_inspected_node_computed_values_json = computed_values_json;
+    m_style_table_view->set_model(Web::StylePropertiesModel::create(m_inspected_node_specified_values_json.value().view()));
+    m_computed_style_table_view->set_model(Web::StylePropertiesModel::create(m_inspected_node_computed_values_json.value().view()));
+}
+
 }
diff --git a/Userland/Applications/Browser/InspectorWidget.h b/Userland/Applications/Browser/InspectorWidget.h
index 1f46c925a6..8338e9deea 100644
--- a/Userland/Applications/Browser/InspectorWidget.h
+++ b/Userland/Applications/Browser/InspectorWidget.h
@@ -17,19 +17,28 @@ class InspectorWidget final : public GUI::Widget {
 public:
     virtual ~InspectorWidget();
 
+    void set_web_view(NonnullRefPtr<Web::OutOfProcessWebView> web_view) { m_web_view = web_view; }
+
     void set_dom_json(String);
+    void set_dom_node_properties_json(i32 node_id, String specified_values_json, String computed_values_json);
 
 private:
     InspectorWidget();
 
     void set_inspected_node(GUI::ModelIndex);
 
+    RefPtr<Web::OutOfProcessWebView> m_web_view;
+
     RefPtr<GUI::TreeView> m_dom_tree_view;
     RefPtr<GUI::TreeView> m_layout_tree_view;
     RefPtr<GUI::TableView> m_style_table_view;
     RefPtr<GUI::TableView> m_computed_style_table_view;
 
+    // Multi-process mode
     Optional<String> m_dom_json;
+    i32 m_inspected_node_id;
+    Optional<String> m_inspected_node_specified_values_json;
+    Optional<String> m_inspected_node_computed_values_json;
 };
 
 }
diff --git a/Userland/Applications/Browser/Tab.cpp b/Userland/Applications/Browser/Tab.cpp
index 2cc11b5dc1..960e3b371b 100644
--- a/Userland/Applications/Browser/Tab.cpp
+++ b/Userland/Applications/Browser/Tab.cpp
@@ -473,9 +473,10 @@ void Tab::show_inspector_window(Browser::Tab::InspectorTarget)
         window->set_title("DOM inspector");
         window->set_icon(Gfx::Bitmap::try_load_from_file("/res/icons/16x16/inspector-object.png"));
         window->on_close = [&]() {
-            // FIXME: Clear inspected node for OOPWV
+            m_web_content_view->clear_inspected_dom_node();
         };
         m_dom_inspector_widget = window->set_main_widget<InspectorWidget>();
+        m_dom_inspector_widget->set_web_view(*m_web_content_view);
     }
 
     m_web_content_view->inspect_dom_tree();