Stowage/ladybird
2
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-11-04 07:10:57 +00:00
Code Issues Projects Releases Packages Wiki Activity
ladybird/Userland/Libraries/LibWebView/InspectorClient.h

77 lines
2.2 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
/*
* Copyright (c) 2023, Tim Flynn <trflynn89@serenityos.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
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
#include <AK/Function.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/JsonValue.h>
#include <AK/StringView.h>
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
#include <LibGfx/Point.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/ViewImplementation.h>
#pragma once
namespace WebView {
class InspectorClient {
public:
InspectorClient(ViewImplementation& content_web_view, ViewImplementation& inspector_web_view);
~InspectorClient();
void inspect();
void reset();
void select_hovered_node();
void select_default_node();
void clear_selection();
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 context_menu_edit_dom_node();
void context_menu_remove_dom_node();
void context_menu_add_dom_node_attribute();
void context_menu_remove_dom_node_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
Function<void(Gfx::IntPoint)> on_requested_dom_node_text_context_menu;
Function<void(Gfx::IntPoint, String const&)> 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
Function<void(Gfx::IntPoint, String const&, Attribute const&)> on_requested_dom_node_attribute_context_menu;
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
private:
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 load_inspector();
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
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 generate_dom_tree(JsonObject const&);
String generate_accessibility_tree(JsonObject const&);
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 select_node(i32 node_id);
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 request_console_messages();
void handle_console_message(i32 message_index);
void handle_console_messages(i32 start_index, ReadonlySpan<DeprecatedString> message_types, ReadonlySpan<DeprecatedString> messages);
void append_console_source(StringView);
void append_console_output(StringView);
void clear_console_output();
void begin_console_group(StringView label, bool start_expanded);
void end_console_group();
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
ViewImplementation& m_content_web_view;
ViewImplementation& m_inspector_web_view;
Optional<i32> m_body_node_id;
Optional<i32> m_pending_selection;
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
bool 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+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
struct ContextMenuData {
i32 dom_node_id { 0 };
Optional<String> tag;
Optional<Attribute> attribute;
};
Optional<ContextMenuData> m_context_menu_data;
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 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
i32 m_highest_notified_message_index { -1 };
i32 m_highest_received_message_index { -1 };
bool 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
};
}
Reference in a new issue Copy permalink