LibWeb+LibWebView+WebContent: Separate tag/attribute in Inspector menu

It was a bit short-sighted to combine the tag and attribute names into
one string when the Inspector requests a context menu. We will want both
values for some context menu actions. Send both names, as well as the
attribute value, when requesting the context menu.
This commit is contained in:
Timothy Flynn 2023-12-06 09:34:53 -05:00 committed by Andreas Kling
parent c9f0f0fc70
commit 8162dc5ee6
16 changed files with 80 additions and 58 deletions

View file

@ -332,16 +332,29 @@ const requestContextMenu = (clientX, clientY, domNode) => {
return;
}
let tagOrAttributeName = null;
pendingEditDOMNode = domNode;
let tag = null;
let attributeName = null;
let attributeValue = null;
if (type === "tag") {
tagOrAttributeName = domNode.innerText;
tag = domNode.dataset.tag;
} else if (type === "attribute") {
tagOrAttributeName = domNode.dataset.attributeName;
tag = domNode.dataset.tag;
attributeName = domNode.dataset.attributeName;
attributeValue = domNode.dataset.attributeValue;
}
inspector.requestDOMTreeContextMenu(domNodeID, clientX, clientY, type, tagOrAttributeName);
pendingEditDOMNode = domNode;
inspector.requestDOMTreeContextMenu(
domNodeID,
clientX,
clientY,
type,
tag,
attributeName,
attributeValue
);
};
const executeConsoleScript = consoleInput => {

View file

@ -4,6 +4,7 @@
* SPDX-License-Identifier: BSD-2-Clause
*/
#include <LibWebView/Attribute.h>
#include <LibWebView/InspectorClient.h>
#include <LibWebView/ViewImplementation.h>
@ -91,14 +92,14 @@ static constexpr NSInteger CONTEXT_MENU_REMOVE_ATTRIBUTE_TAG = 2;
[NSMenu popUpContextMenu:strong_self.dom_node_tag_context_menu withEvent:event forView:strong_self.web_view];
};
m_inspector_client->on_requested_dom_node_attribute_context_menu = [weak_self](auto position, auto const& attribute) {
m_inspector_client->on_requested_dom_node_attribute_context_menu = [weak_self](auto position, auto const&, auto const& attribute) {
Inspector* strong_self = weak_self;
if (strong_self == nil) {
return;
}
auto edit_attribute_text = MUST(String::formatted("Edit attribute \"{}\"", attribute));
auto remove_attribute_text = MUST(String::formatted("Remove attribute \"{}\"", attribute));
auto edit_attribute_text = MUST(String::formatted("Edit attribute \"{}\"", attribute.name));
auto remove_attribute_text = MUST(String::formatted("Remove attribute \"{}\"", attribute.name));
auto* edit_node_menu_item = [strong_self.dom_node_attribute_context_menu itemWithTag:CONTEXT_MENU_EDIT_NODE_TAG];
[edit_node_menu_item setTitle:Ladybird::string_to_ns_string(edit_attribute_text)];

View file

@ -6,6 +6,7 @@
#include "InspectorWidget.h"
#include <Ladybird/Qt/StringUtils.h>
#include <LibWebView/Attribute.h>
#include <LibWebView/InspectorClient.h>
#include <QAction>
#include <QCloseEvent>
@ -68,9 +69,9 @@ InspectorWidget::InspectorWidget(QWidget* tab, WebContentView& content_view)
m_dom_node_tag_context_menu->exec(to_widget_position(position));
};
m_inspector_client->on_requested_dom_node_attribute_context_menu = [this](auto position, auto const& attribute) {
m_edit_node_action->setText(qstring_from_ak_string(MUST(String::formatted("&Edit attribute \"{}\"", attribute))));
m_remove_attribute_action->setText(qstring_from_ak_string(MUST(String::formatted("&Remove attribute \"{}\"", attribute))));
m_inspector_client->on_requested_dom_node_attribute_context_menu = [this](auto position, auto const&, auto const& attribute) {
m_edit_node_action->setText(qstring_from_ak_string(MUST(String::formatted("&Edit attribute \"{}\"", attribute.name))));
m_remove_attribute_action->setText(qstring_from_ak_string(MUST(String::formatted("&Remove attribute \"{}\"", attribute.name))));
m_dom_node_attribute_context_menu->exec(to_widget_position(position));
};

View file

@ -10,6 +10,7 @@
#include <LibGUI/Action.h>
#include <LibGUI/BoxLayout.h>
#include <LibGUI/Menu.h>
#include <LibWebView/Attribute.h>
#include <LibWebView/InspectorClient.h>
#include <LibWebView/OutOfProcessWebView.h>
@ -63,9 +64,9 @@ InspectorWidget::InspectorWidget(WebView::OutOfProcessWebView& content_view)
m_dom_node_tag_context_menu->popup(to_widget_position(position));
};
m_inspector_client->on_requested_dom_node_attribute_context_menu = [this](auto position, auto const& attribute) {
m_edit_node_action->set_text(DeprecatedString::formatted("&Edit attribute \"{}\"", attribute));
m_remove_attribute_action->set_text(DeprecatedString::formatted("&Remove attribute \"{}\"", attribute));
m_inspector_client->on_requested_dom_node_attribute_context_menu = [this](auto position, auto const&, auto const& attribute) {
m_edit_node_action->set_text(DeprecatedString::formatted("&Edit attribute \"{}\"", attribute.name));
m_remove_attribute_action->set_text(DeprecatedString::formatted("&Remove attribute \"{}\"", attribute.name));
m_dom_node_attribute_context_menu->popup(to_widget_position(position));
};

View file

@ -66,9 +66,9 @@ 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)
void Inspector::request_dom_tree_context_menu(i32 node_id, i32 client_x, i32 client_y, String const& type, Optional<String> const& tag, Optional<String> const& attribute_name, Optional<String> const& attribute_value)
{
global_object().browsing_context()->page().client().inspector_did_request_dom_tree_context_menu(node_id, { client_x, client_y }, type, 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, attribute_name, attribute_value);
}
void Inspector::execute_console_script(String const& script)

View file

@ -26,7 +26,7 @@ public:
void add_dom_node_attributes(i32 node_id, JS::NonnullGCPtr<DOM::NamedNodeMap> attributes);
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 request_dom_tree_context_menu(i32 node_id, i32 client_x, i32 client_y, String const& type, Optional<String> const& tag, Optional<String> const& attribute_name, Optional<String> const& attribute_value);
void execute_console_script(String const& script);

View file

@ -10,7 +10,7 @@
undefined addDOMNodeAttributes(long nodeID, NamedNodeMap attributes);
undefined replaceDOMNodeAttribute(long nodeID, DOMString name, NamedNodeMap replacementAttributes);
undefined requestDOMTreeContextMenu(long nodeID, long clientX, long clientY, DOMString type, DOMString? tagOrAttributeName);
undefined requestDOMTreeContextMenu(long nodeID, long clientX, long clientY, DOMString type, DOMString? tag, DOMString? attributeName, DOMString? attributeValue);
undefined executeConsoleScript(DOMString script);

View file

@ -276,7 +276,7 @@ public:
virtual void inspector_did_set_dom_node_tag([[maybe_unused]] i32 node_id, [[maybe_unused]] String const& tag) { }
virtual void inspector_did_add_dom_node_attributes([[maybe_unused]] i32 node_id, [[maybe_unused]] JS::NonnullGCPtr<DOM::NamedNodeMap> 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_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, [[maybe_unused]] Optional<String> const& attribute_name, [[maybe_unused]] Optional<String> const& attribute_value) { }
virtual void inspector_did_execute_console_script([[maybe_unused]] String const& script) { }
protected:

View file

@ -81,23 +81,23 @@ 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;
m_inspector_web_view.on_inspector_requested_dom_tree_context_menu = [this](auto node_id, auto position, auto const& type, auto const& tag, auto const& attribute) {
m_context_menu_data = ContextMenuData { node_id, tag, attribute };
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());
VERIFY(tag.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);
on_requested_dom_node_tag_context_menu(position, *tag);
} else if (type == "attribute"sv) {
VERIFY(m_context_menu_tag_or_attribute_name.has_value());
VERIFY(tag.has_value());
VERIFY(attribute.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);
on_requested_dom_node_attribute_context_menu(position, *tag, *attribute);
}
};
@ -225,51 +225,47 @@ void InspectorClient::select_node(i32 node_id)
void InspectorClient::context_menu_edit_dom_node()
{
VERIFY(m_context_menu_dom_node_id.has_value());
VERIFY(m_context_menu_data.has_value());
auto script = MUST(String::formatted("inspector.editDOMNodeID({});", *m_context_menu_dom_node_id));
auto script = MUST(String::formatted("inspector.editDOMNodeID({});", m_context_menu_data->dom_node_id));
m_inspector_web_view.run_javascript(script);
m_context_menu_dom_node_id.clear();
m_context_menu_tag_or_attribute_name.clear();
m_context_menu_data.clear();
}
void InspectorClient::context_menu_remove_dom_node()
{
VERIFY(m_context_menu_dom_node_id.has_value());
VERIFY(m_context_menu_data.has_value());
m_content_web_view.remove_dom_node(*m_context_menu_dom_node_id);
m_content_web_view.remove_dom_node(m_context_menu_data->dom_node_id);
m_pending_selection = m_body_node_id;
inspect();
m_context_menu_dom_node_id.clear();
m_context_menu_tag_or_attribute_name.clear();
m_context_menu_data.clear();
}
void InspectorClient::context_menu_add_dom_node_attribute()
{
VERIFY(m_context_menu_dom_node_id.has_value());
VERIFY(m_context_menu_data.has_value());
auto script = MUST(String::formatted("inspector.addAttributeToDOMNodeID({});", *m_context_menu_dom_node_id));
auto script = MUST(String::formatted("inspector.addAttributeToDOMNodeID({});", m_context_menu_data->dom_node_id));
m_inspector_web_view.run_javascript(script);
m_context_menu_dom_node_id.clear();
m_context_menu_tag_or_attribute_name.clear();
m_context_menu_data.clear();
}
void InspectorClient::context_menu_remove_dom_node_attribute()
{
VERIFY(m_context_menu_dom_node_id.has_value());
VERIFY(m_context_menu_tag_or_attribute_name.has_value());
VERIFY(m_context_menu_data.has_value());
VERIFY(m_context_menu_data->attribute.has_value());
m_content_web_view.replace_dom_node_attribute(*m_context_menu_dom_node_id, *m_context_menu_tag_or_attribute_name, {});
m_content_web_view.replace_dom_node_attribute(m_context_menu_data->dom_node_id, m_context_menu_data->attribute->name, {});
m_pending_selection = m_context_menu_dom_node_id;
m_pending_selection = m_context_menu_data->dom_node_id;
inspect();
m_context_menu_dom_node_id.clear();
m_context_menu_tag_or_attribute_name.clear();
m_context_menu_data.clear();
}
void InspectorClient::load_inspector()
@ -465,14 +461,16 @@ String InspectorClient::generate_dom_tree(JsonObject const& dom_tree)
if (name.equals_ignoring_ascii_case("BODY"sv))
m_body_node_id = node.get_integer<i32>("id"sv).value();
auto tag = name.to_lowercase();
builder.appendff("<span class=\"hoverable\" {}>", data_attributes.string_view());
builder.append("<span>&lt;</span>"sv);
builder.appendff("<span data-node-type=\"tag\" class=\"editable tag\">{}</span>", name.to_lowercase());
builder.appendff("<span data-node-type=\"tag\" data-tag=\"{0}\" class=\"editable tag\">{0}</span>", tag);
if (auto attributes = node.get_object("attributes"sv); attributes.has_value()) {
attributes->for_each_member([&builder](auto const& name, auto const& value) {
attributes->for_each_member([&](auto const& name, auto const& value) {
builder.append("&nbsp;"sv);
builder.appendff("<span data-node-type=\"attribute\" data-attribute-name=\"{}\" class=\"editable\">", name);
builder.appendff("<span data-node-type=\"attribute\" data-tag=\"{}\" data-attribute-name=\"{}\" data-attribute-value=\"{}\" class=\"editable\">", tag, name, value);
builder.appendff("<span class=\"attribute-name\">{}</span>", name);
builder.append('=');
builder.appendff("<span class=\"attribute-value\">\"{}\"</span>", value);

View file

@ -33,7 +33,7 @@ public:
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;
Function<void(Gfx::IntPoint, String const&, Attribute const&)> on_requested_dom_node_attribute_context_menu;
private:
void load_inspector();
@ -61,8 +61,12 @@ private:
bool m_dom_tree_loaded { false };
Optional<i32> m_context_menu_dom_node_id;
Optional<String> m_context_menu_tag_or_attribute_name;
struct ContextMenuData {
i32 dom_node_id { 0 };
Optional<String> tag;
Optional<Attribute> attribute;
};
Optional<ContextMenuData> m_context_menu_data;
i32 m_highest_notified_message_index { -1 };
i32 m_highest_received_message_index { -1 };

View file

@ -159,7 +159,7 @@ public:
Function<void(i32, String const&)> on_inspector_set_dom_node_tag;
Function<void(i32, Vector<Attribute> const&)> on_inspector_added_dom_node_attributes;
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(i32, Gfx::IntPoint, String const&, Optional<String> const&, Optional<Attribute> const&)> on_inspector_requested_dom_tree_context_menu;
Function<void(String const&)> on_inspector_executed_console_script;
virtual Gfx::IntRect viewport_rect() const = 0;

View file

@ -438,10 +438,10 @@ 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)
void WebContentClient::inspector_did_request_dom_tree_context_menu(i32 node_id, Gfx::IntPoint position, String const& type, Optional<String> const& tag, Optional<Attribute> const& attribute)
{
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);
m_view.on_inspector_requested_dom_tree_context_menu(node_id, m_view.to_widget_position(position), type, tag, attribute);
}
void WebContentClient::inspector_did_execute_console_script(String const& script)

View file

@ -92,7 +92,7 @@ private:
virtual void inspector_did_set_dom_node_tag(i32 node_id, String const& tag) override;
virtual void inspector_did_add_dom_node_attributes(i32 node_id, Vector<Attribute> const& attributes) 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_request_dom_tree_context_menu(i32 node_id, Gfx::IntPoint position, String const& type, Optional<String> const& tag, Optional<Attribute> const& attribute) override;
virtual void inspector_did_execute_console_script(String const& script) override;
ViewImplementation& m_view;

View file

@ -558,9 +558,13 @@ void PageClient::inspector_did_replace_dom_node_attribute(i32 node_id, String co
client().async_inspector_did_replace_dom_node_attribute(node_id, name, named_node_map_to_vector(replacement_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)
void PageClient::inspector_did_request_dom_tree_context_menu(i32 node_id, Web::CSSPixelPoint position, String const& type, Optional<String> const& tag, Optional<String> const& attribute_name, Optional<String> const& attribute_value)
{
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);
Optional<WebView::Attribute> attribute;
if (attribute_name.has_value() && attribute_value.has_value())
attribute = WebView::Attribute { *attribute_name, *attribute_value };
client().async_inspector_did_request_dom_tree_context_menu(node_id, page().css_to_device_point(position).to_type<int>(), type, tag, move(attribute));
}
void PageClient::inspector_did_execute_console_script(String const& script)

View file

@ -127,7 +127,7 @@ private:
virtual void inspector_did_set_dom_node_tag(i32 node_id, String const& tag) override;
virtual void inspector_did_add_dom_node_attributes(i32 node_id, JS::NonnullGCPtr<Web::DOM::NamedNodeMap> attributes) 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_request_dom_tree_context_menu(i32 node_id, Web::CSSPixelPoint position, String const& type, Optional<String> const& tag, Optional<String> const& attribute_name, Optional<String> const& attribute_value) override;
virtual void inspector_did_execute_console_script(String const& script) override;
Web::Layout::Viewport* layout_root();

View file

@ -77,7 +77,7 @@ endpoint WebContentClient
inspector_did_set_dom_node_tag(i32 node_id, String tag) =|
inspector_did_add_dom_node_attributes(i32 node_id, Vector<WebView::Attribute> attributes) =|
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_request_dom_tree_context_menu(i32 node_id, Gfx::IntPoint position, String type, Optional<String> tag, Optional<WebView::Attribute> attribute) =|
inspector_did_execute_console_script(String script) =|
}