RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 07:37:46 +00:00
Code Issues Activity Actions

Browser: Display style properties in DOM Inspector

Browse source 
This makes use of the new `inspect_dom_node()` IPC call.
This commit is contained in:
Sam Atkins 2021-09-02 12:05:32 +01:00 • committed by Andreas Kling
parent f381f8d63e
commit 1da07734bb
3 changed files with 48 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

39
Userland/Applications/Browser/InspectorWidget.cpp
View file

@ -14,13 +14,35 @@
#include <LibWeb/DOM/Document.h> #include <LibWeb/DOM/Document.h>
#include <LibWeb/DOM/Element.h> #include <LibWeb/DOM/Element.h>
#include <LibWeb/DOMTreeModel.h> #include <LibWeb/DOMTreeModel.h>
#include <LibWeb/OutOfProcessWebView.h>
#include <LibWeb/StylePropertiesModel.h> #include <LibWeb/StylePropertiesModel.h>
namespace Browser { namespace Browser {
void InspectorWidget::set_inspected_node(GUI::ModelIndex const) void InspectorWidget::set_inspected_node(GUI::ModelIndex const index)
{ {
// FIXME: Handle this for OutOfProcessWebView auto* json = static_cast<JsonObject const*>(index.internal_data());
i32 inspected_node = json ? json->get("id").to_i32() : 0;
if (inspected_node == m_inspected_node_id)
return;
m_inspected_node_id = inspected_node;
m_dom_tree_view->set_cursor(index, GUI::AbstractView::SelectionUpdate::Set);
m_dom_tree_view->expand_all_parents_of(index);
auto maybe_inspected_node_properties = m_web_view->inspect_dom_node(m_inspected_node_id);
if (maybe_inspected_node_properties.has_value()) {
auto inspected_node_properties = maybe_inspected_node_properties.value();
m_inspected_node_specified_values_json = inspected_node_properties.specified_values_json;
m_inspected_node_computed_values_json = inspected_node_properties.computed_values_json;
m_style_table_view->set_model(Web::StylePropertiesModel::create(m_inspected_node_specified_values_json.value().view()));
m_computed_style_table_view->set_model(Web::StylePropertiesModel::create(m_inspected_node_computed_values_json.value().view()));
} else {
m_inspected_node_specified_values_json.clear();
m_inspected_node_computed_values_json.clear();
m_style_table_view->set_model(nullptr);
m_computed_style_table_view->set_model(nullptr);
}
} }
InspectorWidget::InspectorWidget() InspectorWidget::InspectorWidget()
@ -64,4 +86,17 @@ void InspectorWidget::set_dom_json(String json)
// m_layout_tree_view->set_model(Web::LayoutTreeModel::create(*document)); // m_layout_tree_view->set_model(Web::LayoutTreeModel::create(*document));
} }
void InspectorWidget::set_dom_node_properties_json(i32 node_id, String specified_values_json, String computed_values_json)
{
if (node_id != m_inspected_node_id) {
dbgln("Got data for the wrong node id! Wanted {}, got {}", m_inspected_node_id, node_id);
return;
}
m_inspected_node_specified_values_json = specified_values_json;
m_inspected_node_computed_values_json = computed_values_json;
m_style_table_view->set_model(Web::StylePropertiesModel::create(m_inspected_node_specified_values_json.value().view()));
m_computed_style_table_view->set_model(Web::StylePropertiesModel::create(m_inspected_node_computed_values_json.value().view()));
}
} }

9
Userland/Applications/Browser/InspectorWidget.h
View file

@ -17,19 +17,28 @@ class InspectorWidget final : public GUI::Widget {
public: public:
virtual ~InspectorWidget(); virtual ~InspectorWidget();
void set_web_view(NonnullRefPtr<Web::OutOfProcessWebView> web_view) { m_web_view = web_view; }
void set_dom_json(String); void set_dom_json(String);
void set_dom_node_properties_json(i32 node_id, String specified_values_json, String computed_values_json);
private: private:
InspectorWidget(); InspectorWidget();
void set_inspected_node(GUI::ModelIndex); void set_inspected_node(GUI::ModelIndex);
RefPtr<Web::OutOfProcessWebView> m_web_view;
RefPtr<GUI::TreeView> m_dom_tree_view; RefPtr<GUI::TreeView> m_dom_tree_view;
RefPtr<GUI::TreeView> m_layout_tree_view; RefPtr<GUI::TreeView> m_layout_tree_view;
RefPtr<GUI::TableView> m_style_table_view; RefPtr<GUI::TableView> m_style_table_view;
RefPtr<GUI::TableView> m_computed_style_table_view; RefPtr<GUI::TableView> m_computed_style_table_view;
// Multi-process mode
Optional<String> m_dom_json; Optional<String> m_dom_json;
i32 m_inspected_node_id;
Optional<String> m_inspected_node_specified_values_json;
Optional<String> m_inspected_node_computed_values_json;
}; };
} }

3
Userland/Applications/Browser/Tab.cpp
View file

@ -473,9 +473,10 @@ void Tab::show_inspector_window(Browser::Tab::InspectorTarget)
window->set_title("DOM inspector"); window->set_title("DOM inspector");
window->set_icon(Gfx::Bitmap::try_load_from_file("/res/icons/16x16/inspector-object.png")); window->set_icon(Gfx::Bitmap::try_load_from_file("/res/icons/16x16/inspector-object.png"));
window->on_close = [&]() { window->on_close = [&]() {
// FIXME: Clear inspected node for OOPWV m_web_content_view->clear_inspected_dom_node();
}; };
m_dom_inspector_widget = window->set_main_widget<InspectorWidget>(); m_dom_inspector_widget = window->set_main_widget<InspectorWidget>();
m_dom_inspector_widget->set_web_view(*m_web_content_view);
} }
m_web_content_view->inspect_dom_tree(); m_web_content_view->inspect_dom_tree();