Browser: Implement "Inspect Element" context menu action

This is finally working for OOPWV! :^)
This commit is contained in:
Sam Atkins 2021-08-27 17:40:25 +01:00 committed by Andreas Kling
parent 1ccf10789e
commit 97379ace25
Notes: sideshowbarker 2024-07-18 04:51:41 +09:00
3 changed files with 44 additions and 14 deletions

View file

@ -19,6 +19,26 @@
namespace Browser {
void InspectorWidget::set_inspected_node(i32 node_id)
{
if (!m_dom_json.has_value()) {
// DOM Tree hasn't been loaded yet, so make a note to inspect it later.
m_pending_inspect_node_id = node_id;
return;
}
auto* model = verify_cast<Web::DOMTreeModel>(m_dom_tree_view->model());
auto index = model->index_for_node(node_id);
if (!index.is_valid()) {
dbgln("InspectorWidget told to inspect non-existent node, id={}", node_id);
return;
}
m_dom_tree_view->expand_all_parents_of(index);
m_dom_tree_view->set_cursor(index, GUI::AbstractView::SelectionUpdate::Set);
set_inspected_node(index);
}
void InspectorWidget::set_inspected_node(GUI::ModelIndex const index)
{
auto* json = static_cast<JsonObject const*>(index.internal_data());
@ -27,16 +47,10 @@ void InspectorWidget::set_inspected_node(GUI::ModelIndex const index)
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()));
load_style_json(inspected_node_properties.specified_values_json, inspected_node_properties.computed_values_json);
} else {
m_inspected_node_specified_values_json.clear();
m_inspected_node_computed_values_json.clear();
@ -84,6 +98,12 @@ void InspectorWidget::set_dom_json(String json)
// FIXME: Support the LayoutTreeModel
// m_layout_tree_view->set_model(Web::LayoutTreeModel::create(*document));
if (m_pending_inspect_node_id.has_value()) {
i32 node_id = m_pending_inspect_node_id.value();
m_pending_inspect_node_id.clear();
set_inspected_node(node_id);
}
}
void InspectorWidget::set_dom_node_properties_json(i32 node_id, String specified_values_json, String computed_values_json)
@ -93,6 +113,11 @@ void InspectorWidget::set_dom_node_properties_json(i32 node_id, String specified
return;
}
load_style_json(specified_values_json, computed_values_json);
}
void InspectorWidget::load_style_json(String specified_values_json, String computed_values_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()));

View file

@ -18,14 +18,16 @@ 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);
void set_inspected_node(i32 node_id);
private:
InspectorWidget();
void set_inspected_node(GUI::ModelIndex);
void load_style_json(String specified_values_json, String computed_values_json);
RefPtr<Web::OutOfProcessWebView> m_web_view;
@ -35,8 +37,9 @@ private:
RefPtr<GUI::TableView> m_computed_style_table_view;
// Multi-process mode
Optional<String> m_dom_json;
Optional<i32> m_pending_inspect_node_id;
i32 m_inspected_node_id;
Optional<String> m_dom_json;
Optional<String> m_inspected_node_specified_values_json;
Optional<String> m_inspected_node_computed_values_json;
};

View file

@ -340,9 +340,6 @@ Tab::Tab(BrowserWindow& window)
hooks().on_context_menu_request = [&](auto& screen_position) {
m_page_context_menu->popup(screen_position);
};
// FIXME: This is temporary, until the OOPWV properly supports the DOM Inspector
window.inspect_dom_node_action().set_enabled(false);
}
Tab::~Tab()
@ -469,7 +466,7 @@ BrowserWindow& Tab::window()
return static_cast<BrowserWindow&>(*Widget::window());
}
void Tab::show_inspector_window(Browser::Tab::InspectorTarget)
void Tab::show_inspector_window(Browser::Tab::InspectorTarget inspector_target)
{
if (!m_dom_inspector_widget) {
auto window = GUI::Window::construct(&this->window());
@ -482,9 +479,14 @@ void Tab::show_inspector_window(Browser::Tab::InspectorTarget)
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();
if (inspector_target == InspectorTarget::HoveredElement) {
Optional<i32> hovered_node = m_web_content_view->get_hovered_node_id();
VERIFY(hovered_node.has_value());
m_dom_inspector_widget->set_inspected_node(hovered_node.value());
}
auto* window = m_dom_inspector_widget->window();
window->show();
window->move_to_front();