LibWeb+LibWebView+WebContent: Add an Inspector IPC to open context menus

The Inspector will have context menu support to manipulate the DOM, e.g.
adding or removing nodes/attributes. This context menu will require some
detailed knowledge about what element in the Inspector has been clicked.
To support this, we intercept the `contextmenu` event and collect the
required information to be sent to the Inspector client over IPC.

Base/res/ladybird/inspector.js

@@ -5,6 +5,7 @@ let selectedBottomTab = null;
 let selectedBottomTabButton = null;
 
 let selectedDOMNode = null;
+let pendingEditDOMNode = null;
 
 let consoleGroupStack = [];
 let consoleGroupNextID = 0;
@@ -233,6 +234,34 @@ const editDOMNode = domNode => {
     });
 };
 
+const requestContextMenu = (clientX, clientY, domNode) => {
+    pendingEditDOMNode = null;
+
+    if (typeof domNode.dataset.nodeType === "undefined") {
+        if (domNode.parentNode !== null) {
+            domNode = domNode.parentNode;
+        }
+    }
+
+    const domNodeID = domNode.closest(".hoverable")?.dataset.id;
+    const type = domNode.dataset.nodeType;
+
+    if (typeof domNodeID === "undefined" || typeof type === "undefined") {
+        return;
+    }
+
+    let tagOrAttributeName = null;
+    pendingEditDOMNode = domNode;
+
+    if (type === "tag") {
+        tagOrAttributeName = domNode.innerText;
+    } else if (type === "attribute") {
+        tagOrAttributeName = domNode.dataset.attributeName;
+    }
+
+    inspector.requestDOMTreeContextMenu(domNodeID, clientX, clientY, type, tagOrAttributeName);
+};
+
 const executeConsoleScript = consoleInput => {
     const script = consoleInput.value;
 
@@ -371,5 +400,10 @@ document.addEventListener("DOMContentLoaded", () => {
         }
     });
 
+    document.addEventListener("contextmenu", event => {
+        requestContextMenu(event.clientX, event.clientY, event.target);
+        event.preventDefault();
+    });
+
     inspector.inspectorLoaded();
 });

Userland/Libraries/LibWeb/Internals/Inspector.cpp

@@ -61,6 +61,11 @@ void Inspector::replace_dom_node_attribute(i32 node_id, String const& name, JS::
     global_object().browsing_context()->page().client().inspector_did_replace_dom_node_attribute(node_id, name, replacement_attributes);
 }
 
+void Inspector::request_dom_tree_context_menu(i32 node_id, i32 client_x, i32 client_y, String const& type, Optional<String> const& tag_or_attribute_name)
+{
+    global_object().browsing_context()->page().client().inspector_did_request_dom_tree_context_menu(node_id, { client_x, client_y }, type, tag_or_attribute_name);
+}
+
 void Inspector::execute_console_script(String const& script)
 {
     global_object().browsing_context()->page().client().inspector_did_execute_console_script(script);

Userland/Libraries/LibWeb/Internals/Inspector.h

@@ -25,6 +25,8 @@ public:
     void set_dom_node_tag(i32 node_id, String const& tag);
     void replace_dom_node_attribute(i32 node_id, String const& name, JS::NonnullGCPtr<DOM::NamedNodeMap> replacement_attributes);
 
+    void request_dom_tree_context_menu(i32 node_id, i32 client_x, i32 client_y, String const& type, Optional<String> const& tag_or_attribute_name);
+
     void execute_console_script(String const& script);
 
 private:

Userland/Libraries/LibWeb/Internals/Inspector.idl

@@ -9,6 +9,8 @@
     undefined setDOMNodeTag(long nodeID, DOMString tag);
     undefined replaceDOMNodeAttribute(long nodeID, DOMString name, NamedNodeMap replacementAttributes);
 
+    undefined requestDOMTreeContextMenu(long nodeID, long clientX, long clientY, DOMString type, DOMString? tagOrAttributeName);
+
     undefined executeConsoleScript(DOMString script);
 
 };

Userland/Libraries/LibWeb/Page/Page.h

@@ -274,7 +274,8 @@ public:
     virtual void inspector_did_select_dom_node([[maybe_unused]] i32 node_id, [[maybe_unused]] Optional<CSS::Selector::PseudoElement> const& pseudo_element) { }
     virtual void inspector_did_set_dom_node_text([[maybe_unused]] i32 node_id, [[maybe_unused]] String const& text) { }
     virtual void inspector_did_set_dom_node_tag([[maybe_unused]] i32 node_id, [[maybe_unused]] String const& tag) { }
-    virtual void inspector_did_replace_dom_node_attribute([[maybe_unused]] i32 node_id, [[maybe_unused]] String const& name, [[maybe_unused]] JS::NonnullGCPtr<DOM::NamedNodeMap> replacement_attributes) {};
+    virtual void inspector_did_replace_dom_node_attribute([[maybe_unused]] i32 node_id, [[maybe_unused]] String const& name, [[maybe_unused]] JS::NonnullGCPtr<DOM::NamedNodeMap> replacement_attributes) { }
+    virtual void inspector_did_request_dom_tree_context_menu([[maybe_unused]] i32 node_id, [[maybe_unused]] CSSPixelPoint position, [[maybe_unused]] String const& type, [[maybe_unused]] Optional<String> const& tag_or_attribute_name) { }
     virtual void inspector_did_execute_console_script([[maybe_unused]] String const& script) { }
 
 protected:

Userland/Libraries/LibWebView/InspectorClient.cpp

@@ -81,6 +81,26 @@ InspectorClient::InspectorClient(ViewImplementation& content_web_view, ViewImple
         m_content_web_view.js_console_request_messages(0);
     };
 
+    m_inspector_web_view.on_inspector_requested_dom_tree_context_menu = [this](auto node_id, auto position, auto const& type, auto const& tag_or_attribute_name) {
+        m_context_menu_dom_node_id = node_id;
+        m_context_menu_tag_or_attribute_name = tag_or_attribute_name;
+
+        if (type.is_one_of("text"sv, "comment"sv)) {
+            if (on_requested_dom_node_text_context_menu)
+                on_requested_dom_node_text_context_menu(position);
+        } else if (type == "tag"sv) {
+            VERIFY(m_context_menu_tag_or_attribute_name.has_value());
+
+            if (on_requested_dom_node_tag_context_menu)
+                on_requested_dom_node_tag_context_menu(position, *m_context_menu_tag_or_attribute_name);
+        } else if (type == "attribute"sv) {
+            VERIFY(m_context_menu_tag_or_attribute_name.has_value());
+
+            if (on_requested_dom_node_attribute_context_menu)
+                on_requested_dom_node_attribute_context_menu(position, *m_context_menu_tag_or_attribute_name);
+        }
+    };
+
     m_inspector_web_view.on_inspector_selected_dom_node = [this](auto node_id, auto const& pseudo_element) {
         auto inspected_node_properties = m_content_web_view.inspect_dom_node(node_id, pseudo_element);
 

Userland/Libraries/LibWebView/InspectorClient.h

@@ -4,8 +4,10 @@
  * SPDX-License-Identifier: BSD-2-Clause
  */
 
+#include <AK/Function.h>
 #include <AK/JsonValue.h>
 #include <AK/StringView.h>
+#include <LibGfx/Point.h>
 #include <LibWebView/ViewImplementation.h>
 
 #pragma once
@@ -24,6 +26,10 @@ public:
     void select_default_node();
     void clear_selection();
 
+    Function<void(Gfx::IntPoint)> on_requested_dom_node_text_context_menu;
+    Function<void(Gfx::IntPoint, String const&)> on_requested_dom_node_tag_context_menu;
+    Function<void(Gfx::IntPoint, String const&)> on_requested_dom_node_attribute_context_menu;
+
 private:
     void load_inspector();
 
@@ -50,6 +56,9 @@ private:
 
     bool m_dom_tree_loaded { false };
 
+    Optional<i32> m_context_menu_dom_node_id;
+    Optional<String> m_context_menu_tag_or_attribute_name;
+
     i32 m_highest_notified_message_index { -1 };
     i32 m_highest_received_message_index { -1 };
     bool m_waiting_for_messages { false };

Userland/Libraries/LibWebView/ViewImplementation.h

@@ -156,6 +156,7 @@ public:
     Function<void(i32, String const&)> on_inspector_set_dom_node_text;
     Function<void(i32, String const&)> on_inspector_set_dom_node_tag;
     Function<void(i32, String const&, Vector<Attribute> const&)> on_inspector_replaced_dom_node_attribute;
+    Function<void(i32, Gfx::IntPoint, String const&, Optional<String> const&)> on_inspector_requested_dom_tree_context_menu;
     Function<void(String const&)> on_inspector_executed_console_script;
 
     virtual Gfx::IntRect viewport_rect() const = 0;

Userland/Libraries/LibWebView/WebContentClient.cpp

@@ -432,6 +432,12 @@ void WebContentClient::inspector_did_replace_dom_node_attribute(i32 node_id, Str
         m_view.on_inspector_replaced_dom_node_attribute(node_id, name, replacement_attributes);
 }
 
+void WebContentClient::inspector_did_request_dom_tree_context_menu(i32 node_id, Gfx::IntPoint position, String const& type, Optional<String> const& tag_or_attribute_name)
+{
+    if (m_view.on_inspector_requested_dom_tree_context_menu)
+        m_view.on_inspector_requested_dom_tree_context_menu(node_id, m_view.to_widget_position(position), type, tag_or_attribute_name);
+}
+
 void WebContentClient::inspector_did_execute_console_script(String const& script)
 {
     if (m_view.on_inspector_executed_console_script)

Userland/Libraries/LibWebView/WebContentClient.h

@@ -91,6 +91,7 @@ private:
     virtual void inspector_did_set_dom_node_text(i32 node_id, String const& text) override;
     virtual void inspector_did_set_dom_node_tag(i32 node_id, String const& tag) override;
     virtual void inspector_did_replace_dom_node_attribute(i32 node_id, String const& name, Vector<Attribute> const& replacement_attributes) override;
+    virtual void inspector_did_request_dom_tree_context_menu(i32 node_id, Gfx::IntPoint position, String const& type, Optional<String> const& tag_or_attribute_name) override;
     virtual void inspector_did_execute_console_script(String const& script) override;
 
     ViewImplementation& m_view;

Userland/Services/WebContent/PageClient.cpp

@@ -548,6 +548,11 @@ void PageClient::inspector_did_replace_dom_node_attribute(i32 node_id, String co
     client().async_inspector_did_replace_dom_node_attribute(node_id, name, move(attributes));
 }
 
+void PageClient::inspector_did_request_dom_tree_context_menu(i32 node_id, Web::CSSPixelPoint position, String const& type, Optional<String> const& tag_or_attribute_name)
+{
+    client().async_inspector_did_request_dom_tree_context_menu(node_id, page().css_to_device_point(position).to_type<int>(), type, tag_or_attribute_name);
+}
+
 void PageClient::inspector_did_execute_console_script(String const& script)
 {
     client().async_inspector_did_execute_console_script(script);

Userland/Services/WebContent/PageClient.h

@@ -126,6 +126,7 @@ private:
     virtual void inspector_did_set_dom_node_text(i32 node_id, String const& text) override;
     virtual void inspector_did_set_dom_node_tag(i32 node_id, String const& tag) override;
     virtual void inspector_did_replace_dom_node_attribute(i32 node_id, String const& name, JS::NonnullGCPtr<Web::DOM::NamedNodeMap> replacement_attributes) override;
+    virtual void inspector_did_request_dom_tree_context_menu(i32 node_id, Web::CSSPixelPoint position, String const& type, Optional<String> const& tag_or_attribute_name) override;
     virtual void inspector_did_execute_console_script(String const& script) override;
 
     Web::Layout::Viewport* layout_root();

Userland/Services/WebContent/WebContentClient.ipc

@@ -76,6 +76,7 @@ endpoint WebContentClient
     inspector_did_set_dom_node_text(i32 node_id, String text) =|
     inspector_did_set_dom_node_tag(i32 node_id, String tag) =|
     inspector_did_replace_dom_node_attribute(i32 node_id, String name, Vector<WebView::Attribute> replacement_attributes) =|
+    inspector_did_request_dom_tree_context_menu(i32 node_id, Gfx::IntPoint position, String type, Optional<String> tag_or_attribute_name) =|
     inspector_did_execute_console_script(String script) =|
 
 }