Stowage/ladybird
2
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-10-30 21:01:00 +00:00
Code Issues Projects Releases Packages Wiki Activity
ladybird/Userland/Libraries/LibWebView/InspectorClient.cpp

820 lines
29 KiB
C++
Raw Normal View History

LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
/*
LibWebView: Prevent quoting attribute values twice in the Inspector As of commit ccd701809fc168c90b2f74bdb3b3f2a3fd82d10e, the formatter for JsonValue now fully serializes the value. The serializer will surround the string value with quotes. We want control over when we add quotes to the generated Inspector HTML, so avoid formatting attributes as raw JSON values.
2024-01-24 15:25:24 -05:00
* Copyright (c) 2023-2024, Tim Flynn <trflynn89@serenityos.org>
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
*
* SPDX-License-Identifier: BSD-2-Clause
*/
LibWebView: Don't wait for the DOM and a11y trees to load the Inspector Provides a nicer experience on pages with large trees so that the window isn't just a large blank screen while it is loading. Instead, send the trees to the Inspector WebView once they have arrived and have been transformed to HTML. We Base64 encode the HTML to avoid needing to deal with all kinds of nested quotes that may appear in the HTML. We could instead send the JSON to the WebView, but generating the HTML in C++ feels a bit easier for now.
2023-11-30 06:52:03 -05:00
#include <AK/Base64.h>
LibWebView: Add a storage tab to the Inspector to manage cookies This adds a storage tab which contains just a cookie viewer for now. In the future, storage like Local Storage and Indexed DB can be added here as well. In this patch, the cookie table is read-only.
2024-09-06 12:08:50 -04:00
#include <AK/Enumerate.h>
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
#include <AK/JsonArray.h>
#include <AK/JsonObject.h>
LibWeb+LibWebView: Add a button to the Inspector to export its contents When working on the Inspector's HTML, it's often kind of tricky to debug when an element is styled / positioned incorrectly. We don't have a way to inspect the Inspector itself. This adds a button to the Inspector to export its HTML/CSS/JS contents to the downloads directory. This allows for more easily testing changes, especially by opening the exported HTML in another browser's dev tools. We will ultimately likely remove this button (or make it hidden) by the time we are production-ready. But it's quite useful for now.
2024-08-19 12:11:39 -04:00
#include <AK/LexicalPath.h>
LibWebView: Migrate the Inspector's HTML to its own HTML file It's getting a bit unwieldy to maintain as an inlined string. Move it to its own file so it can be edited with syntax highlighting and other IDE features.
2024-09-06 10:33:39 -04:00
#include <AK/SourceGenerator.h>
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
#include <AK/StringBuilder.h>
LibWeb+LibWebView: Add a button to the Inspector to export its contents When working on the Inspector's HTML, it's often kind of tricky to debug when an element is styled / positioned incorrectly. We don't have a way to inspect the Inspector itself. This adds a button to the Inspector to export its HTML/CSS/JS contents to the downloads directory. This allows for more easily testing changes, especially by opening the exported HTML in another browser's dev tools. We will ultimately likely remove this button (or make it hidden) by the time we are production-ready. But it's quite useful for now.
2024-08-19 12:11:39 -04:00
#include <LibCore/Directory.h>
#include <LibCore/File.h>
#include <LibCore/Resource.h>
LibWebView: Implement a JavaScript console tab in the Inspector This adds a JS console to the bottom section of the Inspector WebView. Much of this code is based on the existing WebView::ConsoleClient, but ported to fit the inspector model. That is, much of the code from that class is now handled in the Inspector's JS.
2023-12-01 06:51:01 -05:00
#include <LibJS/MarkupGenerator.h>
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
#include <LibWeb/Infra/Strings.h>
LibWebView: Use the download directory facility for saving files
2024-08-28 15:32:50 -04:00
#include <LibWebView/Application.h>
LibWebView: Add a storage tab to the Inspector to manage cookies This adds a storage tab which contains just a cookie viewer for now. In the future, storage like Local Storage and Indexed DB can be added here as well. In this patch, the cookie table is read-only.
2024-09-06 12:08:50 -04:00
#include <LibWebView/CookieJar.h>
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
#include <LibWebView/InspectorClient.h>
#include <LibWebView/SourceHighlighter.h>
namespace WebView {
LibWebView: Migrate the Inspector's HTML to its own HTML file It's getting a bit unwieldy to maintain as an inlined string. Move it to its own file so it can be edited with syntax highlighting and other IDE features.
2024-09-06 10:33:39 -04:00
static constexpr auto INSPECTOR_HTML = "resource://ladybird/inspector.html"sv;
LibWeb+LibWebView: Add a button to the Inspector to export its contents When working on the Inspector's HTML, it's often kind of tricky to debug when an element is styled / positioned incorrectly. We don't have a way to inspect the Inspector itself. This adds a button to the Inspector to export its HTML/CSS/JS contents to the downloads directory. This allows for more easily testing changes, especially by opening the exported HTML in another browser's dev tools. We will ultimately likely remove this button (or make it hidden) by the time we are production-ready. But it's quite useful for now.
2024-08-19 12:11:39 -04:00
static constexpr auto INSPECTOR_CSS = "resource://ladybird/inspector.css"sv;
static constexpr auto INSPECTOR_JS = "resource://ladybird/inspector.js"sv;
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
static ErrorOr<JsonValue> parse_json_tree(StringView json)
{
auto parsed_tree = TRY(JsonValue::from_string(json));
if (!parsed_tree.is_object())
return Error::from_string_literal("Expected tree to be a JSON object");
return parsed_tree;
}
Inspector: Add a basic style sheet inspector Choosing options from the `<select>` will load and display that style sheet's source text, with some checks to make sure that the text that just loaded is the one we currently want. The UI is a little goofy when scrolling, as it uses `position: sticky` which we don't implement yet. But that's just more motivation to implement it! :^)
2024-08-23 11:18:35 +01:00
static String style_sheet_identifier_to_json(Web::CSS::StyleSheetIdentifier const& identifier)
{
return MUST(String::formatted("{{ type: '{}', domNodeId: {}, url: '{}' }}"sv,
Web::CSS::style_sheet_identifier_type_to_string(identifier.type),
identifier.dom_element_unique_id.map([](auto& it) { return MUST(String::number(it)); }).value_or("undefined"_string),
identifier.url.value_or("undefined"_string)));
}
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
InspectorClient::InspectorClient(ViewImplementation& content_web_view, ViewImplementation& inspector_web_view)
: m_content_web_view(content_web_view)
, m_inspector_web_view(inspector_web_view)
{
m_content_web_view.on_received_dom_tree = [this](auto const& dom_tree) {
LibWebView: Don't wait for the DOM and a11y trees to load the Inspector Provides a nicer experience on pages with large trees so that the window isn't just a large blank screen while it is loading. Instead, send the trees to the Inspector WebView once they have arrived and have been transformed to HTML. We Base64 encode the HTML to avoid needing to deal with all kinds of nested quotes that may appear in the HTML. We could instead send the JSON to the WebView, but generating the HTML in C++ feels a bit easier for now.
2023-11-30 06:52:03 -05:00
auto result = parse_json_tree(dom_tree);
if (result.is_error()) {
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
dbgln("Failed to load DOM tree: {}", result.error());
LibWebView: Don't wait for the DOM and a11y trees to load the Inspector Provides a nicer experience on pages with large trees so that the window isn't just a large blank screen while it is loading. Instead, send the trees to the Inspector WebView once they have arrived and have been transformed to HTML. We Base64 encode the HTML to avoid needing to deal with all kinds of nested quotes that may appear in the HTML. We could instead send the JSON to the WebView, but generating the HTML in C++ feels a bit easier for now.
2023-11-30 06:52:03 -05:00
return;
}
auto dom_tree_html = generate_dom_tree(result.value().as_object());
auto dom_tree_base64 = MUST(encode_base64(dom_tree_html.bytes()));
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
LibWebView: Don't wait for the DOM and a11y trees to load the Inspector Provides a nicer experience on pages with large trees so that the window isn't just a large blank screen while it is loading. Instead, send the trees to the Inspector WebView once they have arrived and have been transformed to HTML. We Base64 encode the HTML to avoid needing to deal with all kinds of nested quotes that may appear in the HTML. We could instead send the JSON to the WebView, but generating the HTML in C++ feels a bit easier for now.
2023-11-30 06:52:03 -05:00
auto script = MUST(String::formatted("inspector.loadDOMTree(\"{}\");", dom_tree_base64));
m_inspector_web_view.run_javascript(script);
m_dom_tree_loaded = true;
if (m_pending_selection.has_value())
select_node(m_pending_selection.release_value());
else
select_default_node();
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
};
LibWebView+WebContent: Make the DOM node inspection IPC async
2023-12-30 09:30:27 -05:00
m_content_web_view.on_received_dom_node_properties = [this](auto const& inspected_node_properties) {
StringBuilder builder;
// FIXME: Support box model metrics and ARIA properties.
Inspector: Add "Fonts" tab This adds another tab to the bottom tabs providing information regarding the fonts computed for the currently selected DOM node.
2024-08-09 17:09:10 +02:00
auto generate_property_script = [&](auto const& computed_style, auto const& resolved_style, auto const& custom_properties, auto const& fonts) {
LibWebView+WebContent: Make the DOM node inspection IPC async
2023-12-30 09:30:27 -05:00
builder.append("inspector.createPropertyTables(\""sv);
builder.append_escaped_for_json(computed_style);
builder.append("\", \""sv);
builder.append_escaped_for_json(resolved_style);
builder.append("\", \""sv);
builder.append_escaped_for_json(custom_properties);
builder.append("\");"sv);
Inspector: Add "Fonts" tab This adds another tab to the bottom tabs providing information regarding the fonts computed for the currently selected DOM node.
2024-08-09 17:09:10 +02:00
builder.append("inspector.createFontList(\""sv);
builder.append_escaped_for_json(fonts);
builder.append("\");"sv);
LibWebView+WebContent: Make the DOM node inspection IPC async
2023-12-30 09:30:27 -05:00
};
if (inspected_node_properties.has_value()) {
generate_property_script(
inspected_node_properties->computed_style_json,
inspected_node_properties->resolved_style_json,
Inspector: Add "Fonts" tab This adds another tab to the bottom tabs providing information regarding the fonts computed for the currently selected DOM node.
2024-08-09 17:09:10 +02:00
inspected_node_properties->custom_properties_json,
inspected_node_properties->fonts_json);
LibWebView+WebContent: Make the DOM node inspection IPC async
2023-12-30 09:30:27 -05:00
} else {
Inspector: Add "Fonts" tab This adds another tab to the bottom tabs providing information regarding the fonts computed for the currently selected DOM node.
2024-08-09 17:09:10 +02:00
generate_property_script("{}"sv, "{}"sv, "{}"sv, "{}"sv);
LibWebView+WebContent: Make the DOM node inspection IPC async
2023-12-30 09:30:27 -05:00
}
m_inspector_web_view.run_javascript(builder.string_view());
};
LibWebView: Don't wait for the DOM and a11y trees to load the Inspector Provides a nicer experience on pages with large trees so that the window isn't just a large blank screen while it is loading. Instead, send the trees to the Inspector WebView once they have arrived and have been transformed to HTML. We Base64 encode the HTML to avoid needing to deal with all kinds of nested quotes that may appear in the HTML. We could instead send the JSON to the WebView, but generating the HTML in C++ feels a bit easier for now.
2023-11-30 06:52:03 -05:00
m_content_web_view.on_received_accessibility_tree = [this](auto const& accessibility_tree) {
auto result = parse_json_tree(accessibility_tree);
if (result.is_error()) {
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
dbgln("Failed to load accessibility tree: {}", result.error());
LibWebView: Don't wait for the DOM and a11y trees to load the Inspector Provides a nicer experience on pages with large trees so that the window isn't just a large blank screen while it is loading. Instead, send the trees to the Inspector WebView once they have arrived and have been transformed to HTML. We Base64 encode the HTML to avoid needing to deal with all kinds of nested quotes that may appear in the HTML. We could instead send the JSON to the WebView, but generating the HTML in C++ feels a bit easier for now.
2023-11-30 06:52:03 -05:00
return;
}
auto accessibility_tree_html = generate_accessibility_tree(result.value().as_object());
auto accessibility_tree_base64 = MUST(encode_base64(accessibility_tree_html.bytes()));
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
LibWebView: Don't wait for the DOM and a11y trees to load the Inspector Provides a nicer experience on pages with large trees so that the window isn't just a large blank screen while it is loading. Instead, send the trees to the Inspector WebView once they have arrived and have been transformed to HTML. We Base64 encode the HTML to avoid needing to deal with all kinds of nested quotes that may appear in the HTML. We could instead send the JSON to the WebView, but generating the HTML in C++ feels a bit easier for now.
2023-11-30 06:52:03 -05:00
auto script = MUST(String::formatted("inspector.loadAccessibilityTree(\"{}\");", accessibility_tree_base64));
m_inspector_web_view.run_javascript(script);
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
};
LibWebView+WebContent: Make the hovered node retrieval IPC async
2023-12-30 09:42:24 -05:00
m_content_web_view.on_received_hovered_node_id = [this](auto node_id) {
select_node(node_id);
};
Inspector: Add a basic style sheet inspector Choosing options from the `<select>` will load and display that style sheet's source text, with some checks to make sure that the text that just loaded is the one we currently want. The UI is a little goofy when scrolling, as it uses `position: sticky` which we don't implement yet. But that's just more motivation to implement it! :^)
2024-08-23 11:18:35 +01:00
m_content_web_view.on_received_style_sheet_list = [this](auto const& style_sheets) {
StringBuilder builder;
builder.append("inspector.setStyleSheets(["sv);
for (auto& style_sheet : style_sheets) {
builder.appendff("{}, "sv, style_sheet_identifier_to_json(style_sheet));
}
builder.append("]);"sv);
m_inspector_web_view.run_javascript(builder.string_view());
};
m_content_web_view.on_received_style_sheet_source = [this](Web::CSS::StyleSheetIdentifier const& identifier, String const& source) {
// TODO: Highlight it
auto escaped_source = escape_html_entities(source.bytes()).replace("\t"sv, " "sv, ReplaceMode::All);
auto script = MUST(String::formatted("inspector.setStyleSheetSource({}, \"{}\");",
style_sheet_identifier_to_json(identifier),
MUST(encode_base64(escaped_source.bytes()))));
m_inspector_web_view.run_javascript(script);
};
LibWebView+WebContent: Make the DOM node editing IPCs async All DOM node mutation IPCs now invoke an async completion IPC after the DOM is mutated. This allows consolidating where the Inspector updates its view and the selected DOM node. This also allows improving the response to removing a DOM node. We would previously just select the <body> tag after removing a DOM node because the Inspector client had no idea what node preceded the removed node. Now the WebContent process can just indicate what that node is. So now after removing a DOM node, we inspect either its previous sibling (if it had one) or its parent.
2023-12-30 10:08:33 -05:00
m_content_web_view.on_finshed_editing_dom_node = [this](auto const& node_id) {
m_pending_selection = node_id;
m_dom_tree_loaded = false;
LibWeb+WebContent: Do not embed attributes as data in the Inspector HTML Attribute values may contain HTML, and may contain invalid HTML at that. If the latter occurs, let's not generate invalid Inspector HTML when we embed the attribute values as data attributes. Instead, cache the values in the InspectorClient, and embed just a lookup index into the HTML. This also nicely reduces the size of the generated HTML. The Inspector on https://github.com/SerenityOS/serenity reduces from 2.3MB to 1.9MB (about 318KB, or 13.8%).
2024-02-18 13:59:28 -05:00
m_dom_node_attributes.clear();
LibWebView+WebContent: Make the DOM node editing IPCs async All DOM node mutation IPCs now invoke an async completion IPC after the DOM is mutated. This allows consolidating where the Inspector updates its view and the selected DOM node. This also allows improving the response to removing a DOM node. We would previously just select the <body> tag after removing a DOM node because the Inspector client had no idea what node preceded the removed node. Now the WebContent process can just indicate what that node is. So now after removing a DOM node, we inspect either its previous sibling (if it had one) or its parent.
2023-12-30 10:08:33 -05:00
inspect();
};
LibWebView+WebContent: Make the DOM node HTML retrieval IPC async
2023-12-30 14:32:50 -05:00
m_content_web_view.on_received_dom_node_html = [this](auto const& html) {
if (m_content_web_view.on_insert_clipboard_entry)
m_content_web_view.on_insert_clipboard_entry(html, "unspecified"_string, "text/plain"_string);
};
LibWebView: Implement a JavaScript console tab in the Inspector This adds a JS console to the bottom section of the Inspector WebView. Much of this code is based on the existing WebView::ConsoleClient, but ported to fit the inspector model. That is, much of the code from that class is now handled in the Inspector's JS.
2023-12-01 06:51:01 -05:00
m_content_web_view.on_received_console_message = [this](auto message_index) {
handle_console_message(message_index);
};
m_content_web_view.on_received_console_messages = [this](auto start_index, auto const& message_types, auto const& messages) {
handle_console_messages(start_index, message_types, messages);
};
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
m_inspector_web_view.enable_inspector_prototype();
m_inspector_web_view.use_native_user_style_sheet();
m_inspector_web_view.on_inspector_loaded = [this]() {
LibWebView: Protect the Inspector against rapid inspection requests This was seen in Browser when hotkey activations were processed twice. If we open the Inspector with a hotkey (F12) and quickly activate that hotkey again, we could try sending a JS command (inspector.loadDOMTree) before the inspector.js file was actually loaded in the WebContent. The window for this bug is larger on Serenity, where loading WebContent is a bit slower than on Linux. So even with the Browser bug fixed, it is pretty easy to hit this window still.
2024-03-03 12:18:06 -05:00
m_inspector_loaded = true;
LibWebView: Don't wait for the DOM and a11y trees to load the Inspector Provides a nicer experience on pages with large trees so that the window isn't just a large blank screen while it is loading. Instead, send the trees to the Inspector WebView once they have arrived and have been transformed to HTML. We Base64 encode the HTML to avoid needing to deal with all kinds of nested quotes that may appear in the HTML. We could instead send the JSON to the WebView, but generating the HTML in C++ feels a bit easier for now.
2023-11-30 06:52:03 -05:00
inspect();
LibWebView: Implement a JavaScript console tab in the Inspector This adds a JS console to the bottom section of the Inspector WebView. Much of this code is based on the existing WebView::ConsoleClient, but ported to fit the inspector model. That is, much of the code from that class is now handled in the Inspector's JS.
2023-12-01 06:51:01 -05:00
m_content_web_view.js_console_request_messages(0);
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
};
LibWeb+WebContent: Do not embed attributes as data in the Inspector HTML Attribute values may contain HTML, and may contain invalid HTML at that. If the latter occurs, let's not generate invalid Inspector HTML when we embed the attribute values as data attributes. Instead, cache the values in the InspectorClient, and embed just a lookup index into the HTML. This also nicely reduces the size of the generated HTML. The Inspector on https://github.com/SerenityOS/serenity reduces from 2.3MB to 1.9MB (about 318KB, or 13.8%).
2024-02-18 13:59:28 -05:00
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_index) {
Optional<Attribute> attribute;
if (attribute_index.has_value())
attribute = m_dom_node_attributes.get(node_id)->at(*attribute_index);
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.
2023-12-06 09:34:53 -05:00
m_context_menu_data = ContextMenuData { node_id, tag, attribute };
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.
2023-12-05 14:47:56 -05:00
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) {
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.
2023-12-06 09:34:53 -05:00
VERIFY(tag.has_value());
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.
2023-12-05 14:47:56 -05:00
if (on_requested_dom_node_tag_context_menu)
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.
2023-12-06 09:34:53 -05:00
on_requested_dom_node_tag_context_menu(position, *tag);
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.
2023-12-05 14:47:56 -05:00
} else if (type == "attribute"sv) {
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.
2023-12-06 09:34:53 -05:00
VERIFY(tag.has_value());
VERIFY(attribute.has_value());
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.
2023-12-05 14:47:56 -05:00
if (on_requested_dom_node_attribute_context_menu)
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.
2023-12-06 09:34:53 -05:00
on_requested_dom_node_attribute_context_menu(position, *tag, *attribute);
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.
2023-12-05 14:47:56 -05:00
}
};
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
m_inspector_web_view.on_inspector_selected_dom_node = [this](auto node_id, auto const& pseudo_element) {
LibWebView+WebContent: Make the DOM node inspection IPC async
2023-12-30 09:30:27 -05:00
m_content_web_view.inspect_dom_node(node_id, pseudo_element);
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
};
LibWebView: Allow editing the DOM through the Inspector WebView This allows a limited amount of DOM manipulation through the Inspector. Users may edit node tag names, text content, and attributes. To initiate an edit, double-click the tag/text/attribute of interest. To remove an attribute, begin editing the attribute and remove all of its text. To add an attribute, begin editing an existing attribute and add the new attribute's text before or after the existing attribute's text. This isn't going to be the final UX, but works for now just as a consequence of how attribute changes are implemented. A future patch will add more explicit add/delete actions.
2023-12-03 16:01:19 -05:00
m_inspector_web_view.on_inspector_set_dom_node_text = [this](auto node_id, auto const& text) {
m_content_web_view.set_dom_node_text(node_id, text);
};
m_inspector_web_view.on_inspector_set_dom_node_tag = [this](auto node_id, auto const& tag) {
LibWebView+WebContent: Make the DOM node editing IPCs async All DOM node mutation IPCs now invoke an async completion IPC after the DOM is mutated. This allows consolidating where the Inspector updates its view and the selected DOM node. This also allows improving the response to removing a DOM node. We would previously just select the <body> tag after removing a DOM node because the Inspector client had no idea what node preceded the removed node. Now the WebContent process can just indicate what that node is. So now after removing a DOM node, we inspect either its previous sibling (if it had one) or its parent.
2023-12-30 10:08:33 -05:00
m_content_web_view.set_dom_node_tag(node_id, tag);
LibWebView: Allow editing the DOM through the Inspector WebView This allows a limited amount of DOM manipulation through the Inspector. Users may edit node tag names, text content, and attributes. To initiate an edit, double-click the tag/text/attribute of interest. To remove an attribute, begin editing the attribute and remove all of its text. To add an attribute, begin editing an existing attribute and add the new attribute's text before or after the existing attribute's text. This isn't going to be the final UX, but works for now just as a consequence of how attribute changes are implemented. A future patch will add more explicit add/delete actions.
2023-12-03 16:01:19 -05:00
};
LibWebView: Add Inspector actions to be used as context menu callbacks These allow for triggering an edit of a DOM node (as an alternative to double-clicking), removing a DOM node, and adding/removing DOM node attributes.
2023-12-05 16:16:12 -05:00
m_inspector_web_view.on_inspector_added_dom_node_attributes = [this](auto node_id, auto const& attributes) {
m_content_web_view.add_dom_node_attributes(node_id, attributes);
};
LibWeb+WebContent: Do not embed attributes as data in the Inspector HTML Attribute values may contain HTML, and may contain invalid HTML at that. If the latter occurs, let's not generate invalid Inspector HTML when we embed the attribute values as data attributes. Instead, cache the values in the InspectorClient, and embed just a lookup index into the HTML. This also nicely reduces the size of the generated HTML. The Inspector on https://github.com/SerenityOS/serenity reduces from 2.3MB to 1.9MB (about 318KB, or 13.8%).
2024-02-18 13:59:28 -05:00
m_inspector_web_view.on_inspector_replaced_dom_node_attribute = [this](auto node_id, u32 attribute_index, auto const& replacement_attributes) {
auto const& attribute = m_dom_node_attributes.get(node_id)->at(attribute_index);
m_content_web_view.replace_dom_node_attribute(node_id, attribute.name, replacement_attributes);
LibWebView: Allow editing the DOM through the Inspector WebView This allows a limited amount of DOM manipulation through the Inspector. Users may edit node tag names, text content, and attributes. To initiate an edit, double-click the tag/text/attribute of interest. To remove an attribute, begin editing the attribute and remove all of its text. To add an attribute, begin editing an existing attribute and add the new attribute's text before or after the existing attribute's text. This isn't going to be the final UX, but works for now just as a consequence of how attribute changes are implemented. A future patch will add more explicit add/delete actions.
2023-12-03 16:01:19 -05:00
};
LibWebView: Add context menu support to the Inspector's cookie table The menu can currently support deleting a specific cookie or all cookies for the current page.
2024-09-06 13:22:16 -04:00
m_inspector_web_view.on_inspector_requested_cookie_context_menu = [this](auto cookie_index, auto position) {
if (cookie_index >= m_cookies.size())
return;
m_cookie_context_menu_index = cookie_index;
if (on_requested_cookie_context_menu)
on_requested_cookie_context_menu(position, m_cookies[cookie_index]);
};
Inspector: Add a basic style sheet inspector Choosing options from the `<select>` will load and display that style sheet's source text, with some checks to make sure that the text that just loaded is the one we currently want. The UI is a little goofy when scrolling, as it uses `position: sticky` which we don't implement yet. But that's just more motivation to implement it! :^)
2024-08-23 11:18:35 +01:00
m_inspector_web_view.on_inspector_requested_style_sheet_source = [this](auto const& identifier) {
m_content_web_view.request_style_sheet_source(identifier);
};
LibWebView: Implement a JavaScript console tab in the Inspector This adds a JS console to the bottom section of the Inspector WebView. Much of this code is based on the existing WebView::ConsoleClient, but ported to fit the inspector model. That is, much of the code from that class is now handled in the Inspector's JS.
2023-12-01 06:51:01 -05:00
m_inspector_web_view.on_inspector_executed_console_script = [this](auto const& script) {
append_console_source(script);
Everywhere: Rename {Deprecated => Byte}String This commit un-deprecates DeprecatedString, and repurposes it as a byte string. As the null state has already been removed, there are no other particularly hairy blockers in repurposing this type as a byte string (what it _really_ is). This commit is auto-generated: $ xs=$(ack -l \bDeprecatedString\b\|deprecated_string AK Userland \ Meta Ports Ladybird Tests Kernel) $ perl -pie 's/\bDeprecatedString\b/ByteString/g; s/deprecated_string/byte_string/g' $xs $ clang-format --style=file -i \ $(git diff --name-only | grep \.cpp\|\.h) $ gn format $(git ls-files '*.gn' '*.gni')
2023-12-16 17:49:34 +03:30
m_content_web_view.js_console_input(script.to_byte_string());
LibWebView: Implement a JavaScript console tab in the Inspector This adds a JS console to the bottom section of the Inspector WebView. Much of this code is based on the existing WebView::ConsoleClient, but ported to fit the inspector model. That is, much of the code from that class is now handled in the Inspector's JS.
2023-12-01 06:51:01 -05:00
};
LibWeb+LibWebView: Add a button to the Inspector to export its contents When working on the Inspector's HTML, it's often kind of tricky to debug when an element is styled / positioned incorrectly. We don't have a way to inspect the Inspector itself. This adds a button to the Inspector to export its HTML/CSS/JS contents to the downloads directory. This allows for more easily testing changes, especially by opening the exported HTML in another browser's dev tools. We will ultimately likely remove this button (or make it hidden) by the time we are production-ready. But it's quite useful for now.
2024-08-19 12:11:39 -04:00
m_inspector_web_view.on_inspector_exported_inspector_html = [this](String const& html) {
LibWebView: Use the download directory facility for saving files
2024-08-28 15:32:50 -04:00
auto maybe_inspector_path = Application::the().path_for_downloaded_file("inspector"sv);
LibWeb+LibWebView: Add a button to the Inspector to export its contents When working on the Inspector's HTML, it's often kind of tricky to debug when an element is styled / positioned incorrectly. We don't have a way to inspect the Inspector itself. This adds a button to the Inspector to export its HTML/CSS/JS contents to the downloads directory. This allows for more easily testing changes, especially by opening the exported HTML in another browser's dev tools. We will ultimately likely remove this button (or make it hidden) by the time we are production-ready. But it's quite useful for now.
2024-08-19 12:11:39 -04:00
LibWebView: Use the download directory facility for saving files
2024-08-28 15:32:50 -04:00
if (maybe_inspector_path.is_error()) {
append_console_warning(MUST(String::formatted("Unable to select a download location: {}", maybe_inspector_path.error())));
return;
}
auto inspector_path = maybe_inspector_path.release_value();
if (auto result = Core::Directory::create(inspector_path.string(), Core::Directory::CreateDirectories::Yes); result.is_error()) {
LibWeb+LibWebView: Add a button to the Inspector to export its contents When working on the Inspector's HTML, it's often kind of tricky to debug when an element is styled / positioned incorrectly. We don't have a way to inspect the Inspector itself. This adds a button to the Inspector to export its HTML/CSS/JS contents to the downloads directory. This allows for more easily testing changes, especially by opening the exported HTML in another browser's dev tools. We will ultimately likely remove this button (or make it hidden) by the time we are production-ready. But it's quite useful for now.
2024-08-19 12:11:39 -04:00
append_console_warning(MUST(String::formatted("Unable to create {}: {}", inspector_path, result.error())));
return;
}
auto export_file = [&](auto name, auto const& contents) {
auto path = inspector_path.append(name);
auto file = Core::File::open(path.string(), Core::File::OpenMode::Write);
if (file.is_error()) {
append_console_warning(MUST(String::formatted("Unable to open {}: {}", path, file.error())));
return false;
}
if (auto result = file.value()->write_until_depleted(contents); result.is_error()) {
append_console_warning(MUST(String::formatted("Unable to save {}: {}", path, result.error())));
return false;
}
return true;
};
auto inspector_css = MUST(Core::Resource::load_from_uri(INSPECTOR_CSS));
auto inspector_js = MUST(Core::Resource::load_from_uri(INSPECTOR_JS));
auto inspector_html = MUST(html.replace(INSPECTOR_CSS, "inspector.css"sv, ReplaceMode::All));
inspector_html = MUST(inspector_html.replace(INSPECTOR_JS, "inspector.js"sv, ReplaceMode::All));
if (!export_file("inspector.html"sv, inspector_html))
return;
if (!export_file("inspector.css"sv, inspector_css->data()))
return;
if (!export_file("inspector.js"sv, inspector_js->data()))
return;
append_console_message(MUST(String::formatted("Exported Inspector files to {}", inspector_path)));
};
LibWebView: Don't wait for the DOM and a11y trees to load the Inspector Provides a nicer experience on pages with large trees so that the window isn't just a large blank screen while it is loading. Instead, send the trees to the Inspector WebView once they have arrived and have been transformed to HTML. We Base64 encode the HTML to avoid needing to deal with all kinds of nested quotes that may appear in the HTML. We could instead send the JSON to the WebView, but generating the HTML in C++ feels a bit easier for now.
2023-11-30 06:52:03 -05:00
load_inspector();
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
}
InspectorClient::~InspectorClient()
{
Ladybird+LibWebView: Cleanup missing callbacks in InspectorClient This was causing reproducible crashes, when closing the inspector window of ladybird running on macos.
2024-01-01 13:31:26 +01:00
m_content_web_view.on_finshed_editing_dom_node = nullptr;
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
m_content_web_view.on_received_accessibility_tree = nullptr;
LibWebView: Implement a JavaScript console tab in the Inspector This adds a JS console to the bottom section of the Inspector WebView. Much of this code is based on the existing WebView::ConsoleClient, but ported to fit the inspector model. That is, much of the code from that class is now handled in the Inspector's JS.
2023-12-01 06:51:01 -05:00
m_content_web_view.on_received_console_message = nullptr;
m_content_web_view.on_received_console_messages = nullptr;
Ladybird+LibWebView: Cleanup missing callbacks in InspectorClient This was causing reproducible crashes, when closing the inspector window of ladybird running on macos.
2024-01-01 13:31:26 +01:00
m_content_web_view.on_received_dom_node_html = nullptr;
m_content_web_view.on_received_dom_node_properties = nullptr;
m_content_web_view.on_received_dom_tree = nullptr;
m_content_web_view.on_received_hovered_node_id = nullptr;
Inspector: Add a basic style sheet inspector Choosing options from the `<select>` will load and display that style sheet's source text, with some checks to make sure that the text that just loaded is the one we currently want. The UI is a little goofy when scrolling, as it uses `position: sticky` which we don't implement yet. But that's just more motivation to implement it! :^)
2024-08-23 11:18:35 +01:00
m_content_web_view.on_received_style_sheet_list = nullptr;
m_content_web_view.on_inspector_requested_style_sheet_source = nullptr;
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
}
void InspectorClient::inspect()
{
LibWebView: Protect the Inspector against rapid inspection requests This was seen in Browser when hotkey activations were processed twice. If we open the Inspector with a hotkey (F12) and quickly activate that hotkey again, we could try sending a JS command (inspector.loadDOMTree) before the inspector.js file was actually loaded in the WebContent. The window for this bug is larger on Serenity, where loading WebContent is a bit slower than on Linux. So even with the Browser bug fixed, it is pretty easy to hit this window still.
2024-03-03 12:18:06 -05:00
if (!m_inspector_loaded)
return;
Ladybird+LibWebView: Ensure existing Inspector widgets inspect the page If the Inspector widget already exists, be sure to inspect the page when it is re-opened. However, this should be a no-op if the page was already inspected (as any existing Inspector will be reset if a new page load began). Note this is not an issue in the AppKit chrome.
2023-12-10 10:09:40 -05:00
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
m_content_web_view.inspect_dom_tree();
m_content_web_view.inspect_accessibility_tree();
Inspector: Add a basic style sheet inspector Choosing options from the `<select>` will load and display that style sheet's source text, with some checks to make sure that the text that just loaded is the one we currently want. The UI is a little goofy when scrolling, as it uses `position: sticky` which we don't implement yet. But that's just more motivation to implement it! :^)
2024-08-23 11:18:35 +01:00
m_content_web_view.list_style_sheets();
LibWebView: Add a storage tab to the Inspector to manage cookies This adds a storage tab which contains just a cookie viewer for now. In the future, storage like Local Storage and Indexed DB can be added here as well. In this patch, the cookie table is read-only.
2024-09-06 12:08:50 -04:00
load_cookies();
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
}
void InspectorClient::reset()
{
LibWebView: Clear the Inspector DOM/accessibility trees upon reset This prevents rendering stale trees while navigating to a new page. The old non-WebView inspector widgets behaved this way.
2023-12-10 09:32:26 -05:00
static constexpr auto script = "inspector.reset();"sv;
m_inspector_web_view.run_javascript(script);
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
m_body_node_id.clear();
m_pending_selection.clear();
LibWebView: Don't wait for the DOM and a11y trees to load the Inspector Provides a nicer experience on pages with large trees so that the window isn't just a large blank screen while it is loading. Instead, send the trees to the Inspector WebView once they have arrived and have been transformed to HTML. We Base64 encode the HTML to avoid needing to deal with all kinds of nested quotes that may appear in the HTML. We could instead send the JSON to the WebView, but generating the HTML in C++ feels a bit easier for now.
2023-11-30 06:52:03 -05:00
m_dom_tree_loaded = false;
LibWebView: Implement a JavaScript console tab in the Inspector This adds a JS console to the bottom section of the Inspector WebView. Much of this code is based on the existing WebView::ConsoleClient, but ported to fit the inspector model. That is, much of the code from that class is now handled in the Inspector's JS.
2023-12-01 06:51:01 -05:00
LibWeb+WebContent: Do not embed attributes as data in the Inspector HTML Attribute values may contain HTML, and may contain invalid HTML at that. If the latter occurs, let's not generate invalid Inspector HTML when we embed the attribute values as data attributes. Instead, cache the values in the InspectorClient, and embed just a lookup index into the HTML. This also nicely reduces the size of the generated HTML. The Inspector on https://github.com/SerenityOS/serenity reduces from 2.3MB to 1.9MB (about 318KB, or 13.8%).
2024-02-18 13:59:28 -05:00
m_dom_node_attributes.clear();
LibWebView: Implement a JavaScript console tab in the Inspector This adds a JS console to the bottom section of the Inspector WebView. Much of this code is based on the existing WebView::ConsoleClient, but ported to fit the inspector model. That is, much of the code from that class is now handled in the Inspector's JS.
2023-12-01 06:51:01 -05:00
m_highest_notified_message_index = -1;
m_highest_received_message_index = -1;
m_waiting_for_messages = false;
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
}
void InspectorClient::select_hovered_node()
{
LibWebView+WebContent: Make the hovered node retrieval IPC async
2023-12-30 09:42:24 -05:00
m_content_web_view.get_hovered_node_id();
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
}
void InspectorClient::select_default_node()
{
if (m_body_node_id.has_value())
select_node(*m_body_node_id);
}
void InspectorClient::clear_selection()
{
m_content_web_view.clear_inspected_dom_node();
static constexpr auto script = "inspector.clearInspectedDOMNode();"sv;
m_inspector_web_view.run_javascript(script);
}
void InspectorClient::select_node(i32 node_id)
{
LibWebView: Don't wait for the DOM and a11y trees to load the Inspector Provides a nicer experience on pages with large trees so that the window isn't just a large blank screen while it is loading. Instead, send the trees to the Inspector WebView once they have arrived and have been transformed to HTML. We Base64 encode the HTML to avoid needing to deal with all kinds of nested quotes that may appear in the HTML. We could instead send the JSON to the WebView, but generating the HTML in C++ feels a bit easier for now.
2023-11-30 06:52:03 -05:00
if (!m_dom_tree_loaded) {
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
m_pending_selection = node_id;
return;
}
auto script = MUST(String::formatted("inspector.inspectDOMNodeID({});", node_id));
m_inspector_web_view.run_javascript(script);
}
LibWebView: Add a storage tab to the Inspector to manage cookies This adds a storage tab which contains just a cookie viewer for now. In the future, storage like Local Storage and Indexed DB can be added here as well. In this patch, the cookie table is read-only.
2024-09-06 12:08:50 -04:00
void InspectorClient::load_cookies()
{
m_cookies = Application::cookie_jar().get_all_cookies(m_content_web_view.url());
JsonArray json_cookies;
for (auto const& [index, cookie] : enumerate(m_cookies)) {
JsonObject json_cookie;
json_cookie.set("index"sv, JsonValue { index });
json_cookie.set("name"sv, JsonValue { cookie.name });
json_cookie.set("value"sv, JsonValue { cookie.value });
json_cookie.set("domain"sv, JsonValue { cookie.domain });
json_cookie.set("path"sv, JsonValue { cookie.path });
json_cookie.set("creationTime"sv, JsonValue { cookie.creation_time.milliseconds_since_epoch() });
json_cookie.set("lastAccessTime"sv, JsonValue { cookie.last_access_time.milliseconds_since_epoch() });
json_cookie.set("expiryTime"sv, JsonValue { cookie.expiry_time.milliseconds_since_epoch() });
MUST(json_cookies.append(move(json_cookie)));
}
StringBuilder builder;
builder.append("inspector.setCookies("sv);
json_cookies.serialize(builder);
builder.append(");"sv);
m_inspector_web_view.run_javascript(builder.string_view());
}
LibWebView: Add Inspector actions to be used as context menu callbacks These allow for triggering an edit of a DOM node (as an alternative to double-clicking), removing a DOM node, and adding/removing DOM node attributes.
2023-12-05 16:16:12 -05:00
void InspectorClient::context_menu_edit_dom_node()
{
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.
2023-12-06 09:34:53 -05:00
VERIFY(m_context_menu_data.has_value());
LibWebView: Add Inspector actions to be used as context menu callbacks These allow for triggering an edit of a DOM node (as an alternative to double-clicking), removing a DOM node, and adding/removing DOM node attributes.
2023-12-05 16:16:12 -05:00
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.
2023-12-06 09:34:53 -05:00
auto script = MUST(String::formatted("inspector.editDOMNodeID({});", m_context_menu_data->dom_node_id));
LibWebView: Add Inspector actions to be used as context menu callbacks These allow for triggering an edit of a DOM node (as an alternative to double-clicking), removing a DOM node, and adding/removing DOM node attributes.
2023-12-05 16:16:12 -05:00
m_inspector_web_view.run_javascript(script);
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.
2023-12-06 09:34:53 -05:00
m_context_menu_data.clear();
LibWebView: Add Inspector actions to be used as context menu callbacks These allow for triggering an edit of a DOM node (as an alternative to double-clicking), removing a DOM node, and adding/removing DOM node attributes.
2023-12-05 16:16:12 -05:00
}
Ladybird+LibWebView: Add an Inspector action to copy a node's HTML/text
2023-12-06 11:16:28 -05:00
void InspectorClient::context_menu_copy_dom_node()
{
VERIFY(m_context_menu_data.has_value());
LibWebView+WebContent: Make the DOM node HTML retrieval IPC async
2023-12-30 14:32:50 -05:00
m_content_web_view.get_dom_node_html(m_context_menu_data->dom_node_id);
Ladybird+LibWebView: Add an Inspector action to copy a node's HTML/text
2023-12-06 11:16:28 -05:00
m_context_menu_data.clear();
}
Ladybird+LibWebView: Add an Inspector action to screenshot a DOM node
2023-12-06 11:56:16 -05:00
void InspectorClient::context_menu_screenshot_dom_node()
{
VERIFY(m_context_menu_data.has_value());
Ladybird+LibWebView+WebContent: Make the screenshot IPCs async These IPCs are different than other IPCs in that we can't just set up a callback function to be invoked when WebContent sends us the screenshot data. There are multiple places that would set that callback, and they would step on each other's toes. Instead, the screenshot APIs on ViewImplementation now return a Promise which callers can interact with to receive the screenshot (or an error).
2023-12-31 09:51:02 -05:00
m_content_web_view.take_dom_node_screenshot(m_context_menu_data->dom_node_id)
->when_resolved([this](auto const& path) {
append_console_message(MUST(String::formatted("Screenshot saved to: {}", path)));
})
.when_rejected([this](auto const& error) {
append_console_warning(MUST(String::formatted("Warning: {}", error)));
});
Ladybird+LibWebView: Add an Inspector action to screenshot a DOM node
2023-12-06 11:56:16 -05:00
m_context_menu_data.clear();
}
Ladybird+LibWebView: Add an Inspector action to insert a child DOM node
2023-12-07 11:05:34 -05:00
void InspectorClient::context_menu_create_child_element()
{
VERIFY(m_context_menu_data.has_value());
LibWebView+WebContent: Make the DOM node editing IPCs async All DOM node mutation IPCs now invoke an async completion IPC after the DOM is mutated. This allows consolidating where the Inspector updates its view and the selected DOM node. This also allows improving the response to removing a DOM node. We would previously just select the <body> tag after removing a DOM node because the Inspector client had no idea what node preceded the removed node. Now the WebContent process can just indicate what that node is. So now after removing a DOM node, we inspect either its previous sibling (if it had one) or its parent.
2023-12-30 10:08:33 -05:00
m_content_web_view.create_child_element(m_context_menu_data->dom_node_id);
Ladybird+LibWebView: Add an Inspector action to insert a child DOM node
2023-12-07 11:05:34 -05:00
m_context_menu_data.clear();
}
void InspectorClient::context_menu_create_child_text_node()
{
VERIFY(m_context_menu_data.has_value());
LibWebView+WebContent: Make the DOM node editing IPCs async All DOM node mutation IPCs now invoke an async completion IPC after the DOM is mutated. This allows consolidating where the Inspector updates its view and the selected DOM node. This also allows improving the response to removing a DOM node. We would previously just select the <body> tag after removing a DOM node because the Inspector client had no idea what node preceded the removed node. Now the WebContent process can just indicate what that node is. So now after removing a DOM node, we inspect either its previous sibling (if it had one) or its parent.
2023-12-30 10:08:33 -05:00
m_content_web_view.create_child_text_node(m_context_menu_data->dom_node_id);
Ladybird+LibWebView: Add an Inspector action to insert a child DOM node
2023-12-07 11:05:34 -05:00
m_context_menu_data.clear();
}
Ladybird+LibWebView: Add an Inspector action to clone a DOM node
2023-12-07 11:13:15 -05:00
void InspectorClient::context_menu_clone_dom_node()
{
VERIFY(m_context_menu_data.has_value());
LibWebView+WebContent: Make the DOM node editing IPCs async All DOM node mutation IPCs now invoke an async completion IPC after the DOM is mutated. This allows consolidating where the Inspector updates its view and the selected DOM node. This also allows improving the response to removing a DOM node. We would previously just select the <body> tag after removing a DOM node because the Inspector client had no idea what node preceded the removed node. Now the WebContent process can just indicate what that node is. So now after removing a DOM node, we inspect either its previous sibling (if it had one) or its parent.
2023-12-30 10:08:33 -05:00
m_content_web_view.clone_dom_node(m_context_menu_data->dom_node_id);
Ladybird+LibWebView: Add an Inspector action to clone a DOM node
2023-12-07 11:13:15 -05:00
m_context_menu_data.clear();
}
LibWebView: Add Inspector actions to be used as context menu callbacks These allow for triggering an edit of a DOM node (as an alternative to double-clicking), removing a DOM node, and adding/removing DOM node attributes.
2023-12-05 16:16:12 -05:00
void InspectorClient::context_menu_remove_dom_node()
{
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.
2023-12-06 09:34:53 -05:00
VERIFY(m_context_menu_data.has_value());
LibWebView: Add Inspector actions to be used as context menu callbacks These allow for triggering an edit of a DOM node (as an alternative to double-clicking), removing a DOM node, and adding/removing DOM node attributes.
2023-12-05 16:16:12 -05:00
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.
2023-12-06 09:34:53 -05:00
m_content_web_view.remove_dom_node(m_context_menu_data->dom_node_id);
m_context_menu_data.clear();
LibWebView: Add Inspector actions to be used as context menu callbacks These allow for triggering an edit of a DOM node (as an alternative to double-clicking), removing a DOM node, and adding/removing DOM node attributes.
2023-12-05 16:16:12 -05:00
}
void InspectorClient::context_menu_add_dom_node_attribute()
{
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.
2023-12-06 09:34:53 -05:00
VERIFY(m_context_menu_data.has_value());
LibWebView: Add Inspector actions to be used as context menu callbacks These allow for triggering an edit of a DOM node (as an alternative to double-clicking), removing a DOM node, and adding/removing DOM node attributes.
2023-12-05 16:16:12 -05:00
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.
2023-12-06 09:34:53 -05:00
auto script = MUST(String::formatted("inspector.addAttributeToDOMNodeID({});", m_context_menu_data->dom_node_id));
LibWebView: Add Inspector actions to be used as context menu callbacks These allow for triggering an edit of a DOM node (as an alternative to double-clicking), removing a DOM node, and adding/removing DOM node attributes.
2023-12-05 16:16:12 -05:00
m_inspector_web_view.run_javascript(script);
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.
2023-12-06 09:34:53 -05:00
m_context_menu_data.clear();
LibWebView: Add Inspector actions to be used as context menu callbacks These allow for triggering an edit of a DOM node (as an alternative to double-clicking), removing a DOM node, and adding/removing DOM node attributes.
2023-12-05 16:16:12 -05:00
}
void InspectorClient::context_menu_remove_dom_node_attribute()
{
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.
2023-12-06 09:34:53 -05:00
VERIFY(m_context_menu_data.has_value());
VERIFY(m_context_menu_data->attribute.has_value());
LibWebView: Add Inspector actions to be used as context menu callbacks These allow for triggering an edit of a DOM node (as an alternative to double-clicking), removing a DOM node, and adding/removing DOM node attributes.
2023-12-05 16:16:12 -05:00
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.
2023-12-06 09:34:53 -05:00
m_content_web_view.replace_dom_node_attribute(m_context_menu_data->dom_node_id, m_context_menu_data->attribute->name, {});
m_context_menu_data.clear();
LibWebView: Add Inspector actions to be used as context menu callbacks These allow for triggering an edit of a DOM node (as an alternative to double-clicking), removing a DOM node, and adding/removing DOM node attributes.
2023-12-05 16:16:12 -05:00
}
Ladybird+LibWebView: Add an Inspector action to copy an attribute value
2023-12-06 10:12:31 -05:00
void InspectorClient::context_menu_copy_dom_node_attribute_value()
{
VERIFY(m_context_menu_data.has_value());
VERIFY(m_context_menu_data->attribute.has_value());
if (m_content_web_view.on_insert_clipboard_entry)
m_content_web_view.on_insert_clipboard_entry(m_context_menu_data->attribute->value, "unspecified"_string, "text/plain"_string);
m_context_menu_data.clear();
}
LibWebView: Add context menu support to the Inspector's cookie table The menu can currently support deleting a specific cookie or all cookies for the current page.
2024-09-06 13:22:16 -04:00
void InspectorClient::context_menu_delete_cookie()
{
VERIFY(m_cookie_context_menu_index.has_value());
VERIFY(*m_cookie_context_menu_index < m_cookies.size());
auto& cookie = m_cookies[*m_cookie_context_menu_index];
cookie.expiry_time = UnixDateTime::earliest();
Application::cookie_jar().update_cookie(move(cookie));
load_cookies();
m_cookie_context_menu_index.clear();
}
void InspectorClient::context_menu_delete_all_cookies()
{
for (auto& cookie : m_cookies) {
cookie.expiry_time = UnixDateTime::earliest();
Application::cookie_jar().update_cookie(move(cookie));
}
load_cookies();
m_cookie_context_menu_index.clear();
}
LibWebView: Don't wait for the DOM and a11y trees to load the Inspector Provides a nicer experience on pages with large trees so that the window isn't just a large blank screen while it is loading. Instead, send the trees to the Inspector WebView once they have arrived and have been transformed to HTML. We Base64 encode the HTML to avoid needing to deal with all kinds of nested quotes that may appear in the HTML. We could instead send the JSON to the WebView, but generating the HTML in C++ feels a bit easier for now.
2023-11-30 06:52:03 -05:00
void InspectorClient::load_inspector()
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
{
LibWebView: Migrate the Inspector's HTML to its own HTML file It's getting a bit unwieldy to maintain as an inlined string. Move it to its own file so it can be edited with syntax highlighting and other IDE features.
2024-09-06 10:33:39 -04:00
auto inspector_html = MUST(Core::Resource::load_from_uri(INSPECTOR_HTML));
LibWebView: Support generating property tables in the Inspector Since all chromes currently show their own tables, this is opt-out until they are updated to use the WebView tables.
2023-11-27 16:06:38 -05:00
auto generate_property_table = [&](auto name) {
LibWebView: Migrate the Inspector's HTML to its own HTML file It's getting a bit unwieldy to maintain as an inlined string. Move it to its own file so it can be edited with syntax highlighting and other IDE features.
2024-09-06 10:33:39 -04:00
return MUST(String::formatted(R"~~~(
LibWebView: Support generating property tables in the Inspector Since all chromes currently show their own tables, this is opt-out until they are updated to use the WebView tables.
2023-11-27 16:06:38 -05:00
<div id="{0}" class="tab-content">
<table class="property-table">
<thead>
<tr>
<th>Name</th>
<th>Value</th>
</tr>
</thead>
<tbody id="{0}-table">
</tbody>
</table>
</div>
)~~~",
LibWebView: Migrate the Inspector's HTML to its own HTML file It's getting a bit unwieldy to maintain as an inlined string. Move it to its own file so it can be edited with syntax highlighting and other IDE features.
2024-09-06 10:33:39 -04:00
name));
LibWebView: Support generating property tables in the Inspector Since all chromes currently show their own tables, this is opt-out until they are updated to use the WebView tables.
2023-11-27 16:06:38 -05:00
};
LibWebView: Migrate the Inspector's HTML to its own HTML file It's getting a bit unwieldy to maintain as an inlined string. Move it to its own file so it can be edited with syntax highlighting and other IDE features.
2024-09-06 10:33:39 -04:00
StringBuilder builder;
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
LibWebView: Migrate the Inspector's HTML to its own HTML file It's getting a bit unwieldy to maintain as an inlined string. Move it to its own file so it can be edited with syntax highlighting and other IDE features.
2024-09-06 10:33:39 -04:00
SourceGenerator generator { builder };
generator.set("INSPECTOR_CSS"sv, INSPECTOR_CSS);
generator.set("INSPECTOR_JS"sv, INSPECTOR_JS);
generator.set("INSPECTOR_STYLE"sv, HTML_HIGHLIGHTER_STYLE);
generator.set("COMPUTED_STYLE"sv, generate_property_table("computed-style"sv));
generator.set("RESOVLED_STYLE"sv, generate_property_table("resolved-style"sv));
generator.set("CUSTOM_PROPERTIES"sv, generate_property_table("custom-properties"sv));
generator.append(inspector_html->data());
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
LibWebView: Migrate the Inspector's HTML to its own HTML file It's getting a bit unwieldy to maintain as an inlined string. Move it to its own file so it can be edited with syntax highlighting and other IDE features.
2024-09-06 10:33:39 -04:00
m_inspector_web_view.load_html(generator.as_string_view());
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
}
template<typename Generator>
static void generate_tree(StringBuilder& builder, JsonObject const& node, Generator&& generator)
{
if (auto children = node.get_array("children"sv); children.has_value() && !children->is_empty()) {
Everywhere: Rename {Deprecated => Byte}String This commit un-deprecates DeprecatedString, and repurposes it as a byte string. As the null state has already been removed, there are no other particularly hairy blockers in repurposing this type as a byte string (what it _really_ is). This commit is auto-generated: $ xs=$(ack -l \bDeprecatedString\b\|deprecated_string AK Userland \ Meta Ports Ladybird Tests Kernel) $ perl -pie 's/\bDeprecatedString\b/ByteString/g; s/deprecated_string/byte_string/g' $xs $ clang-format --style=file -i \ $(git diff --name-only | grep \.cpp\|\.h) $ gn format $(git ls-files '*.gn' '*.gni')
2023-12-16 17:49:34 +03:30
auto name = node.get_byte_string("name"sv).value_or({});
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
builder.append("<details>"sv);
builder.append("<summary>"sv);
generator(node);
builder.append("</summary>"sv);
children->for_each([&](auto const& child) {
builder.append("<div>"sv);
generate_tree(builder, child.as_object(), generator);
builder.append("</div>"sv);
});
builder.append("</details>"sv);
} else {
generator(node);
}
}
LibWebView: Don't wait for the DOM and a11y trees to load the Inspector Provides a nicer experience on pages with large trees so that the window isn't just a large blank screen while it is loading. Instead, send the trees to the Inspector WebView once they have arrived and have been transformed to HTML. We Base64 encode the HTML to avoid needing to deal with all kinds of nested quotes that may appear in the HTML. We could instead send the JSON to the WebView, but generating the HTML in C++ feels a bit easier for now.
2023-11-30 06:52:03 -05:00
String InspectorClient::generate_dom_tree(JsonObject const& dom_tree)
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
{
LibWebView: Don't wait for the DOM and a11y trees to load the Inspector Provides a nicer experience on pages with large trees so that the window isn't just a large blank screen while it is loading. Instead, send the trees to the Inspector WebView once they have arrived and have been transformed to HTML. We Base64 encode the HTML to avoid needing to deal with all kinds of nested quotes that may appear in the HTML. We could instead send the JSON to the WebView, but generating the HTML in C++ feels a bit easier for now.
2023-11-30 06:52:03 -05:00
StringBuilder builder;
generate_tree(builder, dom_tree, [&](JsonObject const& node) {
Everywhere: Rename {Deprecated => Byte}String This commit un-deprecates DeprecatedString, and repurposes it as a byte string. As the null state has already been removed, there are no other particularly hairy blockers in repurposing this type as a byte string (what it _really_ is). This commit is auto-generated: $ xs=$(ack -l \bDeprecatedString\b\|deprecated_string AK Userland \ Meta Ports Ladybird Tests Kernel) $ perl -pie 's/\bDeprecatedString\b/ByteString/g; s/deprecated_string/byte_string/g' $xs $ clang-format --style=file -i \ $(git diff --name-only | grep \.cpp\|\.h) $ gn format $(git ls-files '*.gn' '*.gni')
2023-12-16 17:49:34 +03:30
auto type = node.get_byte_string("type"sv).value_or("unknown"sv);
auto name = node.get_byte_string("name"sv).value_or({});
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
StringBuilder data_attributes;
auto append_data_attribute = [&](auto name, auto value) {
if (!data_attributes.is_empty())
data_attributes.append(' ');
data_attributes.appendff("data-{}=\"{}\"", name, value);
};
LibWeb+WebContent: Do not embed attributes as data in the Inspector HTML Attribute values may contain HTML, and may contain invalid HTML at that. If the latter occurs, let's not generate invalid Inspector HTML when we embed the attribute values as data attributes. Instead, cache the values in the InspectorClient, and embed just a lookup index into the HTML. This also nicely reduces the size of the generated HTML. The Inspector on https://github.com/SerenityOS/serenity reduces from 2.3MB to 1.9MB (about 318KB, or 13.8%).
2024-02-18 13:59:28 -05:00
i32 node_id = 0;
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
if (auto pseudo_element = node.get_integer<i32>("pseudo-element"sv); pseudo_element.has_value()) {
LibWeb+WebContent: Do not embed attributes as data in the Inspector HTML Attribute values may contain HTML, and may contain invalid HTML at that. If the latter occurs, let's not generate invalid Inspector HTML when we embed the attribute values as data attributes. Instead, cache the values in the InspectorClient, and embed just a lookup index into the HTML. This also nicely reduces the size of the generated HTML. The Inspector on https://github.com/SerenityOS/serenity reduces from 2.3MB to 1.9MB (about 318KB, or 13.8%).
2024-02-18 13:59:28 -05:00
node_id = node.get_integer<i32>("parent-id"sv).value();
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
append_data_attribute("pseudo-element"sv, *pseudo_element);
} else {
LibWeb+WebContent: Do not embed attributes as data in the Inspector HTML Attribute values may contain HTML, and may contain invalid HTML at that. If the latter occurs, let's not generate invalid Inspector HTML when we embed the attribute values as data attributes. Instead, cache the values in the InspectorClient, and embed just a lookup index into the HTML. This also nicely reduces the size of the generated HTML. The Inspector on https://github.com/SerenityOS/serenity reduces from 2.3MB to 1.9MB (about 318KB, or 13.8%).
2024-02-18 13:59:28 -05:00
node_id = node.get_integer<i32>("id"sv).value();
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
}
LibWeb+WebContent: Do not embed attributes as data in the Inspector HTML Attribute values may contain HTML, and may contain invalid HTML at that. If the latter occurs, let's not generate invalid Inspector HTML when we embed the attribute values as data attributes. Instead, cache the values in the InspectorClient, and embed just a lookup index into the HTML. This also nicely reduces the size of the generated HTML. The Inspector on https://github.com/SerenityOS/serenity reduces from 2.3MB to 1.9MB (about 318KB, or 13.8%).
2024-02-18 13:59:28 -05:00
append_data_attribute("id"sv, node_id);
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
if (type == "text"sv) {
Everywhere: Rename {Deprecated => Byte}String This commit un-deprecates DeprecatedString, and repurposes it as a byte string. As the null state has already been removed, there are no other particularly hairy blockers in repurposing this type as a byte string (what it _really_ is). This commit is auto-generated: $ xs=$(ack -l \bDeprecatedString\b\|deprecated_string AK Userland \ Meta Ports Ladybird Tests Kernel) $ perl -pie 's/\bDeprecatedString\b/ByteString/g; s/deprecated_string/byte_string/g' $xs $ clang-format --style=file -i \ $(git diff --name-only | grep \.cpp\|\.h) $ gn format $(git ls-files '*.gn' '*.gni')
2023-12-16 17:49:34 +03:30
auto deprecated_text = node.get_byte_string("text"sv).release_value();
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
deprecated_text = escape_html_entities(deprecated_text);
LibWebView: Allow editing empty DOM text nodes in the Inspector When a DOM text node is empty, we currently render the node name (which is "#text") in the Inspector. This is just to prevent displaying nothing at all, which looks a bit off. However, the patch to allow editing text fields neglected to allow editing these empty fields. This patch attaches the original text data as a data attribute, much like we do for DOM attributes. That is used as the editable text in the inspector, and the empty text fields are now wrapped in an editable span.
2023-12-09 17:32:10 -05:00
auto text = MUST(Web::Infra::strip_and_collapse_whitespace(deprecated_text));
LibWebView: Do not embed text as data in the Inspector HTML We were previously embedding the original text to handle the special case where the text is empty. We generate an extra span to hold the string "#text" as a placeholder, so that we don't generate a 0px-wide, unclickable (and therefore uneditable) node. Instead, we can just detect when this is the case in the Inspector JS. This further reduces the generated HTML for the Inspector on https://github.com/SerenityOS/serenity from 1.9MB to 1.8MB (about 94KB, or 4.7%).
2024-02-18 14:29:41 -05:00
builder.appendff("<span data-node-type=\"text\" class=\"hoverable editable\" {}>", data_attributes.string_view());
LibWebView: Allow editing empty DOM text nodes in the Inspector When a DOM text node is empty, we currently render the node name (which is "#text") in the Inspector. This is just to prevent displaying nothing at all, which looks a bit off. However, the patch to allow editing text fields neglected to allow editing these empty fields. This patch attaches the original text data as a data attribute, much like we do for DOM attributes. That is used as the editable text in the inspector, and the empty text fields are now wrapped in an editable span.
2023-12-09 17:32:10 -05:00
if (text.is_empty())
builder.appendff("<span class=\"internal\">{}</span>", name);
else
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
builder.append(text);
LibWebView: Allow editing empty DOM text nodes in the Inspector When a DOM text node is empty, we currently render the node name (which is "#text") in the Inspector. This is just to prevent displaying nothing at all, which looks a bit off. However, the patch to allow editing text fields neglected to allow editing these empty fields. This patch attaches the original text data as a data attribute, much like we do for DOM attributes. That is used as the editable text in the inspector, and the empty text fields are now wrapped in an editable span.
2023-12-09 17:32:10 -05:00
builder.append("</span>"sv);
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
return;
}
if (type == "comment"sv) {
Everywhere: Rename {Deprecated => Byte}String This commit un-deprecates DeprecatedString, and repurposes it as a byte string. As the null state has already been removed, there are no other particularly hairy blockers in repurposing this type as a byte string (what it _really_ is). This commit is auto-generated: $ xs=$(ack -l \bDeprecatedString\b\|deprecated_string AK Userland \ Meta Ports Ladybird Tests Kernel) $ perl -pie 's/\bDeprecatedString\b/ByteString/g; s/deprecated_string/byte_string/g' $xs $ clang-format --style=file -i \ $(git diff --name-only | grep \.cpp\|\.h) $ gn format $(git ls-files '*.gn' '*.gni')
2023-12-16 17:49:34 +03:30
auto comment = node.get_byte_string("data"sv).release_value();
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
comment = escape_html_entities(comment);
Ladybird: Do not include comment start/end sequence in its editable text Currently, when editing a comment, the `<!--` and `-->` start and end sequences would be included in the generated <input> field. This would result in including that text in the updated comment text. So, for example, in a comment such as: <!-- foo --> Changing "foo" to "bar" would result in the comment: <!--<!-- bar -->--> And this would repeatedly nest for each edit.
2023-12-09 17:10:10 -05:00
builder.appendff("<span class=\"hoverable comment\" {}>", data_attributes.string_view());
builder.append("<span>&lt;!--</span>"sv);
builder.appendff("<span data-node-type=\"comment\" class=\"editable\">{}</span>", comment);
builder.append("<span>--&gt;</span>"sv);
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
builder.append("</span>"sv);
return;
}
if (type == "shadow-root"sv) {
Everywhere: Rename {Deprecated => Byte}String This commit un-deprecates DeprecatedString, and repurposes it as a byte string. As the null state has already been removed, there are no other particularly hairy blockers in repurposing this type as a byte string (what it _really_ is). This commit is auto-generated: $ xs=$(ack -l \bDeprecatedString\b\|deprecated_string AK Userland \ Meta Ports Ladybird Tests Kernel) $ perl -pie 's/\bDeprecatedString\b/ByteString/g; s/deprecated_string/byte_string/g' $xs $ clang-format --style=file -i \ $(git diff --name-only | grep \.cpp\|\.h) $ gn format $(git ls-files '*.gn' '*.gni')
2023-12-16 17:49:34 +03:30
auto mode = node.get_byte_string("mode"sv).release_value();
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
builder.appendff("<span class=\"hoverable internal\" {}>", data_attributes.string_view());
builder.appendff("{} ({})", name, mode);
builder.append("</span>"sv);
return;
}
if (type != "element"sv) {
builder.appendff("<span class=\"hoverable internal\" {}>", data_attributes.string_view());
builder.appendff(name);
builder.append("</span>"sv);
return;
}
if (name.equals_ignoring_ascii_case("BODY"sv))
LibWeb+WebContent: Do not embed attributes as data in the Inspector HTML Attribute values may contain HTML, and may contain invalid HTML at that. If the latter occurs, let's not generate invalid Inspector HTML when we embed the attribute values as data attributes. Instead, cache the values in the InspectorClient, and embed just a lookup index into the HTML. This also nicely reduces the size of the generated HTML. The Inspector on https://github.com/SerenityOS/serenity reduces from 2.3MB to 1.9MB (about 318KB, or 13.8%).
2024-02-18 13:59:28 -05:00
m_body_node_id = node_id;
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
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.
2023-12-06 09:34:53 -05:00
auto tag = name.to_lowercase();
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
builder.appendff("<span class=\"hoverable\" {}>", data_attributes.string_view());
builder.append("<span>&lt;</span>"sv);
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.
2023-12-06 09:34:53 -05:00
builder.appendff("<span data-node-type=\"tag\" data-tag=\"{0}\" class=\"editable tag\">{0}</span>", tag);
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
if (auto attributes = node.get_object("attributes"sv); attributes.has_value()) {
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.
2023-12-06 09:34:53 -05:00
attributes->for_each_member([&](auto const& name, auto const& value) {
LibWeb+WebContent: Do not embed attributes as data in the Inspector HTML Attribute values may contain HTML, and may contain invalid HTML at that. If the latter occurs, let's not generate invalid Inspector HTML when we embed the attribute values as data attributes. Instead, cache the values in the InspectorClient, and embed just a lookup index into the HTML. This also nicely reduces the size of the generated HTML. The Inspector on https://github.com/SerenityOS/serenity reduces from 2.3MB to 1.9MB (about 318KB, or 13.8%).
2024-02-18 13:59:28 -05:00
auto& dom_node_attributes = m_dom_node_attributes.ensure(node_id);
LibWebView: Prevent quoting attribute values twice in the Inspector As of commit ccd701809fc168c90b2f74bdb3b3f2a3fd82d10e, the formatter for JsonValue now fully serializes the value. The serializer will surround the string value with quotes. We want control over when we add quotes to the generated Inspector HTML, so avoid formatting attributes as raw JSON values.
2024-01-24 15:25:24 -05:00
auto value_string = value.as_string();
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
builder.append("&nbsp;"sv);
LibWeb+WebContent: Do not embed attributes as data in the Inspector HTML Attribute values may contain HTML, and may contain invalid HTML at that. If the latter occurs, let's not generate invalid Inspector HTML when we embed the attribute values as data attributes. Instead, cache the values in the InspectorClient, and embed just a lookup index into the HTML. This also nicely reduces the size of the generated HTML. The Inspector on https://github.com/SerenityOS/serenity reduces from 2.3MB to 1.9MB (about 318KB, or 13.8%).
2024-02-18 13:59:28 -05:00
builder.appendff("<span data-node-type=\"attribute\" data-tag=\"{}\" data-attribute-index={} class=\"editable\">", tag, dom_node_attributes.size());
LibWebView: Escape HTML entities in attribute names Otherwise, we can embed invalid HTML in the Inspector web view.
2024-07-29 17:23:52 -04:00
builder.appendff("<span class=\"attribute-name\">{}</span>", escape_html_entities(name));
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
builder.append('=');
LibWebView: Escape HTML within attribute values in the Inspector HTML If an attribute value contains HTML, let's make sure we render it as text, instead of injecting HTML in the middle of an Inspector field.
2024-02-18 14:17:09 -05:00
builder.appendff("<span class=\"attribute-value\">\"{}\"</span>", escape_html_entities(value_string));
LibWebView: Allow editing the DOM through the Inspector WebView This allows a limited amount of DOM manipulation through the Inspector. Users may edit node tag names, text content, and attributes. To initiate an edit, double-click the tag/text/attribute of interest. To remove an attribute, begin editing the attribute and remove all of its text. To add an attribute, begin editing an existing attribute and add the new attribute's text before or after the existing attribute's text. This isn't going to be the final UX, but works for now just as a consequence of how attribute changes are implemented. A future patch will add more explicit add/delete actions.
2023-12-03 16:01:19 -05:00
builder.append("</span>"sv);
LibWeb+WebContent: Do not embed attributes as data in the Inspector HTML Attribute values may contain HTML, and may contain invalid HTML at that. If the latter occurs, let's not generate invalid Inspector HTML when we embed the attribute values as data attributes. Instead, cache the values in the InspectorClient, and embed just a lookup index into the HTML. This also nicely reduces the size of the generated HTML. The Inspector on https://github.com/SerenityOS/serenity reduces from 2.3MB to 1.9MB (about 318KB, or 13.8%).
2024-02-18 13:59:28 -05:00
dom_node_attributes.empend(MUST(String::from_byte_string(name)), MUST(String::from_byte_string(value_string)));
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
});
}
builder.append("<span>&gt;</span>"sv);
builder.append("</span>"sv);
});
LibWebView: Don't wait for the DOM and a11y trees to load the Inspector Provides a nicer experience on pages with large trees so that the window isn't just a large blank screen while it is loading. Instead, send the trees to the Inspector WebView once they have arrived and have been transformed to HTML. We Base64 encode the HTML to avoid needing to deal with all kinds of nested quotes that may appear in the HTML. We could instead send the JSON to the WebView, but generating the HTML in C++ feels a bit easier for now.
2023-11-30 06:52:03 -05:00
return MUST(builder.to_string());
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
}
LibWebView: Don't wait for the DOM and a11y trees to load the Inspector Provides a nicer experience on pages with large trees so that the window isn't just a large blank screen while it is loading. Instead, send the trees to the Inspector WebView once they have arrived and have been transformed to HTML. We Base64 encode the HTML to avoid needing to deal with all kinds of nested quotes that may appear in the HTML. We could instead send the JSON to the WebView, but generating the HTML in C++ feels a bit easier for now.
2023-11-30 06:52:03 -05:00
String InspectorClient::generate_accessibility_tree(JsonObject const& accessibility_tree)
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
{
LibWebView: Don't wait for the DOM and a11y trees to load the Inspector Provides a nicer experience on pages with large trees so that the window isn't just a large blank screen while it is loading. Instead, send the trees to the Inspector WebView once they have arrived and have been transformed to HTML. We Base64 encode the HTML to avoid needing to deal with all kinds of nested quotes that may appear in the HTML. We could instead send the JSON to the WebView, but generating the HTML in C++ feels a bit easier for now.
2023-11-30 06:52:03 -05:00
StringBuilder builder;
generate_tree(builder, accessibility_tree, [&](JsonObject const& node) {
Everywhere: Rename {Deprecated => Byte}String This commit un-deprecates DeprecatedString, and repurposes it as a byte string. As the null state has already been removed, there are no other particularly hairy blockers in repurposing this type as a byte string (what it _really_ is). This commit is auto-generated: $ xs=$(ack -l \bDeprecatedString\b\|deprecated_string AK Userland \ Meta Ports Ladybird Tests Kernel) $ perl -pie 's/\bDeprecatedString\b/ByteString/g; s/deprecated_string/byte_string/g' $xs $ clang-format --style=file -i \ $(git diff --name-only | grep \.cpp\|\.h) $ gn format $(git ls-files '*.gn' '*.gni')
2023-12-16 17:49:34 +03:30
auto type = node.get_byte_string("type"sv).value_or("unknown"sv);
auto role = node.get_byte_string("role"sv).value_or({});
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
if (type == "text"sv) {
Everywhere: Rename {Deprecated => Byte}String This commit un-deprecates DeprecatedString, and repurposes it as a byte string. As the null state has already been removed, there are no other particularly hairy blockers in repurposing this type as a byte string (what it _really_ is). This commit is auto-generated: $ xs=$(ack -l \bDeprecatedString\b\|deprecated_string AK Userland \ Meta Ports Ladybird Tests Kernel) $ perl -pie 's/\bDeprecatedString\b/ByteString/g; s/deprecated_string/byte_string/g' $xs $ clang-format --style=file -i \ $(git diff --name-only | grep \.cpp\|\.h) $ gn format $(git ls-files '*.gn' '*.gni')
2023-12-16 17:49:34 +03:30
auto text = node.get_byte_string("text"sv).release_value();
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
text = escape_html_entities(text);
builder.appendff("<span class=\"hoverable\">");
builder.append(MUST(Web::Infra::strip_and_collapse_whitespace(text)));
builder.append("</span>"sv);
return;
}
if (type != "element"sv) {
builder.appendff("<span class=\"hoverable internal\">");
builder.appendff(role.to_lowercase());
builder.append("</span>"sv);
return;
}
Everywhere: Rename {Deprecated => Byte}String This commit un-deprecates DeprecatedString, and repurposes it as a byte string. As the null state has already been removed, there are no other particularly hairy blockers in repurposing this type as a byte string (what it _really_ is). This commit is auto-generated: $ xs=$(ack -l \bDeprecatedString\b\|deprecated_string AK Userland \ Meta Ports Ladybird Tests Kernel) $ perl -pie 's/\bDeprecatedString\b/ByteString/g; s/deprecated_string/byte_string/g' $xs $ clang-format --style=file -i \ $(git diff --name-only | grep \.cpp\|\.h) $ gn format $(git ls-files '*.gn' '*.gni')
2023-12-16 17:49:34 +03:30
auto name = node.get_byte_string("name"sv).value_or({});
auto description = node.get_byte_string("description"sv).value_or({});
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
builder.appendff("<span class=\"hoverable\">");
builder.append(role.to_lowercase());
builder.appendff(" name: \"{}\", description: \"{}\"", name, description);
builder.append("</span>"sv);
});
LibWebView: Don't wait for the DOM and a11y trees to load the Inspector Provides a nicer experience on pages with large trees so that the window isn't just a large blank screen while it is loading. Instead, send the trees to the Inspector WebView once they have arrived and have been transformed to HTML. We Base64 encode the HTML to avoid needing to deal with all kinds of nested quotes that may appear in the HTML. We could instead send the JSON to the WebView, but generating the HTML in C++ feels a bit easier for now.
2023-11-30 06:52:03 -05:00
return MUST(builder.to_string());
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
}
LibWebView: Implement a JavaScript console tab in the Inspector This adds a JS console to the bottom section of the Inspector WebView. Much of this code is based on the existing WebView::ConsoleClient, but ported to fit the inspector model. That is, much of the code from that class is now handled in the Inspector's JS.
2023-12-01 06:51:01 -05:00
void InspectorClient::request_console_messages()
{
VERIFY(!m_waiting_for_messages);
m_content_web_view.js_console_request_messages(m_highest_received_message_index + 1);
m_waiting_for_messages = true;
}
void InspectorClient::handle_console_message(i32 message_index)
{
if (message_index <= m_highest_received_message_index) {
dbgln("Notified about console message we already have");
return;
}
if (message_index <= m_highest_notified_message_index) {
dbgln("Notified about console message we're already aware of");
return;
}
m_highest_notified_message_index = message_index;
if (!m_waiting_for_messages)
request_console_messages();
}
Everywhere: Rename {Deprecated => Byte}String This commit un-deprecates DeprecatedString, and repurposes it as a byte string. As the null state has already been removed, there are no other particularly hairy blockers in repurposing this type as a byte string (what it _really_ is). This commit is auto-generated: $ xs=$(ack -l \bDeprecatedString\b\|deprecated_string AK Userland \ Meta Ports Ladybird Tests Kernel) $ perl -pie 's/\bDeprecatedString\b/ByteString/g; s/deprecated_string/byte_string/g' $xs $ clang-format --style=file -i \ $(git diff --name-only | grep \.cpp\|\.h) $ gn format $(git ls-files '*.gn' '*.gni')
2023-12-16 17:49:34 +03:30
void InspectorClient::handle_console_messages(i32 start_index, ReadonlySpan<ByteString> message_types, ReadonlySpan<ByteString> messages)
LibWebView: Implement a JavaScript console tab in the Inspector This adds a JS console to the bottom section of the Inspector WebView. Much of this code is based on the existing WebView::ConsoleClient, but ported to fit the inspector model. That is, much of the code from that class is now handled in the Inspector's JS.
2023-12-01 06:51:01 -05:00
{
auto end_index = start_index + static_cast<i32>(message_types.size()) - 1;
if (end_index <= m_highest_received_message_index) {
dbgln("Received old console messages");
return;
}
for (size_t i = 0; i < message_types.size(); ++i) {
auto const& type = message_types[i];
auto const& message = messages[i];
if (type == "html"sv)
append_console_output(message);
else if (type == "clear"sv)
clear_console_output();
else if (type == "group"sv)
begin_console_group(message, true);
else if (type == "groupCollapsed"sv)
begin_console_group(message, false);
else if (type == "groupEnd"sv)
end_console_group();
else
VERIFY_NOT_REACHED();
}
m_highest_received_message_index = end_index;
m_waiting_for_messages = false;
if (m_highest_received_message_index < m_highest_notified_message_index)
request_console_messages();
}
void InspectorClient::append_console_source(StringView source)
{
StringBuilder builder;
builder.append("<span class=\"console-prompt\">&gt;&nbsp;</span>"sv);
builder.append(MUST(JS::MarkupGenerator::html_from_source(source)));
append_console_output(builder.string_view());
}
LibWebView: Log the result of taking screenshots to Inspector's console It probably isn't obvious that screenshots are saved to the user's Downloads folder, so add a console message to inform them.
2023-12-09 16:57:57 -05:00
void InspectorClient::append_console_message(StringView message)
{
StringBuilder builder;
builder.append("<span class=\"console-prompt\">#&nbsp;</span>"sv);
builder.appendff("<span class=\"console-message\">{}</span>", message);
append_console_output(builder.string_view());
}
void InspectorClient::append_console_warning(StringView warning)
{
StringBuilder builder;
builder.append("<span class=\"console-prompt\">#&nbsp;</span>"sv);
builder.appendff("<span class=\"console-warning\">{}</span>", warning);
append_console_output(builder.string_view());
}
LibWebView: Implement a JavaScript console tab in the Inspector This adds a JS console to the bottom section of the Inspector WebView. Much of this code is based on the existing WebView::ConsoleClient, but ported to fit the inspector model. That is, much of the code from that class is now handled in the Inspector's JS.
2023-12-01 06:51:01 -05:00
void InspectorClient::append_console_output(StringView html)
{
auto html_base64 = MUST(encode_base64(html.bytes()));
auto script = MUST(String::formatted("inspector.appendConsoleOutput(\"{}\");", html_base64));
m_inspector_web_view.run_javascript(script);
}
void InspectorClient::clear_console_output()
{
static constexpr auto script = "inspector.clearConsoleOutput();"sv;
m_inspector_web_view.run_javascript(script);
}
void InspectorClient::begin_console_group(StringView label, bool start_expanded)
{
auto label_base64 = MUST(encode_base64(label.bytes()));
auto script = MUST(String::formatted("inspector.beginConsoleGroup(\"{}\", {});", label_base64, start_expanded));
m_inspector_web_view.run_javascript(script);
}
void InspectorClient::end_console_group()
{
static constexpr auto script = "inspector.endConsoleGroup();"sv;
m_inspector_web_view.run_javascript(script);
}
LibWebView: Implement a WebView-based Inspector client This is modeled after a similar implementation for the JS console. This client takes over an inspector WebView (created by the chrome) to create the inspector application. Currently, this application includes the DOM tree and accessibility tree as a first pass. It can later be extended to included the style tables, the JS console itself, etc.
2023-11-23 12:26:38 -05:00
}
Reference in a new issue Copy permalink