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

Ladybird/Qt: Port the Inspector to the WebView InspectorClient

Browse source
This commit is contained in:
Timothy Flynn 2023-11-23 20:04:54 -05:00 • committed by Andreas Kling
parent 39e32e80cd
commit 52b5bcdb6d
3 changed files with 72 additions and 190 deletions
Download patch file Download diff file Expand all files Collapse all files

168
Ladybird/Qt/InspectorWidget.cpp
View file

@ -6,48 +6,56 @@
#include "InspectorWidget.h"
#include <AK/JsonObject.h>
#include <LibWebView/InspectorClient.h>
#include <QCloseEvent>
#include <QHeaderView>
#include <QSplitter>
#include <QStringList>
#include <QTabWidget>
#include <QTableView>
#include <QTreeView>
#include <QVBoxLayout>
namespace Ladybird {
InspectorWidget::InspectorWidget()
{
setLayout(new QVBoxLayout);
auto splitter = new QSplitter(this);
layout()->addWidget(splitter);
splitter->setOrientation(Qt::Vertical);
extern bool is_using_dark_system_theme(QWidget&);
auto add_tab = [&](auto* tab_widget, auto* widget, auto name) {
auto container = new QWidget;
container->setLayout(new QVBoxLayout);
container->layout()->addWidget(widget);
tab_widget->addTab(container, name);
InspectorWidget::InspectorWidget(WebContentView& content_view)
{
m_inspector_view = make<WebContentView>(StringView {}, WebView::EnableCallgrindProfiling::No, UseLagomNetworking::No, WebView::EnableGPUPainting::No);
if (is_using_dark_system_theme(*this))
m_inspector_view->update_palette(WebContentView::PaletteMode::Dark);
m_inspector_client = make<WebView::InspectorClient>(content_view, *m_inspector_view);
m_inspector_client->on_dom_node_properties_received = [this](auto properties_or_error) {
if (properties_or_error.is_error()) {
clear_style_json();
} else {
auto properties = properties_or_error.release_value();
load_style_json(properties.computed_style_json, properties.resolved_style_json, properties.custom_properties_json);
}
};
auto* top_tab_widget = new QTabWidget;
splitter->addWidget(top_tab_widget);
setLayout(new QVBoxLayout);
m_dom_tree_view = new QTreeView;
m_dom_tree_view->setHeaderHidden(true);
add_tab(top_tab_widget, m_dom_tree_view, "DOM");
auto* splitter = new QSplitter(this);
splitter->setOrientation(Qt::Vertical);
layout()->addWidget(splitter);
m_accessibility_tree_view = new QTreeView;
m_accessibility_tree_view->setHeaderHidden(true);
add_tab(top_tab_widget, m_accessibility_tree_view, "Accessibility");
splitter->addWidget(m_inspector_view.ptr());
splitter->setStretchFactor(0, 2);
auto add_table_tab = [&](auto* tab_widget, auto name) {
auto* table_view = new QTableView;
table_view->horizontalHeader()->setSectionResizeMode(QHeaderView::Stretch);
table_view->verticalHeader()->setVisible(false);
table_view->horizontalHeader()->setVisible(false);
add_tab(tab_widget, table_view, name);
auto* container = new QWidget;
container->setLayout(new QVBoxLayout);
container->layout()->addWidget(table_view);
tab_widget->addTab(container, name);
return table_view;
};
@ -56,44 +64,32 @@ InspectorWidget::InspectorWidget()
m_resolved_style_table = add_table_tab(node_tabs, "Resolved");
m_custom_properties_table = add_table_tab(node_tabs, "Variables");
splitter->addWidget(node_tabs);
setWindowTitle("Inspector");
resize(875, 825);
}
void InspectorWidget::set_dom_json(StringView dom_json)
InspectorWidget::~InspectorWidget() = default;
void InspectorWidget::inspect()
{
m_dom_model = TreeModel::create(TreeModel::Type::DOMTree, dom_json).release_value_but_fixme_should_propagate_errors();
m_dom_tree_view->setModel(m_dom_model);
m_dom_loaded = true;
QObject::connect(m_dom_tree_view->selectionModel(), &QItemSelectionModel::selectionChanged,
[this](QItemSelection const& selected, QItemSelection const&) {
if (auto indexes = selected.indexes(); !indexes.empty())
set_selection(indexes.first());
});
if (m_pending_selection.has_value())
set_selection(m_pending_selection.release_value());
else
select_default_node();
m_inspector_client->inspect();
}
void InspectorWidget::set_accessibility_json(StringView accessibility_json)
void InspectorWidget::reset()
{
m_accessibility_model = TreeModel::create(TreeModel::Type::AccessibilityTree, accessibility_json).release_value_but_fixme_should_propagate_errors();
m_accessibility_tree_view->setModel(m_accessibility_model);
}
void InspectorWidget::clear_dom_json()
{
m_dom_tree_view->setModel(nullptr);
m_dom_model = nullptr;
// The accessibility tree is pretty much another form of the DOM tree, so should be cleared at the time time.
m_accessibility_tree_view->setModel(nullptr);
m_accessibility_model = nullptr;
m_inspector_client->reset();
clear_style_json();
clear_selection();
m_dom_loaded = false;
}
void InspectorWidget::select_hovered_node()
{
m_inspector_client->select_hovered_node();
}
void InspectorWidget::select_default_node()
{
m_inspector_client->select_default_node();
}
void InspectorWidget::load_style_json(StringView computed_style_json, StringView resolved_style_json, StringView custom_properties_json)
@ -118,76 +114,12 @@ void InspectorWidget::clear_style_json()
m_custom_properties_table->setModel(nullptr);
m_custom_properties_model = nullptr;
clear_selection();
}
void InspectorWidget::closeEvent(QCloseEvent* event)
{
event->accept();
if (on_close)
on_close();
clear_selection();
}
void InspectorWidget::clear_selection()
{
m_selection = {};
m_dom_tree_view->clearSelection();
}
void InspectorWidget::set_selection(Selection selection)
{
if (!m_dom_loaded) {
m_pending_selection = selection;
return;
}
auto index = m_dom_model->index_for_node(selection.dom_node_id, selection.pseudo_element);
if (!index.isValid()) {
dbgln("Failed to set DOM inspector selection! Could not find valid model index for node: {}", selection.dom_node_id);
return;
}
m_dom_tree_view->scrollTo(index);
m_dom_tree_view->setCurrentIndex(index);
}
void InspectorWidget::select_default_node()
{
clear_style_json();
m_dom_tree_view->collapseAll();
m_dom_tree_view->setCurrentIndex({});
}
void InspectorWidget::set_selection(QModelIndex const& index)
{
if (!index.isValid())
return;
auto const* json = static_cast<JsonObject const*>(index.constInternalPointer());
VERIFY(json);
Selection selection {};
if (json->has_u32("pseudo-element"sv)) {
selection.dom_node_id = json->get_i32("parent-id"sv).value();
selection.pseudo_element = static_cast<Web::CSS::Selector::PseudoElement>(json->get_u32("pseudo-element"sv).value());
} else {
selection.dom_node_id = json->get_i32("id"sv).value();
}
if (selection == m_selection)
return;
m_selection = selection;
VERIFY(on_dom_node_inspected);
auto maybe_inspected_node_properties = on_dom_node_inspected(m_selection.dom_node_id, m_selection.pseudo_element);
if (!maybe_inspected_node_properties.is_error()) {
auto properties = maybe_inspected_node_properties.release_value();
load_style_json(properties.computed_style_json, properties.resolved_style_json, properties.custom_properties_json);
} else {
clear_style_json();
}
m_inspector_client->clear_selection();
}
}