system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-09-06 17:06:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Browser: Port the Inspector to the WebView InspectorClient

Browse source
This commit is contained in:
Timothy Flynn 2023-11-23 19:50:16 -05:00 committed by Andreas Kling
parent 1fe486cebe
commit 39e32e80cd
3 changed files with 70 additions and 182 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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);
}
}

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

@ -9,61 +9,41 @@
#pragma once
#include "ElementSizePreviewWidget.h"
#include <AK/String.h>
#include <AK/StringView.h>
#include <LibGUI/Widget.h>
#include <LibWeb/CSS/Selector.h>
#include <LibWeb/Forward.h>
#include <LibWeb/Layout/BoxModelMetrics.h>
#include <LibWebView/Forward.h>
#include <LibWebView/OutOfProcessWebView.h>
namespace Browser {
class InspectorWidget final : public GUI::Widget {
C_OBJECT(InspectorWidget)
public:
struct Selection {
i32 dom_node_id { 0 };
Optional<Web::CSS::Selector::PseudoElement> pseudo_element {};
static NonnullRefPtr<InspectorWidget> create(WebView::OutOfProcessWebView& content_view);
virtual ~InspectorWidget();
bool operator==(Selection const& other) const
{
return dom_node_id == other.dom_node_id && pseudo_element == other.pseudo_element;
}
void inspect();
void reset();
ErrorOr<String> to_string() const
{
if (pseudo_element.has_value())
return String::formatted("id: {}, pseudo: {}", dom_node_id, Web::CSS::pseudo_element_name(pseudo_element.value()));
return String::formatted("id: {}", dom_node_id);
}
};
virtual ~InspectorWidget() = default;
void set_web_view(NonnullRefPtr<WebView::OutOfProcessWebView> web_view) { m_web_view = web_view; }
void set_dom_json(StringView);
void clear_dom_json();
void set_dom_node_properties_json(Selection, StringView computed_values_json, StringView resolved_values_json, StringView custom_properties_json, StringView node_box_sizing_json, StringView aria_properties_state_json);
void set_accessibility_json(StringView);
void set_selection(Selection);
void select_default_node();
void select_hovered_node();
private:
InspectorWidget();
explicit InspectorWidget(WebView::OutOfProcessWebView& content_view);
void set_selection(GUI::ModelIndex);
void load_style_json(StringView computed_values_json, StringView resolved_values_json, StringView custom_properties_json);
void update_node_box_model(StringView node_box_sizing_json);
void update_aria_properties_state_model(StringView aria_properties_state_json);
void clear_style_json();
void update_node_box_model(StringView node_box_sizing_json);
void clear_node_box_model();
RefPtr<WebView::OutOfProcessWebView> m_web_view;
void update_aria_properties_state_model(StringView aria_properties_state_json);
RefPtr<WebView::OutOfProcessWebView> m_inspector_view;
OwnPtr<WebView::InspectorClient> m_inspector_client;
RefPtr<GUI::TreeView> m_dom_tree_view;
RefPtr<GUI::TreeView> m_accessibility_tree_view;
RefPtr<GUI::TableView> m_computed_style_table_view;
RefPtr<GUI::TableView> m_resolved_style_table_view;
RefPtr<GUI::TableView> m_custom_properties_table_view;
@ -71,10 +51,6 @@ private:
RefPtr<ElementSizePreviewWidget> m_element_size_view;
Web::Layout::BoxModelMetrics m_node_box_sizing;
Optional<Selection> m_pending_selection;
Selection m_selection;
bool m_dom_loaded { false };
};
}

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

@ -232,7 +232,7 @@ Tab::Tab(BrowserWindow& window)
update_bookmark_button(url.to_deprecated_string());
if (m_dom_inspector_widget)
m_dom_inspector_widget->clear_dom_json();
m_dom_inspector_widget->reset();
if (m_console_widget)
m_console_widget->reset();
@ -244,10 +244,8 @@ Tab::Tab(BrowserWindow& window)
update_status();
if (m_dom_inspector_widget) {
m_web_content_view->inspect_dom_tree();
m_web_content_view->inspect_accessibility_tree();
}
if (m_dom_inspector_widget)
m_dom_inspector_widget->inspect();
};
view().on_navigate_back = [this]() {
@ -575,16 +573,6 @@ Tab::Tab(BrowserWindow& window)
view_source(url, source);
};
view().on_received_dom_tree = [this](auto& dom_tree) {
if (m_dom_inspector_widget)
m_dom_inspector_widget->set_dom_json(dom_tree);
};
view().on_received_accessibility_tree = [this](auto& accessibility_tree) {
if (m_dom_inspector_widget)
m_dom_inspector_widget->set_accessibility_json(accessibility_tree);
};
auto focus_location_box_action = GUI::Action::create(
"Focus location box", { Mod_Ctrl, Key_L }, Key_F6, [this](auto&) {
m_location_box->set_focus(true);
@ -882,16 +870,12 @@ void Tab::show_inspector_window(Browser::Tab::InspectorTarget inspector_target)
window->on_close = [&]() {
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();
m_web_content_view->inspect_accessibility_tree();
m_dom_inspector_widget = window->set_main_widget<InspectorWidget>(*m_web_content_view);
}
if (inspector_target == InspectorTarget::HoveredElement) {
// FIXME: Handle pseudo-elements
auto hovered_node = m_web_content_view->get_hovered_node_id();
m_dom_inspector_widget->set_selection({ hovered_node });
m_dom_inspector_widget->select_hovered_node();
} else {
VERIFY(inspector_target == InspectorTarget::Document);
m_dom_inspector_widget->select_default_node();