dmaax/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
ladybird/Libraries/LibDevTools/DevToolsDelegate.h

80 lines
4.7 KiB
C
Raw Normal View History

LibDevTools: Introduce a Firefox DevTools server library To aid with debugging web page issues in Ladybird without needing to implement a fully fledged inspector, we can implement the Firefox DevTools protocol and use their DevTools. The protocol is described here: https://firefox-source-docs.mozilla.org/devtools/backend/protocol.html This commit contains just enough to connect to Ladybird from a DevTools client.
2025-02-15 09:35:58 -03:00
/*
* Copyright (c) 2025, Tim Flynn <trflynn89@ladybird.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#pragma once
LibDevTools: Implement enough of the protocol to inspect tabs There is a lot needed all at once to actually inspect a tab's DOM tree. It begins with requesting a "watcher" from a TabActor. It seems there can be many types of watchers, but here we implement the "frame" watcher only. The watcher creates an "inspector", which in turn creates a "walker", which is the actor ultimately responsible for serializing and inspecting the DOM tree. In between all that, the DevTools client will send a handful of other informational requests. If we do not reply to these, the client will not move forward with the walker. For example, the CSSPropertiesActor will be asked for a list of all known CSS properties.
2025-02-15 09:57:36 -03:00
#include <AK/Error.h>
#include <AK/Function.h>
#include <AK/JsonValue.h>
LibDevTools: Implement enough of the protocol to see a tab list Previously, we could connect to our DevTools server from Firefox, but could not see any information on Ladybird's opened tabs. This implements enough of the protocol to see a tab list, but we cannot yet inspect the tabs.
2025-02-15 09:53:57 -03:00
#include <AK/Vector.h>
LibDevTools: Implement enough of the protocol to inspect tabs There is a lot needed all at once to actually inspect a tab's DOM tree. It begins with requesting a "watcher" from a TabActor. It seems there can be many types of watchers, but here we implement the "frame" watcher only. The watcher creates an "inspector", which in turn creates a "walker", which is the actor ultimately responsible for serializing and inspecting the DOM tree. In between all that, the DevTools client will send a handful of other informational requests. If we do not reply to these, the client will not move forward with the walker. For example, the CSSPropertiesActor will be asked for a list of all known CSS properties.
2025-02-15 09:57:36 -03:00
#include <LibDevTools/Actors/CSSPropertiesActor.h>
LibDevTools+LibWebView: Avoid dependence on LibWebView from LibDevTools LibDevTools was implicitly including generated IPC endpoints from LibWebView. This is not a dependency declared in the CMakeLists.txt. So updates to the IPC file might not have caused the endpoint header to be regenerated by the time LibDevTools is compiled, resulting in a build error. This patch removes that implicit dependency entirely.
2025-02-26 19:23:10 -03:00
#include <LibDevTools/Actors/PageStyleActor.h>
LibDevTools: Implement enough of the protocol to see a tab list Previously, we could connect to our DevTools server from Firefox, but could not see any information on Ladybird's opened tabs. This implements enough of the protocol to see a tab list, but we cannot yet inspect the tabs.
2025-02-15 09:53:57 -03:00
#include <LibDevTools/Actors/TabActor.h>
LibDevTools: Introduce a Firefox DevTools server library To aid with debugging web page issues in Ladybird without needing to implement a fully fledged inspector, we can implement the Firefox DevTools protocol and use their DevTools. The protocol is described here: https://firefox-source-docs.mozilla.org/devtools/backend/protocol.html This commit contains just enough to connect to Ladybird from a DevTools client.
2025-02-15 09:35:58 -03:00
#include <LibDevTools/Forward.h>
LibDevTools: Support highlighting DOM nodes hovered in the inspector
2025-02-20 10:58:35 -03:00
#include <LibWeb/CSS/Selector.h>
LibDevTools+LibWebView: Implement getting document style sheets
2025-03-11 18:14:54 -03:00
#include <LibWeb/CSS/StyleSheetIdentifier.h>
LibDevTools: Support highlighting DOM nodes hovered in the inspector
2025-02-20 10:58:35 -03:00
#include <LibWeb/Forward.h>
LibDevTools+LibWebView+WebContent: Selectively fetch DOM node properties When we inspect a DOM node, we currently serialize many properties for that node, including its layout, computed style, used fonts, etc. Now that we aren't piggy-backing on the Inspector interface, we can instead only serialize the specific information required by DevTools.
2025-03-19 16:50:56 -03:00
#include <LibWebView/DOMNodeProperties.h>
LibDevTools+LibWebView: Implement basic support for console logging This implements support for basic usage of console.log and friends. It does not implement console.assert, console.trace, console.group, etc.
2025-03-04 10:45:36 -03:00
#include <LibWebView/Forward.h>
LibDevTools: Introduce a Firefox DevTools server library To aid with debugging web page issues in Ladybird without needing to implement a fully fledged inspector, we can implement the Firefox DevTools protocol and use their DevTools. The protocol is described here: https://firefox-source-docs.mozilla.org/devtools/backend/protocol.html This commit contains just enough to connect to Ladybird from a DevTools client.
2025-02-15 09:35:58 -03:00
namespace DevTools {
LibDevTools: Enable EXPLICIT_SYMBOL_EXPORT
2025-07-01 22:24:22 -03:00
class DEVTOOLS_API DevToolsDelegate {
LibDevTools: Introduce a Firefox DevTools server library To aid with debugging web page issues in Ladybird without needing to implement a fully fledged inspector, we can implement the Firefox DevTools protocol and use their DevTools. The protocol is described here: https://firefox-source-docs.mozilla.org/devtools/backend/protocol.html This commit contains just enough to connect to Ladybird from a DevTools client.
2025-02-15 09:35:58 -03:00
public:
virtual ~DevToolsDelegate() = default;
LibDevTools: Implement enough of the protocol to see a tab list Previously, we could connect to our DevTools server from Firefox, but could not see any information on Ladybird's opened tabs. This implements enough of the protocol to see a tab list, but we cannot yet inspect the tabs.
2025-02-15 09:53:57 -03:00
virtual Vector<TabDescription> tab_list() const { return {}; }
LibDevTools: Implement enough of the protocol to inspect tabs There is a lot needed all at once to actually inspect a tab's DOM tree. It begins with requesting a "watcher" from a TabActor. It seems there can be many types of watchers, but here we implement the "frame" watcher only. The watcher creates an "inspector", which in turn creates a "walker", which is the actor ultimately responsible for serializing and inspecting the DOM tree. In between all that, the DevTools client will send a handful of other informational requests. If we do not reply to these, the client will not move forward with the walker. For example, the CSSPropertiesActor will be asked for a list of all known CSS properties.
2025-02-15 09:57:36 -03:00
virtual Vector<CSSProperty> css_property_list() const { return {}; }
using OnTabInspectionComplete = Function<void(ErrorOr<JsonValue>)>;
virtual void inspect_tab(TabDescription const&, OnTabInspectionComplete) const { }
LibDevTools: Support highlighting DOM nodes hovered in the inspector
2025-02-20 10:58:35 -03:00
LibDevTools+LibWebView+WebContent: Selectively fetch DOM node properties When we inspect a DOM node, we currently serialize many properties for that node, including its layout, computed style, used fonts, etc. Now that we aren't piggy-backing on the Inspector interface, we can instead only serialize the specific information required by DevTools.
2025-03-19 16:50:56 -03:00
using OnDOMNodePropertiesReceived = Function<void(WebView::DOMNodeProperties)>;
virtual void listen_for_dom_properties(TabDescription const&, OnDOMNodePropertiesReceived) const { }
virtual void stop_listening_for_dom_properties(TabDescription const&) const { }
LibWeb/CSS: Move and rename PseudoElement types to prep for code gen The upcoming generated types will match those for pseudo-classes: A PseudoElementSelector type, that then holds a PseudoElement enum defining what it is. That enum will be at the top level in the Web::CSS namespace. In order to keep the diffs clearer, this commit renames and moves the types, and then a following one will replace the handwritten enum with a generated one.
2025-03-20 13:56:46 -03:00
virtual void inspect_dom_node(TabDescription const&, WebView::DOMNodeProperties::Type, Web::UniqueNodeID, Optional<Web::CSS::PseudoElement>) const { }
LibDevTools: Support inspecting DOM node box models and computed styles
2025-02-21 18:20:53 -03:00
virtual void clear_inspected_dom_node(TabDescription const&) const { }
LibWeb/CSS: Move and rename PseudoElement types to prep for code gen The upcoming generated types will match those for pseudo-classes: A PseudoElementSelector type, that then holds a PseudoElement enum defining what it is. That enum will be at the top level in the Web::CSS namespace. In order to keep the diffs clearer, this commit renames and moves the types, and then a following one will replace the handwritten enum with a generated one.
2025-03-20 13:56:46 -03:00
virtual void highlight_dom_node(TabDescription const&, Web::UniqueNodeID, Optional<Web::CSS::PseudoElement>) const { }
LibDevTools: Support highlighting DOM nodes hovered in the inspector
2025-02-20 10:58:35 -03:00
virtual void clear_highlighted_dom_node(TabDescription const&) const { }
LibDevTools: Begin supporting the JavaScript console This implements enough to execute JavaScript and reply with the result. We do not yet support autocomplete or eager evaluation.
2025-02-24 13:55:46 -03:00
LibDevTools+LibWebView: Inform the DevTools client about DOM mutations
2025-03-06 21:56:03 -03:00
using OnDOMMutationReceived = Function<void(WebView::Mutation)>;
virtual void listen_for_dom_mutations(TabDescription const&, OnDOMMutationReceived) const { }
virtual void stop_listening_for_dom_mutations(TabDescription const&) const { }
LibDevTools+LibWebView+WebContent: Implement editing DOM node HTML These commands are used for the "Edit As HTML" feature in DevTools. This renames our existing HTML getter IPC to indicate that it is for outer HTML. DevTools will need a separate inner HTML getter.
2025-03-10 18:36:41 -03:00
using OnDOMNodeHTMLReceived = Function<void(ErrorOr<String>)>;
LibDevTools+LibWebView: Implement requests to edit DOM node text
2025-03-06 21:56:40 -03:00
using OnDOMNodeEditComplete = Function<void(ErrorOr<Web::UniqueNodeID>)>;
LibDevTools+LibWebView+WebContent: Implement getting DOM node inner HTML This is used by DevTools to copy the inner HTML to the clipboard.
2025-03-10 19:15:31 -03:00
virtual void get_dom_node_inner_html(TabDescription const&, Web::UniqueNodeID, OnDOMNodeHTMLReceived) const { }
LibDevTools+LibWebView+WebContent: Implement editing DOM node HTML These commands are used for the "Edit As HTML" feature in DevTools. This renames our existing HTML getter IPC to indicate that it is for outer HTML. DevTools will need a separate inner HTML getter.
2025-03-10 18:36:41 -03:00
virtual void get_dom_node_outer_html(TabDescription const&, Web::UniqueNodeID, OnDOMNodeHTMLReceived) const { }
virtual void set_dom_node_outer_html(TabDescription const&, Web::UniqueNodeID, String const&, OnDOMNodeEditComplete) const { }
LibDevTools+LibWebView: Take advantage of IPC encoding improvements
2025-03-08 13:00:03 -03:00
virtual void set_dom_node_text(TabDescription const&, Web::UniqueNodeID, String const&, OnDOMNodeEditComplete) const { }
virtual void set_dom_node_tag(TabDescription const&, Web::UniqueNodeID, String const&, OnDOMNodeEditComplete) const { }
virtual void add_dom_node_attributes(TabDescription const&, Web::UniqueNodeID, ReadonlySpan<WebView::Attribute>, OnDOMNodeEditComplete) const { }
virtual void replace_dom_node_attribute(TabDescription const&, Web::UniqueNodeID, String const&, ReadonlySpan<WebView::Attribute>, OnDOMNodeEditComplete) const { }
LibDevTools+LibWebView: Implement requests to create DOM nodes This requires a couple of amendments to the DOM node serialization. Namely, we need to include the HTML namespace, otherwise the context menu item to create a new node is disabled.
2025-03-07 11:19:28 -03:00
virtual void create_child_element(TabDescription const&, Web::UniqueNodeID, OnDOMNodeEditComplete) const { }
LibDevTools+LibWebView+WebContent: Implement moving DOM nodes This allows for click-and-dragging DOM nodes in DevTools to move them.
2025-03-10 19:01:29 -03:00
virtual void insert_dom_node_before(TabDescription const&, Web::UniqueNodeID, Web::UniqueNodeID, Optional<Web::UniqueNodeID>, OnDOMNodeEditComplete) const { }
LibDevTools+LibWebView: Implement requests to clone DOM nodes
2025-03-07 11:44:24 -03:00
virtual void clone_dom_node(TabDescription const&, Web::UniqueNodeID, OnDOMNodeEditComplete) const { }
LibDevTools+LibWebView: Implement requests to delete DOM nodes
2025-03-06 22:08:27 -03:00
virtual void remove_dom_node(TabDescription const&, Web::UniqueNodeID, OnDOMNodeEditComplete) const { }
LibDevTools+LibWebView: Implement requests to edit DOM node text
2025-03-06 21:56:40 -03:00
LibDevTools+LibWebView: Implement getting document style sheets
2025-03-11 18:14:54 -03:00
using OnStyleSheetsReceived = Function<void(ErrorOr<Vector<Web::CSS::StyleSheetIdentifier>>)>;
using OnStyleSheetSourceReceived = Function<void(Web::CSS::StyleSheetIdentifier const&, String)>;
virtual void retrieve_style_sheets(TabDescription const&, OnStyleSheetsReceived) const { }
virtual void retrieve_style_sheet_source(TabDescription const&, Web::CSS::StyleSheetIdentifier const&) const { }
virtual void listen_for_style_sheet_sources(TabDescription const&, OnStyleSheetSourceReceived) const { }
virtual void stop_listening_for_style_sheet_sources(TabDescription const&) const { }
LibDevTools: Begin supporting the JavaScript console This implements enough to execute JavaScript and reply with the result. We do not yet support autocomplete or eager evaluation.
2025-02-24 13:55:46 -03:00
using OnScriptEvaluationComplete = Function<void(ErrorOr<JsonValue>)>;
LibDevTools+LibWebView: Take advantage of IPC encoding improvements
2025-03-08 13:00:03 -03:00
virtual void evaluate_javascript(TabDescription const&, String const&, OnScriptEvaluationComplete) const { }
LibDevTools+LibWebView: Implement basic support for console logging This implements support for basic usage of console.log and friends. It does not implement console.assert, console.trace, console.group, etc.
2025-03-04 10:45:36 -03:00
using OnConsoleMessageAvailable = Function<void(i32 message_id)>;
using OnReceivedConsoleMessages = Function<void(i32 start_index, Vector<WebView::ConsoleOutput>)>;
virtual void listen_for_console_messages(TabDescription const&, OnConsoleMessageAvailable, OnReceivedConsoleMessages) const { }
virtual void stop_listening_for_console_messages(TabDescription const&) const { }
virtual void request_console_messages(TabDescription const&, i32) const { }
LibDevTools: Introduce a Firefox DevTools server library To aid with debugging web page issues in Ladybird without needing to implement a fully fledged inspector, we can implement the Firefox DevTools protocol and use their DevTools. The protocol is described here: https://firefox-source-docs.mozilla.org/devtools/backend/protocol.html This commit contains just enough to connect to Ladybird from a DevTools client.
2025-02-15 09:35:58 -03:00
};
}
Reference in a new issue Copy permalink