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.

Ladybird/BrowserWindow.cpp

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

Ladybird/CMakeLists.txt

@@ -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

Ladybird/ModelTranslator.cpp

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

Ladybird/SimpleWebView.cpp

@@ -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) {

Ladybird/SimpleWebView.h

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