Qt: Dock inspector in browser window

Ladybird/Qt/BrowserWindow.cpp

@@ -363,6 +363,15 @@ BrowserWindow::BrowserWindow(Vector<URL::URL> const& initial_urls, IsPopupWindow
         }
     });
 
+    auto* inspector_pane_action = new QAction("Open Inspector Pane", this);
+    inspector_pane_action->setIcon(load_icon_from_uri("resource://icons/browser/dom-tree.png"sv));
+    inspect_menu->addAction(inspector_pane_action);
+    QObject::connect(inspector_pane_action, &QAction::triggered, this, [this] {
+        if (m_current_tab) {
+            m_current_tab->show_inspector_pane();
+        }
+    });
+
     auto* task_manager_action = new QAction("Open Task &Manager", this);
     task_manager_action->setIcon(load_icon_from_uri("resource://icons/16x16/app-system-monitor.png"sv));
     task_manager_action->setShortcuts({ QKeySequence("Ctrl+Shift+M") });

Ladybird/Qt/InspectorWidget.cpp

@@ -20,15 +20,16 @@ namespace Ladybird {
 
 extern bool is_using_dark_system_theme(QWidget&);
 
-InspectorWidget::InspectorWidget(QWidget* tab, WebContentView& content_view)
-    : QWidget(tab, Qt::Window)
+InspectorWidget::InspectorWidget(QWidget* tab, WebContentView& content_view, Qt::WindowType window_type)
+    : QWidget(tab, window_type)
 {
     m_inspector_view = new WebContentView(this);
 
     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);
+    auto is_windowed = window_type == Qt::Window;
+    m_inspector_client = make<WebView::InspectorClient>(content_view, *m_inspector_view, is_windowed);
 
     m_edit_node_action = new QAction("&Edit node", this);
     connect(m_edit_node_action, &QAction::triggered, [this]() { m_inspector_client->context_menu_edit_dom_node(); });
@@ -136,11 +137,15 @@ InspectorWidget::InspectorWidget(QWidget* tab, WebContentView& content_view)
         m_cookie_context_menu->exec(m_inspector_view->map_point_to_global_position(position));
     };
 
+    m_inspector_client->on_requested_close = [this]() {
+        close();
+    };
+
     setLayout(new QVBoxLayout);
     layout()->addWidget(m_inspector_view);
 
-    setWindowTitle("Inspector");
-    resize(875, 825);
+    if (is_windowed)
+        setWindowTitle("Inspector");
 
     // Listen for DPI changes
     m_device_pixel_ratio = devicePixelRatio();
@@ -183,6 +188,14 @@ void InspectorWidget::select_default_node()
     m_inspector_client->select_default_node();
 }
 
+void InspectorWidget::setWindowFlag(Qt::WindowType flag, bool on)
+{
+    QWidget::setWindowFlag(flag, on);
+
+    auto is_windowed = flag == Qt::Window;
+    m_inspector_client->set_is_windowed(is_windowed);
+}
+
 void InspectorWidget::device_pixel_ratio_changed(qreal dpi)
 {
     m_device_pixel_ratio = dpi;

Ladybird/Qt/InspectorWidget.h

@@ -22,7 +22,7 @@ class InspectorWidget final : public QWidget {
     Q_OBJECT
 
 public:
-    InspectorWidget(QWidget* tab, WebContentView& content_view);
+    InspectorWidget(QWidget* tab, WebContentView& content_view, Qt::WindowType window_type);
     virtual ~InspectorWidget() override;
 
     void inspect();
@@ -31,6 +31,8 @@ class InspectorWidget final : public QWidget {
     void select_hovered_node();
     void select_default_node();
 
+    void setWindowFlag(Qt::WindowType flag, bool on = true);
+
 public slots:
     void device_pixel_ratio_changed(qreal dpi);
 

Ladybird/Qt/Tab.cpp

@@ -70,8 +70,11 @@ Tab::Tab(BrowserWindow* window, RefPtr<WebView::WebContentClient> parent_client,
     focus_location_editor_action->setShortcut(QKeySequence("Ctrl+L"));
     addAction(focus_location_editor_action);
 
+    m_splitter = new QSplitter(this);
+    m_splitter->addWidget(m_view);
+
     m_layout->addWidget(m_toolbar);
-    m_layout->addWidget(m_view);
+    m_layout->addWidget(m_splitter);
     m_layout->addWidget(m_find_in_page);
 
     m_hamburger_button = new QToolButton(m_toolbar);
@@ -883,18 +886,33 @@ void Tab::recreate_toolbar_icons()
 void Tab::show_inspector_window(InspectorTarget inspector_target)
 {
     if (!m_inspector_widget)
-        m_inspector_widget = new InspectorWidget(this, view());
-    else
-        m_inspector_widget->inspect();
+        m_inspector_widget = new InspectorWidget(this, view(), Qt::Window);
+    else {
+        m_inspector_widget->setParent(nullptr);
+        m_inspector_widget->setWindowFlag(Qt::Window);
+    }
 
     m_inspector_widget->show();
+    m_inspector_widget->resize(875, 825);
     m_inspector_widget->activateWindow();
     m_inspector_widget->raise();
 
     if (inspector_target == InspectorTarget::HoveredElement)
         m_inspector_widget->select_hovered_node();
+}
+
+void Tab::show_inspector_pane()
+{
+    if (!m_inspector_widget)
+        m_inspector_widget = new InspectorWidget(this, view(), Qt::Widget);
     else
-        m_inspector_widget->select_default_node();
+        m_inspector_widget->setWindowFlag(Qt::Widget);
+
+    m_splitter->addWidget(m_inspector_widget);
+
+    m_splitter->setSizes({ 200, 100 });
+
+    m_inspector_widget->show();
 }
 
 void Tab::show_find_in_page()

Ladybird/Qt/Tab.h

@@ -16,6 +16,7 @@
 #include <QLineEdit>
 #include <QMenu>
 #include <QPointer>
+#include <QSplitter>
 #include <QToolBar>
 #include <QToolButton>
 #include <QWidget>
@@ -51,6 +52,7 @@ class Tab final : public QWidget {
         HoveredElement
     };
     void show_inspector_window(InspectorTarget = InspectorTarget::Document);
+    void show_inspector_pane();
 
     void show_find_in_page();
     void find_previous();
@@ -105,6 +107,7 @@ public slots:
 
     void close_sub_widgets();
 
+    QSplitter* m_splitter { nullptr };
     QBoxLayout* m_layout { nullptr };
     QToolBar* m_toolbar { nullptr };
     QToolButton* m_hamburger_button { nullptr };