beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-26 09:30:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

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
Notes: sideshowbarker 2024-07-18 04:51:53 +09:00 
Author: https://github.com/AtkinsSJ
Commit: https://github.com/SerenityOS/serenity/commit/1da07734bb0
Pull-request: https://github.com/SerenityOS/serenity/pull/9725
Issue: https://github.com/SerenityOS/serenity/issues/8935
Reviewed-by: https://github.com/awesomekling
3 changed files with 48 additions and 3 deletions
Show stats 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/Element.h>
#include <LibWeb/DOMTreeModel.h>
#include <LibWeb/OutOfProcessWebView.h>
#include <LibWeb/StylePropertiesModel.h>
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()
@ -64,4 +86,17 @@ void InspectorWidget::set_dom_json(String json)
// 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:
virtual ~InspectorWidget();
void set_web_view(NonnullRefPtr<Web::OutOfProcessWebView> web_view) { m_web_view = web_view; }
void set_dom_json(String);
void set_dom_node_properties_json(i32 node_id, String specified_values_json, String computed_values_json);
private:
InspectorWidget();
void set_inspected_node(GUI::ModelIndex);
RefPtr<Web::OutOfProcessWebView> m_web_view;
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;
// Multi-process mode
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_icon(Gfx::Bitmap::try_load_from_file("/res/icons/16x16/inspector-object.png"));
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->set_web_view(*m_web_content_view);
}
m_web_content_view->inspect_dom_tree();