mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-09-11 05:25:32 +03:00
Ladybird: Add a very simple DOM inspector
We use a ModelTranslator to expose a DOMTreeModel from LibWebView :^) It allows you to select the currently inspected node, which causes the engine to render a little box model overlay above the web content.
This commit is contained in:
parent
98b6aea234
commit
5ac5fef468
Notes:
sideshowbarker
2024-07-17 02:43:17 +09:00
Author: https://github.com/awesomekling Commit: https://github.com/SerenityOS/serenity/commit/5ac5fef468 Pull-request: https://github.com/SerenityOS/serenity/pull/16583 Reviewed-by: https://github.com/ADKaster Reviewed-by: https://github.com/linusg
@ -112,6 +112,16 @@ BrowserWindow::BrowserWindow()
|
||||
}
|
||||
});
|
||||
|
||||
auto* inspector_action = new QAction("Open &Inspector");
|
||||
inspector_action->setIcon(QIcon(QString("%1/res/icons/browser/dom-tree.png").arg(s_serenity_resource_root.characters())));
|
||||
inspector_action->setShortcut(QKeySequence("Ctrl+Shift+I"));
|
||||
inspect_menu->addAction(inspector_action);
|
||||
QObject::connect(inspector_action, &QAction::triggered, this, [this] {
|
||||
if (m_current_tab) {
|
||||
m_current_tab->view().show_inspector();
|
||||
}
|
||||
});
|
||||
|
||||
auto* debug_menu = menuBar()->addMenu("&Debug");
|
||||
|
||||
auto* dump_dom_tree_action = new QAction("Dump DOM Tree");
|
||||
|
@ -54,6 +54,7 @@ set(SOURCES
|
||||
EventLoopPluginQt.cpp
|
||||
FontPluginQt.cpp
|
||||
ImageCodecPluginLadybird.cpp
|
||||
ModelTranslator.cpp
|
||||
PageClientLadybird.cpp
|
||||
RequestManagerQt.cpp
|
||||
main.cpp
|
||||
@ -71,7 +72,7 @@ set(SOURCES
|
||||
qt_add_executable(ladybird ${SOURCES}
|
||||
MANUAL_FINALIZATION
|
||||
)
|
||||
target_link_libraries(ladybird PRIVATE Qt::Widgets Qt::Network LibWeb LibWebSocket LibGL LibSoftGPU LibMain)
|
||||
target_link_libraries(ladybird PRIVATE Qt::Widgets Qt::Network LibWeb LibWebSocket LibGUI LibWebView LibGL LibSoftGPU LibMain)
|
||||
|
||||
set_target_properties(ladybird PROPERTIES
|
||||
MACOSX_BUNDLE_GUI_IDENTIFIER org.serenityos.ladybird
|
||||
|
@ -78,7 +78,7 @@ GUI::ModelIndex ModelTranslator::to_gui(QModelIndex const& index) const
|
||||
{
|
||||
if (!index.isValid())
|
||||
return {};
|
||||
return m_model->create_index_unsafe(index.row(), index.column(), index.internalPointer());
|
||||
return m_model->unsafe_create_index(index.row(), index.column(), index.internalPointer());
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -13,6 +13,7 @@
|
||||
#include "EventLoopPluginQt.h"
|
||||
#include "FontPluginQt.h"
|
||||
#include "ImageCodecPluginLadybird.h"
|
||||
#include "ModelTranslator.h"
|
||||
#include "PageClientLadybird.h"
|
||||
#include "RequestManagerQt.h"
|
||||
#include "Utilities.h"
|
||||
@ -53,6 +54,7 @@
|
||||
#include <LibWeb/Painting/PaintableBox.h>
|
||||
#include <LibWeb/Painting/StackingContext.h>
|
||||
#include <LibWeb/Platform/EventLoopPlugin.h>
|
||||
#include <LibWebView/DOMTreeModel.h>
|
||||
#include <QApplication>
|
||||
#include <QCursor>
|
||||
#include <QIcon>
|
||||
@ -64,6 +66,7 @@
|
||||
#include <QScrollBar>
|
||||
#include <QTextEdit>
|
||||
#include <QToolTip>
|
||||
#include <QTreeView>
|
||||
#include <QVBoxLayout>
|
||||
|
||||
String s_serenity_resource_root;
|
||||
@ -595,6 +598,38 @@ void SimpleWebView::show_js_console()
|
||||
m_js_console_input_edit->setFocus();
|
||||
}
|
||||
|
||||
void SimpleWebView::ensure_inspector_widget()
|
||||
{
|
||||
if (m_inspector_widget)
|
||||
return;
|
||||
m_inspector_widget = new QWidget;
|
||||
m_inspector_widget->setWindowTitle("Inspector");
|
||||
auto* layout = new QVBoxLayout;
|
||||
m_inspector_widget->setLayout(layout);
|
||||
auto* tree_view = new QTreeView;
|
||||
layout->addWidget(tree_view);
|
||||
|
||||
auto dom_tree = m_page_client->page().top_level_browsing_context().active_document()->dump_dom_tree_as_json();
|
||||
auto dom_tree_model = ::WebView::DOMTreeModel::create(dom_tree);
|
||||
auto* model = new Ladybird::ModelTranslator(dom_tree_model);
|
||||
tree_view->setModel(model);
|
||||
tree_view->setHeaderHidden(true);
|
||||
tree_view->expandToDepth(3);
|
||||
|
||||
m_inspector_widget->resize(640, 480);
|
||||
|
||||
QObject::connect(tree_view->selectionModel(), &QItemSelectionModel::currentChanged, [this](QModelIndex const& index, QModelIndex const&) {
|
||||
auto const* json = (JsonObject const*)index.internalPointer();
|
||||
m_page_client->page().top_level_browsing_context().active_document()->set_inspected_node(Web::DOM::Node::from_id(json->get("id"sv).to_i32()));
|
||||
});
|
||||
}
|
||||
|
||||
void SimpleWebView::show_inspector()
|
||||
{
|
||||
ensure_inspector_widget();
|
||||
m_inspector_widget->show();
|
||||
}
|
||||
|
||||
void SimpleWebView::set_color_scheme(ColorScheme color_scheme)
|
||||
{
|
||||
switch (color_scheme) {
|
||||
|
@ -56,6 +56,7 @@ public:
|
||||
void did_get_js_console_messages(i32 start_index, Vector<String> message_types, Vector<String> messages);
|
||||
|
||||
void show_js_console();
|
||||
void show_inspector();
|
||||
|
||||
Gfx::IntPoint to_content(Gfx::IntPoint) const;
|
||||
Gfx::IntPoint to_widget(Gfx::IntPoint) const;
|
||||
@ -71,7 +72,9 @@ signals:
|
||||
|
||||
private:
|
||||
void update_viewport_rect();
|
||||
|
||||
void ensure_js_console_widget();
|
||||
void ensure_inspector_widget();
|
||||
|
||||
OwnPtr<Ladybird::PageClientLadybird> m_page_client;
|
||||
|
||||
@ -79,6 +82,8 @@ private:
|
||||
bool m_should_show_line_box_borders { false };
|
||||
|
||||
QPointer<QWidget> m_js_console_widget;
|
||||
QPointer<QWidget> m_inspector_widget;
|
||||
|
||||
QTextEdit* m_js_console_output_edit { nullptr };
|
||||
QLineEdit* m_js_console_input_edit { nullptr };
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user