From 2633ea8c79214910b426b5da31a809a01b7b911b Mon Sep 17 00:00:00 2001 From: Timothy Flynn Date: Tue, 5 Dec 2023 14:47:56 -0500 Subject: [PATCH] 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 | 34 +++++++++++++++++++ .../Libraries/LibWeb/Internals/Inspector.cpp | 5 +++ .../Libraries/LibWeb/Internals/Inspector.h | 2 ++ .../Libraries/LibWeb/Internals/Inspector.idl | 2 ++ Userland/Libraries/LibWeb/Page/Page.h | 3 +- .../Libraries/LibWebView/InspectorClient.cpp | 20 +++++++++++ .../Libraries/LibWebView/InspectorClient.h | 9 +++++ .../Libraries/LibWebView/ViewImplementation.h | 1 + .../Libraries/LibWebView/WebContentClient.cpp | 6 ++++ .../Libraries/LibWebView/WebContentClient.h | 1 + Userland/Services/WebContent/PageClient.cpp | 5 +++ Userland/Services/WebContent/PageClient.h | 1 + .../Services/WebContent/WebContentClient.ipc | 1 + 13 files changed, 89 insertions(+), 1 deletion(-) diff --git a/Base/res/ladybird/inspector.js b/Base/res/ladybird/inspector.js index 44f4bcd15a..cae5854c26 100644 --- a/Base/res/ladybird/inspector.js +++ b/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(); }); diff --git a/Userland/Libraries/LibWeb/Internals/Inspector.cpp b/Userland/Libraries/LibWeb/Internals/Inspector.cpp index 5abc4ed2fe..b90dadfe19 100644 --- a/Userland/Libraries/LibWeb/Internals/Inspector.cpp +++ b/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 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); diff --git a/Userland/Libraries/LibWeb/Internals/Inspector.h b/Userland/Libraries/LibWeb/Internals/Inspector.h index 0413433719..d78680b98b 100644 --- a/Userland/Libraries/LibWeb/Internals/Inspector.h +++ b/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 replacement_attributes); + void request_dom_tree_context_menu(i32 node_id, i32 client_x, i32 client_y, String const& type, Optional const& tag_or_attribute_name); + void execute_console_script(String const& script); private: diff --git a/Userland/Libraries/LibWeb/Internals/Inspector.idl b/Userland/Libraries/LibWeb/Internals/Inspector.idl index 9d0f2ea64a..13dafda0e4 100644 --- a/Userland/Libraries/LibWeb/Internals/Inspector.idl +++ b/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); }; diff --git a/Userland/Libraries/LibWeb/Page/Page.h b/Userland/Libraries/LibWeb/Page/Page.h index 487713a55d..a5320759b3 100644 --- a/Userland/Libraries/LibWeb/Page/Page.h +++ b/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 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 replacement_attributes) {}; + virtual void inspector_did_replace_dom_node_attribute([[maybe_unused]] i32 node_id, [[maybe_unused]] String const& name, [[maybe_unused]] JS::NonnullGCPtr 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 const& tag_or_attribute_name) { } virtual void inspector_did_execute_console_script([[maybe_unused]] String const& script) { } protected: diff --git a/Userland/Libraries/LibWebView/InspectorClient.cpp b/Userland/Libraries/LibWebView/InspectorClient.cpp index 8e4e84c49b..197fef9630 100644 --- a/Userland/Libraries/LibWebView/InspectorClient.cpp +++ b/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); diff --git a/Userland/Libraries/LibWebView/InspectorClient.h b/Userland/Libraries/LibWebView/InspectorClient.h index a2fa997bfd..a3a84a338a 100644 --- a/Userland/Libraries/LibWebView/InspectorClient.h +++ b/Userland/Libraries/LibWebView/InspectorClient.h @@ -4,8 +4,10 @@ * SPDX-License-Identifier: BSD-2-Clause */ +#include #include #include +#include #include #pragma once @@ -24,6 +26,10 @@ public: void select_default_node(); void clear_selection(); + Function on_requested_dom_node_text_context_menu; + Function on_requested_dom_node_tag_context_menu; + Function on_requested_dom_node_attribute_context_menu; + private: void load_inspector(); @@ -50,6 +56,9 @@ private: bool m_dom_tree_loaded { false }; + Optional m_context_menu_dom_node_id; + Optional 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 }; diff --git a/Userland/Libraries/LibWebView/ViewImplementation.h b/Userland/Libraries/LibWebView/ViewImplementation.h index a5f95653f7..a2eda69420 100644 --- a/Userland/Libraries/LibWebView/ViewImplementation.h +++ b/Userland/Libraries/LibWebView/ViewImplementation.h @@ -156,6 +156,7 @@ public: Function on_inspector_set_dom_node_text; Function on_inspector_set_dom_node_tag; Function const&)> on_inspector_replaced_dom_node_attribute; + Function const&)> on_inspector_requested_dom_tree_context_menu; Function on_inspector_executed_console_script; virtual Gfx::IntRect viewport_rect() const = 0; diff --git a/Userland/Libraries/LibWebView/WebContentClient.cpp b/Userland/Libraries/LibWebView/WebContentClient.cpp index 06007aeada..5ea9e9da82 100644 --- a/Userland/Libraries/LibWebView/WebContentClient.cpp +++ b/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 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) diff --git a/Userland/Libraries/LibWebView/WebContentClient.h b/Userland/Libraries/LibWebView/WebContentClient.h index 05174bed35..20accc15e1 100644 --- a/Userland/Libraries/LibWebView/WebContentClient.h +++ b/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 const& replacement_attributes) override; + virtual void inspector_did_request_dom_tree_context_menu(i32 node_id, Gfx::IntPoint position, String const& type, Optional const& tag_or_attribute_name) override; virtual void inspector_did_execute_console_script(String const& script) override; ViewImplementation& m_view; diff --git a/Userland/Services/WebContent/PageClient.cpp b/Userland/Services/WebContent/PageClient.cpp index e2bdee3e7e..35c6f653c8 100644 --- a/Userland/Services/WebContent/PageClient.cpp +++ b/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 const& tag_or_attribute_name) +{ + client().async_inspector_did_request_dom_tree_context_menu(node_id, page().css_to_device_point(position).to_type(), type, tag_or_attribute_name); +} + void PageClient::inspector_did_execute_console_script(String const& script) { client().async_inspector_did_execute_console_script(script); diff --git a/Userland/Services/WebContent/PageClient.h b/Userland/Services/WebContent/PageClient.h index 6121164ef5..05080cb3ce 100644 --- a/Userland/Services/WebContent/PageClient.h +++ b/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 replacement_attributes) override; + virtual void inspector_did_request_dom_tree_context_menu(i32 node_id, Web::CSSPixelPoint position, String const& type, Optional const& tag_or_attribute_name) override; virtual void inspector_did_execute_console_script(String const& script) override; Web::Layout::Viewport* layout_root(); diff --git a/Userland/Services/WebContent/WebContentClient.ipc b/Userland/Services/WebContent/WebContentClient.ipc index 25d99004cb..7fb7fa0d09 100644 --- a/Userland/Services/WebContent/WebContentClient.ipc +++ b/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 replacement_attributes) =| + inspector_did_request_dom_tree_context_menu(i32 node_id, Gfx::IntPoint position, String type, Optional tag_or_attribute_name) =| inspector_did_execute_console_script(String script) =| }