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(index);
-        set_inspected_node(node);
     };
 
     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(index);
-        set_inspected_node(node->dom_node());
     };
 
     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;
 

Userland/Libraries/LibWeb/CMakeLists.txt

@@ -64,6 +64,7 @@ set(SOURCES
     DOM/Timer.cpp
     DOM/Window.cpp
     DOMTreeModel.cpp
+    DOMTreeJSONModel.cpp
     Dump.cpp
     FontCache.cpp
     HTML/AttributeNames.cpp

Userland/Libraries/LibWeb/DOMTreeJSONModel.cpp

@@ -0,0 +1,225 @@
+/*
+ * Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
+ * Copyright (c) 2018-2020, Adam Hodgen <ant1441@gmail.com>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#include "DOMTreeJSONModel.h"
+#include <AK/JsonObject.h>
+#include <AK/StringBuilder.h>
+#include <ctype.h>
+
+namespace Web {
+
+DOMTreeJSONModel::DOMTreeJSONModel(JsonObject dom_tree)
+    : m_dom_tree(dom_tree)
+{
+    m_document_icon.set_bitmap_for_size(16, Gfx::Bitmap::load_from_file("/res/icons/16x16/filetype-html.png"));
+    m_element_icon.set_bitmap_for_size(16, Gfx::Bitmap::load_from_file("/res/icons/16x16/inspector-object.png"));
+    m_text_icon.set_bitmap_for_size(16, Gfx::Bitmap::load_from_file("/res/icons/16x16/filetype-unknown.png"));
+}
+
+DOMTreeJSONModel::~DOMTreeJSONModel()
+{
+}
+
+GUI::ModelIndex DOMTreeJSONModel::index(int row, int column, const GUI::ModelIndex& parent) const
+{
+    if (!parent.is_valid()) {
+        return create_index(row, column, (void*)get_internal_id(m_dom_tree));
+    }
+
+    auto parent_node = find_node(parent);
+    auto children = get_children(parent_node);
+    auto child_node = children[row].as_object();
+
+    auto child_internal_id = (void*)get_internal_id(child_node);
+    return create_index(row, column, child_internal_id);
+}
+
+GUI::ModelIndex DOMTreeJSONModel::parent_index(const GUI::ModelIndex& index) const
+{
+    // FIXME: Handle the template element (child elements are not stored in it, all of its children are in its document fragment "content")
+    //        Probably in the JSON generation in Node.cpp?
+    if (!index.is_valid())
+        return {};
+
+    auto node = find_node(index);
+
+    auto node_internal_id = get_internal_id(node);
+    auto parent_node = find_parent_of_child_with_internal_id(node_internal_id);
+    if (!parent_node.has_value())
+        return {};
+    auto parent_node_internal_id = get_internal_id(parent_node.value());
+
+    // If the parent is the root document, we know it has index 0, 0
+    if (parent_node_internal_id == get_internal_id(m_dom_tree)) {
+        return create_index(0, 0, (void*)parent_node_internal_id);
+    }
+
+    // Otherwise, we need to find the grandparent, to find the index of parent within that
+    auto grandparent_node = find_parent_of_child_with_internal_id(parent_node_internal_id);
+    VERIFY(grandparent_node.has_value());
+
+    auto grandparent_children = get_children(*grandparent_node);
+    if (grandparent_children.is_empty())
+        return {};
+
+    for (int grandparent_child_index = 0; grandparent_child_index < grandparent_children.size(); ++grandparent_child_index) {
+        auto child = grandparent_children[grandparent_child_index].as_object();
+        if (get_internal_id(child) == parent_node_internal_id)
+            return create_index(grandparent_child_index, 0, (void*)(parent_node_internal_id));
+    }
+    return {};
+}
+
+int DOMTreeJSONModel::row_count(const GUI::ModelIndex& index) const
+{
+    if (!index.is_valid())
+        return 1;
+
+    auto child = find_node(index);
+    return get_children(child).size();
+}
+
+int DOMTreeJSONModel::column_count(const GUI::ModelIndex&) const
+{
+    return 1;
+}
+
+static String with_whitespace_collapsed(const StringView& string)
+{
+    StringBuilder builder;
+    for (size_t i = 0; i < string.length(); ++i) {
+        if (isspace(string[i])) {
+            builder.append(' ');
+            while (i < string.length()) {
+                if (isspace(string[i])) {
+                    ++i;
+                    continue;
+                }
+                builder.append(string[i]);
+                break;
+            }
+            continue;
+        }
+        builder.append(string[i]);
+    }
+    return builder.to_string();
+}
+
+GUI::Variant DOMTreeJSONModel::data(const GUI::ModelIndex& index, GUI::ModelRole role) const
+{
+    auto node = find_node(index);
+    auto node_name = node.get("name").as_string();
+    auto type = node.get("type").as_string_or("unknown");
+
+    if (role == GUI::ModelRole::Icon) {
+        if (type == "document")
+            return m_document_icon;
+        if (type == "element")
+            return m_element_icon;
+        // FIXME: More node type icons?
+        return m_text_icon;
+    }
+    if (role == GUI::ModelRole::Display) {
+        if (type == "text")
+            return with_whitespace_collapsed(node.get("text").as_string());
+        if (type != "element")
+            return node_name;
+
+        StringBuilder builder;
+        builder.append('<');
+        builder.append(node_name.to_lowercase());
+        if (node.has("attributes")) {
+            auto attributes = node.get("attributes").as_object();
+            attributes.for_each_member([&builder](auto& name, JsonValue& value) {
+                builder.append(' ');
+                builder.append(name);
+                builder.append('=');
+                builder.append('"');
+                builder.append(value.to_string());
+                builder.append('"');
+            });
+        }
+        builder.append('>');
+        return builder.to_string();
+    }
+    return {};
+}
+
+void DOMTreeJSONModel::update()
+{
+    did_update();
+}
+
+Optional<JsonObject> DOMTreeJSONModel::find_parent_of_child_with_internal_id(size_t internal_id) const
+{
+    return find_parent_of_child_with_internal_id(m_dom_tree, internal_id);
+}
+
+Optional<JsonObject> DOMTreeJSONModel::find_parent_of_child_with_internal_id(JsonObject node, size_t internal_id) const
+{
+    auto children = get_children(node);
+
+    for (int i = 0; i < children.size(); ++i) {
+        auto child = children[i].as_object();
+        auto child_internal_id = get_internal_id(child);
+        if (child_internal_id == internal_id)
+            return node;
+        auto maybe_node = find_parent_of_child_with_internal_id(child, internal_id);
+        if (maybe_node.has_value())
+            return maybe_node;
+    }
+    return {};
+}
+
+Optional<JsonObject> DOMTreeJSONModel::find_child_with_internal_id(size_t internal_id) const
+{
+    return find_child_with_internal_id(m_dom_tree, internal_id);
+}
+
+Optional<JsonObject> DOMTreeJSONModel::find_child_with_internal_id(JsonObject node, size_t internal_id) const
+{
+    auto node_internal_id = get_internal_id(node);
+    if (node_internal_id == internal_id) {
+        return node;
+    }
+    auto children = get_children(node);
+
+    for (int i = 0; i < children.size(); ++i) {
+        auto child = children[i].as_object();
+        auto maybe_node = find_child_with_internal_id(child, internal_id);
+        if (maybe_node.has_value())
+            return maybe_node;
+    }
+    return {};
+}
+
+size_t DOMTreeJSONModel::get_internal_id(JsonObject const& o)
+{
+    return o.get("internal_id").as_u32();
+}
+
+JsonArray DOMTreeJSONModel::get_children(JsonObject const& o)
+{
+    auto maybe_children = o.get("children");
+    if (maybe_children.is_null())
+        return {};
+    return maybe_children.as_array();
+}
+
+JsonObject DOMTreeJSONModel::find_node(GUI::ModelIndex index) const
+{
+    auto internal_id = (size_t)(index.internal_data());
+
+    auto maybe_node = find_child_with_internal_id(internal_id);
+    if (!maybe_node.has_value()) {
+        dbgln("Failed to find node with internal_id={}", internal_id);
+        VERIFY_NOT_REACHED();
+    }
+    return maybe_node.value();
+}
+
+}

Userland/Libraries/LibWeb/DOMTreeJSONModel.h

@@ -0,0 +1,56 @@
+/*
+ * Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
+ * Copyright (c) 2018-2020, Adam Hodgen <ant1441@gmail.com>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#pragma once
+
+#include <AK/JsonObject.h>
+#include <LibGUI/Model.h>
+#include <LibWeb/Forward.h>
+
+namespace Web {
+
+class DOMTreeJSONModel final : public GUI::Model {
+public:
+    static NonnullRefPtr<DOMTreeJSONModel> create(StringView dom_tree)
+    {
+        auto json_or_error = JsonValue::from_string(dom_tree);
+        if (!json_or_error.has_value())
+            VERIFY_NOT_REACHED();
+
+        return adopt_ref(*new DOMTreeJSONModel(json_or_error.value().as_object()));
+    }
+
+    virtual ~DOMTreeJSONModel() override;
+
+    virtual int row_count(const GUI::ModelIndex& = GUI::ModelIndex()) const override;
+    virtual int column_count(const GUI::ModelIndex& = GUI::ModelIndex()) const override;
+    virtual GUI::Variant data(const GUI::ModelIndex&, GUI::ModelRole) const override;
+    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;
+    virtual void update() override;
+
+private:
+    explicit DOMTreeJSONModel(JsonObject);
+
+    Optional<JsonObject> find_parent_of_child_with_internal_id(size_t) const;
+    Optional<JsonObject> find_parent_of_child_with_internal_id(JsonObject, size_t) const;
+
+    Optional<JsonObject> find_child_with_internal_id(size_t) const;
+    Optional<JsonObject> find_child_with_internal_id(JsonObject, size_t) const;
+
+    JsonObject find_node(GUI::ModelIndex) const;
+
+    static size_t get_internal_id(const JsonObject& o);
+    static JsonArray get_children(const JsonObject& o);
+
+    GUI::Icon m_document_icon;
+    GUI::Icon m_element_icon;
+    GUI::Icon m_text_icon;
+    JsonObject m_dom_tree;
+};
+
+}