Browser: Implement "Inspect Element" context menu action

This is finally working for OOPWV! :^)

3 files changed, 44 insertions, 14 deletions

diff --git a/Userland/Applications/Browser/InspectorWidget.cpp b/Userland/Applications/Browser/InspectorWidget.cpp
index 82c5ae4a8f..3be62726a2 100644
--- a/Userland/Applications/Browser/InspectorWidget.cpp
+++ b/Userland/Applications/Browser/InspectorWidget.cpp
@@ -19,6 +19,26 @@
 
 namespace Browser {
 
+void InspectorWidget::set_inspected_node(i32 node_id)
+{
+    if (!m_dom_json.has_value()) {
+        // DOM Tree hasn't been loaded yet, so make a note to inspect it later.
+        m_pending_inspect_node_id = node_id;
+        return;
+    }
+
+    auto* model = verify_cast<Web::DOMTreeModel>(m_dom_tree_view->model());
+    auto index = model->index_for_node(node_id);
+    if (!index.is_valid()) {
+        dbgln("InspectorWidget told to inspect non-existent node, id={}", node_id);
+        return;
+    }
+
+    m_dom_tree_view->expand_all_parents_of(index);
+    m_dom_tree_view->set_cursor(index, GUI::AbstractView::SelectionUpdate::Set);
+    set_inspected_node(index);
+}
+
 void InspectorWidget::set_inspected_node(GUI::ModelIndex const index)
 {
     auto* json = static_cast<JsonObject const*>(index.internal_data());
@@ -27,16 +47,10 @@ void InspectorWidget::set_inspected_node(GUI::ModelIndex const index)
         return;
     m_inspected_node_id = inspected_node;
 
-    m_dom_tree_view->set_cursor(index, GUI::AbstractView::SelectionUpdate::Set);
-    m_dom_tree_view->expand_all_parents_of(index);
-
     auto maybe_inspected_node_properties = m_web_view->inspect_dom_node(m_inspected_node_id);
     if (maybe_inspected_node_properties.has_value()) {
         auto inspected_node_properties = maybe_inspected_node_properties.value();
-        m_inspected_node_specified_values_json = inspected_node_properties.specified_values_json;
-        m_inspected_node_computed_values_json = inspected_node_properties.computed_values_json;
-        m_style_table_view->set_model(Web::StylePropertiesModel::create(m_inspected_node_specified_values_json.value().view()));
-        m_computed_style_table_view->set_model(Web::StylePropertiesModel::create(m_inspected_node_computed_values_json.value().view()));
+        load_style_json(inspected_node_properties.specified_values_json, inspected_node_properties.computed_values_json);
     } else {
         m_inspected_node_specified_values_json.clear();
         m_inspected_node_computed_values_json.clear();
@@ -84,6 +98,12 @@ void InspectorWidget::set_dom_json(String json)
 
     // FIXME: Support the LayoutTreeModel
     // m_layout_tree_view->set_model(Web::LayoutTreeModel::create(*document));
+
+    if (m_pending_inspect_node_id.has_value()) {
+        i32 node_id = m_pending_inspect_node_id.value();
+        m_pending_inspect_node_id.clear();
+        set_inspected_node(node_id);
+    }
 }
 
 void InspectorWidget::set_dom_node_properties_json(i32 node_id, String specified_values_json, String computed_values_json)
@@ -93,6 +113,11 @@ void InspectorWidget::set_dom_node_properties_json(i32 node_id, String specified
         return;
     }
 
+    load_style_json(specified_values_json, computed_values_json);
+}
+
+void InspectorWidget::load_style_json(String specified_values_json, String computed_values_json)
+{
     m_inspected_node_specified_values_json = specified_values_json;
     m_inspected_node_computed_values_json = computed_values_json;
     m_style_table_view->set_model(Web::StylePropertiesModel::create(m_inspected_node_specified_values_json.value().view()));
diff --git a/Userland/Applications/Browser/InspectorWidget.h b/Userland/Applications/Browser/InspectorWidget.h
index 8338e9deea..b56fe700cb 100644
--- a/Userland/Applications/Browser/InspectorWidget.h
+++ b/Userland/Applications/Browser/InspectorWidget.h
@@ -18,14 +18,16 @@ public:
     virtual ~InspectorWidget();
 
     void set_web_view(NonnullRefPtr<Web::OutOfProcessWebView> web_view) { m_web_view = web_view; }
-
     void set_dom_json(String);
     void set_dom_node_properties_json(i32 node_id, String specified_values_json, String computed_values_json);
 
+    void set_inspected_node(i32 node_id);
+
 private:
     InspectorWidget();
 
     void set_inspected_node(GUI::ModelIndex);
+    void load_style_json(String specified_values_json, String computed_values_json);
 
     RefPtr<Web::OutOfProcessWebView> m_web_view;
 
@@ -35,8 +37,9 @@ private:
     RefPtr<GUI::TableView> m_computed_style_table_view;
 
     // Multi-process mode
-    Optional<String> m_dom_json;
+    Optional<i32> m_pending_inspect_node_id;
     i32 m_inspected_node_id;
+    Optional<String> m_dom_json;
     Optional<String> m_inspected_node_specified_values_json;
     Optional<String> m_inspected_node_computed_values_json;
 };
diff --git a/Userland/Applications/Browser/Tab.cpp b/Userland/Applications/Browser/Tab.cpp
index 8f28ad04c7..49c5f42cad 100644
--- a/Userland/Applications/Browser/Tab.cpp
+++ b/Userland/Applications/Browser/Tab.cpp
@@ -340,9 +340,6 @@ Tab::Tab(BrowserWindow& window)
     hooks().on_context_menu_request = [&](auto& screen_position) {
         m_page_context_menu->popup(screen_position);
     };
-
-    // FIXME: This is temporary, until the OOPWV properly supports the DOM Inspector
-    window.inspect_dom_node_action().set_enabled(false);
 }
 
 Tab::~Tab()
@@ -469,7 +466,7 @@ BrowserWindow& Tab::window()
     return static_cast<BrowserWindow&>(*Widget::window());
 }
 
-void Tab::show_inspector_window(Browser::Tab::InspectorTarget)
+void Tab::show_inspector_window(Browser::Tab::InspectorTarget inspector_target)
 {
     if (!m_dom_inspector_widget) {
         auto window = GUI::Window::construct(&this->window());
@@ -482,9 +479,14 @@ void Tab::show_inspector_window(Browser::Tab::InspectorTarget)
         m_dom_inspector_widget = window->set_main_widget<InspectorWidget>();
         m_dom_inspector_widget->set_web_view(*m_web_content_view);
     }
-
     m_web_content_view->inspect_dom_tree();
 
+    if (inspector_target == InspectorTarget::HoveredElement) {
+        Optional<i32> hovered_node = m_web_content_view->get_hovered_node_id();
+        VERIFY(hovered_node.has_value());
+        m_dom_inspector_widget->set_inspected_node(hovered_node.value());
+    }
+
     auto* window = m_dom_inspector_widget->window();
     window->show();
     window->move_to_front();