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

Browser+LibWeb+WebContent: Add variables display to Inspector

Browse source 
This allows us to see which custom properties apply to a given element,
which previously wasn't shown.
This commit is contained in:
Sam Atkins 2021-12-08 11:51:26 +00:00 • committed by Andreas Kling
parent 53df13fed7
commit 54bbb97ac6
12 changed files with 65 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -50,7 +50,7 @@ void InspectorWidget::set_inspected_node(GUI::ModelIndex const 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();
load_style_json(inspected_node_properties.specified_values_json, inspected_node_properties.computed_values_json);
load_style_json(inspected_node_properties.specified_values_json, inspected_node_properties.computed_values_json, inspected_node_properties.custom_properties_json);
} else {
clear_style_json();
}
@ -87,6 +87,11 @@ InspectorWidget::InspectorWidget()
computed_style_table_container.layout()->set_margins({ 4, 4, 4, 4 });
m_computed_style_table_view = computed_style_table_container.add<GUI::TableView>();
auto& custom_properties_table_container = bottom_tab_widget.add_tab<GUI::Widget>("Variables");
custom_properties_table_container.set_layout<GUI::VerticalBoxLayout>();
custom_properties_table_container.layout()->set_margins({ 4, 4, 4, 4 });
m_custom_properties_table_view = custom_properties_table_container.add<GUI::TableView>();
m_dom_tree_view->set_focus(true);
}
@ -127,30 +132,38 @@ void InspectorWidget::clear_dom_json()
clear_style_json();
}
void InspectorWidget::set_dom_node_properties_json(i32 node_id, String specified_values_json, String computed_values_json)
void InspectorWidget::set_dom_node_properties_json(i32 node_id, String specified_values_json, String computed_values_json, String custom_properties_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;
}
load_style_json(specified_values_json, computed_values_json);
load_style_json(specified_values_json, computed_values_json, custom_properties_json);
}
void InspectorWidget::load_style_json(String specified_values_json, String computed_values_json)
void InspectorWidget::load_style_json(String specified_values_json, String computed_values_json, String custom_properties_json)
{
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_inspected_node_computed_values_json = computed_values_json;
m_computed_style_table_view->set_model(Web::StylePropertiesModel::create(m_inspected_node_computed_values_json.value().view()));
m_inspected_node_custom_properties_json = custom_properties_json;
m_custom_properties_table_view->set_model(Web::StylePropertiesModel::create(m_inspected_node_custom_properties_json.value().view()));
}
void InspectorWidget::clear_style_json()
{
m_inspected_node_specified_values_json.clear();
m_inspected_node_computed_values_json.clear();
m_style_table_view->set_model(nullptr);
m_inspected_node_computed_values_json.clear();
m_computed_style_table_view->set_model(nullptr);
m_inspected_node_custom_properties_json.clear();
m_custom_properties_table_view->set_model(nullptr);
}
}

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

@ -20,7 +20,7 @@ public:
void set_web_view(NonnullRefPtr<Web::OutOfProcessWebView> web_view) { m_web_view = web_view; }
void set_dom_json(String);
void clear_dom_json();
void set_dom_node_properties_json(i32 node_id, String specified_values_json, String computed_values_json);
void set_dom_node_properties_json(i32 node_id, String specified_values_json, String computed_values_json, String custom_properties_json);
void set_inspected_node(i32 node_id);
void select_default_node();
@ -29,7 +29,7 @@ private:
InspectorWidget();
void set_inspected_node(GUI::ModelIndex);
void load_style_json(String specified_values_json, String computed_values_json);
void load_style_json(String specified_values_json, String computed_values_json, String custom_properties_json);
void clear_style_json();
RefPtr<Web::OutOfProcessWebView> m_web_view;
@ -37,6 +37,7 @@ private:
RefPtr<GUI::TreeView> m_dom_tree_view;
RefPtr<GUI::TableView> m_style_table_view;
RefPtr<GUI::TableView> m_computed_style_table_view;
RefPtr<GUI::TableView> m_custom_properties_table_view;
// Multi-process mode
Optional<i32> m_pending_inspect_node_id;
@ -44,6 +45,7 @@ private:
Optional<String> m_dom_json;
Optional<String> m_inspected_node_specified_values_json;
Optional<String> m_inspected_node_computed_values_json;
Optional<String> m_inspected_node_custom_properties_json;
};
}

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

@ -291,8 +291,8 @@ Tab::Tab(BrowserWindow& window)
m_dom_inspector_widget->set_dom_json(dom_tree);
};
hooks().on_get_dom_node_properties = [this](auto node_id, auto& specified, auto& computed) {
m_dom_inspector_widget->set_dom_node_properties_json(node_id, specified, computed);
hooks().on_get_dom_node_properties = [this](auto node_id, auto& specified, auto& computed, auto& custom_properties) {
m_dom_inspector_widget->set_dom_node_properties_json(node_id, specified, computed, custom_properties);
};
hooks().on_js_console_new_message = [this](auto message_index) {