UI/Qt: Add UI components to enable DevTools at runtime

Author: https://github.com/trflynn89
Commit: 0065dde749
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3956

UI/Qt/BrowserWindow.cpp

@@ -32,8 +32,10 @@
 #include <QClipboard>
 #include <QGuiApplication>
 #include <QInputDialog>
+#include <QMessageBox>
 #include <QPlainTextEdit>
 #include <QShortcut>
+#include <QStatusBar>
 #include <QTabBar>
 #include <QWindow>
 
@@ -353,6 +355,30 @@ BrowserWindow::BrowserWindow(Vector<URL::URL> const& initial_urls, IsPopupWindow
         }
     });
 
+    m_enable_devtools_action = new QAction("Enable &DevTools", this);
+    m_enable_devtools_action->setIcon(load_icon_from_uri("resource://icons/browser/dom-tree.png"sv));
+    m_enable_devtools_action->setShortcuts({
+        QKeySequence(Qt::CTRL | Qt::SHIFT | Qt::Key_I),
+        QKeySequence(Qt::CTRL | Qt::SHIFT | Qt::Key_C),
+        QKeySequence(Qt::Key_F12),
+    });
+    inspect_menu->addAction(m_enable_devtools_action);
+    QObject::connect(m_enable_devtools_action, &QAction::triggered, this, [this] {
+        if (auto result = WebView::Application::the().toggle_devtools_enabled(); result.is_error()) {
+            auto error_message = MUST(String::formatted("Unable to start DevTools: {}", result.error()));
+            QMessageBox::warning(this, "Ladybird", qstring_from_ak_string(error_message));
+        } else {
+            switch (result.value()) {
+            case WebView::Application::DevtoolsState::Disabled:
+                devtools_disabled();
+                break;
+            case WebView::Application::DevtoolsState::Enabled:
+                devtools_enabled();
+                break;
+            }
+        }
+    });
+
     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") });
@@ -693,6 +719,29 @@ BrowserWindow::BrowserWindow(Vector<URL::URL> const& initial_urls, IsPopupWindow
     setContextMenuPolicy(Qt::PreventContextMenu);
 }
 
+void BrowserWindow::devtools_disabled()
+{
+    m_enable_devtools_action->setText("Enable &DevTools");
+    setStatusBar(nullptr);
+}
+
+void BrowserWindow::devtools_enabled()
+{
+    auto* disable_button = new TabBarButton(create_tvg_icon_with_theme_colors("close", palette()), this);
+    disable_button->setToolTip("Disable DevTools");
+
+    connect(disable_button, &QPushButton::clicked, this, [this]() {
+        MUST(WebView::Application::the().toggle_devtools_enabled());
+        devtools_disabled();
+    });
+
+    m_enable_devtools_action->setText("Disable &DevTools");
+    statusBar()->addPermanentWidget(disable_button);
+
+    auto message = MUST(String::formatted("DevTools is enabled on port {}", WebView::Application::chrome_options().devtools_port));
+    statusBar()->showMessage(qstring_from_ak_string(message));
+}
+
 void BrowserWindow::set_current_tab(Tab* tab)
 {
     m_current_tab = tab;

UI/Qt/BrowserWindow.h

@@ -179,6 +179,9 @@ private:
     Web::CSS::PreferredColorScheme m_preferred_color_scheme;
     void set_preferred_color_scheme(Web::CSS::PreferredColorScheme color_scheme);
 
+    void devtools_disabled();
+    void devtools_enabled();
+
     QTabWidget* m_tabs_container { nullptr };
     Tab* m_current_tab { nullptr };
     QMenu* m_zoom_menu { nullptr };
@@ -197,6 +200,7 @@ private:
     QAction* m_select_all_action { nullptr };
     QAction* m_find_in_page_action { nullptr };
     QAction* m_view_source_action { nullptr };
+    QAction* m_enable_devtools_action { nullptr };
     QAction* m_show_line_box_borders_action { nullptr };
     QAction* m_enable_scripting_action { nullptr };
     QAction* m_enable_content_filtering_action { nullptr };