mirror of
https://github.com/RGBCube/serenity
synced 2025-05-14 09:24:57 +00:00
Browser: Port the Inspector to the WebView InspectorClient
This commit is contained in:
Timothy Flynn
Andreas Kling
parent
1fe486cebe
commit
39e32e80cd
3 changed files with 70 additions and 182 deletions
|
|
@ -7,94 +7,42 @@
|
|||
*/
|
||||
|
||||
#include "InspectorWidget.h"
|
||||
#include "ElementSizePreviewWidget.h"
|
||||
#include "ModelAdapter.h"
|
||||
#include <LibGUI/BoxLayout.h>
|
||||
#include <LibGUI/Splitter.h>
|
||||
#include <LibGUI/TabWidget.h>
|
||||
#include <LibGUI/TableView.h>
|
||||
#include <LibGUI/TreeView.h>
|
||||
#include <LibWeb/DOM/Document.h>
|
||||
#include <LibWeb/DOM/Element.h>
|
||||
#include <LibWebView/InspectorClient.h>
|
||||
#include <LibWebView/OutOfProcessWebView.h>
|
||||
|
||||
namespace Browser {
|
||||
|
||||
void InspectorWidget::set_selection(Selection selection)
|
||||
NonnullRefPtr<InspectorWidget> InspectorWidget::create(WebView::OutOfProcessWebView& content_view)
|
||||
{
|
||||
if (!m_dom_loaded) {
|
||||
// DOM Tree hasn't been loaded yet, so make a note to inspect it later.
|
||||
m_pending_selection = move(selection);
|
||||
return;
|
||||
}
|
||||
|
||||
auto* model = verify_cast<DOMTreeModel>(m_dom_tree_view->model());
|
||||
auto index = model->index_for_node(selection.dom_node_id, selection.pseudo_element);
|
||||
if (!index.is_valid()) {
|
||||
dbgln("InspectorWidget told to inspect non-existent node: {}", selection.to_string());
|
||||
return;
|
||||
}
|
||||
|
||||
m_dom_tree_view->expand_all_parents_of(index);
|
||||
m_dom_tree_view->set_cursor(index, GUI::AbstractView::SelectionUpdate::Set);
|
||||
set_selection(index);
|
||||
return adopt_ref(*new (nothrow) InspectorWidget(content_view));
|
||||
}
|
||||
|
||||
void InspectorWidget::set_selection(GUI::ModelIndex const index)
|
||||
{
|
||||
if (!index.is_valid())
|
||||
return;
|
||||
|
||||
auto* json = static_cast<JsonObject const*>(index.internal_data());
|
||||
VERIFY(json);
|
||||
|
||||
Selection selection {};
|
||||
if (json->has_u32("pseudo-element"sv)) {
|
||||
selection.dom_node_id = json->get_i32("parent-id"sv).value_or(0);
|
||||
selection.pseudo_element = static_cast<Web::CSS::Selector::PseudoElement>(json->get_u32("pseudo-element"sv).value_or(0));
|
||||
} else {
|
||||
selection.dom_node_id = json->get_i32("id"sv).value_or(0);
|
||||
}
|
||||
|
||||
if (selection == m_selection)
|
||||
return;
|
||||
m_selection = move(selection);
|
||||
|
||||
auto maybe_inspected_node_properties = m_web_view->inspect_dom_node(m_selection.dom_node_id, m_selection.pseudo_element);
|
||||
if (!maybe_inspected_node_properties.is_error()) {
|
||||
auto inspected_node_properties = maybe_inspected_node_properties.release_value();
|
||||
load_style_json(inspected_node_properties.computed_style_json, inspected_node_properties.resolved_style_json, inspected_node_properties.custom_properties_json);
|
||||
update_node_box_model(inspected_node_properties.node_box_sizing_json);
|
||||
update_aria_properties_state_model(inspected_node_properties.aria_properties_state_json);
|
||||
} else {
|
||||
clear_style_json();
|
||||
clear_node_box_model();
|
||||
}
|
||||
}
|
||||
|
||||
InspectorWidget::InspectorWidget()
|
||||
InspectorWidget::InspectorWidget(WebView::OutOfProcessWebView& content_view)
|
||||
{
|
||||
set_layout<GUI::VerticalBoxLayout>(4);
|
||||
set_fill_with_background_color(true);
|
||||
|
||||
set_layout<GUI::VerticalBoxLayout>(4);
|
||||
auto& splitter = add<GUI::VerticalSplitter>();
|
||||
|
||||
auto& top_tab_widget = splitter.add<GUI::TabWidget>();
|
||||
m_inspector_view = splitter.add<WebView::OutOfProcessWebView>();
|
||||
m_inspector_client = make<WebView::InspectorClient>(content_view, *m_inspector_view);
|
||||
|
||||
auto& dom_tree_container = top_tab_widget.add_tab<GUI::Widget>("DOM"_string);
|
||||
dom_tree_container.set_layout<GUI::VerticalBoxLayout>(4);
|
||||
m_dom_tree_view = dom_tree_container.add<GUI::TreeView>();
|
||||
m_dom_tree_view->on_selection_change = [this] {
|
||||
const auto& index = m_dom_tree_view->selection().first();
|
||||
set_selection(index);
|
||||
};
|
||||
m_inspector_client->on_dom_node_properties_received = [this](auto properties_or_error) {
|
||||
if (properties_or_error.is_error()) {
|
||||
clear_style_json();
|
||||
clear_node_box_model();
|
||||
} else {
|
||||
auto properties = properties_or_error.release_value();
|
||||
|
||||
auto& accessibility_tree_container = top_tab_widget.add_tab<GUI::Widget>("Accessibility"_string);
|
||||
accessibility_tree_container.set_layout<GUI::VerticalBoxLayout>(4);
|
||||
m_accessibility_tree_view = accessibility_tree_container.add<GUI::TreeView>();
|
||||
m_accessibility_tree_view->on_selection_change = [this] {
|
||||
const auto& index = m_accessibility_tree_view->selection().first();
|
||||
set_selection(index);
|
||||
load_style_json(properties.computed_style_json, properties.resolved_style_json, properties.custom_properties_json);
|
||||
update_node_box_model(properties.node_box_sizing_json);
|
||||
update_aria_properties_state_model(properties.aria_properties_state_json);
|
||||
}
|
||||
};
|
||||
|
||||
auto& bottom_tab_widget = splitter.add<GUI::TabWidget>();
|
||||
|
|
@ -120,46 +68,31 @@ InspectorWidget::InspectorWidget()
|
|||
aria_properties_state_widget.set_layout<GUI::VerticalBoxLayout>(4);
|
||||
m_aria_properties_state_view = aria_properties_state_widget.add<GUI::TableView>();
|
||||
|
||||
m_dom_tree_view->set_focus(true);
|
||||
m_inspector_view->set_focus(true);
|
||||
}
|
||||
|
||||
InspectorWidget::~InspectorWidget() = default;
|
||||
|
||||
void InspectorWidget::inspect()
|
||||
{
|
||||
m_inspector_client->inspect();
|
||||
}
|
||||
|
||||
void InspectorWidget::reset()
|
||||
{
|
||||
m_inspector_client->reset();
|
||||
clear_style_json();
|
||||
clear_node_box_model();
|
||||
}
|
||||
|
||||
void InspectorWidget::select_default_node()
|
||||
{
|
||||
clear_style_json();
|
||||
|
||||
// FIXME: Select the <body> element, or else the root node.
|
||||
m_dom_tree_view->collapse_tree();
|
||||
m_dom_tree_view->set_cursor({}, GUI::AbstractView::SelectionUpdate::ClearIfNotSelected);
|
||||
m_inspector_client->select_default_node();
|
||||
}
|
||||
|
||||
void InspectorWidget::set_dom_json(StringView json)
|
||||
void InspectorWidget::select_hovered_node()
|
||||
{
|
||||
m_dom_tree_view->set_model(DOMTreeModel::create(*m_dom_tree_view, json).release_value_but_fixme_should_propagate_errors());
|
||||
m_dom_loaded = true;
|
||||
|
||||
if (m_pending_selection.has_value())
|
||||
set_selection(m_pending_selection.release_value());
|
||||
else
|
||||
select_default_node();
|
||||
}
|
||||
|
||||
void InspectorWidget::clear_dom_json()
|
||||
{
|
||||
m_dom_tree_view->set_model(nullptr);
|
||||
clear_style_json();
|
||||
m_dom_loaded = false;
|
||||
}
|
||||
|
||||
void InspectorWidget::set_dom_node_properties_json(Selection selection, StringView computed_values_json, StringView resolved_values_json, StringView custom_properties_json, StringView node_box_sizing_json, StringView aria_properties_state_json)
|
||||
{
|
||||
if (selection != m_selection) {
|
||||
dbgln("Got data for the wrong node id! Wanted ({}), got ({})", m_selection.to_string(), selection.to_string());
|
||||
return;
|
||||
}
|
||||
|
||||
load_style_json(computed_values_json, resolved_values_json, custom_properties_json);
|
||||
update_node_box_model(node_box_sizing_json);
|
||||
update_aria_properties_state_model(aria_properties_state_json);
|
||||
m_inspector_client->select_hovered_node();
|
||||
}
|
||||
|
||||
void InspectorWidget::load_style_json(StringView computed_values_json, StringView resolved_values_json, StringView custom_properties_json)
|
||||
|
|
@ -174,6 +107,18 @@ void InspectorWidget::load_style_json(StringView computed_values_json, StringVie
|
|||
m_custom_properties_table_view->set_searchable(true);
|
||||
}
|
||||
|
||||
void InspectorWidget::clear_style_json()
|
||||
{
|
||||
m_computed_style_table_view->set_model(nullptr);
|
||||
m_resolved_style_table_view->set_model(nullptr);
|
||||
m_custom_properties_table_view->set_model(nullptr);
|
||||
m_aria_properties_state_view->set_model(nullptr);
|
||||
|
||||
m_element_size_view->set_box_model({});
|
||||
m_element_size_view->set_node_content_width(0);
|
||||
m_element_size_view->set_node_content_height(0);
|
||||
}
|
||||
|
||||
void InspectorWidget::update_node_box_model(StringView node_box_sizing_json)
|
||||
{
|
||||
auto json_or_error = JsonValue::from_string(node_box_sizing_json);
|
||||
|
|
@ -201,12 +146,6 @@ void InspectorWidget::update_node_box_model(StringView node_box_sizing_json)
|
|||
m_element_size_view->set_box_model(m_node_box_sizing);
|
||||
}
|
||||
|
||||
void InspectorWidget::update_aria_properties_state_model(StringView aria_properties_state_json)
|
||||
{
|
||||
m_aria_properties_state_view->set_model(PropertyTableModel::create(PropertyTableModel::Type::ARIAProperties, aria_properties_state_json).release_value_but_fixme_should_propagate_errors());
|
||||
m_aria_properties_state_view->set_searchable(true);
|
||||
}
|
||||
|
||||
void InspectorWidget::clear_node_box_model()
|
||||
{
|
||||
m_node_box_sizing = Web::Layout::BoxModelMetrics {};
|
||||
|
|
@ -215,21 +154,10 @@ void InspectorWidget::clear_node_box_model()
|
|||
m_element_size_view->set_box_model(m_node_box_sizing);
|
||||
}
|
||||
|
||||
void InspectorWidget::clear_style_json()
|
||||
void InspectorWidget::update_aria_properties_state_model(StringView aria_properties_state_json)
|
||||
{
|
||||
m_computed_style_table_view->set_model(nullptr);
|
||||
m_resolved_style_table_view->set_model(nullptr);
|
||||
m_custom_properties_table_view->set_model(nullptr);
|
||||
m_aria_properties_state_view->set_model(nullptr);
|
||||
|
||||
m_element_size_view->set_box_model({});
|
||||
m_element_size_view->set_node_content_width(0);
|
||||
m_element_size_view->set_node_content_height(0);
|
||||
}
|
||||
|
||||
void InspectorWidget::set_accessibility_json(StringView json)
|
||||
{
|
||||
m_accessibility_tree_view->set_model(TreeModel::create(TreeModel::Type::AccessibilityTree, json).release_value_but_fixme_should_propagate_errors());
|
||||
m_aria_properties_state_view->set_model(PropertyTableModel::create(PropertyTableModel::Type::ARIAProperties, aria_properties_state_json).release_value_but_fixme_should_propagate_errors());
|
||||
m_aria_properties_state_view->set_searchable(true);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue