1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-28 17:27:46 +00:00

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.
This commit is contained in:
Adam Hodgen 2021-06-07 22:21:16 +01:00 committed by Andreas Kling
parent cd6b9613c5
commit 1e5e02c70b
8 changed files with 330 additions and 7 deletions

View file

@ -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);

View file

@ -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));
}
}

View file

@ -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;
};
}

View file

@ -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());

View file

@ -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;