LibWeb+Browser: Support DOM Inspector for OutOfProcessWebView

This introduces a new DOMTreeJSONModel, which provides the Model for the
InspectorWidget when the Browser is running using the
OutOfProcessWebView.

This Model is constructed with a JSON object received via IPC from the
WebContentServer.

Userland/Applications/Browser/BrowserWindow.cpp

@@ -205,7 +205,7 @@ void BrowserWindow::build_menus()
                 tab.m_dom_inspector_window->show();
                 tab.m_dom_inspector_window->move_to_front();
             } else {
-                TODO();
+                tab.m_web_content_view->inspect_dom_tree();
             }
         },
         this);

Userland/Applications/Browser/InspectorWidget.cpp

@@ -12,14 +12,20 @@
 #include <LibGUI/TreeView.h>
 #include <LibWeb/DOM/Document.h>
 #include <LibWeb/DOM/Element.h>
+#include <LibWeb/DOMTreeJSONModel.h>
 #include <LibWeb/DOMTreeModel.h>
 #include <LibWeb/LayoutTreeModel.h>
 #include <LibWeb/StylePropertiesModel.h>
 
 namespace Browser {
 
-void InspectorWidget::set_inspected_node(Web::DOM::Node* node)
+void InspectorWidget::set_inspected_node(GUI::ModelIndex const index)
 {
+    if (!m_document) {
+        // FIXME: Handle this for OutOfProcessWebView
+        return;
+    }
+    auto* node = static_cast<Web::DOM::Node*>(index.internal_data());
     m_document->set_inspected_node(node);
     if (node && node->is_element()) {
         auto& element = verify_cast<Web::DOM::Element>(*node);
@@ -43,15 +49,13 @@ InspectorWidget::InspectorWidget()
     m_dom_tree_view = top_tab_widget.add_tab<GUI::TreeView>("DOM");
     m_dom_tree_view->on_selection_change = [this] {
         const auto& index = m_dom_tree_view->selection().first();
-        auto* node = static_cast<Web::DOM::Node*>(index.internal_data());
-        set_inspected_node(node);
+        set_inspected_node(index);
     };
 
     m_layout_tree_view = top_tab_widget.add_tab<GUI::TreeView>("Layout");
     m_layout_tree_view->on_selection_change = [this] {
         const auto& index = m_layout_tree_view->selection().first();
-        auto* node = static_cast<Web::Layout::Node*>(index.internal_data());
-        set_inspected_node(node->dom_node());
+        set_inspected_node(index);
     };
 
     auto& bottom_tab_widget = splitter.add<GUI::TabWidget>();
@@ -73,4 +77,16 @@ void InspectorWidget::set_document(Web::DOM::Document* document)
     m_layout_tree_view->set_model(Web::LayoutTreeModel::create(*document));
 }
 
+void InspectorWidget::set_dom_json(String json)
+{
+    if (m_dom_json.has_value() && m_dom_json.value() == json)
+        return;
+
+    m_dom_json = json;
+    m_dom_tree_view->set_model(Web::DOMTreeJSONModel::create(m_dom_json->view()));
+
+    // FIXME: Support the LayoutTreeModel
+    // m_layout_tree_view->set_model(Web::LayoutTreeModel::create(*document));
+}
+
 }

Userland/Applications/Browser/InspectorWidget.h

@@ -17,17 +17,22 @@ public:
     virtual ~InspectorWidget();
 
     void set_document(Web::DOM::Document*);
+    void set_dom_json(String);
 
 private:
     InspectorWidget();
 
-    void set_inspected_node(Web::DOM::Node*);
+    void set_inspected_node(GUI::ModelIndex);
 
     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;
+
+    // One of these will be available, depending on if we're
+    // in-process (m_document) or out-of-process (m_dom_json)
     RefPtr<Web::DOM::Document> m_document;
+    Optional<String> m_dom_json;
 };
 
 }

Userland/Applications/Browser/Tab.cpp

@@ -11,6 +11,7 @@
 #include "BrowserWindow.h"
 #include "ConsoleWidget.h"
 #include "DownloadWidget.h"
+#include "InspectorWidget.h"
 #include <AK/StringBuilder.h>
 #include <AK/URL.h>
 #include <Applications/Browser/TabGML.h>
@@ -78,6 +79,20 @@ void Tab::view_source(const URL& url, const String& source)
     window->show();
 }
 
+void Tab::view_dom_tree(const String& dom_tree)
+{
+    auto window = GUI::Window::construct(&this->window());
+    window->resize(300, 500);
+    window->set_title("DOM inspector");
+    window->set_icon(Gfx::Bitmap::load_from_file("/res/icons/16x16/inspector-object.png"));
+    window->set_main_widget<InspectorWidget>();
+
+    auto* inspector_widget = static_cast<InspectorWidget*>(window->main_widget());
+    inspector_widget->set_dom_json(dom_tree);
+    window->show();
+    window->move_to_front();
+}
+
 Tab::Tab(BrowserWindow& window, Type type)
     : m_type(type)
 {
@@ -264,6 +279,10 @@ Tab::Tab(BrowserWindow& window, Type type)
         view_source(url, source);
     };
 
+    hooks().on_get_dom_tree = [this](auto& dom_tree) {
+        view_dom_tree(dom_tree);
+    };
+
     hooks().on_js_console_output = [this](auto& method, auto& line) {
         if (m_console_window) {
             auto* console_widget = static_cast<ConsoleWidget*>(m_console_window->main_widget());

Userland/Applications/Browser/Tab.h

@@ -79,6 +79,7 @@ private:
     void update_bookmark_button(const String& url);
     void start_download(const URL& url);
     void view_source(const URL& url, const String& source);
+    void view_dom_tree(const String&);
 
     Type m_type;