mirror of
https://github.com/RGBCube/serenity
synced 2025-07-28 07:57:46 +00:00
Browser+LibWeb+WebContent: Add variables display to Inspector
This allows us to see which custom properties apply to a given element, which previously wasn't shown.
This commit is contained in:
parent
53df13fed7
commit
54bbb97ac6
12 changed files with 65 additions and 24 deletions
|
@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
};
|
||||
|
||||
}
|
||||
|
|
|
@ -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) {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue