From 1e5e02c70bb515118a36205991f8dd48380afb61 Mon Sep 17 00:00:00 2001 From: Adam Hodgen Date: Mon, 7 Jun 2021 22:21:16 +0100 Subject: [PATCH] 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. --- .../Applications/Browser/BrowserWindow.cpp | 2 +- .../Applications/Browser/InspectorWidget.cpp | 26 +- .../Applications/Browser/InspectorWidget.h | 7 +- Userland/Applications/Browser/Tab.cpp | 19 ++ Userland/Applications/Browser/Tab.h | 1 + Userland/Libraries/LibWeb/CMakeLists.txt | 1 + .../Libraries/LibWeb/DOMTreeJSONModel.cpp | 225 ++++++++++++++++++ Userland/Libraries/LibWeb/DOMTreeJSONModel.h | 56 +++++ 8 files changed, 330 insertions(+), 7 deletions(-) create mode 100644 Userland/Libraries/LibWeb/DOMTreeJSONModel.cpp create mode 100644 Userland/Libraries/LibWeb/DOMTreeJSONModel.h diff --git a/Userland/Applications/Browser/BrowserWindow.cpp b/Userland/Applications/Browser/BrowserWindow.cpp index f8cf9c9b49..2c7a8cd91a 100644 --- a/Userland/Applications/Browser/BrowserWindow.cpp +++ b/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); diff --git a/Userland/Applications/Browser/InspectorWidget.cpp b/Userland/Applications/Browser/InspectorWidget.cpp index 3d1d8a3f82..11aa631407 100644 --- a/Userland/Applications/Browser/InspectorWidget.cpp +++ b/Userland/Applications/Browser/InspectorWidget.cpp @@ -12,14 +12,20 @@ #include #include #include +#include #include #include #include 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(index.internal_data()); m_document->set_inspected_node(node); if (node && node->is_element()) { auto& element = verify_cast(*node); @@ -43,15 +49,13 @@ InspectorWidget::InspectorWidget() m_dom_tree_view = top_tab_widget.add_tab("DOM"); m_dom_tree_view->on_selection_change = [this] { const auto& index = m_dom_tree_view->selection().first(); - auto* node = static_cast(index.internal_data()); - set_inspected_node(node); + set_inspected_node(index); }; m_layout_tree_view = top_tab_widget.add_tab("Layout"); m_layout_tree_view->on_selection_change = [this] { const auto& index = m_layout_tree_view->selection().first(); - auto* node = static_cast(index.internal_data()); - set_inspected_node(node->dom_node()); + set_inspected_node(index); }; auto& bottom_tab_widget = splitter.add(); @@ -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)); +} + } diff --git a/Userland/Applications/Browser/InspectorWidget.h b/Userland/Applications/Browser/InspectorWidget.h index 99c6a60db7..82f74084ab 100644 --- a/Userland/Applications/Browser/InspectorWidget.h +++ b/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 m_dom_tree_view; RefPtr m_layout_tree_view; RefPtr m_style_table_view; RefPtr 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 m_document; + Optional m_dom_json; }; } diff --git a/Userland/Applications/Browser/Tab.cpp b/Userland/Applications/Browser/Tab.cpp index 5e626ac8aa..49fc92c881 100644 --- a/Userland/Applications/Browser/Tab.cpp +++ b/Userland/Applications/Browser/Tab.cpp @@ -11,6 +11,7 @@ #include "BrowserWindow.h" #include "ConsoleWidget.h" #include "DownloadWidget.h" +#include "InspectorWidget.h" #include #include #include @@ -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(); + + auto* inspector_widget = static_cast(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(m_console_window->main_widget()); diff --git a/Userland/Applications/Browser/Tab.h b/Userland/Applications/Browser/Tab.h index 9aeb2c4ce2..48f360f0fd 100644 --- a/Userland/Applications/Browser/Tab.h +++ b/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; diff --git a/Userland/Libraries/LibWeb/CMakeLists.txt b/Userland/Libraries/LibWeb/CMakeLists.txt index fac8ca04b4..428d2f088e 100644 --- a/Userland/Libraries/LibWeb/CMakeLists.txt +++ b/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 diff --git a/Userland/Libraries/LibWeb/DOMTreeJSONModel.cpp b/Userland/Libraries/LibWeb/DOMTreeJSONModel.cpp new file mode 100644 index 0000000000..0f4228425b --- /dev/null +++ b/Userland/Libraries/LibWeb/DOMTreeJSONModel.cpp @@ -0,0 +1,225 @@ +/* + * Copyright (c) 2018-2020, Andreas Kling + * Copyright (c) 2018-2020, Adam Hodgen + * + * SPDX-License-Identifier: BSD-2-Clause + */ + +#include "DOMTreeJSONModel.h" +#include +#include +#include + +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 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 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 DOMTreeJSONModel::find_child_with_internal_id(size_t internal_id) const +{ + return find_child_with_internal_id(m_dom_tree, internal_id); +} + +Optional 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(); +} + +} diff --git a/Userland/Libraries/LibWeb/DOMTreeJSONModel.h b/Userland/Libraries/LibWeb/DOMTreeJSONModel.h new file mode 100644 index 0000000000..a0a6e17950 --- /dev/null +++ b/Userland/Libraries/LibWeb/DOMTreeJSONModel.h @@ -0,0 +1,56 @@ +/* + * Copyright (c) 2018-2020, Andreas Kling + * Copyright (c) 2018-2020, Adam Hodgen + * + * SPDX-License-Identifier: BSD-2-Clause + */ + +#pragma once + +#include +#include +#include + +namespace Web { + +class DOMTreeJSONModel final : public GUI::Model { +public: + static NonnullRefPtr 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 find_parent_of_child_with_internal_id(size_t) const; + Optional find_parent_of_child_with_internal_id(JsonObject, size_t) const; + + Optional find_child_with_internal_id(size_t) const; + Optional 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; +}; + +}