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:
parent
cd6b9613c5
commit
1e5e02c70b
8 changed files with 330 additions and 7 deletions
|
@ -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);
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
};
|
||||
|
||||
}
|
||||
|
|
|
@ -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());
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue